Alles wat je moet weten over Flash

Veel vormgevers en illustratoren ontwerpen uitsluitend voor drukwerk. De meesten zullen vroeg of laat een verzoek krijgen om werk geschikt te maken voor een interactieve toepassing in Flash. Ze kunnen dan twee dingen doen: zelf aan de slag gaan met Flash of het uitbesteden aan iemand die met Flash vertrouwd is. In beide gevallen doet de vormgever er verstandig aan rekening te houden met Flash.

Als Flashontwikkelaar maak ik regelmatig gebruik van illustratoren. Bij de keuze voor een illustrator let ik op drie criteria in volgorde van belang: is de stijl van de illustrator geschikt voor dit doel, heeft de illustrator ervaring met Flash en is de prijs-kwaliteitverhouding goed?
Ik kies dus liever voor een illustrator die wel eens een animatie heeft gemaakt in Flash dan voor iemand die alleen voor drukwerk heeft geïllustreerd. Een tekening die geanimeerd moet worden op een beeldscherm, moet namelijk aan totaal andere voorwaarden voldoen dan wanneer ze voor drukwerk wordt gebruikt. Een illustratie gemaakt door een illustrator die een bestand verkeerd aanlevert, kost tijd en dus geld. Mijn advies aan alle illustratoren is dan ook: maak tenminste ééns in je leven een eenvoudige animatie in Flash.

Van print naar scherm
Scans en afbeeldingen die zijn omgezet van CYMK naar RGB zien er op het beeldscherm vaak wat flets uit, omdat hierin geen beeldschermkleuren voorkomen die buiten het CYMK-gamma vallen. Bij het selecteren van een kleur in Photoshop wordt er met een ‘out of gamut’-waarschuwing aangegeven welke kleuren wel voor het beeldscherm maar niet voor drukwerk geschikt zijn, zoals zuiver blauw (R0, G0, B100). Hou deze regels in acht:
* Gebruik digitale foto’s die nooit zijn omgezet naar CYMK.
* Vermijd subtiele kleurdetails en ruis.
* Vergelijk de afbeelding op verschillende beeldschermen.

Teken met de pen
Flash heeft een voorkeur voor vectoren. Wie vertrouwd is met de pen van Illustrator of Photoshop, kan overwegen om direct in Flash te tekenen. De pen van Flash CS3 is immers praktisch identiek aan die van Illustrator en Photoshop. Illustratoren die zweren bij Photoshop, kunnen ook gewoon met hun favoriete programma blijven werken. Vectormaskers en andere pentekeningen in Photoshop CS3 kunnen probleemloos worden geïmporteerd in Flash CS3.
* Gebruik zoveel mogelijk vectoren.

Fonts
Flash is in staat om tekstlagen van Photoshop en tekstvelden van Illustrator te importeren, maar kan geen teksten via een curve laten lopen. Dergelijke teksten komen er daarom in Flash uit te zien als een reeks tekstveldjes ter grootte van één letter die een niet meer zichtbare curve volgen. Ze zijn daardoor niet meer eenvoudig te wijzigen. Zet letters niet om naar outlines of bitmaps, maar bewaar het document met bewerkbare tekstvelden en geef het font mee aan de Flashdeveloper. Tekstvelden met fonts kleiner dan 12 punts kunnen beter niet schuin worden gezet, het is ook beter om niet al te kleine letters via een curve te laten lopen. Adobe Illustrator biedt wat betreft tekstondersteuning voor Flash meer dan Adobe Photoshop. Pas je veel typografie toe, gebruik dan dus bij voorkeur Illustrator.
* Hou fonts kleiner dan 12 punts horizontaal.
* Hou de tekstlagen intact.
* Pas geen vervormingen toe.
* Vermijd het gebruik van curves.
* Lever de gebruikte fonts mee.
* Als standaardfonts worden gebruikt (Arial, Trebuchet, Verdana), geef dit dan in Illustrator aan via ‘Flashtext > dynamic text > device fonts.

Van Illustrator naar Flash
Voor een Flashdesigner is het van groot belang dat de bestandsgrootte van het uiteindelijke bestand kan worden teruggebracht naar het minimaal mogelijke. Een van de meest gebruikte methodes hierbij is het hergebruiken van graphics. Dit betekent in de praktijk: teken een cirkel, bewaar deze als losse graphic en bouw hiervan door middel van kopiëren en plakken een druiventros. Voordeel van deze tekenmethode is dat alle losse onderdelen van de druiventros nog geanimeerd kunnen worden en dat de bestandsgrootte van deze druiventros aanzienlijk kleiner is dan eentje die met de hand wordt getekend. Exact dezelfde methode van hergebruiken van graphics is ook aanwezig in Adobe Illustrator (vanaf versie 10). Teken een cirkel in Illustrator, open het palet Symbols en bewaar de cirkel als ‘symbol’. Met de ‘Symbol sprayer tool’ en aanverwante tools kun je dan eenvoudig een druiventros maken. Illustraties die op deze wijze worden getekend, kunnen perfect worden geïmporteerd in Flash. De bibliotheek van Flash zal in dit geval ook één cirkel bevatten die meermalen is hergebruikt in een druiventros. Zelfs de naam die in Illustrator is gegeven aan dit ‘symbol’, zal zichtbaar zijn in Flash.
* Maak uitvoerig gebruik van Symbols.
* Geef symbols unieke, beschrijvende namen.

Filters
Met Flash kunnen fonts en symbolen met behulp van een paar eenvoudige filters van uiterlijk veranderen. Deze filtereffecten beperken zich tot dropshadow, blur, glow en bevel. Het mooie aan deze filters is dat ze vectorafbeeldingen een ‘zacht’ uiterlijk kunnen geven zonder dat de bestandsgrootte groter wordt. Met andere woorden: het kan geen kwaad om de volgende filters toe te passen op teksten of symbols: Filter > Stylize > Dropshadow, Effect > Blur > Gaussian Blur of Effect > Stylize > Glow. Alleen deze drie filters kunnen naar Flash verhuizen zonder dat daarbij de afbeelding werkelijk veel zwaarder wordt. Vermijd dus het gebruik van andere filters, maar maak dankbaar gebruik van deze mogelijkheid. Bedenk wel dat het filter ‘gaussian blur’ van Illustrator niet exact hetzelfde resultaat zal geven in Flash CS3.
Je zou verwachten dat de lagenfilters van Photoshop op dezelfde manier kunnen worden geëxporteerd naar Flash. Dat is helaas niet zo. Schaduwen worden in Flash als aparte transparante PNG-bestanden bewaard. Wat betreft uiterlijk ziet het er allemaal hetzelfde uit, maar de bestandsgrootte zal hierdoor drastisch toenemen. Vermijd dus in Photoshop het gebruik van filters.
* Gebruik alleen de standaardfilters in Illustrator, vermijd zoveel mogelijk de rest.

Blend modes
In Flash CS3 kan een movieclip zich vermengen met de onderliggende afbeeldingen met behulp van dertien verschillende ‘blends’. In Adobe Illustrator is hiervoor het equivalent ‘blend modes’, te vinden in het Transparancy-paneel. De opties die hier worden gegeven, waaronder ‘darken’ of ‘hard light’, zijn met uitzondering van ‘exclusion’ en ‘luminosity’ dezelfde als die in Flash en kunnen dus probleemloos worden gebruikt. Verwar ‘blend modes’ niet met de functie ‘blends’ in Illustrator, die juist beter vermeden kan worden. In Photoshop kennen we nog veel meer ‘blend modes’ die hier via het lagenpalet in plaats van per object toegepast kunnen worden. Ook hier zullen alleen de in Flash voorkomende blend modes kunnen worden toegepast in Flash. De rest zal genegeerd worden.
* Gebruik alleen de standaard blend modes.

Van Photoshop naar Flash
Bestanden die in Photoshop CS3 bewaard worden, krijgen bij het bewaren een venster met de vraag of ze de optie ‘Maximize compatibility’ willen gebruiken. Kies hier altijd voor ‘ja’, want hiermee kan een Photoshop-document zo goed mogelijk worden geïmporteerd in Flash. Illustratoren die met Photoshop werken, doen er goed aan, als ze de relatie met een Flasher goed willen houden, om de volgende zaken in de gaten te houden:
* Iedere tekening die je maakt, dient op een aparte laag te worden getekend. Dus geen cirkeltje linksboven en een vierkantje rechtsonder op dezelfde laag. Flash maakt hier één grote afbeelding van in plaats van twee.
* Geef lagen een unieke, beschrijvende naam. Lagen kunnen als movieclips in Flash worden geïmporteerd.
* Plaats ieder deel dat los moet kunnen animeren, op een aparte laag.
* Probeer per laag zo min mogelijk kleuren te gebruiken. Iedere laag kan als aparte Gif worden geëxporteerd, wat in het geval van weinig kleurgebruik efficiënter kan zijn dan een JPG of PNG.
* Gebruik liever geen filters.
* Hou de teksten op tekstlagen intact.
* Vervorm teksten niet met behulp van ‘warp text’; dergelijke teksten kunnen alleen als een bitmapafbeelding worden geïmporteerd in Flash.

Regels volgen
De koudwatervrees die illustratoren hebben om direct in Flash te tekenen, is begrijpelijk. Flash is een programma dat sterk afwijkt van Illustrator en Photoshop en kent tegenwoordig een behoorlijk hoge instapdrempel. Adobe heeft echter in Flash CS3 zijn best gedaan om de interface zo veel mogelijk te laten overeenkomen met Illustrator en Photoshop. De verbeterde wijze van importeren van Illustrator- en Photoshop-bestanden in Flash CS3 maakt het echter niet langer noodzakelijk om het artwork direct in Flash te realiseren, zolang bovenstaande regels maar in acht worden genomen.