Tutorial: Zet je Flash-animaties om naar HTML5 met Adobe Wallaby

Tools | tech | trends: Flash CS5, Wallaby, een WebKit-browser
Expert: Mark Shufflebottom
Tutorialbestanden: Download

Tenzij je de afgelopen jaren onder een steen hebt geleefd, zul je genoeg hebben meegekregen van de moeilijkheden rondom Flash en iOS. Eerst werd gezegd dat Flash te veel van de accu zou vergen om goed te kunnen werken onder iOS, maar dit werd hard onderuit gehaald door de prima ondersteuning voor Android. Later werd het zelfs onmogelijk om apps voor iOS te maken met Flash. De vete duurt voort, maar wat voor ons telt is het kiezen van de juiste oplossing voor onze opdrachtgevers. Adobe heeft wat experimentele technologie online gezet, genaamd Wallaby. Het werkt momenteel alleen nog in WebKit-browsers als Safari, Chrome en natuurlijk de mobiele versie van Safari die je in iOS vindt. Wallaby vertaalt met behulp van jQuery de animatie naar HTML5 en zet vectorafbeeldingen om in SVG. ActionScript werkt nog niet – het is voorlopig alleen voor het omzetten van eenvoudige geanimeerde content.

01 Voorbereiding

Allereerst heb je natuurlijk Wallaby nodig. Bezoek de downloadpagina, accepteer de voorwaarden en download de gewenste versie. Het is een AIR-toepassing, dat heb je dus ook nodig. Open het installatiebestand en je bent klaar voor de start.

02 Tutorialbestanden

Download de tutorialbestanden en pak ze uit op je computer. Open in Flash ‘start.fla’ uit de map ‘start’. Je kunt ook alvast Wallaby opstarten, want we zullen het tijdens deze tutorial regelmatig gebruiken om tussenstappen te bekijken.

03 Titel animeren

We willen de kop vanuit de bovenkant van het scherm laten vallen. Selecteer dus frame 10 van laag 1 en sleep de kop boven het beeld uit. Klik met de rechter muisknop tussen frame 1 en 10 op de laag en selecteer in het menu ‘Add classic tween’ (Klassieke tween maken).

04 Tekst infaden

Selecteer frame 20 van laag 5 en voeg een keyframe (hoofdframe) toe. Selecteer frame 10 van deze laag en stel onder Properties (Eigenschappen) een ‘alpha’ in van 0%. Voeg wederom een klassieke tween toe. Dit samen zorgt voor de fade-in van de tekst in tien frames.

05 Test via Wallaby

Sla je Flash-bestand op en schakel naar Wallaby. Blader naar je ‘fla’ of sleep het rechtstreeks naar het venster. Klik op Convert en kies een locatie om het resultaat op te slaan. Je standaardbrowser zal de bestanden openen. Zorg ervoor dat je het resultaat in een WebKit-browser bekijkt, anders zie je niks.

06 Niet herhalen

De tekst verschijnt met een fade-in, maar blijft dit herhalen. Dat willen we niet. Je ziet nog wel meer gebeuren, maar dat pakken we straks aan. Ga terug naar je Flash-bestand en selecteer het laatste frame van laag 2. Open de ActionScript-editor en voeg een ‘stop();’-commando toe.

07 Nog eens testen

Wallaby kan ActionScript niet omzetten, maar kan herhalende animaties wel stoppen via stopcommando’s. Overschrijf de bestanden en je zult zien dat de tekst nu maar één keer animeert. Het kan zijn dat je de pagina eerst moet vernieuwen voordat je het ziet.

08 Bliksems

Dubbelklik op de bliksemschicht om een MovieClip te openen. Deze MovieClip blijft oneindig herhalen terwijl onze tijdlijn slechts één keer afspeelt. Voeg in de bliksemlaag per twee frames een keyframe toe en verwijder vervolgens de content om en om, zoals te zien is in het screenshot.

09 De vonk slaat over

Herhaal dit proces voor de laag ‘Spark’. Deze keer selecteer je de vonken, die verschijnen om en om. Vervolgens ga je naar Modify>Transform>Flip Horizontal (Wijzigen>Transformeren>Horizontaal spiegelen). Zo krijgen we wat variatie, terwijl we de bestandsgrootte gelijk houden. We gebruiken immers dezelfde SVG-afbeelding.

10 Tijd voor nog een test

Sla het fla-bestand weer op en test nogmaals via Wallaby. De bliksem zou nu moeten knipperen voordat de vonk overslaat naar de machine. We willen het metertje van de machine laten bewegen, dus gaan we terug naar Flash. Hier voegen we een keyframe toe aan de frames 13, 21, 24, 31 en 81 van de ‘Arm’-laag. Selecteer frame 24 en gebruik Transform (Transformeren) om de wijzer te roteren (zie afbeelding).

11 Roteer de rest

Selecteer frame 31 en roteer de wijzer naar rechts. Herhaal dit voor frame 13. Selecteer frame 13 en Shift+klik frame 80. Voeg nu – via de rechtermuisknop – een klassieke tween toe. Het draaipunt is de onderkant van de naald. Dit zal in HTML5 ook zo zijn.

12 Leidingen animeren

Sla alles gerust nog eens op en test het geheel om te zien of alles nog goed gaat. Dubbelklik nu op de MovieClip ‘machine’ en selecteer de gehele leiding die aan de linkerkant het laagste zit. We gaan dit als bewegingspad voor onze animatie gebruiken. Kopieer deze leiding en ga terug naar scene1, dubbelklik op de bliksem om de MovieClip ‘animation’ te openen.

13 Creëer het pad

Klik met de rechter muisknop op de laag ‘Bulge 1′ en kies ‘Add Classic Motion guide’ (Klassieke bewegingsgeleider). Voeg een keyframe toe aan de nieuwe laag op frame 35 en plak de gele lijn hier. Plaats deze over het origineel. Voeg een keyframe toe aan frame 100 van ‘Bulge 1′, verplaats de bal naar het einde van de lijn en voeg – net als eerder – een klassieke tween toe.

14 Testen maar

Een bewegingspad is een redelijk geavanceerd stukje animatie. Het is dus belangrijk om te controleren of alles wel goed wordt omgezet. Sla het geheel dus weer op en haal het door Wallaby. Je zult zien dat je animatie nog steeds perfect werkt in HTML5.

15 Nog een keertje

Selecteer de laag ‘Bulge 2’ en voeg weer een (klassieke) bewegingsgeleider toe door op de rechter muisknop te klikken. Voeg op frame 41 van deze laag een keyframe toe. Dubbelklik nu op de MovieClip ‘machine’ in de bibliotheek. Deze keer selecteer en kopieer je de andere leiding.

16 Plakken

Ga terug naar scene1 en dubbelklik op de bliksem om de MovieClip ‘animation’ te openen. Plak de tweede leiding in de geleidelaag en positioneer deze over het origineel. Voeg een keyframe toe op frame 105 in de laag ‘Bulge 2′. Verplaats de bal wederom naar het einde van de lijn en voeg een klassieke tween toe.

17 Uitpuilende ogen

Selecteer frame 110 van de laag ‘Eyes’. Sleep de ogen vanuit de bibliotheek op je stage. Stel de grootte in op 118% (via Transformeren). Plaats de ogen nu over de originele ogen, maar dan iets omlaag. Zo lijkt het net of de ogen uitpuilen op het moment dat de leiding het hoofd raakt.

18 Verander de mond

Selecteer frame 132 in de laag ‘Mouth’. Pak het penseel en kleur de mond in de huidskleur van het mannetje. Met het pipet kun je die kleur uit de MovieClip ‘man’ halen. Teken nu met het Ovaal een open mond, zoals je dat hier in de afbeelding kunt zien.

19 Converteer

Selecteer de mond en Shift+klik het getekende gebied om beiden te selecteren. Via het menu Wijzigen converteer je dit naar een symbool met de naam ‘mouth’. Maak hier een MovieClip van en klik op OK. Sla het op en test weer via Wallaby.

20 Goed idee

Selecteer frame 132 in de laag ‘Bulb’. Sleep de gloeilamp uit de bibliotheek op je stage en verklein deze naar 30%. Draai hem meteen ook dertig graden naar rechts voor meer dynamiek. Positioneer hem vervolgens net zoals je in de afbeelding kunt zien.

21 Opslaan en testen

We hebben nu alle content toegevoegd. Tijd dus om op te slaan en het fla-bestand nog één keer door Wallaby te halen. Je kunt nu de definitieve animatie bekijken. De tekst komt eenmalig in beeld vallen en de andere onderdelen blijven herhalen.