Fredrik Clement V2

Kategori: Egne projekter | Kommentarer (6)
Gemt: 2011-02-22 10:41


For 2,5 år siden lancerede vi første version af fotograf Fredrik Clements online portfolio, og da der er sket meget imellemtiden, så var det tid til at nyt site.

(Hvis du vil skippe teksten og hoppe direkte til sitet, så gør det her: fredrikclement.com)

Fredrik Clement - Frontpage

Målet med det nye site har været følgende:
- Mulighed for at vise flere billedserier
- Nemmere opdatering
- Direkte links til billeder
- Indbygget deling
- Mobilversion
- Bevare det minimalistiske udtryk

Lad mig med det samme indrømme at det har været en rigtig svær fødsel (5 måneder on/off), ikke mindst fordi vi hele tiden har været både glade for og stolte af det gamle site, så derfor var det vigtigt at det nye kunne mere, men uden at forringe det vigtigste, nemlig visningen af billederne.

Mulighed for at vise flere billedserier
En af de stærkeste ting ved det gamle site var enkelheden, at man som bruger slet ikke skulle tage stilling til noget, men blot blev ført igennem alt hvad sitet rummede.
Begrænsningen i det var, at Fredrik havde svært ved at gå i dybden med bestemte fotoserier eller emner, og da han med tiden har fået sig en overordentligt stor portfolie af fede billeder, så var det på tide at vise lidt mere.

Hver billedserie har også fået en lille introtekst, som vi synes er rigtig god til at sætte stemningen for hvad det nu er man skal se.
Fredrik Clement - Subpage

Nemmere opdatering
Fredrik synes faktisk ikke, forstå ham hvem der kan, at det er så fedt at opdatere sitet ved manuelt at rette i en xml-fil og uploade nogle billeder.
Derfor har vi været på udkig efter er CMS, der hverken kan for lidt eller for meget, og som samtidig spiller godt sammen med Flash.

I sidste ende faldt vores valg på Royale/CMS, da det er tilpas enkelt og nydeligt.
En feature vi især faldt for, var mulighed for at lave billedprofiler, sådan så Fredrik kun uploader et billede én gang. Herefter genererer CMS’et automatisk de forskellige størrelser vi skal bruge det i, men med mulighed for at Fredrik kan override automatikken og selv skalere og beskære billedet.

Direkte links til billeder
SwfAddress var kun lige dukket op da vi lavede det gamle site, så derfor nåede deeplinking ikke med, men det var naturligvis en selvfølge på det nye.

Indbygget deling
Facebook og Twitter har spredt sig med lynild, og med muligheden for at linke direkte til et bestemt billede, så var det oplagt også at lave en delingsfunktion.

Som en lille cool detalje, så viser den det rigtige billede på Facebook, inklusiv tekst og beskrivelser, hvis man bruger delingsfunktionen på sitet.
Det krævede et lille hack, da Facebook ikke selv kan vise Flash-indhold, men var absolut det værd.

Mobilversion
En anden ting der ikke spiller så godt sammen med Flash er mobiltelefoner, især iPhone, så derfor er der lavet en særlig version til de enheder.

For at se den, så bare gå ind på fredrikclement.com med en mobiltelefonen, så vises den automatisk.

Bevare det minimalistiske udtryk
Det her har klart været den største hurdle, alt det andet er jo “bare” teknik, men hvordan klemmer man lige en masse ekstra funktionalitet ind, uden at fjerne fokus fra billederne?
Grundlæggende, så har vi gemt alt man ikke har brug for lidt af vejen, og derudover har vi arbejdet med et meget stramt grid.

Fredrik Clement - Grid

Detaljerede grids er traditionelt i højere grad blevet brugt på almindelige html-websites, hvorimod Flash-sites ofte er lidt mere flydende, men i dette tilfælde lagde vi os fra starten fast på et grid.
Det var det allerførste jeg kodede på projektet, da det danner basis for alt andet, og samtidig noget af det jeg er mest tilfreds med.

Hvis du vil se det live, så kan du bruge G til at slå det til eller fra.

Alt i alt
Når vi nu selv skal sige det, så er vi faktisk rigtigt stolte af det nye site, så ikke mere tekst herfra, bare se at få prøvet det:

Sports and action photographer Fredrik Clement

NB: Hvis der er interesse for det, så laver jeg gerne et par indlæg om noget af funktionaliteten i sitet, så skriv en kommentar, hvis der er noget du vil høre mere om.


Nemmere Facebook-applikationer med Flash

Kategori: Diverse | Kommentarer (4)
Gemt: 2010-09-27 16:16


Hvis du nogensinde har prøvet at lave en Facebook-applikation, som også har brugt Flash i større eller mindre omfang, så har du også på egen krop mærket hvor besværligt og knudret det kan være.
Eksempelvis er et typisk scenarie at man laver nogle php-filer som ikke laver andet end at være mellemmand mellem Facebook og Flash, ved at modtage kald og sende data retur.

Noget af det kunne også gøres med JavaScript-kald, men så var mellemlagt et andet sted.

Nu har et par af mine tidligere kolleger, gutterne fra player.io, imidlertid lavet en open-source AS3 klasse, som gør alt det meget nemmere.
Du kan finde den her:
Facebook Graph AS3

Har ikke selv haft lejlighed til at lege med den endnu, men der er tale om et par rigtigt dygtige gutter, så er ikke i tvivl om at det spiller.

I øvrigt har de også lige lanceret et værktøj, som helt generelt - Flash eller ej - gør det nemmere at lave Facebook-applikationer, herunder især spil.
Mere om det her: Player.io - SiteBox


ActionScript 3 - Facebook API

Kategori: Diverse | Kommentarer (0)
Gemt: 2009-03-31 11:31


Ved ikke helt om det er en nyhed, eller om den har været der længe, men fakta er i hvert fald at der findes et ActionScript 3 Client Library til Facebook API’en, som gør det meget nemmere at lave direkte integration mellem Flash og Facebook.

I de Flash-ting vi selv hidtil har lavet, har jeg typisk sendt en del af kaldene gennem php, eller simpelthen lavet mellemsider i html, fordi det var langt det hurtigste, men med ActionScript 3 Client Librariet så må det siges at være blevet en hel del nemmere at lave det direkte i Flash.

Du kan finde en beskrivelse af librariet her:
Adobe Flash Platform & Facebook Platform

Og det kan downloades herfra:
Google Code - Facebook ActionScript API


Tags: , ,

Bryd tavsheden - Facebook applikation

Kategori: Egne projekter | Kommentarer (0)
Gemt: 2009-02-16 12:37


Bryd tavshedenNu er den Facebook applikation som jeg har haft omtalt i et par andre artikler gået live, så det syntes jeg fortjente et lille link.

Kort fortalt er navnet på kampagnen “Bryd tavsheden” og formålet er at skabe opmærksomhed omkring det, at det er vigtigt at snakke om vold for at forebygge det.
Til det formål har vi lavet en Facebook applikation hvor man kan lave sig selv om til en “voldsramt”, enten ved at bruge et billede man allerede har på Facebook, uploade et nyt eller tage et med sit webcam.
Efterfølgende kan man så tilføje et blåt øje, en lynlås og en rift.

Den er som sagt lige gået i luften, så nu går vi bare og er spændte på hvor godt den spreder sig - er jo aldrig helt til at vide med den slags virale ting.

Prøv den gerne, kom med kommentarer og husk at invitér alle dine venner :-)

Bryd Tavsheden


Facebook aplikationer og Flash - navigateToUrl drilleri

Kategori: Tips og tricks | Kommentarer (2)
Gemt: 2009-01-29 12:03


Vi er i øjeblikket i fuld gang med at lave en Facebook aplikation der i høj grad benytter sig af Flash (mere om den senere), og i den forbindelse er jeg stødt på et par mindre besværligheder.

Den første og største var, at Facebook når man bruger FBML (fb:swf) automatisk sætter alle Flash-objekter til at kører med allowScriptAccess=never.

Det er en sikkerhedsbegrænsning de har sat på, for at alle vi udviklere ikke uhæmmet skal kunne kalde en masse javascript-funktioner og dermed få adgang til data som vi ikke skal have adgang til.
Problemet med det er så, at det også sætter en række begrænsninger for funktioner som man ikke nødvendigvis ved bruger javascript, eksempelvis navigateToUrl, som pludselig er begrænset til kun at kunne bruge _blank, og det er jo helt umuligt at lave en lækker aplikation i Flash, hvis alle sider åbner i nye vinduer.

Det ved Facebook også godt og derfor er der en metode til at komme uden om problemet, nemlig ved at bruge en Flash-fil som Facebook har lavet som en bro.
Lyder det indviklet? Det er det også lidt og det tog mig noget tid at lure, så derfor kommer opskriften her.

Før skal man indsætte den Facebook-bro som man senere skal tilgå via LocalConnection:

<fb:fbjs-bridge/>
<fb:swf swfbgcolor="FFFFFF"
	swfsrc='http://www.dinurl.dk/din.swf'
	width='760'
	height='600'
	/>
<script> <!-- --></script>

Dernæst, så skal man bruge en funktion som tilgår broen og som kan bruges som erstatning for navigateToUrl, selv lavede jeg denne lille klasse, men det kan gøres på mange måder:

import flash.net.LocalConnection;
import flash.display.LoaderInfo;

public class FacebookUtil {
	private var connection:LocalConnection;
	private var connectionName:String;
	private var baseUrl:String = "http://apps.facebook.com/dinaplikation/";

	public function init(_loaderInfo:LoaderInfo):void {
		connection = new LocalConnection();
		connectionName = _loaderInfo.parameters.fb_local_connection;
	}

	function go(_url:String):void {
		if (connectionName) {
			connection.send(connectionName,
			"callFBJS",
			"document.setLocation",
			[baseUrl + _url]
			);
		} else {
			trace("FacebookUtil.go: No connection");
		}
	}
}

Som du kan se, så har den en init funktion, og det er fordi at Facebook som standard sender nogle værdier med til alle fb:swf objekter, og nogle af dem har vi brug for, så derfor skal klassen klargøres inden man kan kalde funktionen go, som det hele drejer sig om:

var Facebook:FacebookUtil = new FacebookUtil();

Facebook.init(LoaderInfo(this.root.loaderInfo));

Facebook.go("minside.php");

I den klasse jeg lige har lavet er der ikke mulighed for at sætte target, da jeg kun havde brug for _self, men det kan den sagtens udvides med.

Håber det kan gøre vejen til din første Facebook aplikation i Flash lidt nemmere :-)