Arkiv for august 2008

ActionScript 3: Picture klasse med indbygget load, brightness, contrast, saturation og hue

onsdag, 27. august 2008

Det fede ved at alle deler med alle, er at man har mulighed for at “stå på andres skuldre” som det så populært hedder, og det er netop grundlaget for min nyeste klasse: Picture.

For ikke så lang tid siden havde jeg en post om hvordan man nemt kan konvertere et billede til sort/hvid.
I den post kom der en kommentar fra Thonbo som viste en anden måde at gøre det på, nemlig ved hjælp af ColorMatrixFilter, som jeg hidtil har afholdt mig fra at bruge, da det er en anelse tungt at sætte sig ind.

Men, det fik mig til at søge lidt rundt, hvorefter jeg fandt en ColorMatrix klasse fra Grant Skinner, hvor man kan inputte de normale værdier for brightness, contrast, saturation og hue, som man kender dem fra f.eks. filtrene i selve Flash, såvel som Photoshop.

Stadigvæk synes jeg dog at det var lidt bøvlet at man skulle hen og lave et nyt objekt hver gang man skulle stille på en enkelt værdi, og derudover gør den fremgansmåde det særdeles svært at tweene værdierne.
Så, for at gøre det endnu nemmere, i hvert fald i forhold til der hvor jeg skulle bruge funktionen, så har jeg wrappet den klasse i min egen, nemlig Picture klassen.

Den nye klasse har to funktioner:
load(url:String)
setColors(brightness:int, contrast:int, saturation:int, hue:int)

Og 4 properties man kan stille på:
- brightness
- contrast
- saturation
- hue

Og nogle properties som man kan aflæse:
- bytesLoaded
- bytesTotal
- bytes Percent
- loadingComplete

Samt 2 events man kan lytte på:
- Event.COMPLETE
- ProgressEvent.PROGRESS

Ønsker man kun at ændre en enkelt ting ved billedet, så er det nemmest blot at opdate den specifikke property, men skal man ændre mange ting på en gang, så er det smartere (og mindre performance krævende) at kalde funktionen setColors.

Et ekstremt simpelt eksempel kunne se sådan her ud:

var picture:Picture = new Picture();
picture.addEventListener(Event.COMPLETE, loadCompleted);
picture.load("test.jpg");
addChild(picture);

function loadCompleted(_e:Event):void {
	picture.saturation = -100;
}

Download
For at gøre det nemt at komme igang, så er alt det nødvendige, inklusive en CS3 fla-fil med et simpelt eksempel, samlet til download her:
Download picture.zip

Forslag til forbedringer eller nye funktioner modtages som altid gerne :-)

ActionScript 3: Tiles på den nemme måde

onsdag, 20. august 2008

Nogen gange har man brug for at tile (gentage det samme stykke grafik mange gange) for eksempelvis at fylde en baggrund ud.
En oplagt måde er at lave et loop, som kopierer og placerer det stykke grafik der skal tiles, men der findes en meget, meget nemmere måde, nemlig funktionen beginBitmapFill.

Først skal vi bruge det stykke grafik som skal tiles, så i dette eksempel har jeg importeret en png ind i mit library og efterfølgende sat den til at blive eksporteret til ActionScript som klassen Tile:

ActionScript 3 Tile

Og herefter er det såre simpelt:

var tile:BitmapData = new Tile(0, 0);
var background:Sprite = new Sprite();
background.graphics.beginBitmapFill(tile, null, true, false);
background.graphics.drawRect(0, 0, 500, 500);
background.graphics.endFill();
addChild(background);

Voila, en baggrund på 500×500 pixels.

En ting der er værd at bemærke er, at hvis man har brug for efterfølgende at ændre størrelsen på baggrunden, så er det ikke nok bare at sætte en ny højde og bredde, da det vil strække tilen, fremfor at kopiere den.

I stedet skal man bruge graphics.clear() og tegne et nyt område:

background.graphics.clear()
background.graphics.beginBitmapFill(tile, null, true, false);
background.graphics.drawRect(0, 0, 2000, 2000);
background.graphics.endFill();

Dynamisk load
I det første eksempel har jeg brugt et stykke grafik fra mit library, men det kan naturligvis også gøres med en jpg eller lignende som man loader dynamisk:

var url:String = "tile.jpg";
var loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, tileLoadComplete);
loader.load(new URLRequest(url));

function tileLoadComplete(_e:Event):void {
	var tile:Bitmap = Bitmap(_e.target.loader.content);
	var background:Sprite = new Sprite();
	background.graphics.beginBitmapFill(tile.bitmapData, null, true, false);
	background.graphics.drawRect(0, 0, 500, 500);
	background.graphics.endFill();
	addChild(background);
}

Så nu er der ingen undskyld for ikke at tile på livet løs, men please, ingen hjerter eller killinger!

Andreas Møller - 12 kinds of precipitation

mandag, 18. august 2008

Andreas Møller - 12 kinds of precipitation

Så har vi netop smidt et nyt site i luften for jazz pianist Andreas Møller og hans debut-cd: 12 kinds of precipitation (12 slags nedbør).

Vores mål har været at lave et site, som ikke i fortæller en masse om kunstneren eller cd’en, men først og fremmest har fokus på at understøtte musikken.

Hvorvidt det er lykkedes, må du selv vurdere:
Andreas Møller - 12 kinds of precipitation

ActionScript 3: Konverter farvebilleder til sort/hvid

torsdag, 14. august 2008

Nogen gange har man brug for det samme billede både i farver og i sort/hvid, men hvorfor bruge tid på at konvertere dem manuelt og ikke mindst, spilde båndbredde på at loade dobbelt så mange billeder, når man kan konvertere dem fra farver til sort/hvid automatisk i ActionScript 3?

Funktion:

function convertToBW(_image:Bitmap):Bitmap {
	var _image_bw:Bitmap = new Bitmap(_image.bitmapData);
	var _r:Rectangle = new Rectangle(0, 0, _image_bw.width, _image_bw.height);
	var _p:Point = new Point(0,0);
	_image_bw.bitmapData.copyChannel(_image_bw.bitmapData, _r, _p, 2, 1);
	_image_bw.bitmapData.copyChannel(_image_bw.bitmapData, _r, _p, 2, 2);
	_image_bw.bitmapData.copyChannel(_image_bw.bitmapData, _r, _p, 2, 4);
	return _image_bw;
}

Visualisering af medaljehøsten ved OL gennem tiderne

onsdag, 13. august 2008

Ja, de danske atleter lader jo vente lidt på sig når det drejer om at høste medaljer ved dette års OL i Beijing, men derfor er det måske så meget mere opløftende at se på en visualisering af uddelte medaljer gennem tiderne:
A Map of Olympic Medals

Hvem vidste i øvrigt at Sverige rent faktisk har en fortid som særdeles dominerende OL nation? Bare se 1948.

Fontpark 2.0 - Lækker leg med fonte

fredag, 8. august 2008

Hvis du har et par minutter tilovers her fredag eftermiddag, så vil jeg anbefale dig at smutte ind på Fontpark 2.0, som i bund og grund bygger på en helt simpel ide:
Giv brugeren mulighed for, ved hjælp af individuelle skrifttegn, at lave sine egne figurer.

Fontpark

Og det er rent faktisk helt simpelt, men samtidig ultrafedt lavet, med en af de bedste feelings i et interface som jeg længe har set.
Fremfor en masse forskellige knapper og ikoner, så ordnes det hele med musen, og når man trækker i objekterne kan man med en bevægelse både flytte og rotere dem.

Feeling kan ikke rigtig forklares, det skal opleves, så smut selv ind og kig:
Fontpark 2.0

Silverlight: Renault Laguna Coupé

torsdag, 7. august 2008

Tilbage fra sommerferie faldt jeg over et multimedia microsite i Silverlight, som må siges at tage konkurrencen direkte op med noget af det som traditionelt har været Flash’s domæne.

Sitet er en promotion for den nye Renault Laguna Coupé, og med fare for at være lidt farvet, så synes jeg at det svarer meget godt til nogen af de ting som man lavede i Flash for 4-5 år siden.
Videoerne de afspiller er ganske fede og i en fornuftig kvalitet, men designet omkring og interaktionen synes jeg virker lidt gammeldags og rodet.

Derudover er der en sektion som benytter det meget hypede Deepzoom, men uden at det egentlig giver noget synderligt til oplevelsen, og man kan faktisk ikke zoome særligt langt ind på de fleste af billederne.

Men, du kan jo selv bedømme det her:
Renault Laguna Coupé

I øvrigt, så er der et link til “Silverlight Experience” i bunden, så monstro ikke at Microsoft har været inde med noget særdeles konkret støtte til projektet?