2. Bestandsformaten

2.1 Inleiding

2.1.1 .fla en .swf bestanden

Op het moment dat je aan het werk bent met een animatie en het werk opslaat, dan wordt het opgeslagen in een .fla bestand. In dit bestand worden alle scenes, libraries, frames en layers opgeslagen. Als je weer verder wilt werken heb je alle componenten tot je beschikking. Als je de film wilt publiceren op het internet dan worden alleen de gebruikte onderdelen uit de libraries opgeslagen en worden alle layers gecombineerd tot één layer met één timeline. Op die manier is het resulterende .swf bestand veel kleiner, maar kan niet meer bewerkt worden. Dit exporteren is in principe een onomkeerbaar proces. Het is dan ook niet mogelijk om een Flash bestand van Internet te halen om het verder te bewerken tot je eigen werk, zoals dat wel kan met HTML pagina's of met JavaScript code. Er zijn wel bepaalde utilities, de zogenaamde swiffers, te vinden op Internet waarmee je .swf bestanden kunt omzetten naar .fla files.

2.1.2 bestandsformaten

De wijze waarop informatie wordt bewaard in een bestand noemen we een bestandsformaat. Ieder programma heeft in principe zijn eigen bestandsformaat. De bestandsformaten .swf en .fla die we net zijn tegengekomen zijn dus voorbeelden van bestandsformaten in Flash. Om ervoor te zorgen dat een bestand dat is gemaakt in een specifiek programma ook in andere programma's geopend kan worden, kunnen de meeste programma's ook andere formaten herkennen en omzetten, zodat de informatie uit de bestanden kan worden bewerkt. Dit proces noem je het importeren van bestanden.

Een reden om bestanden te importeren uit andere programma's is dat ieder programma zijn eigen specialiteiten heeft; sommige bewerkingen kun je gewoon makkelijker of sneller met een ander programma doen. Zo kun je met Flash animaties maken en hiervoor heeft het tools voor het hele proces van A tot Z. Vanaf het tekenen van afbeeldingen op de frames tot aan het combineren van de frames tot animaties en vanaf het toevoegen van geluid en interactiviteit tot aan het publiceren om te worden getoond aan het publiek, met Flash kan het allemaal.

Er zijn echter ook zaken die je met Flash niet of minder goed kunt doen dan met een ander programma. Met Flash kun je bijvoorbeeld geen muziek of geluid maken en het bewerken van geluid kan slechts zeer beperkt. Ook het maken van driedimensionale beelden is niet mogelijk of heel moeilijk, en de mogelijkheden om afbeeldingen te bewerken schieten soms tekort doordat het programma gebruik maakt van vector georiënteerde technieken. Over deze techniek wordt later in dit hoofdstuk meer verteld.

Voor het maken van geluid, drie dimensionale beelden en bitmap achtige bewerkingen maak je daarom gebruik van andere programma's. Je kunt deze afbeeldingen en geluiden vervolgens importeren in Flash en verder verwerken in de animaties.

De animaties en afbeeldingen die je in Flash hebt gemaakt kunnen vervolgens weer worden geëxporteerd naar meerdere bestandsformaten, afhankelijk van het doel. Meestal wil je de animatie beschikbaar maken voor het internet. Het moet dan worden geëxporteerd als .swf bestand. Dit wordt verder besproken in het hoofdstuk over publiceren. Je kunt ook een afbeelding uit Flash exporteren als JPEG of een animatie exporteren als GIF. Deze exportmogelijkheden worden uitgelegd in dit hoofdstuk.

2.2 Vector versus bitmap

Er bestaan twee gangbare technieken waarmee beeldbewerkingsprogramma's werken: vectorgeörienteerd en pixelgeörienteerd (ook wel bitmap genoemd).

2.2.1 Vector georiënteerd

In Flash bestaat een lijn uit een aantal punten die met elkaar worden verbonden door mathematisch beschreven lijnen. Alleen de coördinaten van de punten en de mathematische formule die de punten verbindt hoeven door het programma te worden vastgelegd. Voor kleurvlakken hoeven dus alleen de coördinaten, de lijnen en de kleur te worden onthouden. Voor een heel groot vierkant moet er dus evenveel informatie worden vastgelegd als voor een heel klein vierkant. Hiermee wordt gelijk een groot voordeel van deze techniek duidelijk. Er is weinig informatie nodig om een afbeelding vast te leggen en de bestanden zijn daardoor kleiner dan met bitmap technieken.

Deze vector georiënteerde techniek is bijzonder geschikt voor het maken van animaties, zoals je kunt zien bij shape tweens en motion tweens. Alleen het beginframe en het eindframe hoeven te worden vastgelegd en Flash berekent de tussenliggende frames zelf. Naast kleinere bestanden biedt de techniek ook nog veel gemak in het gebruik.

Voorbeelden van programma's die deze technieken gebruiken zijn: Coreldraw, Adobe Illustrator en Macromedia Freehand

2.2.2 Bitmap georiënteerd

Een afbeelding in een bitmap georiënteerd programma heeft een afmeting van een bepaald aantal pixels hoog en breed. Voor iedere pixel in het raster is vastgelegd welke kleurwaarde het heeft. Alle pixels samen vormen een afbeelding. Programma's als Photoshop werken op deze manier, en doordat het mogelijk is de kleur voor iedere pixel afzonderlijk te wijzigen kun je foto's op een niet van echt te onderscheiden manier bewerken. Afbeeldingen waarbij alleen een grijswaarde per pixel hoeft te worden onthouden nemen daardoor een stuk minder ruimte in dan afbeeldingen waarbij kleuren per pixel moeten worden vastgelegd. Verder neemt de bestandsgrootte kwadratisch toe met de afmetingen van de afbeelding.

Ook kun je pixel-plaatjes niet ongestraft uitvergroten. Je hebt nu eenmaal een vastgesteld aantal pixels in je foto. Als je de foto groter wilt afbeelden moet je ofwel de pixels groter afbeelden, waardoor je die beruchte karteltjes krijgt, ofwel je moet er pixels bij (laten) verzinnen. Dit laatste kan worden gedaan in beeldbewerkingsoftware als Photoshop. Het programma gaat dan zelf proberen om de bestaande beeldinformatie op te delen in een fijnere matrix. Het zal duidelijk zijn dat dit slechts een beperkte verbetering op kan leveren aangezien het programma de pixels erbij verzint.

Flash werkt voornamelijk met vector technieken, maar gebruikt ook een aantal technieken die uit de bitmap richting komen. Je kunt bijvoorbeeld geleidelijke kleurovergangen en verlooptinten maken en je kunt kleurvlakken (semi) transparant maken. Bovendien is het mogelijk om met bitmap vullingen vlakken in te kleuren. Het wordt verwacht dat in de toekomstige versies van Flash vector- en pixeloriëntatie dichter bij elkaar komen.

2.3 Bestandscompressie

Zoals we hebben gezien is het bij bitmap bestanden en geluidsbestanden vaak een probleem dat ze erg groot worden. Daarom zijn er een aantal technieken ontwikkeld waarmee de omvang van de bestanden door een slimme manier van opslaan enorm kan worden teruggebracht. Er wordt daarbij iets van de kwaliteit ingeleverd, maar dat is meestal niet echt merkbaar. Er is een trade off tussen kwaliteit en grootte en het is de kunst hierin de juiste balans te vinden. De meest bekende voorbeelden van beeldcompressie zijn GIF en JPEG. Het meest bekende voorbeeld van een ongecomprimeerd formaat is TIFF. Een voorbeeld van een gecomprimeerd geluidsbestand is MP3.

Opmerking: in het Engels heet een pixel-plaatje een Œbitmap'. In Microsoft-terminologie is een bitmap (.jpg) een bepaald bestandsformaat, vergelijkbaar met TIFF. In de grafische wereld is een bitmap echter een bepaald soort pixelplaatje dat opgebouwd is uit zuiver zwarte of witte pixels ­ dit in tegenstelling tot de miljoenen kleurmogelijkheden die TIFF en JPEG bieden. Een tussenvariant is GIF, want dit bestandsformaat kan maximaal 256 kleurvarianten bevatten.

2.4 Importeren

2.4.1 Beeld importeren

Je kunt in Flash vele soorten bestandsformaten importeren. Pixel-bestanden en geluiden worden direct opgenomen in de library, en zijn dan als symbool op verschillende manieren te gebruiken in je Flashfilm.

JPEG importeren

1. Kies file > import
2. Zoek het JPEG-plaatje op
3. Klik open (Windows) of add en dan import (mac)
4. Het plaatje is nu zichtbaar op de stage en is bovendien meteen toegevoegd aan de library.
5. Je kunt het geïmporteerde JPEG-plaatje nu gebruiken als vulling, maar ook de foto animeren.

GIF importeren

1. Zoek het GIF-plaatje op
2. Klik op Test movie
3. Klik open (Windows) of add en dan import (mac)
4. Als je een animated GIF importeert, dan worden alle beelden waaruit het is opgebouwd apart geïmporteerd. De timeline wordt automatisch aangepast zodat de losse plaatjes elkaar netjes opvolgen. Je kunt het geïmporteerde JPEG-plaatje nu gebruiken als vulling, maar ook de foto animeren. Opmerking: Flash 4 had moeite met transparante GIF's. Dit is verholpen in Flash 5.

In principe verandert Flash niets aan JPEG-plaatjes die je importeert, omdat het programma er vanuit gaat dat het reeds goed was voorbereid. Maar als je de compressie wilt aanpassen dan kun je dat per plaatje instellen. Opmerking: je kunt ook JPEG-compressie aangeven bij de publish-settings; dit heeft echter geen invloed op geïmporteerde JPEGs.

properties icoon library venster

bitmap properties

JPEG-compressie aanpassen

1. Klik op het properties icoon onderaan het library venster.
2. Klik op het properties icoon onderaan het library venster.
3. Open de library
4. Selecteer het gewenste plaatje
5. Klik onderaan op het icoon voor properties
6. Kies in het venster dat verschijnt bij compressie:
7. Selecteer Use imported data als je wilt voorkomen dat Flash iets aan de JPEG doet.
8. Deselecteer Use imported data als je de compressie in Flash wilt aanpassen. 100 staat voor beste kwaliteit, 0 voor slechtste kwaliteit.
9. Kies Test om te zien wat het effect is; de afbeelding in je werkbestand wordt pas gecomprimeerd bij het publiceren.
10. Klik OK om de parameter vast te leggen.

Vectorbestanden worden gewoon op de stage geplaatst en kunnen worden aangepast met de tools van Flash. Het importeren van vector bestanden heeft als voordeel dat je meer controle hebt over de elementen en dat de Flashfilm kleiner blijft. De twee meest gebruikte vector-tekenpakketten zijn Macromedia Freehand en Adobe Illustrator. Veel ontwerpers uit de grafische industrie zullen hiermee werken en daarom zijn logo's en complexere tekeningen vaak in één van deze twee programma's gemaakt. Een illustrator-bestand kan rechtstreeks worden geïmporteerd. De layers blijven behouden.

Vectorbestanden importeren

Een freehand-bestand geeft echter extra opties bij het importeren.

Import freehand vector bestand

Je kunt aangeven hoe je de pagina's en layers in het bestand wilt importeren in Flash. Bovendien kun je aangeven welke pagina's je wilt importeren.

Flash heeft een speciale functie om pixelbestanden om te zetten in vectoren. Flash gaat dan kijken naar de contrastlijnen in de foto en tekent daarmee kleurvlakken die corresponderen met de pixelkleuren. Dit kan mooie grafische effecten opleveren en als je het goed doet wordt het bestand (veel) kleiner dan wanneer de oorspronkelijke foto was gebruikt.

Trace bitmap

Pixelplaatje omzetten naar vectoren

1. Maak een nieuwe layer aan
2. Kies file> import
3. Zoek het illustrator-bestand op
4. Klik open (Windows) of add en dan import (mac)
5. Kies modify> trace bitmap
6. Voer de opties in: color treshold: Flash zoekt naar contrastlijnen in het RGB-plaatje. Als de naastliggende pixels onder de color threshold liggen (de drempelwaarde), dan worden die pixels gezien alsof ze dezelfde kleur hebben. Daarom geeft een lage threshold meer kleuren en dus meer vlakken en fijnere tekening. (bijv: 40) Minimum area: aantal omringende pixels die mee worden genomen bij het zoeken naar de drempelwaarden (bijv: 25). Curve fit: bepaalt hoe vloeiend de bochten worden gemaakt (bijv: smooth) Bepaalt of scherpe hoeken behouden blijven of vloeiend worden gemaakt. (bijv: few corners)
7. Klik OK
8. Nu heb je een vectortekening en is het plaatje weggehaald (het plaatje is nog wel beschikbaar in de library). Let op: alle onderdelen van de vectortekening zijn nu geselecteerd.
9. Kies motief> group. Mocht je per ongeluk de vectoren hebben gedeselecteerd, dan moet je eerst weer alles selecteren door op de nieuwe layer te klikken in het layermenu. Zorg dat andere layers of elementen niet zijn geselecteerd (deselecteren kan met shift-klik)

Je kunt ook een pixelplaatje gebruiken als vulling van een object. Op deze manier kun je levensechte structuren gebruiken in je vectortekening.

Illustratie cirkel met bitmap vulling

Je moet eerst een plaatje hebben geïmporteerd in je film voordat je een bitmapvulling kunt toepassen. Flash gebruikt namelijk plaatjes uit de library voor deze functie.

Pixelplaatje als vulling (bitmap-vulling)

1. Selecteer of maak een vorm (bijv: een cirkel).
2. Open het fill-palet (window> panels> fill).
3. Kies 'bitmap' in het palet. Je ziet nu thumbnails van de beschikbare plaatjes.
4. Kies het gewenste plaatje. Alle volgende vormen die je tekent zullen ook deze vulling hebben. Als het figuur dat je tekent groter is dan de bitmap dan wordt deze herhaald.

Nu zal de bitmap-vulling lang niet altijd in één keer op de goede manier in het vectorobject verschijnen. Bovendien herhaalt Flash het plaatje als het te klein is om het hele object te vullen. Gelukkig kun je de vulling eenvoudig aanpassen. Als er iets in Flash moeilijk te vinden is, dan zijn het wel de gereedschappen om reeds gemaakte vullingen aan te passen! Als je het eenmaal weet, is het erg eenvoudig.

Transform fill bitmap

Aanpassen van een bitmap-vulling

1. Selecteer de emmer-tool.
2. Selecteer in het tools-palet onderaan de Transform Fill Modifier. Het is actief als het een wit knopje wordt.
3. Klik nu de bitmapvulling aan. Je ziet dat er een kader wordt getrokken om het plaatje dat je hebt aangeklikt.
4. Pas nu de vulling aan: Trek aan de VIERKANTE hoekpunten om te schalen. Trek aan de ronde hoekpunten om te draaien. Trek aan de ronde middellijnspunten om Å’schuin te trekken' (skew) Trek aan het middelpunt als je de positie wilt veranderen. Aangezien het plaatje zich herhaalt, veranderen alle andere zichtbare plaatjes op dezelfde manier mee.

2.4.2 Importformaten

Je kunt in Flash vele verschillende bestandsformaten importeren. Er zijn kleine verschillen tussen de mogelijkheden op het platform van de PC en de Macintosh. Op een Windows systeem hangt het ook af of je QuickTime hebt geïnstalleerd

2.4.3 Geluid importeren

Het toevoegen van geluid brengt een animatie tot leven en het is mooi dat je dat met Flash kunt doen. Helaas zijn de mogelijkheden om geluid te bewerken zijn in Flash nog zeer beperkt. Je kunt inderdaad het volume, het soundpoint en de balans aanpassen, maar het daadwerkelijk bewerken van het geluid (toonhoogte, muziek maken) is niet mogelijk. Daarom maak je muziek en geluid in andere programma's en importeer je dit vervolgens in Flash.

Een andere voor de hand liggende manier om aan geluid te komen is via internet (MP3-tjes) of van speciale sample-CD's met opgenomen geluiden, stemmen, enzovoorts.

Geluid maakt een Flashfilm jammer genoeg heel snel zwaar. Dit betekent dat je veel gebruik moet maken van trucjes zoals herhalen, monogeluid, sterke MP3-compressie of streaming. Als je de film exporteert geef je aan op welke manier het geluid bij de gebruiker terechtkomt. Meer informatie over geluid toepassen en publiceren vind je in het hoofdstuk geluid. p-best8 Geluid importeren

Je krijgt nu een visualisatie van het geluid te zien in de timeline. Je kunt het geluid verder bewerken met behulp van het palet geluid (window > panels> sound). Meer over het werken met geluid in het hoofdstuk over geluid.

Flash kan met verschillende geluidsformaten overweg

En als je QuickTime hebt geïnstalleerd kun je deze bestandsformaten ook inlezen:

2.5 Exporteren naar verschillende bestandsformaten

Hoe je een Flashfilm moet exporteren voor het internet, staat beschreven in het hoofdstuk publiceren. Soms wil je echter een bepaald beeld uit je film laten zien, of wil je met dit beeld verder werken in een ander programma.

Een JPEG exporteren uit een bepaald frame

1. Selecteer het frame dat je wilt exporteren.
2. Kies file> export image.
3. Selecteer JPEG uit de lijst bestandsformaten.
4. Klik op OK.
5. Kies de kwaliteit en de maat van de JPEG. Kies progressive om het beeld gefaseerd van grof naar fijn op te bouwen.

Export movie als JPG sequence

Het exporteren van alle frames als serie JPEG's

1. Kies file> export movie.
2. Selecteer JPEG sequence uit de lijst bestandsformaten.
3. Klik op OK.
4. Kies de kwaliteit en de maat van de JPEG. Kies progressive om het beeld gefaseerd van grof naar fijn op te bouwen.
5. Klik weer op OK.

2.5.1 Gif banner

Je kunt Flash ook gebruiken om een bewegend filmpje in GIF-formaat te maken. Je gebruikt dan de gemakken van Flash om een pixel-gebaseerde animatie te maken. Elke browser kan deze animated GIF weergeven; je kunt er alleen geen interactiviteit aan toevoegen.

Het tabblad GIF van de publish settings

Procedure gif banner maken

1. Kies file> publish settings.
2. Deselecteer op het eerste tabblad alle bestandsformaten behalve 'GIF'; het GIF-tabblad verschijnt nu.
3. Selecteer het GIF tabblad.
4. Kies animated in plaats van static om een animated GIF te maken.
5. Bekijk de opties:
optimise colors haalt ongebruikte kleuren weg; aangevinkt interlace om het beeld gefaseerd op te laten komen. Niet aangevinkt (werkt niet mooi bij animated GIF) smooth activeert anti-aliasing. Aangevinkt. Het GIF-bestand wordt er groter door. Dither betekent dat kleuren die niet direct beschikbaar zijn, worden gesimuleerd door een paar andere kleuren dicht bij elkaar te zetten (om en om een rode en een blauwe pixel lijkt paars). Dit is lleen aan te raden als er heel veel verschillende kleuren in het bestand zitten. Anders niet aangevinkt. remove gradients haalt verlooptinten uit het beeld; het GIF-bestandsformaat kan hier heel slecht mee overweg. Maar aangezien je geen idee hebt hoe je werk eruit zal komen te zien, is dit een optie die beter niet aangevinkt kan blijven.
6. Kies bij transparency wat er transparant moet worden:
opaque geeft de achtergrond een volle kleur, transparent maakt de achtergrondkleur doorzichtig, Alpha kijkt naar de Alphawaarden van de objecten in de film. Je geeft met een getal aan wat de drempel is om geheel transparant te maken dan wel volle kleur. Als je 50% Alpha als drempel wilt, geef dan 128 in als getal. (GIF ondersteunt geen halve transparantie, als je dat nodig hebt kies het PNG-bestandsformaat). Om toch de goede kleur in de GIF te krijgen is het beter om bij palette type adaptieve te kiezen. De computer zoekt nu naar de 255 kleuren die het best passen bij jouw beeld. Vroeger koos men altijd voor websafe kleuren, maar dan wordt een voorgedefinieerd palet gebruikt dat meestal niet erg goed aansluit; bovendien is het verouderd nu alle beeldschermen wel duizenden of miljoenen kleuren kunnen weergeven.
7. Kies OK om de instellingen te bevestigen, of publiceer direct door op Publish te klikken. Als je klikt op Publish, komt het bestand in dezelfde map te staan als het .fla-bestand waarmee je al aan het werk was. Opmerking: je kunt ook kiezen om een GIF te exporteren via file>export image; je hebt dan echter minder mogelijkheden. Als je kiest voor GIF-sequence in lijst met bestandsformaten, krijg je niet een animated GIF maar een serie 'gewone' GIF's.

2.5.2 Flash projector

Behalve exporteren voor het web kan het werkbestand worden geëxporteerd naar een op zichzelf staand programma. Je kunt het dan op een cd of floppy zetten of e-mailen. De ontvanger hoeft dan niet eens een Flash player te hebben.

Exporteren naar de Flash projector

1. Kies file> publish settings.
2. Deselecteer op het eerste tabblad alle bestandsformaten behalve 'Windows projector' en 'Macintosh projector'; er is geen tabblad voor de projector.
3. Kies OK om de instellingen te bevestigen, of publiceer direct door op Publish te klikken. Als je klikt op Publish, komt het bestand in dezelfde map te staan als het .fla-bestand waarmee je al aan het werk was.

2.5.3 Flash Quicktime movie en Realplayer

Ten slotte is het ook mogelijk om de vectorgeoriënteerde Flashfilm te exporteren als een pixelgeoriënteerde videofilm. De videofilm is vele malen groter dan de .SWF-film, de kwaliteit is matig en de meeste interactiviteit komt te vervallen. Het wordt dan ook zelden gebruikt. Het wordt dan ook niet behandeld in deze cursus.