» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #90

Pixel art 2 - Hoe verwerk je die stippels in Flash?

Deze tutorial is gemaakt naar aanleiding van de lezing die ik op het Flashtival 2004 in Rotterdam heb gegeven. Naast de uitleg over het maken van een pixel art illustratie vertel ik hoe je de pixel art illustratie kunt verwerken in Macromedia Flash en hoe je actionscripts kunt gebruiken in animatie.

Flashtival wordt georganiseerd door FlashFocus en is een jaarlijks terugkerende Macromedia Flash conferentie in Nederland met nationale en internationale sprekers.

Basis

De basis van de pixel art illustratie is een combinatie van drie afzonderlijke beelden. De pixel art illustratie is zó opgebouwd dat er een tweetal pixel art technieken in verwerkt zijn. De illustratie bevat bovendien een eenvoudige en een meer complexe actionscript-gestuurde animatie. De Flash-animatie heeft daarnaast een preloader. Met behulp van de actionscript die gebruikt wordt voor het berekenen van het voortgangsbalkje van de preloader leg ik het basisprincipe van de animatie uit.

Ik maak gebruik van een drietal beelden, te weten de softwaredoos van Macromedia Flash MX2004, het logo van Flashtival en het naamloze poppetje dat veel op mijn site – www.drububu.com – terugkomt.

Opbouw tutorial

De tutorial is opgebouwd uit drie stappen. Als eerste vertel ik iets over het schetsen en handmatig pixelen van het naamloze poppetje. Vervolgens behandel ik de pixeluitvoering van het Flashtival-logo met behulp van 'dithering' en als laatste onderdeel leg ik uit hoe de verschillende elementen samengevoegd worden tot een animerende pixel art illustratie in Macromedia Flash.

Schetsen

De basisbeelden van de pixel art illustratie zijn inmiddels bekend. Aan de hand van deze drie beelden heb ik een aantal schetsen gemaakt (beweeg de muis over de verticale balken in onderstaande Flash-animatie).

Omdat het een lezing/presentatie betreft leek het me een leuk idee om een pose te gebruiken van een presentator die Macromedia Flash aanprijst met op de achtergrond het Flashtival logo.

Het poppetje dat ik veel gebruik heeft een virtual reality helm op zijn hoofd – en datagloves aan zijn handen – waardoor een gezicht ontbreekt. Het is hierdoor extra belangrijk dat de lichaamshouding goed is, omdat dat in dit geval het meest sprekende deel van de illustratie is.

Tijdens het schetsen heb ik de stand van het hoofd iets schuin gedraaid ten opzichte van eerdere schetsen, zodat het geheel wat minder statisch wordt. De torso is ook iets van de toeschouwer afgedraaid, waardoor je later bij het inkleuren gebruik kunt maken van contrast dat ontstaat als gevolg van het plaatsen van een denkbeeldige lichtbron.

Ik gebruik meestal een balpen voor het schetsen, omdat dat wat krachtiger lijnen oplevert. In dit specifieke geval leverde de houding problemen op, waardoor ik besloot een potlood te gebruiken. Zo kon ik hier en daar nog wat correcties binnen de schets uitvoeren.

De schets wordt gebruikt als blauwdruk en hoeft niet perfect te zijn; bij het omzetten naar pixels vallen veel details weg. De outline van de schets is voor deze fase van het proces het belangrijkste.

Pixelen

De schets wordt ingescand en naar het gewenste formaat geschaald in Adobe Photoshop. Bij het schalen van de schets worden de lijnen iets waziger afhankelijk van het schalingspercentage. Door het contrast iets te verhogen los je dit probleem op. De schets kan nu naar een pixel art illustratie omgezet worden.

Ik gebruik MS Paint voor het maken van de pixel art illustratie omdat het eenvoudig is.
Wanneer je de tekenkleur onder de linker muis knop plaatst en de achtergrond kleur onder de rechter muisknop kan je op een pc zonder tussenkomst van het toetsenbord pixelen.

Ik gebruik binnen MS Paint het standaard zestien kleuren palet van Microsoft Windows.
De kleuren van de uiteindelijke pixel art illustratie pas ik aan op de momenten dat ik van tijd tot tijd de pixel art illustratie bekijk in Adobe Photoshop. In Adobe Photoshop kan je een vooraf gedefinieerd palet laden die het standaardpalet van Windows overschrijft (Image > Mode > Color Table).

De volgende afbeeldingen tonen een aantal tussenstappen, eventueel voorzien van een korte toelichting. Het geheel geeft een goede indruk van het pixelproces.

Voor het pixelen van de outline gebruik ik altijd een contrasterende kleur – in dit geval rood – ten opzichte van de grijze pixels van de schets (1). Zodra ik de outline goed vind, importeer ik de pixel art illustratie in Adobe Photoshop. Ik selecteer alleen de contrasterende pixels van de outline en verander deze kleur in zwart. Deze zwarte outline kopieer ik vervolgens weer terug in MS Paint (3).

Nadat ik de zwarte outline terug gekopieerd heb in MS Paint gebruik ik alleen nog maar MS Paint voor het pixelen.

Het eerste wat me opvalt is de microfoon; het handvat en het bolletje van de microfoon liggen niet in een lijn (2). De voetjes heb ik gekopieerd van een pixel art illustratie die ik eerder gemaakt heb.

Voor het tekenen van de virtual reality helm gebruik ik de kleur rood, zodat het contrast met de ronde zwarte basisvorm van het hoofd groot is. Wanneer de nieuw getekende rode pixels niet goed zijn kunnen deze snel worden verwijderd, omdat duidelijk is welke pixels net getekend zijn en welke niet.

De diepte van de softwaredoos van Macromedia Flash 2004 wordt iets minder diep (7), de hand met de microfoon schuift een klein beetje naar rechts zodat de onderarm iets korter wordt (8).

De outline is nog niet optimaal, maar goed genoeg om te beginnen met het invullen van de kleurvlakken. Hier en daar worden details uitgewerkt.

De softwaredoos wordt gepixeld (13). De onderzijde van de softwaredoos pas ik aan omdat de textuur niet helemaal optimaal is en de broek wordt van details voorzien (14).
De rechter schouder wordt iets geaccentuurd en de val het jasje wordt aangepast zodat de houding wat actiever wordt (17).

De kleurvlakken op de kleding worden aangebracht waardoor het geheel direct wat ruimtelijker wordt (20). De rechter onderarm is nog steeds niet naar wens, net zoals de stand van de duim (23).

De orientatie van de rechter onderarm is aangepast en de rechter hand is aangepast; het mannetje houdt de microfoon nu op een meer natuurlijke manier vast (25).

De kabeltjes van de datagloves en de virtual reality helm worden aangebracht (32).
Daar waar de microfoon de voorzijde van de virtual reality helm kruist, breng ik wat extra witte pixels aan, zodat ze visueel wat meer van elkaar gescheiden worden (33).

Na wat minimale wijzigingen is de pixel art illustratie van het poppetje klaar.

Bekijk het hele proces als animatie

Finishing touch

Wanneer de pixel art illustratie af is wordt schaduw toegevoegd om het geheel iets van de achtergrond te tillen. Alle pixels worden geselecterd (1) en de selectie wordt gevuld met de schaduw kleur (2). De selectie (die inmiddels de schaduwkleur heeft) wordt twee pixels naar rechts en twee pixels naar onderen geschoven ten opzichte van de originele pixel art illustratie. De originele pixel art illustratie wordt vervolgens weer over de laag met de schaduw geplaatst en aan de onderzijde worden de twee pixels verwijderd (3).

Nadat de pixel art illustratie van schaduw is voorzien, wordt het geheel – inclusief schaduw – van een extra wit kader van twee pixels breed voorzien. In de uiteindelijke pixel art illustratie wordt op deze manier het poppetje visueel iets gescheiden van de achtergrond - het Flashtival logo - waardoor het contrast van de outline van het poppetje geaccentueerd wordt en beter zichtbaar is.

Net als bij het maken van de schaduw worden alle pixels geselecteerd (1) en wordt de selectie met behulp 'Expand' ('Select > Modify > Expand') binnen Adobe Photoshop twee pixels groter gemaakt (2). De selectie krijgt in dit geval de intensiteit wit. De originele pixel art illustratie wordt vervolgens weer over de witte laag geplaatst (3).

De pixel art illustratie van het poppetje is voor het moment af.

Bij het samenvoegen met het logo zal het witte kader van de pixel illustratie nog een klein beetje aangepast worden. De exacte pixels zijn in deze fase nog niet duidelijk, omdat de exacte positie van het poppetje ten opzichte van het logo nog niet bekend is.

Flashtival logo

De tekst van het logo bestaat uit een pixelfont, wat voor het maken van een pixel art illustratie ideaal is.
De tekst 'Flashtival' is vrij snel nagetekend, evenals het kader van het logo.
Om de karakteristieke pixeleigenschappen te behouden kan de getekende afbeelding het beste in een veelvoud vergroot worden.

Voor de pixel art illustratie heb ik gekozen om het logo met een factor drie te vergroten, dit omdat het logo in verhouding tot het poppetje dan optimaal is; niet te groot en niet te klein.
Wanneer de verhouding van de grootte van poppetje en logo te groot of te klein is, verliest één van beiden de aandacht van de toeschouwer.

Achtergrondverloopje

De achtergrond van het logo bestaat uit een verloopje van fel groen naar een lichtere kleur groen in een cirkelvorm. Omdat ik voor de pixel art illustratie de standaard kleuren wil gebruiken die ik voor al mijn pixel art toepas, maak ik gebruik van dithering voor het maken van het verloopje.

Dithering is het simuleren van kleurverloopjes door middel van een beperkt aantal kleuren. Door twee aangrenzende kleuren onderling in aantal te combineren wordt het originele kleurverloop zo optimaal mogelijk benaderd.

Ditheren kom je tegen als je .gif afbeeldingen van foto's op wilt slaan. Een foto heeft vaak veel kleurverlopen en bestaat uit veel verschillende kleuren. Het aantal kleuren van de originele afbeelding moet daarom teruggebracht worden tot maximaal 256 kleuren voor .gif afbeeldingen.

De 256 meest prominente kleuren worden door de computer berekend, de overige kleuren worden benaderd door deze 256 kleuren onderling te combineren met behulp van dithering.

Je kunt handmatig het verloopje proberen te maken, maar dat is in dit geval te complex in verband met de cirkelvorm en daarom te arbeidsintensief. Dithering biedt hier een goede oplossing voor.

Binnen Adobe Photoshop maak je het verloopje van de achtergrond van het logo na en vervolgens kies je 'File > Save for Web'. Je selecteert het aantal gewenste kleuren onder 'colors'.

De afbeelding toont het resultaat van ditheren van het originele verloopje (links boven) met een aflopend aantal kleuren.

De twee-kleurenversie (rechts onder) wordt in dit geval gebruikt als basis voor het verloopje voor deze illustratie. De kleur zwart in de afbeelding wordt veranderd in lichtgrijs.

Er zijn verschillende types dithering; 'noise' in dit geval beste omdat het weinig regelmatige – afleidende – patroontjes bevat.


Het kader van het logo is inmiddels voorzien van een ronding.
Binnen het kader is het geditherde verloopje geplaatst en aan de buitenzijde van het kader heb ik handmatig een lichte schaduw aangebracht.

Om het geheel van wat meer contrast te voorzien – waardoor het de pixel art illustratie wat levendiger wordt – wordt een fictieve lichtbron geplaatst. De positie van de lichtbron is linksboven. De positie van de lichtbron is gelijk aan de fictieve lichtbron die bij het poppetje gebruikt is, omdat beide pixel art illustraties in een later stadium gecombineerd worden. Aan de rechter- en onderzijde wordt de intensiteit van de lijntjes binnen het kader verhoogd, waardoor er een highlight verschijnt. Naast het verhogen van de intensiteit wordt de schaduw aan de rechter- en onderzijde van het kader ook een klein beetje donkerder gemaakt door het toevoegen van extra pixels lichtgrijs.

De laatste fase is het plaatsen de tekst 'Flashtival'. Rond de tekst heb ik een kader van een pixel breed gebruikt, zodat de tekst ook weer iets los komt van het verloopje van de achtergrond.

Pixel art illustraties combineren

Na het bepalen van de posities van beide pixel art illustraties ten opzichte van elkaar wordt het einderesultaat langzaam zichtbaar. Alleen de ster in de achtergrond van het logo ontbreekt nog in deze fase, omdat deze pas in de Flash-animatie geimporteerd wordt.

Het originele Flashtival logo bestaat uit een groene achtergrond met een verloopje met daarover heen een animatie van een roterende ster. De tekst 'Flashtival' ligt hier weer boven.

Voor de animatie in Macromedia Flash zijn dus drie layers nodig; een layer met de pixel art illustratie van de achtergrond (layer 'background'), een layer met de animatie van de roterende ster en een layer met de pixel illustratie van de tekst 'Flashtival' en het kader van het logo, beide gecombineerd in layer 'logo'.
Over de pixel art illustratie in layer 'logo' komt een tweede animatie in Flash, waardoor de tekst 'Flashtival' met het kader van het logo en het poppetje – layer 'drububu' – ook van elkaar gescheiden moeten worden.

In het Adobe Photoshop bestand is hier rekening mee gehouden door de afzonderlijke pixel art illustraties in aparte layers te plaatsen.

Naast de layers met pixel art illustraties gebruik ik twee extra layers ('selection') die het minimale beeldformaat aangeven van de afzonderlijke pixel art illustraties. De opacity verlaag ik zodat ik de pixel art illustraties latent kan zien. Bij het afzonderlijk opslaan van de pixel art illustraties selecteer ik het vlak van het minimale beeldformaat. Het gebruik van de optie 'crop' levert het gewenste minimale beeldformaat op.

De pixel art illustraties worden opgeslagen als .gif bestanden, omdat het aantal kleuren vrij minimaal is. Gebruik je pixel art illustraties met meer dan 256 kleuren, dan is het bestandformaat .png een goeide keuze.

Macromedia Flash geeft de randen van een .gif afbeelding niet helemaal scherp weer. Dit is binnen Macromedia Flash niet te verhelpen.

In het geval van de pixel art illustratie in layer 'logo' heb ik het minimale beeldformaat aan alle zijden van twee extra witte pixels voorzien. De achtergrondkleur binnen Macromedia Flash is eveneens wit, de niet scherp weergegeven randen van de .gif afbeelding vallen in dit geval niet op.

In het geval van de pixel art illustratie in layer 'drububu' kunnen de twee extra pixels aan alle zijden niet wit zijn, omdat deze rand in de Flash-animatie zichtbaar zou zijn. De twee extra pixels aan alle zijden zijn in dit geval transparant. De rand is nu volledig transparant en is dus ook niet meer zichtbaar.

Bij het samenvoegen van beide pixel art illustraties verwijder ik een aantal pixels van het witte kader rond de draadjes van de datagloves van de rechterhand van het poppetje. De witte pixels zorgen voor gaten in het kader van het logo waardoor je oog er teveel naar toe getrokken zou worden omdat het contrast vrij hoog is.

Macromedia Flash

Nu de pixel art illustraties opgeslagen zijn als afzonderlijke .gif afbeeldingen kunnen we beginnen met het maken van de Flash-animatie.

De Flash-animatie is als volgt opgebouwd:

Om overzicht te houden heb ik per layer een graphic, een movieclip of actionscript geplaatst. Elke layer heeft een naam gekregen die overeen komt met de inhoud.

De basis-movieclip in Macromedia Flash wordt ook wel de 'root' genoemd en wordt aangeven als _level0.
Een layer van een movieclip kan een andere movieclip bevatten. Deze movieclip kan vervolgens één of meer layers hebben met graphics en/of andere movieclips etc. etc.. Door telkens een movieclip toe te voegen voeg je elke keer een niveau of level toe. In dit voorbeeld zijn er vier levels, te weten _level0, _level1, _level2 en _level3.

De volgende tekst legt per movieclip – aangegeven met een grijze achtergrond – uit welke layer(s) welke informatie bevat, eventueel voozien van een toelichting.

Root

De root bestaat uit vier layers, te weten 'actionscript', 'preloader', 'copyright' en 'animation'.

De movieclip van de preloader moet in het property window van een naam voorzien worden, omdat een stukje actionscript in deze movieclip aangeroepen wordt vanuit de root. Selecteer de movieclip van de preloader en geef deze movieclip de naam 'preloader' in het property window.

Actionscript

De layer 'actionscript' bestaat uit vier frames, met in elke frame een klein stukje actionscript.

Frame één heeft de volgende regel actionscript:

fscommand("allowscale",false);


Deze regel zorgt ervoor dat de Flash-animatie niet meer geschaald kan worden.
In veel gevallen is schalen geen problemen en bij gebruik van vector graphics is het zelfs wenselijk. Het schalen van een pixel art illustratie is echter niet gewenst, omdat je dan je karakteristieke pixeleigenschappen kwijt bent.

Frame twee bevat de volgende regel actionscript


 ifFrameLoaded(4){
  gotoAndStop(4);
 }


Tijdens het laden van de Flash-animatie wordt gekeken of frame vier geladen is, is dit het geval dan is alle data geladen en kan de pixel art illustratie getoond worden. Zolang frame vier niet geladen is wordt niet aan deze voorwaarde voldaan, waardoor Macromedia Flash doorgaat naar frame drie.

Frame drie bevat de volgende regel actionscript:


 preloader.render_preloader(this.getBytesLoaded()/this.getBytesTotal());
 gotoAndPlay(2);

Met de actionscript commando's 'this.getBytesLoaded()' en 'this.getBytesTotal()' kan je binnen Macromedia Flash respectievelijk het aantal geladen bytes en het totaal aantal bytes van de volledige Flash-animatie opvragen.
Wanneer je het aantal geladen bytes deelt door het totaal aantal bytes van de animatie levert dit een waarde van nul tot een op. Aan het begin van het laden van de animatie is de waarde gelijk aan nul. Wanneer de volledig Flash-animatie geladen is, dan is het resultaat van de deling gelijk aan één. De uitkomst van deze deling wordt gebruikt voor het aanroepen van de functie 'render_preloader' in de movieclip 'preloader'.

Een functie is een kort stukje actionscript dat een bepaalde taak uitvoert. In dit geval tekent de functie 'render_preloader' een voortgangsbalkje.

Het commando 'gotoAndPlay(2)' zorgt ervoor dat de Flash-animatie terugspringt naar frame twee. Daar wordt vervolgens weer gecontroleerd of frame vier inmiddels geladen is. Is dit het geval, dan springt Macromedia Flash naar frame vier. Wanneer alle data nog niet geladen is springt Macromedia Flash naar frame drie, berekent het percentage van de geladen data opnieuw en stuurt deze waarde weer naar de functie 'render_preloader' in de movieclip 'preloader' etc. etc...

Frame vier bevat de volgende regel actionscript:


  stop();

Wanneer alle data van de Flash-animatie geladen is springt Macromedia Flash naar frame vier en stopt de movieclip.

Frame vier bevat een layer 'animation' met een movieclip die de eigenlijke animatie bevat. Deze movieclip wordt niet in frame een, twee en drie geplaatst, omdat we de inhoud van deze movieclip pas willen tonen wanneer alle data geladen is.
Door de movieclip te stoppen, stopt de movieclip in layer 'animation' niet. Alleen de movieclip die het commando 'stop' krijgt stopt.
Zodra alle data geladen is, is het tonen van de preloader overbodig geworden, waardoor de movieclip 'preloader' alleen zichtbaar is in frame een, twee en drie.

Preloader


De movieclip 'preloader' bestaat uit actionscript. Met behulp van de regel #include "preloader_00.as" wordt een tekstbestandje die de actionscript bevat aangeroepen.

Het is handig om met externe actionscriptbestanden te werken. Wanneer je meerdere Flash-animaties hebt kun je volstaan met een tekstbestand met de actionscript voor bijvoorbeeld de preloader. Bij aanpassingen volstaat het om eenmalig de actionscript aan te passen. Gebruik je geen externe actionscript bestanden, dan moet je de actionscript in alle afzonderlijke Flash-animaties aanpassen.

De actionscriptcode voor de preloader ziet er als volgt uit:


  /**************************************************************/
  /*                                                            */
  /**************************************************************/

  var max_width:Number=60;
  var height:Number=8;


  /**************************************************************/
  /*                                                            */
  /**************************************************************/

  init = function()
  {
   createEmptyMovieClip("back" ,0);
   createEmptyMovieClip("front",1);

   back._alpha=0;

   back.clear();
   back.beginFill(0xC0C0C0,100);  
   back.moveTo(0        ,0     ); 
   back.lineTo(max_width,0     ); 
   back.lineTo(max_width,height); 
   back.lineTo(0        ,height); 
   back.lineTo(0        ,0     ); 
   back.endFill();
  }


  /**************************************************************/
  /*                                                            */
  /**************************************************************/

  render_preloader = function(procent)
  {var width:Number;

   back._alpha=int(100-(procent*100.0));

   procent=Math.pow(procent,0.5);

   width=int(procent*(max_width-1));

   front.clear();
   front.beginFill(0xFFFFFF,100);  
   front.moveTo(1    ,1       ); 
   front.lineTo(width,1       ); 
   front.lineTo(width,height-1); 
   front.lineTo(1    ,height-1); 
   front.lineTo(1    ,1       ); 
   front.endFill();
  }


  /**************************************************************/
  /*                                                            */
  /**************************************************************/

  init();
  stop();


De actionscript bestaat uit twee functies: de functie 'init' wordt gebruikt om eenmalig een balkje in de achtergrond te tekenen, de functie 'render_preloader' wordt aangroepen vanuit de movieclip in de root in frame drie en tekent het voortgangsbalkje van de preloader over het balkje in de achtergrond.

Het formaat van de preloader wordt bepaald door de variabelen 'max_width' en 'height'.


  var max_width:Number=60;
  var height:Number=8;

De handleiding legt verder niet uit hoe actionscript exact werkt. Wel ga ik in op het volgende stukje actionscript, omdat dit de essentie van animatie met behulp van actionscript duidelijk maakt.


  procent=Math.pow(procent,0.5);

Animatie in een notedop

De basis van elke animatie bestaat uit de factor tijd en in veel gevallen een geleidelijke overgang van een beginwaarde naar een eindwaarde. Deze waarden kan van van alles zijn, bijvoorbeeld positie, schaal, kleur, volume, lichtintensiteit etc. etc..
Door middel van 'interpoleren' kan je eenvoudig een vloeiende overgang berekenen.
In geval van een positie is het beginwaarde positie 'A' en de eindwaarde positie 'B'. Als formule ziet dat er als volgt uit:


 position = A + (lambda * (B-A));

'B-A' wordt ook wel 'delta' genoemd; het is de waarde die we bij 'A' moeten optellen om waarde 'B' te krijgen.

Met behulp van deze formule is het mogelijk om alle posities tussen begin- en eindpositie te berekenen door enkel en alleen de variabele 'lambda' te varieren tussen nul en één.
Je kunt ook waarden kleiner dan nul of groter dan één voor lambda gebruiken, maar dan ben je niet meer aan het interpoleren maar aan het 'extrapoleren'.

Stel je wilt een movieclip in twintig frames laten animeren van positie 'A' naar positie 'B'. Het maximale aantal frames wordt in dit geval gebruikt voor het berekenen van de waarde van lambda. De animatie start met frame nul en eindigt met frame negentien(!). De waarde van lambda is aan het begin gelijk aan nul en aan het eind gelijk aan één. Lambda wordt berekend door de waarde van het framenummer te vermenigvuldigen met één gedeeld door negentien. Tijdens de animatie zal de waarde van lambda varieren tussen nul en één en toont de animatie een vloeiende overgang van positie 'A' naar positie 'B'.


 var frame:Number=0;
 var total_frames:Number=20;
 var A:Number=10.0;
 var B:Number=100.0;

 onEnterFrame = function()
 {
  var lambda,position:Number;

  lambda=frame*(1.0/(total_frames-1.0));
  position=A+lambda*(B-A);

  frame=(frame+1)%total_frames;
 }

Tijdens de animatie is de toename van lambda gelijk, wanneer de waarde van lambda van een exponent voorzien wordt – bijvoorbeeld door kwadrateren – varieert de toename van lambda tijdens de animatie in grootte. Afhankelijk van de waarde van het exponent levert dit een zgn. 'ease in' of 'ease out' animatie op. Een 'ease in' animatie wil zeggen dat de animatie langzaam start en relatief snel eindigt. Het exponent is groter dan één. Een 'ease out' animatie start snel en eindigt relatief rustig. Het exponent is kleiner dan één. Een 'ease in' of 'ease out' animatie is visueel dynamischer/interessanter dan een animatie waarbij de tussenstappen gelijk zijn.


  ...
  lambda=frame*(1.0/(total_frames-1.0));
  lambda=Math.pow(lambda,2.0);
  ...

Voor het balkje van de preloader wordt een zgn. 'ease out' animatie gebruikt.


  procent=Math.pow(procent,0.5);


De gebruiker ziet aan de breedte van het balkje van de preloader dat de animatie - aan het begin - snel inlaadt. De werkelijk geladen hoeveelheid data is echter minder dan de preloader doet vermoeden, omdat gebruik gemaakt wordt van een 'ease out' animatie.
Aan het eind van de animatie zal de breedte van het balkje van de preloader relatief langzaam toenemen. De gebruiker heeft dan inmiddels een groot deel van de animatie geladen en neemt het laatste - langzame - stukje van het inladen voor lief.

Onderstaande interactieve Flash-animatie laat respectievelijk een normale, een 'ease in' en een 'ease out' animatie zien (versleep de slider). De formule voor het interpoleren van de breedte van het balkje van de preloader is vereenvoudigd, omdat het beginpunt - in dit geval de breedte van de preloader - 'A' gelijk is aan nul. Het eindpunt 'B' is de maximale breedte van het balkje van de preloader, de variabele 'max_width'.


  width = 0.0 + (lambda * (max_width-0.0));


wordt


  width = lambda * max_width;

De waarde van 'lambda' is in het geval van de preloader afkomstig uit de movieclip in de root van de Flash-animatie. Vanuit frame drie wordt 'render_preloader' aangeroepen en lambda meegestuurd in de vorm van het aantal geladen bytes, gedeeld door het totaal aantal bytes van de Flash-animatie. De deling levert een waarde op tussen nul en één, precies de waarde die nodig is voor het interpoleren van de breedte van het preloader balkje.

Copyright

De layer 'copyright' bevat de copyright regel 'copyright by arjan westerdiep www.drububu.com'.

Animatie

De movieclip 'animation' bevat de pixel art illustraties en is opgebouwd uit vijf layers.
Elke layer bestaat uit óf een graphic óf een movieclip.

De layers 'text animation' en 'star animation' bevatten movieclips met een animatie, de overige layers bevatten graphics en zijn statisch.

De volgende afbeeldingen laten per layer de inhoud zien.

Pixel art illustraties moet je binnen Macromedia Flash op zgn. 'integer posities' plaatsen, doe je dat niet dan wordt de illustratie niet scherp weergegeven.
Selecteer de pixel art illustratie en pas de positie binnen het property window zodanig aan dat zowel de X als Y positie eindigen op '.0'.
Wanneer de movieclip in een andere movieclip geplaatst is moet je ervoor zorgen dat de voorgaande movieclip ook op een integer positie staat. In dit geval is dat de movieclip die in de layer 'animation' in de root staat.

De laatste handeling die je uit moet voeren om je pixel art illustratie in Macromedia Flash op de juiste wijze weer te geven is het deselecteren van 'allow smoothing'. Dubbelklik de pixel art illustratie in de library om het bitmap properties window op te roepen en deselecteer de optie 'allow smoothing'.

De outline van het poppetje is in de .gif afbeelding uitgespaard. Het poppetje kan nu makkelijk gepositioneerd worden binnen Macromedia Flash.

Net als de pixel art illustratie in layer 'logo' zijn de tekst 'Flashtival' en de outline van het poppetje uitgespaard om het positioneren te vergemakkelijken.

Ster animatie

De movieclip van de roterende ster op de achtergrond bestaat uit twee layers. Een layer met een verwijzing naar een extern actionscript bestand ('start_00.as') en een movieclip ('star') die een Adobe Illustrator bestand bevat van de ster.
Met actionscript kun je niet direct een graphic animeren. Door de graphic in een movieclip te plaatsen los je dit probleem op, zij het dat je een extra level toevoegt.

De actionscript voor het animeren van de movieclip met daarin de ster ziet er als volgt uit:


  var hoek:Number=0.0;

  /**************************************************************/
  /*                                                            */
  /**************************************************************/

  onEnterFrame = function()
  {
   star._rotation=hoek;
   hoek+=0.5;
  }

  stop();

Bij elk frame wordt een halve graad bij de rotatiehoek opgetelt en wordt de movieclip 'star' met daarin de ster een halve graad gedraaid.

Tekstanimatie

De animatie die over de tekst 'Flashtival' gebruikt wordt, wordt in deze handleiding niet uitgelegd in verband met de omvang.
De opbouw van de movieclip is gelijk aan die van de movieclip met de roterende ster.

De actionscript is terug te vinden in het te downloaden .zip bestand.

Finetunen

De laatste fase bestaat eruit het geheel even kritisch te bekijken.

De roterende ster is iets te prominent in beeld. Door de alphawaarde te verlagen tot 60% wordt de intensiteit van de ster iets verlaagd, waardoor het geheel wat beter in balans is.

De geanimeerde pixelillustratie is klaar!

Slotwoord

Het maken van een pixel art illustratie is een tijdrovende bezigheid en het succes wordt voor een groot deel bepaald door goed te kijken.

Door het schrijven van deze tutorial realiseer ik me dat een eenvoudige animerende pixel art illustratie in Macromedia Flash toch minder eenvoudig te maken is dan ik in eerste instantie bedacht had. Het vereist naast geduld de nodige kennis van Adobe Photoshop, het bestandsformaat .gif, Macromedia Flash en actionscript.

Macromedia Flash wordt vooral geassocieerd met vector graphics. De combinatie pixel art en Macromedia Flash is echter ook heel goed mogelijk. Door actionscript te gebruiken kun je niet alleen vrij eenvoudig animaties maken, maar ook interactiviteit toevoegen. De bestandsgrootte is bovendien zeer klein bij gebruik van actionscript-gestuurde animaties.

Tot slot wil ik de organisatie van het Flashtival bedanken voor de uitnodiging om een lezing te verzorgen en hoop ik dat deze handleiding die ik naar aanleiding van de lezing geschreven heb duidelijk maakt hoe je pixel art combineert met Macromedia Flash.

Mochten er nog vragen en/of opmerkingen zijn naar aanleiding van deze handleiding dan kan je contact opnemen met arjan@drububu.com.
Succes!

Downloaden bestanden

Download deze tutorial inclusief Macromedia Flash bestanden van de pixel art illustratie (zip - 721kb).

Download de Macromedia Flash bestanden van de pixel art illustratie (zip - 167kB).

Copyright

Gehele of gedeeltelijke overname, plaatsing op andere sites, verveelvoudiging op welke andere wijze ook en/of commercieel gebruik van deze handleiding alleen na toestemming van de auteur.

arjan westerdiep is grafisch ontwerper, illustrator, programmeert beeld, is woordblind, vindt iets mooi of lelijk, houdt niet van concessies doen, is de maker van www.drububu.com.

Auteur

Arjan Westerdiep

is ook voor jouw website te huur als grafisch ontwerper, illustrator of het programmeren van beeld.

Hij is woordblind, vindt iets mooi of lelijk, houdt niet van concessies doen en is de maker van www.drububu.com.

Publicatiedatum: 01 oktober 2004

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-2016 » NAAR VOREN en de auteurs