blog.desaturated http://blog.desaturated.be Flash, Actionscript, Flex and the general www Sat, 03 Jan 2009 19:52:14 +0000 http://wordpress.org/?v=2.5 en ActionScript 3 conventies http://blog.desaturated.be/2008/04/20/actionscript-3-conventies/ http://blog.desaturated.be/2008/04/20/actionscript-3-conventies/#comments Sun, 20 Apr 2008 18:10:54 +0000 Gerrit http://blog.desaturated.be/?p=78 Zoals elke programmeertaal heeft ook ActionScript 3 enkele ongeschreven regeltjes die je zullen hebben bij het gemakkelijker herkennen van benamingen etc...

Enkele dagen geleden vond ik daarover een artikel op de Adobe Flex SDK wiki.

Benamingen van variabelen en functies zijn belangrijk, ze brengen overzicht (of chaos) in je code en zorgen ervoor dat je gemakkelijk dingen terugvindt (of net niet).

Hier zijn enkele best practices ivm benaming verzameld (naar bovenstaande wiki-pagina):

Afkortingen

In benamingen van functies, variabelen, klasses, ... wordt het afgeraden afkortingen te gebruiken, dit om misverstanden te voorkomen, er zijn echter wel enkele afkortingen die als standaard beschouwd worden.

  • acc voor accessibility
  • auto voor automatic
  • eval voor evaluate
  • impl voor implementation
  • info voor information
  • num voor number of
  • min voor minium
  • max voor maximum
  • nav voor navigation
  • regexp voor regular expression
  • util voor utility

Acroniemen

Acroniemen zoals bvb. XML worden altijd volledig in hoofdletters of volledig in kleine letters geschreven, ook al staan er 2 naast elkaar (bvb. loadXMLSWF).

Meerdere woorden in een naam

Ofwel werken we met camelCasing of met underscores_tussen_de_woorden. Later wordt uitgelegd wanneer je een bepaalde manier best gebruikt.

Type vermelden in de naam

Werk niet zoals vroeger: border_mc vervang je nu beter door borderMovieClip of borderMC. Zelf doe ik dit voor de standaard DisplayObjects iets anders en voeg ik op het einde van mn naam gewoon MC toe bij een MovieClip, SPR bij een Sprite en S bij een Shape.
In vele gevallen kan het type ook als naam voor een object dienen, iets wat ik veel doe is bijvoorbeeld:

PLAIN TEXT
Actionscript:
  1. var urlRequest:URLRequest = new URLRequest();

In dit geval is de benaming gewoon gelijk aan het type, maar met andere casing.

Benaming voor packages

Start met kleine letter, en gebruik dan camel-casing. Bijvoorbeeld be.desaturated.animationEffects.Tween
Het best is ook om je packages zo duidelijk mogelijk te benoemen, een package die bijvoorbeeld veel utilties voor een String bevat noem je best stringUtils.

Bestandsnamen

Voor gewone bestanden: camel-casing.
Bij een API: zorg dat de bestandsnaam gelijk is aan de publieke naam van de API binnen de applicatie.
Assets (externe images, ...): naam_van_de_foto.jpg

Namespaces

Iets wat minder frequent voorkomt in Flash zelf, maar des te meer in Flex. Een namespace benoem je best zonder hoofdletters, en met underscores tussen 2 woorden.

Interfaces

Een interface geef je best een naam die start met een "I", vanaf dan gebruik je best camel-casing. Bijvoorbeeld: IAnimationEffect.

Klasse benamingen

Beginnen best met hoofdletter en camel-casing, bijvoorbeeld: AnimationEffect.

Events

Beginnen met kleine letter en camel-casing, bijvoorbeeld: creationComplete.

Styles

Beginnen met kleine letter en camel-casing, bijvoorbeeld fontSize.

Enum values voor string properties

Beginnen met kleine letter en verder camel-casing gebruiken, bijvoorbeeld filesOnly.

Identifiers voor constants

Volledig in hoofdletters, woorden scheiden kun je met een underscore. Bijvoorbeeld FOO_BAR. Als de waarde van de constante een String is, dan zorg je best dat de identifier gelijk is aan de waarde (in ons geval zou de waarde fooBar zijn).

Properties (variabelen en getters/setters)

We beginnen met kleine letters en werken met camel-casing.
Bij for-loops niem je de iterator best i, bij een for-in loop gebruik je best p.

Opslag variabelen

Opslag-variabelen zijn variabelen die je gebruikt om een waarde voor een getter/setter op te slaan, als je bijvoorbeeld een getter foo hebt, noem je de opslag variabele best _foo.

Event handlers

Hier heb ik zelf soms een probleem mee, zelf gebruik ik nogal graag 'on' voor mn event, bijvoorbeeld onImageClick, een betere manier is echter om gewoon 'Handler' na de naam van je event te plaatsen, bijvoorbeeld imageClickHandler, dit voorkomt ook de warnings bij gebruik van bvb. onMouseDown als naam van je event handler.

Argumenten

In een setter gebruik je doorgaans als naam van je argument gewoon value. Bij event handlers gebruik je best gewoon event.

Verder...

Verder in het artikel vind je nog informatie over onder andere hoe je best comments gebruikt, wanneer je je datatypes doorgeeft aan je variabelen, en nog vele tips om je code overzichtelijker te maken. Benamingen vind ik echter de belangrijkste zaak om afspraken over te maken, zeker als je in teamverband werkt, maar ook de rest van het daarover volledig artikel is zeker verplicht leesvoer voor elke zelfrespecterende flash/flex-coder.

]]> http://blog.desaturated.be/2008/04/20/actionscript-3-conventies/feed/ Proximedia, de naam van het internet? http://blog.desaturated.be/2008/03/18/proximedia-de-naam-van-het-internet/ http://blog.desaturated.be/2008/03/18/proximedia-de-naam-van-het-internet/#comments Tue, 18 Mar 2008 19:26:49 +0000 Gerrit http://blog.desaturated.be/2008/03/18/proximedia-de-naam-van-het-internet/ Ik smijt niet graag met modder, maar volgende artikels omtrent het bedrijf Proximedia zijn zeker het lezen waard.
U weze gewaarschuwd!

]]> http://blog.desaturated.be/2008/03/18/proximedia-de-naam-van-het-internet/feed/ Respect http://blog.desaturated.be/2008/02/27/respect/ http://blog.desaturated.be/2008/02/27/respect/#comments Wed, 27 Feb 2008 14:53:34 +0000 Gerrit http://blog.desaturated.be/2008/02/27/respect/ voor de mannen die de Red Bull Flightlab site gemaakt hebben.
Respect!

]]> http://blog.desaturated.be/2008/02/27/respect/feed/ Pong in 802 bytes http://blog.desaturated.be/2008/02/13/pong-in-802-bytes/ http://blog.desaturated.be/2008/02/13/pong-in-802-bytes/#comments Wed, 13 Feb 2008 22:37:01 +0000 Gerrit http://blog.desaturated.be/2008/02/13/pong-in-802-bytes/ Na het ontdekken van Mrdoob's Pong in 1022 bytes werd ik benieuwd of het kleiner kon. En dat kon het.

Ik presenteer u:
AS3 Pong in 802 bytes. (Verklein je browser-venster en refresh als het wat moeilijker mag ;) )

Wat ik gemerkt heb, is dat mijn code zo een 40k kleiner werd toen ik 2 functies wegdeed en de code gewoon buiten een functie plaatste. Verder nog wat spelen met datatypes en namen van variabelen etc...

De code vind je bij meer lezen

PLAIN TEXT
Actionscript:
  1. /**
  2. * AS3 Pong in 802 bytes
  3. * (c) 2008 Gerrit Bertier - http://desaturated.be - http://blog.desaturated.be
  4. */
  5. const l:Shape = new Shape(); // Left paddle
  6. const r:Shape = new Shape(); // Right paddle
  7. const b:Shape = new Shape(); // Ball
  8. var p:int = -10; // x-speed
  9. var q:int = 7; // y-speed
  10.  
  11. stage.align = "TL";
  12. stage.scaleMode = "noScale";
  13.  
  14. l.graphics.beginFill(0);
  15. l.graphics.drawRect(0,0,20,75);
  16. l.graphics.endFill();
  17. addChild(l);
  18.  
  19. r.graphics.beginFill(0);
  20. r.graphics.drawRect(0,0,20,75);
  21. r.graphics.endFill();
  22. addChild(r);
  23.  
  24. b.graphics.beginFill(0);
  25. b.graphics.drawRect(-10,-10,20,20);
  26. b.graphics.endFill();
  27. addChild(b);
  28.  
  29. l.x = 0;
  30. l.y = mouseY;
  31.  
  32. r.x = stage.stageWidth - r.width;
  33. r.y = stage.stageHeight - mouseY - r.height;
  34.  
  35. b.x = stage.stageWidth / 2;
  36. b.y = stage.stageHeight / 2;
  37.  
  38. addEventListener("enterFrame",f);
  39.  
  40. function f(e:Event):void
  41. {
  42.     l.y = mouseY;
  43.     r.y = stage.stageHeight - mouseY - r.height;
  44.    
  45.     b.x += p;
  46.     b.y += q;
  47.    
  48.     if (b.y <= 10 || b.y>= stage.stageHeight - 10)
  49.     {
  50.         q *= -1;
  51.     }
  52.    
  53.     if (b.hitTestObject(l) || b.hitTestObject(r))
  54.     {
  55.         p *= -1;
  56.     }
  57.    
  58.     if (b.x <= 0 || b.x>= stage.stageWidth )
  59.     {
  60.         p = -10;
  61.         q = 7;
  62.         b.x = stage.stageWidth / 2;
  63.         b.y = stage.stageHeight / 2;
  64.     }
  65. }

En de fla kun je hier downloaden (gezipt).

Wie doet nog beter?

]]> http://blog.desaturated.be/2008/02/13/pong-in-802-bytes/feed/ Het MVC-model in Actionscript 3 http://blog.desaturated.be/2008/01/03/het-mvc-model-in-actionscript-3/ http://blog.desaturated.be/2008/01/03/het-mvc-model-in-actionscript-3/#comments Thu, 03 Jan 2008 00:43:30 +0000 Gerrit http://blog.desaturated.be/2008/01/03/het-mvc-model-in-actionscript-3/ Met de nieuwe versie van Actionscript en Flash Player 9 is het eindelijk mogelijk om volwaardige OO applicaties te ontwikkelen.

Reeds enkele keren kreeg ik echter de vraag hoe je nu best aan een groter project kan beginnen. Zelf werk ik volgens het MVC-model. MVC staat voor Model-View-Controller, wat wil zeggen dat je de applicatie gaat opdelen in 3 delen:

  • Model: De verwerking van de data (bvb. XML data verwerken).
  • View: De visualisatie van de data, dit deel van het model bouwt de interface.
  • Controller: De verbinding tussen het model en de view, meestal vangt een Controller klasse events op, en geeft die door waar nodig.

De applicatie

Als voorbeeld bouwen we aan zeer kleine applicatie, die een timer zal zijn, klikken op de applicatie zal de timer starten, nogmaals klikken zal de applicatie terug stoppen. Omdat dit slechts een demo is gebruik ik slechts 3 klassen, bij grotere applicaties zullen er natuurlijk veel meer packages en veel meer klasses gebruikt worden.

Structuur

Qua structuur zit een MVC-applicatie redelijk gemakkelijk in elkaar. Er zijn 3 hoofdklasses waarrond de volledige applicatie gebouwd zal worden.

MVC Demo package structure
Zoals je kan zien is er de hoofdklasse Demo, die tevens ingesteld staat als document class in de fla-file. Deze klasse zit in de package be.desaturated.demo. Deze klasse zal de rol op zich nemen van Controller.

Verder hebben we nog de Core klasse, deze zal dienen als Model en zit in de be.desaturated.demo.core package. Daarnaast hebben we nog de UI klasse, die de View klasse zal zijn. Deze klasse bevindt zich in be.desaturated.demo.ui.

Opstarten van het project

Nadat we onze klasse-structuur aangemaakt hebben, starten we met de basisfunctionaliteiten voor iedere klasse.
Uitleg over wat alles doet kun je vinden als commentaar in de klasse, en waar nodig zal ik nadien nog verduidelijken:

Demo.as

PLAIN TEXT
Actionscript:
  1. package be.desaturated.demo
  2. {
  3.     /**
  4.      * Import statements
  5.      */
  6.     import be.desaturated.demo.ui.UI;
  7.     import be.desaturated.demo.core.Core;
  8.     import flash.display.MovieClip;
  9.    
  10.     /**
  11.      * Demo klasse voor MVC blogpost (http://blog.desaturated.be)
  12.      * @author Gerrit Bertier
  13.      */
  14.     public class Demo extends MovieClip
  15.     {
  16.         /**
  17.          * Class level variables
  18.          */
  19.         var _ui:UI;
  20.         var _core:Core;
  21.         
  22.         /**
  23.          * Constructor
  24.          */
  25.         public function Demo()
  26.         {
  27.             // UI en core instanties aanmaken
  28.             _ui = new UI();
  29.             _core = new Core();
  30.         }
  31.        
  32.         /**
  33.          * Core geinitaliseerd
  34.          */
  35.         private function onCoreInit():void
  36.         {
  37.            
  38.         }
  39.     }
  40. }

UI.as

PLAIN TEXT
Actionscript:
  1. package be.desaturated.demo.ui
  2. {
  3.     /**
  4.      * Import statements
  5.      */
  6.     import flash.display.MovieClip;
  7.    
  8.     /**
  9.      * UI klasse voor MVC demo
  10.      * @author Gerrit Bertier
  11.      */
  12.     public class UI extends MovieClip
  13.     {
  14.         /**
  15.          * Class level variables
  16.          */
  17.        
  18.         /**
  19.          * UI Constructor
  20.          */
  21.         public function UI()
  22.         {
  23.            
  24.         }
  25.     }
  26. }

Core.as

PLAIN TEXT
Actionscript:
  1. package be.desaturated.demo.core
  2. {
  3.     /**
  4.      * Import statements
  5.      */
  6.     import flash.events.Event;
  7.     import flash.events.EventDispatcher;
  8.  
  9.     /**
  10.      * Core klasse voor MVC Demo
  11.      * @author Gerrit Bertier
  12.      */
  13.     public class Core
  14.     {
  15.         /**
  16.          * Class level variables
  17.          */
  18.         private var _ed:EventDispatcher;
  19.        
  20.         /**
  21.          * Core constructor
  22.          */
  23.         public function Core()
  24.         {
  25.             _ed = new EventDispatcher();
  26.         }
  27.        
  28.         /**
  29.          * Core initialiseren
  30.          */
  31.         public function init():void
  32.         {
  33.                
  34.         }
  35.        
  36.         /**
  37.          * Add event listener to this class
  38.          */
  39.         public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
  40.         {
  41.             _ed.addEventListener(type, listener, useCapture, priority, useWeakReference);   
  42.         }
  43.        
  44.         /**
  45.          * Remove event listener from this class
  46.          */
  47.         public function removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void
  48.         {
  49.             _ed.removeEventListener(type, listener, useCapture);
  50.         }
  51.        
  52.         /**
  53.          * Dispatch a ControllerEvent from this class
  54.          */
  55.         private function dispatchEvent(ce:Event):Boolean
  56.         {
  57.             return _ed.dispatchEvent(ce);
  58.         }
  59.     }
  60. }

Let erop dat ik in de core klasse een EventDispatcher importeer en initialiseer, deze zal ik later gebruiken om events van de Core naar de Demo klasse te sturen, en om de Demo klasse te laten luisteren naar de Core klasse.

Dit lijkt redelijk wat overhead voor een kleine applicatie als deze, en dat is het ook, maar bij grotere applicaties is een degelijke structuur als deze zeker een aanrader. Zonder een vaste structuur geraak je zeker de weg kwijt binnen je project. Dit model zorgt ervoor dat je efficiënt kunt werken, en direct weet waar je bepaalde functies moet terugvinden.

De core & UI initialiseren

Nu kunnen we beginnen met de core te initialiseren, en als dit gedaan is, de UI klaar te maken.

Om te beginnen importeren we een Timer-object in de Core klasse.

Core.as

PLAIN TEXT
Actionscript:
  1. import flash.utils.Timer;
  2.     import flash.events.TimerEvent;

Vervolgens instantieren we een Timer-object op klasse-niveau

Core.as

PLAIN TEXT
Actionscript:
  1. /**
  2.      * Class level variables
  3.      */
  4.     private var _timer:Timer;

Deze timer zullen we vervolgens initialiseren in de functie init binnen de core. We luisteren meteen ook al naar het tik-event, en vangen dit telkens op in onTimerTick.
Telkens we dit event ontvangen, zullen we een nieuw event met als type update uitsturen naar de Demo klasse.

Core.as

PLAIN TEXT
Actionscript:
  1. /**
  2.          * Core initialiseren
  3.          */
  4.         public function init():void
  5.         {
  6.             // Timer initialiseren
  7.             _timer = new Timer(1, 0);
  8.             // Opvangen wanneer de timer tikt (om de milliseconde)
  9.             _timer.addEventListener(TimerEvent.TIMER, onTimerTick);
  10.         }
  11.        
  12.         /**
  13.          * Timer heeft getikt, dit will zeggen dat er 1 milliseconde verstreken is
  14.          * @param te:TimerEvent - Het event
  15.          */
  16.         private function onTimerTick(te:TimerEvent):void
  17.         {
  18.             // "update" event versturen
  19.             dispatchEvent(new Event("update")); 
  20.         }

Nu moeten we het coreReady event opvangen in de Demo klasse.

Demo.as

PLAIN TEXT
Actionscript:
  1. public function Demo()
  2. {
  3.     // UI en core instanties aanmaken
  4.     _ui = new UI();
  5.     _core = new Core();
  6.     // Luisteren naar de core tot die geinitaliseerd is
  7.     _core.addEventListener("coreReady", onCoreInit);
  8.     // Core initialiseren
  9.     _core.init();
  10. }
  11.  
  12. /**
  13. * Core geinitaliseerd
  14. */
  15. private function onCoreInit(e:Event):void
  16. {
  17.     // Event listener van de core verwijderen
  18.     _core.removeEventListener("coreReady", onCoreInit);
  19.     // Luisteren naar de UI tot die geinitaliseerd is
  20.     _ui.addEventListener("uiReady", onUIInit);
  21.     // UI initialiseren
  22.     _ui.init();
  23. }
  24.        
  25. /**
  26. * UI geinitaliseerd
  27. */
  28. private function onUIInit(e:Event):void
  29. {
  30. }

Nu onze Demo-klasse klaar is, kunnen we de UI initialiseren.

UI.as

PLAIN TEXT
Actionscript:
  1. package be.desaturated.demo.ui
  2. {
  3.     /**
  4.      * Import statements
  5.      */
  6.     import flash.display.MovieClip;
  7.     import flash.display.Sprite;
  8.     import flash.events.Event;
  9.     import flash.events.MouseEvent;
  10.     // Nodige klasses voor het tekstveld importeren
  11.     import flash.text.TextFormat;
  12.     import flash.text.TextField;
  13.    
  14.     /**
  15.      * UI klasse voor MVC demo
  16.      * Deze klasse extend MovieClip, en kan aan de displayList toegevoegd worden, en ook children hebben
  17.      * @author Gerrit Bertier
  18.      */
  19.     public class UI extends MovieClip
  20.     {
  21.         /**
  22.          * Class level variables
  23.          */
  24.        
  25.         /**
  26.          * UI Constructor
  27.          */
  28.         public function UI()
  29.         {
  30.         }
  31.        
  32.         /**
  33.          * UI initialiseren
  34.          */
  35.         public function init():void
  36.         {
  37.             // Textformat aanmaken
  38.             var fmt:TextFormat = new TextFormat();
  39.             fmt.font = "_sans";
  40.             fmt.size = 40;
  41.             fmt.bold = true;
  42.             fmt.color = 0x000000;
  43.             fmt.align = "center";
  44.  
  45.             // Achtergrond/hit-zone aanmaken
  46.             var hit:Sprite = new Sprite();
  47.             // Toevoegen aan DisplayList
  48.             this.addChild(hit);
  49.             // Tekenen
  50.             hit.graphics.clear();
  51.             hit.graphics.beginFill(0xffffff, 1);
  52.             hit.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
  53.             hit.graphics.endFill();
  54.             // Muis interactie aanzetten
  55.             hit.mouseChildren = false;
  56.             hit.buttonMode = true;
  57.            
  58.             // Tekstveld aanmaken
  59.             var txt:TextField = new TextField();
  60.             txt.name = "txt";
  61.             // Toevoegen aan DisplayList
  62.             this.addChild(txt);
  63.             // Muis-interactie afzetten
  64.             txt.mouseEnabled = false;
  65.             // Tekstveld properties instellen
  66.             txt.x = 0;
  67.             txt.y = 14;
  68.             txt.width = stage.stageWidth;
  69.             txt.defaultTextFormat = fmt;
  70.             // Standaard tekst instellen
  71.             txt.text = "0 s";
  72.            
  73.             // Event afvuren als we op de achtergrond klikken
  74.             hit.addEventListener(MouseEvent.CLICK, onHitClick);
  75.            
  76.             // UI geinitialiseerd
  77.             dispatchEvent(new Event("uiReady", true));
  78.         }
  79.        
  80.         /**
  81.          * Achtegrond geklikt
  82.          * @param me:MouseEvent - het mouse event
  83.          */
  84.         private function onHitClick(me:MouseEvent):void
  85.         {
  86.             // Geklikt op achtergrond, laat dit weten aan de controller
  87.             dispatchEvent(new Event("uiClick", true)); 
  88.         }
  89.     }
  90. }

Onze applicatie is nu klaar om gestart te worden. Dit doen we door in Demo.as te luisteren naar het uiClick event.

Demo.as

PLAIN TEXT
Actionscript:
  1. /**
  2. * UI geinitaliseerd
  3. */
  4. private function onUIInit(e:Event):void
  5. {
  6.     // Event listener voor de UI verwijderen
  7.     _ui.removeEventListener("uiReady", onUIInit);
  8.     // Luisteren naar het klik-event op de achtegrond
  9.     _ui.addEventListener("uiClick", onUIClick);
  10. }
  11.  
  12. /**
  13. * Geklikt op de achtergrond
  14. */
  15. private function onUIClick(e:Event):void
  16. {
  17.     // Het update event opvangen
  18.     _core.addEventListener("update", onUpdate);
  19.     // Start de timer in de core
  20.     _core.startStopTimer(); 
  21. }
  22.  
  23. /**
  24. * Updaten
  25. */
  26. private function onUpdate(e:Event):void
  27. {
  28.     // Update doorgeven aan de UI
  29. }

De startTimer functie in de core zal de timer starten, en dus kunnen we ook het "update" opvangen (dit event hebben we eerder al voorzien).

Core.as

PLAIN TEXT
Actionscript:
  1. /**
  2. * Timer starten/stoppen
  3. */
  4. public function startStopTimer():void
  5. {
  6.     if (!_timer.running)
  7.     {
  8.         // Timer loopt nog niet
  9.         _timer.start();
  10.     }
  11.     else
  12.     {
  13.         // Timer loopt al, dit is dus de afsluitende klik
  14.         _timer.stop();
  15.     }
  16. }

Nu de timer start/stopt, kunnen we het "update" event gaan opvangen in de controller-klasse Demo.as

Demo.as

PLAIN TEXT
Actionscript:
  1. /**
  2. * Updaten
  3. */
  4. private function onUpdate(e:Event):void
  5. {
  6.     // Update doorgeven aan de UI
  7.     _ui.update();
  8. }

In de UI vangen we dit op

UI.as

PLAIN TEXT
Actionscript:
  1. /**
  2. * Update de UI
  3. */
  4. public function update():void
  5. {
  6.     // Tijd met 1 s verhogen
  7.     _time++;
  8.     // Tekstveld updaten
  9.     var txt:TextField = this.getChildByName("txt") as TextField;
  10.     txt.text = _time + " s";
  11. }

Opmerking

Dit is de basisstructuur voor een MVC applicatie in Flash 9 met behulp van ActionScript 3.

Nog een kleine opmerking gaat over de UI klasse:
In een grotere applicatie zou de tijd bijgehouden worden in de Core klasse, en niet in de UI klasse zoals hier. Met een custom event klasse zou dan de tijd doorgezonden worden van de Core naar de Demo klasse, die op zich de tijd doorgeeft naar de UI.
Ik heb dit hier bewust niet gedaan om gewoon bij de essentie van het MVC model te blijven.

De applicatie

De applicatie valt hier te bekijken.

De volledige source-files kunt u downloaden in ZIP-formaat.

Veel plezier!

]]> http://blog.desaturated.be/2008/01/03/het-mvc-model-in-actionscript-3/feed/ Adobe Image Foundation Toolkit & Hydra http://blog.desaturated.be/2007/10/17/adobe-image-foundation-toolkit-hydra/ http://blog.desaturated.be/2007/10/17/adobe-image-foundation-toolkit-hydra/#comments Wed, 17 Oct 2007 17:33:06 +0000 Gerrit http://blog.desaturated.be/2007/10/17/adobe-image-foundation-toolkit-hydra/ Gisteren heb ik me even bezig gehouden met het 'ontdekken' van de Adobe Image Foundation Toolkit met zijn bijbehorende syntax genaamd Hydra.

De AIFTT is samen met Hydra een technologie om aan image processing te doen. Zo kun je dus je eigen image filters maken, die later kunnen gebruikt worden in Flash. Met de komst van Flash Player 10 (codename Astro) wordt het mogelijk om een deel van de AIFTT technologie te implementeren in Flash (eigen filters in Flash).

Om wat te verkennen heb ik even een simpele filter geschreven die de levels van een foto wat verhogen. (zoals je in Photoshop een image dupliceert, blurt, en op de originele legt met blending mode 'soft light').

Dit is de Hydra code:

PLAIN TEXT
C:
  1. kernel BlurredOverlay
  2. <vendor : "Gerrit Bertier";
  3.     version : 1;
  4.     description : "Duplicates the image and blurs the top image, and blends it in with bottom image for better colours";
  5. >
  6. {
  7.     parameter float opacity
  8.     <minValue:float(0.0);
  9.         maxValue:float(1.0);
  10.         defaultValue:float(0.3);
  11.    >;
  12.  
  13.     void evaluatePixel(in image4 src, out pixel4 dst)
  14.     {
  15.         // Create 2 copys of the image
  16.         pixel4 bottom = sampleNearest(src, outCoord());
  17.        
  18.         // Get coords for each pixel
  19.         float2 coord = outCoord();
  20.        
  21.          // Get the adjacent values for each pixel
  22.         pixel4 top1 = sampleNearest(src, coord - float2(0, 2));
  23.         pixel4 left1 = sampleNearest(src, coord - float2(2, 0));
  24.         pixel4 bottom1 = sampleNearest(src, coord + float2(0, 2));
  25.         pixel4 right1 = sampleNearest(src, coord + float2(2, 0));
  26.         pixel4 top2 = sampleNearest(src, coord - float2(0, 4));
  27.         pixel4 left2 = sampleNearest(src, coord - float2(4, 0));
  28.         pixel4 bottom2 = sampleNearest(src, coord + float2(0, 4));
  29.         pixel4 right2 = sampleNearest(src, coord + float2(4, 0));
  30.         pixel4 top3 = sampleNearest(src, coord - float2(0, 6));
  31.         pixel4 left3 = sampleNearest(src, coord - float2(6, 0));
  32.         pixel4 bottom3 = sampleNearest(src, coord + float2(0, 6));
  33.         pixel4 right3 = sampleNearest(src, coord + float2(6, 0));
  34.         pixel4 topleft = sampleNearest(src, coord - float2(2, 2));
  35.         pixel4 topright = sampleNearest(src, coord + float2(2, -2));
  36.         pixel4 bottomleft = sampleNearest(src, coord + float2(2, 2));
  37.         pixel4 bottomright = sampleNearest(src, coord - float2(-2, 2));
  38.         pixel4 center = sampleNearest(src, coord);
  39.        
  40.         // Create the overlay and use adjacent pixel data for blurring
  41.         pixel4 overlay = (top1 + top2 + top3 + left1 + left2 + left3 + bottom1 + bottom2 + bottom3 + right1 + right2 + right3 + topleft + topright + bottomleft + bottomright) / 12.0;
  42.        
  43.         float o = opacity * 0.5;
  44.        
  45.         overlay.a = o;
  46.        
  47.         dst.r = bottom.r + (o * overlay.r);
  48.         dst.g = bottom.g + (o * overlay.g);
  49.         dst.b = bottom.b + (o * overlay.b);
  50.        
  51.         dst.a = 1.0;
  52.     }
  53. }

Zoals je al of niet ziet, is deze syntax zeer gelijkend met die van C++, en gelukkig heeft het ook wat weg van Actionscript 3.

Om een werkende filter te produceren, heeft de syntax enkele vereisten. Zo is het verplicht om een functie te hebben genaamd evaluatePixel, die een image binnenkrijgt, en pixeldata returnt.
De image die je binnenkrijgt is data voor een ganse image. evaluatePixel wordt dan uitgevoerd op elke pixel, en returnt de aangepaste pixel, waarmee pixel voor pixel de nieuwe afbeelding opgebouwd wordt.

Hier een voorbeeldje van mijn BlurredOverlay filter.
Original and Hydra-processed image.

Dit wordt zeker leuk om mee te spelen als Flash Player 10 er is, jammergenoeg zijn er bepaalde dingen die niet mee geintegreerd zullen worden in Flash, maar het is toch een aangename stap voorwaarts.

]]> http://blog.desaturated.be/2007/10/17/adobe-image-foundation-toolkit-hydra/feed/ Zoek je een job in de web-sector http://blog.desaturated.be/2007/09/17/zoek-je-een-job-in-de-web-sector/ http://blog.desaturated.be/2007/09/17/zoek-je-een-job-in-de-web-sector/#comments Mon, 17 Sep 2007 18:56:54 +0000 Gerrit http://blog.desaturated.be/2007/09/17/zoek-je-een-job-in-de-web-sector/ kijk dan es hier, als je braaf bent mag je misschien es langskomen ;)

]]> http://blog.desaturated.be/2007/09/17/zoek-je-een-job-in-de-web-sector/feed/ ChaCha http://blog.desaturated.be/2007/08/27/chacha/ http://blog.desaturated.be/2007/08/27/chacha/#comments Mon, 27 Aug 2007 12:07:01 +0000 Gerrit http://blog.desaturated.be/2007/08/27/chacha/ ChaCha logo
ChaCha lijkt op het 1e zicht een traditionele search engine, maar het is veel meer dan dat.
Als je via de traditionele search niet meteen een search result vindt, kun je gewoon kiezen voor 'Search with guide'.

Search with guide opent een soort chatvenster, waarin je kunt praten met een 'gids'. Deze gids is een echte persoon die door ChaCha betaald wordt om te zoeken.
Je moet enkel zeggen wat je zoekt, en zij doen het werk voor jou.

Deze manier van werken opent geweldige perspectieven naar de toekomst toe tov. juistheid en nuttigheid van search results... Denk maar aan raten van relevantie van een search result tov een bepaalde zoekterm etc...

Zeker in het oog houden!

]]> http://blog.desaturated.be/2007/08/27/chacha/feed/ Shnitsel op #13 http://blog.desaturated.be/2007/08/13/shnitsel-op-13/ http://blog.desaturated.be/2007/08/13/shnitsel-op-13/#comments Mon, 13 Aug 2007 07:13:58 +0000 Gerrit http://blog.desaturated.be/2007/08/13/shnitsel-op-13/ Met mijn shnitsel-post sta ik momenteel 13e geranked bij Google, niet genoeg dus! Meer shnitselen die handel!

]]> http://blog.desaturated.be/2007/08/13/shnitsel-op-13/feed/ Shnitsel, en hoe te vinden? http://blog.desaturated.be/2007/08/08/zoek-eens-wat-shnitsel/ http://blog.desaturated.be/2007/08/08/zoek-eens-wat-shnitsel/#comments Wed, 08 Aug 2007 13:26:13 +0000 Gerrit http://blog.desaturated.be/2007/08/08/zoek-eens-wat-shnitsel/ Joggink's shnitsel SEO Contest is van start gegaan, shnitsel is het woord, en 66.249.93.104 is het 'slachtoffer' (lees: de gebruikte zoekmachine).

Shnitsel

dus, niet te verwarren met een shnitzel!
Wiener Schnitzel, not schnitsel

]]> http://blog.desaturated.be/2007/08/08/zoek-eens-wat-shnitsel/feed/