Square colors - auto-genereret kunst

Kategori: Egne projekter | Kommentarer (1)
Gemt: 2011-03-30 13:58


Midt i en travl hverdag er det vigtigt at huske at sætte tid af til leg, for det er tit gennem leg at man får evner og ideer til nye projekter.
I sidste uge havde jeg lidt tid til netop det, og resultatet blev square colors.

Fremfor at forklare hvad det er, så klik på billedet og prøv det:
Square colors

Koden er ikke så avanceret så den er værd at gennemgå detaljeret, det der for mig har været den allervigtigste læring ved dette lille projekt er, hvor afgørende det kan være at få struktureret koden ordentligt.

Det gjorde det nemlig nemt lynhurtigt at få prøvet en masse ting af: Kun cirkler, kun firkanter, små figurer, få figurer, store figurer, forskellige farver m.m. blot ved at stille på nogle få variabler, og når man er på vej ud på dybt vand, så er en vigtig forudsætning for succes, at man kan iterere hurtigt.

Kuler
Fremfor at vælge nogle tilfældige farver selv, og dermed ende med temmelig elendig programmørgrafik, så har jeg i stedet fundet inspiration til farvetemaer på Adobe Kuler.

Den oprindelige tanke var faktisk at loade nogle random farvetemaer via deres API, men deres system har været lidt ustabilt, så derfor turde jeg i sidste ende ikke løbe an på det.

Eksport
Den bedste måde at få et resultat ud i høj kvalitet, som kan printes pænt, ville være at lave en eksport til pdf. Men, det syntes jeg var for stor en mundfuld til dette projekt, så derfor eksporterer jeg i stedet en png i den maksimale størrelse som Flash kan håndtere, nemlig et areal på 16.777.215 pixels.

Eftersom jeg har afprøvet en masse forskelligt, så har resultatet ikke altid været kvadratisk, og derfor var det en udfordring at eksportere i maksimal størrelse samtidig med at jeg bevarede dimensionerne på billedet.

Faktisk, så er det ikke så svært, medmindre man som jeg, ikke har løst en ligning med to ubekendte siden folkeskolen, så derfor fik jeg lidt hjælp til matematikforståelsen (tak Mette!), og det kom der så denne kode ud af:

var _max_pixels:Number = 16777215;
var _ratio:Number = object.width / object.height;
var _max_width:int = int(_ratio * Math.sqrt(_max_pixels / _ratio));
var _optimal_scale:Number = _max_width / object.width;

Hvis der er andre dele af projektet, som du synes det kunne være interessant at høre mere om, så smid endelig en kommentar.


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.


AntiAliasType.ADVANCED + Filter = Trouble

Kategori: Tips og tricks | Kommentarer (0)
Gemt: 2011-01-27 12:56


Bare et hurtigt lille tip:
Hvis du bruger AntiAliasType.ADVANCED + et eller anden filter, eksempelvis DropShadowFilter, på dine tekstfelter, så vil du med stor sandsynlighed rende ind i et problem hvor noget af teksten kan hoppe vertikalt.
Hvis tekstfeltet yderligere også er sat til autosize, så er der også en risiko for at det sidste bogstav på en linie bliver beskåret.

Netop de problemer har drillet mig den sidste uges tid, men med hjælp fra en blog (som jeg desværre ikke kan huske hvad hedder) fandt jeg ud af, at det at stille værdien rightMargin umiddelbart ser ud til at kunne løse begge problemer.

Her et eksempel som jeg i hvert fald ikke har fået til at fejle endnu:

var _shadow:DropShadowFilter = new DropShadowFilter(1,
						95,
						0x000000,
						1,
						0,
						0,
						0.5,
						BitmapFilterQuality.HIGH
						);

var _tf:TextFormat = new TextFormat();
_tf.rightMargin = 3;
_tf.size = 15;
_tf.align = TextFormatAlign.LEFT;

var _txt:TextField = new TextField();
_txt.text = "En eller anden tekst";
_txt.embedFonts = true;
_txt.multiline = false;
_txt.autoSize = TextFieldAutoSize.LEFT;
_txt.antiAliasType = AntiAliasType.ADVANCED;
_txt.defaultTextFormat = _tf;
_txt.setTextFormat(_tf);
_txt.filters = [_shadow];
addChild(_txt);


Flickr Julehjertefletter v. 2

Kategori: Egne projekter | Kommentarer (0)
Gemt: 2010-12-14 10:21


julehjerteSom en meget for sjov og ren intern aktivitet lavede vi for nogle år siden en helt simpel aplikation, der baseret på et enkelt søgeord loader billeder ind fra Flickr og fletter dem til et julehjerte.

For at hygge lidt om kunder og samarbejdspartnere, så har vi i år lanceret en ny udgave af den med lidt ekstra funktionalitet.
Man kan nu skrive seperate søgeord, sådan så man selv bestemmer hvad der skal være i venstre og i højre side (var der nogen der sagde Flash vs HTML5?) og efterfølgende kan man downloade julehjertet som en png.

Men, den vigtigste nye funktionalitet er, at man kan printe en template så man kan flette det virtuelle hjerte i den virkelige verden.
Særdeles velegnet til juletræet eller lidt hyggepyntning på kontoret.

Se mor, en julehjertefletter!


Flash Player 10.2 og StageVideo

Kategori: Diverse | Kommentarer (0)
Gemt: 2010-12-9 9:40


I betaversionen af den kommende Flash Player 10.2 er der blandt andet komme en ny klasse der hedder StageVideo. Den giver mulighed for drastisk øget performance ved videoafspilning, da den altid vil være GPU accelereret.

Der er dog en lille pris, for måden den øgede performance er blevet mulig er ved at fjerne videoen fra den normale displaylist, i stedet, så vil en StageVideo alt være placeret under alt hvad man har af almindelige movieclips, sprites m.m. Det kan gøre det lidt tricky at udnytte den ekstra performance til deciderede multimediesites, men er projektet en mere regulær videoplayer, så burde det til gengæld være super nemt.

Lee Brimelow har lavet en glimrende tutorial der kommer ind på et par yderligere gotchas:
Introduction to StageVideo


Tips til Flash Builder 4: Genveje og debugging

Kategori: Diverse | Kommentarer (0)
Gemt: 2010-10-25 16:04


Glimrende lille artikel, der gennemgår nogen af de mest nyttige genvejstaster i Flash Builder 4, og derudover kommer med et par tips til når der skal debugges:
Flash Builder 4 shortcuts and debugging tips

Et par af de mest nyttige genveje:
CMD+O: Skriv navnet på en funktion eller variabel og Flash Builder hopper automatisk hen til den
Option(Alt)+CMD+Pil op: Dupliker linie
CMD+D: Slet linie
Option(Alt)+Pil op eller ned: Flyt linie eller blok


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


mouseEnabled = false som default, tak!

Kategori: Diverse | Kommentarer (2)
Gemt: 2010-08-18 12:11


Okay, dette indlæg er måske lidt en rant, men er jeg den eneste der er træt af, at mouseEnabled og mouseChildren som standard er sat til true på alle objekter?

Det virker unødigt, da der er større sandsynlighed for at musen ikke har brug for at arbejde sammen med det pågældende objekt, end at den har, og det bevirker så også, at man på hver eneste opgave altid er henne og skrive en masse kode der slår det fra på de objekter hvor det ikke skal bruges.

Oven i hatten, så har det endda også et par gange været årsagen til nogle mystiske “bugs”, som efterfølgende har vist sig blot at være et helt eller delvist usynligt objekt, som man ikke lige havde set.

Er jeg den eneste der har det sådan?


Globale variabler i ActionScript 3

Kategori: Diverse | Kommentarer (4)
Gemt: 2010-07-31 13:38


Man kan diskutere hvorvidt globale variabler på store projekter i det hele taget er en god ide, da de hurtigt kan blive svære at holde styr på, men man kommer heller ikke uden om, at de i en del situationer giver mulighed for at spare tid ved at springe over hvor gærdet er lavest - og det gør vi allesammen jo indimellem.

I ActionScript 2 var det nemt at være doven, men kunne bare bruge _global, men i AS3 er der ikke noget tilsvarende objekt, men efter selv at have haft behovet for nyligt fandt jeg en klasse der fuldt ud erstatter _global, så næste gang du er i humør til at være doven, så kan du jo overveje at smutte herhen og læse mere om den:
AS3 Global Object


Tags: ,

HTML5 vs ActionScript 3: Tegn et ikon med kode

Kategori: Diverse | Kommentarer (0)
Gemt: 2010-07-12 14:39


Ganske interessant indlæg, der viser hvordan man tegner et ikon i henholdsvis HTML med JavaScript og Canvas, og hvordan man tegner det samme ikon i Flash med ActionScript 3:
Drawing with JavaScript in HTML5 vs ActionScript 3 in Flash

Jeg er positivt overrasket over hvor meget koderne ligner hinanden, det tegner godt for en fremtid hvor nogle opgaver løses bedst i HTML5 og andre løses bedst i ActionScript 3.


Tags: ,