FLASH MX lessen. Het begin

FLASH M X lessen Het begin

VOORWOORD Beste leerling/student, Dit lesmateriaal is samengesteld uit verschillende bronnen van internet. De sites die hieronder vermeld staan kun je raadplegen als je meer informatie wilt. Ook zijn er bij Bewired verschillende video’s te bekijken die je stapsgewijs door het lesmateriaal heen kunnen helpen. Door de dikgedrukte woorden aan te klikken in dit online document kom je bij de gekozen internet pagina terecht. De lessen van het St. Jozef college laten ook Flash voorbeelden van alle lessen zien. Verder zijn er veel meer lessen die je kunt maken om te oefenen, dus kijk dus ook even bij deze site. Je bent verder vrij om dit document op een USB stick te zetten of naar je mail toe te sturen voor eigen gebruik. Ook mag je het uitprinten bij je thuis. Wel vraag ik je om eerst even te melden als je dit van plan bent. ONTHOU WEL!!: De copyright van dit stuk ligt bij de gemaakte auteurs en dit betekent dat je dit document niet mag wijzigen . Linda Pieke Docent Multimedia

2

DE SITES http://www.sintjozefbrugge.be/flash/index2.htm

Voor alle online lessen die in dit lesmateriaal vermeld staan. http://www.bewired.nl/

Voor de meeste theorie die in dit lesmateriaal vermeld staan en verder online video’s (!) die je stapsgewijs door de les heen helpen.

3

INHOUD: •

Flash algemeen

•

De Flash ontwikkelomgeving o Het werkgebied o Algemene instellingen o De tijdslijn o De Property Inspector o De Toolbox o Layers o Basisbewerkingen Layers o Frames o Keyframes

•

Movie properties o Test movie o Movie opslaan

•

Tekenen in Flash o Vectoren o Lijnen o Vlakken o Groeperen o Kleuren o Kleurenpalet

•

Symbolen o Graphic Symbol o Movie Clip Symbol o Button Symbol o Symbols versus instance o Library o Instance op de stage plaatsen o Symbols editen o Instance properties wijzigen o Kleureffect veranderen o Buttons o Oefening 1: Button maken

•

Onion o o o

•

Tweening o Motion tween o Oefening 1: Motion tween o Oefening 2: Een symbol roteren en verplaatsen o Shape tween o Oefening 3: Shape tween/ morphing o Oefening 4: Een bal laten stuiteren/ easing o Oefening 5: Object langs een lijn laten bewegen o Shape hints

•

Tekst invoegen o Static tekst

skin Onion Skinning Onion Outline Edit multiple frames

4

o o o o o o o

Dynamic tekst Input tekst Break Apart Spelling check Oefening 1: veranderen van kleur Oefening 2: Roteren en verplaatsen Oefening 3: Fade in, fade out

•

Afbeeldingen invoegen o JPEG o PNG/GIF o Trace Bitmap o Oefening 1: Masking

•

Actionscript o Oefening 1: Button met een hyperlink o Oefening 2: Button voor e-mail o Oefening 3: Geluid toevoegen

•

Overige bewerkingen o Distributie naar lagen

•

Movie publishing o Publish Settings o HTML en Flash

•

Praktijkopdracht: Basis website

5

Flash algemeen Flash is een animatie programma en heeft de extensie *fla. Flash files die gebruikt worden op websites hebben de extensie *.swf. Dit is het bestandsformaat van Macromedia dat herkend wordt door alle belangrijke browsers (Internet Explorer, Netscape, Mozilla etc.). Het principe van Flash is simpel: de animatie wordt (zoals lijnen en vlakken), afbeeldingen of en plaatsen. Een fram e is een stilstaand beeldje. Door elkaar te zetten, krijg je een animatie, net als bij animaties ook wel 'movies' worden genoemd.

gestart door vectoren video in een frame te meerdere frames achter film. Vandaar dat flash

Op dit moment kan een Flash film afgespeeld worden met Flash player 9. Deze player staat niet altijd standaard op je computer. Als je een oudere browser gebruikt moet je soms een recente versie van Flash player downloaden alvorens je de Flash film kan bekijken. Maar 98% procent van de surfers op internet heeft een Flash player op de computer staan. Het voordeel van Flash ten opzichte van HTML is dat er veel meer mogelijk is als je een animatierijke en interactieve website wilt maken. Het principe is "WYSIWYG" (what you see is what you get). Dus hetgeen je maakt met Flash ziet ook zo uit als je de film op internet zet. Dat wil met HTML (veel programmeerwerk) nog wel eens anders zijn. De taal die gebruikt wordt in Flash heet actionscript. Dit is een scripttaal die voor het maken van simpele animaties zeer goed te begrijpen is. Voor ingewikkelde applicaties is het niet het meest vriendelijke script om te gebruiken. De laatste Flash versie is Flash 8 (geïntroduceerd medio augustus 2005). De meeste mensen maken gebruik van Flash MX of Flash MX 2004. Deze laatste versie wordt ook gebruikt in deze tutorials.

6

De Flash MX ontwikkelomgeving Wanneer je in Flash wil gaan werken krijg je te maken met een ontwikkelomgeving die enige gewenning vereist. Zoals je hieronder in het schermvoorbeeld kan zien, heeft Macromedia ervoor gezorgd dat al zijn producten op een gelijkaardige manier te bedienen zijn. Andere producten van Macromedia zijn: Fireworks, Dreamweaver, Authorware, Freehand, Generator enz... Eén van de extra pluspunten van het werken met Macromedia producten is dat de samenwerking tussen deze diverse pakketten vrij soepel en vrij simpel kan verlopen.

Je kan de volgende onderdelen terugvinden in de werkomgeving: 1. 2. 3. 4. 5. 6. 7. 8. 9.

werkgebied (stage) algemene instellingen (properties) de tijdslijn (timeline) lagen (layers) gereedschapskist (Toolbox) menubalk panels Property Inspector (contextgevoelig) Bibliotheek

Het werkgebied In het midden van het scherm vind je het werkgebied of de canvas. Hierin kan je verschillende objecten plaatsen waarmee dan diverse animaties gemaakt kunnen worden.

7

Algemene instellingen Deze eigenschappen bepalen de snelheid van je animatie, de achtergrondkleur, de grootte van de animatie en de eenheden waarmee je in je werkgebied wenst te werken. Deze eigenschappen wijzigen kan je als volgt: modify> document.

•

• • •

• •

Frame rate is de snelheid van je animatie. Fps staat voor frames per seconde. Hoe hoger deze waarde hoe sneller je animatie zal afspelen. Om een soepele animatie te krijgen is het belangrijk dat je deze framerate niet te laag plaatst; vb. tussen 12 en 25 fps. (fps: frames per seconde) Match printer zal je werkgebied verkleinen zodanig dat het juist past binnen het afdrukbereik van je printer. Match Contents zal je werkgebied verkleinen naar de inhoud van uw werkgebied, zodanig dat het perfect past. Save Default: indien je speciale instellingen steeds wenst te gebruiken kan je deze bewaren als standaard instellingen, zodanig dat je die niet steeds meer hoeft in te stellen. Background color: achtergrondkleur. Ruler units: de eenheid van de linialen.

Tip: Maak altijd je animatie in de linkerbovenhoek van je werkgebied zodanig dat je op het einde via de movie properties de juiste hoogte en breedte nog kan aanpassen. De tijdslijn Dit is het gebied dat je bovenaan je scherm ziet. Bij een nieuwe animatie staat er in de timeline al standaard 1 layer en zie je rechts allemaal blokjes met een soort liniaal erboven. De blokjes zijn frames.

8

Overzicht schema: • • • • • • • • • • • • • • • • •

Title Bar: Doet niets, enkel de titel verschijnt hierin. Active Layer Toggle: Icoon dat aangeeft dat dit de laag is waarin je werkt. Show/Hide Layer Toggle: Maakt de laag (on)zichtbaar. Ze verwijderen de laag niet! Lock/Unlock Layer Toggle: Als de laag Locked staat, kan je niks selecteren. Show all Layers as OutlinesToggle: Alle objecten worden als contouren weergegeven. Playback head: Geeft weer waar je je bevindt in de tijd. Add Layer: Voegt een laag toe. Die komt boven de huidige te staan. Add Guide Layer: Voeg een laag toe die het mogelijk maakt om symbolen langs een pad te laten lopen. Add Folder: Folder toevoegen waarin lagen gegroepeerd kunnen worden. Delete Layer: Verwijdert een laag. Center Frame: Verschuift de tijdslijn zodat het huidige frame zichtbaar is. Onion Skin: Dient om een animatie over verschillende frames in één keer te bekijken. Onion Skin Outlines: Zelfde als voorgaand, maar het object wordt weergegeven in contouren. Edit Multiple Frames: Met deze functie kan je ieder object tussen de Onion Skin Markers editen. Current Frame: Het nummer van het huidige frame. Frame Rate Indicator: Het aantal frames dat afgespeeld wordt per seconde. Verstreken tijd: Geeft aan hoeveel tijd er verstreken is sinds de start van de movie.

9

De Property Inspector Onderaan vind je de Property Inspector. Dit is een eigenschappenvenster waar je zelf elementen kan invullen en veranderen, die enkel de eigenschappen zal tonen van het geselecteerde element. Selecteer je een stukje tekst dan krijg je de teksteigenschappen, selecteer je het werkgebied dan krijg je de documenteigenschappen.

De Toolbox

10

Layers De tijdbalk van Flash maakt gebruik van layers en frames, zoals hieronder:

Layers zijn 'lagen' (in het voorbeeld hierboven 'actions' en 'radial' genoemd). Door lagen boven elkaar te zetten ontstaat een hiërarchie. Net zoals bij Adobe Photoshop, kun je layers laten overlappen. Een voorbeeld van layer hiërarchie is een zwarte achtergrond (layer1) met Buttons er voor geplaatst (layer 2). Zou je de layer volgorde omdraaien, dan zou je de Buttons niet meer zien, omdat de zwarte achtergrond de Buttonpen overlapt. Met het +je geheel links van de tijdbalk, maak je een nieuwe layer aan. Je kan ook een nieuwe layer aanmaken door via Insert > Timeline > New Layer... te kiezen. Enkele basisbewerkingen van layers • •

• • • •

•

Toevoegen van een layer: klik op de linkse Button onderaan of kies in het menu Insert>Layer. Verwijderen van een layer: klik op de rechtse Button onderaan of kies na het selecteren van de layer via het snelmenu(rechter muisbutton op het betreffende layer) delete layer. Verplaatsen van een layer: selecteer en versleep naar boven of onder. Naam geven aan een layer: dubbelklik op de naam en wijzig. Toevoegen van een 'Guide Layer': dit is een layer die een weg bevat die een bepaald object moet afleggen. Kopiëren naar verschillende layers: wens je een stukje uit een bepaald layer te kopiëren naar een andere layer kies je best voor het plakken 'paste in place' dan krijg je de kopie op de exact aangeduide plaats. Layer in een map plaatsen: een bestaand layer kan in een map

11

geplaatst worden door deze erin te slepen, een map maak je aan door middel van de mapbutton, zie plaatje. De map is net zoals de layers te benamen. Tip: Wanneer je in een bepaalde laag (layer) aan het werken bent, zet dan een lock op de andere lagen. Dit is belangrijk omdat je in meerdere lagen tegelijk kan werken, en misschien in de verkeerde laag een wijziging zou kunnen aanbrengen. Je moet altijd opletten welke laag dus de actieve laag is (die laag wordt aangeduid met een potlood). Om een laag vast te zetten kan je klikken op het sleuteltje in de bewuste layer. Frames Een layer bevat frames. Een frame is in feite een klein beeldje die voor een bepaalde tijd wordt afgebeeld. Door meerdere frames achter elkaar te zetten ontstaat er een film. Onder in de tijdbalk staat een getal, dat voor de framerate staat. Hoe hoger de framerate, des te sneller worden de beeldjes achter elkaar afgespeeld en hoe sneller de film verloopt. Voor Hollywood films wordt meestal een framerate van 31 fps (frames per seconde) gebruikt. Voor Flash is 24 of de standaardwaarde 12 (minimaal) een goede framerate om de film soepel te laten verlopen. Elke sym bol (Movie Clip, Graphic en Button) heeft zijn eigen tijdlijn, met layers en frames. Zo kan je dus een binnen een film, meerdere films (movies) afspelen door in een frame van de hoofdtijdlijn meerdere symbols te zetten. Meer uitleg over symbols is komt later in de lesstof aan de orde. Keyframes Een keyframe is een hoofdframe en wordt in de tijdlijn aangeduid als frame met een zwart rond puntje. Een keyframe wordt gebruikt als eind en begin punt van een animatie. Zo kan je tussen twee keyframes een tween laten lopen. Meer over tweens later. Tussen de keyframes, bevinden zich de bovengenoemde frames. Een keyframe staat voor een nieuw punt in de animatie. Door keyframes achter elkaar te zetten en het object op de stage te bij elk nieuwe keyframe te verschuiven ontstaat een animatie. Je kan een tijd tussen de opeenvolgende veranderingen vergroten door een frame tussen twee keyframes te zetten. Een frame of keyframe is 'gevuld' met een object op de stage als deze grijs gekleurd is. Zoals het voorbeeld hierboven zijn de frames van layer 'radial' gevuld met een object op de stage. De layer 'actions' is niet gevuld met een object omdat deze wit zijn. Het is gebruikelijk om de layer 'actions' alleen te gebruiken voor het toevoegen van actionscript aan de tijdbalk. Het vullen van de layer 'actions' is niet aan te raden. Handig om te weten is dat de shortcut om een layer toe te voegen F5 is. Deze is voor het toevoegen van een keyframe F6. Beide shortcuts gelden voor Windows en Apple gebruikers. Wil je een frame weghalen gebruik dan de toetsencombinatie Shift-F5, en voor het weghalen van een keyframe gebruik je de toetsencombinatie Shift-F6. Voor een leeg keyframe klik je op F7.

12

Movie Properties Test M ovie Als je tussentijds de Flash film wilt bekijken heb je de optie 'test movie'. Deze is te bereiken via Command > Test movie of (Command+Enter). Tijdens het testen van de Flash film kan je enkele eigenschappen van de film bekijken en testen. Interessant is dat je de film kan testen voor verschillende bandbreedtes. Dit doe je door bij view de optie 'simulate download' te kiezen. Je kan de bandbreedte instellen via de optie 'download settings. Door bijvoorbeeld 56k (4,7 KB/s) te kiezen bekijk je de Flash film zoals die zou worden afgespeeld met een 56k modem. Hoe de bandbreedtegebruik fluctueert kan je bekijken via view > bandwith profiler (of command+B). Het is een grafiek, waarin te lezen is waar de zware laadpunten van de Flash film zitten. Movie opslaan Als de Flash film klaar is hoef je deze alleen maar op te slaan. Handig is om dit ook te doen terwijl je werkt, omdat je dan in ieder geval weet dat je file bewaard blijft, zelfs na een computer crash. Het is handig om de Flash film direct op te slaan op een vaste plek. Hierdoor blijft het pad naar de directory van de afbeeldingen, films of geluiden in je library bewaard. Zoek een goede plaats om op te slaan. Maak een nieuwe folder aan voor je bestand. Opslaan gaat zo: File > Save as... en dan een naam opgeven. Alle files die je publiceert komen in dezelfde directory terecht als de plek waar je de Flash file bewaard.

13

Tekenen in Flash Vectoren Tekeningen die je maakt in Flash met bijvoorbeeld de oval tool, de square tool, of de line tool zijn opgebouwd uit vectoren. Een vector is niets anders dan een richting. Flash ziet een vectorlijn als twee afzonderlijke punten die met elkaar verbonden worden. Op deze manier wordt met enkel twee punten een lijn opgebouwd. Dit principe werkt niet alleen voor lijnen, maar ook voor cirkels, vierkanten etc. Een vierkant is niets meer dan een en verzameling punten (pixels) in de vorm van een vierkant. Flash zet de lijnen ertussen als opvulling. Het grote voordeel van werken met vectoren is dat het bijna geen filegrootte opeist. De uit vectoren opgebouwde tekeningen worden grotendeels door de processor berekend en zijn niet opgeslagen in de .swf file. Het enige wat is opgeslagen zijn de punten waartussen de opvulling moet plaatsvinden. Een tweede voordeel van vectoren is dat je het oneindig groot kan uitrekken, zonder dat de afbeeldingkwaliteit verandert. Dit is natuurlijk logisch te verklaren uit het feit dat alleen de punten verder uit elkaar komen te liggen. De opvulling zal op dezelfde manier plaatsvinden als bij het origineel. Lijnen te klikken. Lijnen zijn eenvoudig te zetten. Selecteer de 'line tool' door op Door op de stage een streep te maken met je muiscursor zet je een lijn. Als je met de muis op de ongeselecteerde lijn gaat staan zie je dat de muiscursor een bochtje onder zich krijgt. Dit betekent dat je de lijn kan buigen in alle richtingen en vormen die je maar wilt. Als je met de muis op het uiteinde gaat staan van de lijn verschijnt er een hoekje onder de cursor. Dit betekent dat je vanaf dit uiteinde de lijn kan verplaatsen. In het Properties Panel kan je het uiterlijk van de lijn aanpassen. Door op te klikken kies je de lijnkleur. Tevens kan je de soort lijn kiezen, zoals hairline (altijd zo dun als een haar) gestippeld, schets, gestreept of spetters. Een uitgebreider menu hiervoor staat onder de 'Custom' Button. Ook de dikte van de lijn kan je veranderen via het Properties Panel. gebruikt. Maar in principe is de We hebben voor het voorbeeld de 'line tool' rand om een cirkel of vierkant ook een lijn, die op de zelfde manier bewerkt kan worden. Vlakken Vlakken zijn samen met lijnen de belangrijkste elementen waaruit een Flash tekening is opgemaakt.

14

Om een vlak te maken kies je de volgende iconen: voor een cirkel voor een vierkant voor een zeshoek Als je deze tools gebruikt maak je standaard een set lijnen in de vorm van de tool (de rand) met een opvulling. Voordat je het vlak maakt, kan je in de Properties te selecteren en met dit icoon

Panel de rand bepalen door dit icoon bepaal je de vulling.

Ook kan je op de bovenstaande iconen klikken om de kleur van de rand of vulling te bepalen nadat het getekende vlak geselecteerd is. Met de cursor is een vlak te vervormen net zoals bij het vervormen van een lijn. Groeperen Wil je twee vormen over elkaar tekenen, maar ze afzonderlijk van elkaar kunnen selecteren dan moet je de vormen afzonderlijk groeperen. Ook als je lijnen en vulkleuren gebruikt in 1 vorm zal Flash deze altijd afzonderlijk selecteren. Wil je ze samen selecteren dan zul je de lijn en het vlak moeten groeperen. Dit doe je in het menu Modify>Group of als shortcut Command>G. Kleuren Hier wordt de basis uitgelegd van het kleurgebruik in Flash. We gaan uit van een vector object op de stage. te selecteren in tools De kleuren van de rand bepalen we door dit icoon panel een juiste kleur te kiezen. Om de binnenkant te kleuren selecteren we en kiezen we de juiste kleur. Als je alleen een rand getekend hebt van bijvoorbeeld een cirkel en deze wilt vullen, dan gebruik je de paintbucket tool

. Je selecteert weer een vulkleur via

en klikt dan met de paintbucket tool in het midden van de deze optie cirkel. Een gradiënt kunnen we een richting geven en vervormen door deze tool te gebruiken. Je kan een "swatch" (een kleur of gradiënt) toevoegen aan je kleuren bibliotheek. Dit doe je door rechts bovenin de 'colormixer' het icoontje aan te klikken en de optie "add swatch" aan te klikken. Dan is de kleur of gradiënt toegevoegd aan je kleurenpalet en kan je deze kleur of gradiënt zo vaak oproepen als je wilt.

15

Kleurenpalet Met de Flash color mixer kun je een eigen kleur maken en deze gebruiken als een solid, gradiënt of radial. Dit is in deze tutorial uitgelegd. Flash geeft je de optie om een zelf uitgekozen kleur (bijvoorbeeld bruin #4E2612) toe te voegen aan het standaard kleuren palet van Flash zoals hieronder is afgebeeld. Open het kleurenpalet via Window > Design Panels > Color Swatches (vink deze aan). Stel dat je een kleur hebt uitgekozen die niet in dit standaard kleuren palet voorkomt, zoals de bovenbeschreven kleur bruin, dan kun je die toevoegen aan dit palet. De handigheid hiervan is dat je niet steeds opnieuw de kleur moet gaan definiëren via de colormixer als je deze nodig hebt. Je haalt nu de kleur gewoon uit je kleurenpalet. De stappen om een kleur toe te voegen aan dit kleuren palet (color swatches) worden hieronder uitgelegd.

Stap1 Open de colormixer via Window > Design Panels > Color Swatches (vink deze aan) en kies de kleur (voor de stroke en de fill) die je vaak gaat gebruiken in dit Flash document. Stap2 Ga vervolgens naar de rechter bovenhoek van de colormixer en open de color opties zoals hieronder is afgebeeld.

Kies de optie ‘Add Swatch”. De kleur is nu toegevoegd aan de color swatches.

16

Open het Color Swatches panel om te controleren of de kleur van je keuze daadwerkelijk is toegevoegd (zie de onderstaande afbeelding).

Er is nu een Color Swatch toegevoegd met een bruine fill kleur en een witte stroke kleur. Deze kun je net als de standaard kleurwaarden op elk moment oproepen uit je kleurenpalet. Als je een nieuw document maakt is deze nieuwe kleur weer uit het standaard Color Swatches panel verdwenen. Als je een kleuren palet hebt gemaakt in je Flash document die je graag voor meerdere Flash documenten wilt gebruiken dan kun je er voor kiezen deze Color Swatches op te slaan als ‘default’. Dit betekent dat het kleuren palet van dit document wordt gebruikt voor alle nieuwe aangemaakte documenten.

17

Sym bols Een Flash • • •

film kan uit drie basis onderdelen opgebouwd worden: Graphic Movie Clip Button

Deze symbols kan je vanuit je library in je film plaatsen. Een nieuwe symbol maak je door Insert > New Symbol... te selecteren. Ook kan je een afbeelding of tekening selecteren en een symbol van maken door Insert > Convert To Symbol (F8) te selecteren. Graphic Symbol Graphic Symbols zijn de eenvoudigste vorm van Flash symbols. Je kan hen gebruiken als statische figuren of je kan hen laten animeren. Als je ze animeert dan is hun tijdslijn verbonden aan de tijdslijn van de main movie. Stopt de main movie, dan stopt de Graphic animatie. Is een animatie binnen een Graphic Symbol bijvoorbeeld 10 frames lang, dan moet er op de hoofdtijdslijn minstens 10 frames beschikbaar zijn, om de hele animatie aft e kunnen spelen. Bij te weinig beschikbare frames wordt slechts een deel afgespeeld. Actions en geluid werken niet binnen een Graphic Symbol. Movie Clip Symbol Movie Clips zijn de meest complexe symbols in Flash. Het zijn in feite minifilmpjes in de grote Flashfilm. Je kan er animatie in zetten, actions, geluid en andere symbols. Movie Clips hebben hun eigen tijdslijn. Deze tijdslijn loopt onafhankelijk van de hoofdtijdslijn. Stopt de hoofdtijdslijn met afspelen, dan zal de Movie Clip daarom nog niet stoppen met spelen. Button Symbol De tijdslijn van een Button verschilt van andere symbols. Het bevat vier frames. De Button heeft vier ‘states’ die gebaseerd zijn op het gedrag van de muis. Je hebt de Up, Over, Down en Hit state. Deze vier frames zijn de enige die gebruikt kunnen worden. Je kan wel meerdere lagen gebruiken. Elke state kan een andere figuur bevatten. De Hit state is het oppervlak waar de Button ‘klikbaar’ is. Een Button kan natuurlijk acties bevatten. Acties worden NIET toegekend binnen het Button Symbol maar wordt toegekend aan de instance op de stage. Je kan namelijk meerdere instances van de Button op de stage zetten en het kan nooit de bedoeling zijn dat alle Buttonpen dezelfde actie uitvoeren. Hieronder een uitgebreide uitleg en oefening hoe je een Button moet maken. Symbols versus Instance Symbols gebruiken helpt de grootte van het bestand verminderen. Flash hoeft slechts eenmaal het symbol te bewaren. Elke keer als er een symbol is gebruikt, verwijst Flash naar het originele object dat ergens apart bewaard is. Het originele object is het symbol en het element die op die stage staat is een instance (letterlijk een voorbeeld of kopie van het origineel) van het symbol. Dus een symbol kan nooit op de stage staan, het is een instance van het symbol dat op de

18

stage staat!!! Instance op de stage plaatsen Een instance van een symbol op de stage doe je zeer eenvoudig door vanuit de library het gewenste symbol te kiezen en het te verslepen op de stage. Het object dat nu op de stage staat is een instance van het gekozen symbol. Instance editen Iedere instance van een symbol heeft een aantal eigenschappen die gewijzigd kunnen worden. Dit zijn eigenschappen die enkel van toepassing zijn voor de geselecteerde instance en hebben geen effect op het originele symbol. De eigenschappen die veranderd kunnen worden zijn brightness, tint, alpha en behaviour. Een Instance kan ook geschaald, geroteerd of onder een helling worden geplaatst. Het ‘Advanced’ effect is een combinatie van het Tint en Alpha effect en is uiteraard meer belastend.Ook deze veranderingen hebben geen invloed op het originele Symbol. Verander je iets in de instance door dubbel te klikken, dan kom je in het symbol zelf en dan zullen alle instances op de main tijdslijn ook mee veranderen. Dit kun je voorkomen door het contact met het symbol te verbreken. (Break Apart) Symbols editen Je kan dit doen op verschillende manieren. Ten eerste kan je door te rechtsklikken op het Symbol Edit kiezen uit het pop-up menu. Ten tweede kan je eenvoudigweg dubbelklikken in de library op het icoontje dat voor de naam van het symbol staat. En ten derde kan je rechtsklikken op een instance van het symbol en in het pop-up menu voor Edit kiezen. Als je een symbol wijzigt dan zullen alle instances op de stage ook wijzigen! Library Een symbol wordt bewaard in een bibliotheek. De interne library van je Flash movie kan je openen door naar Windows>Library te gaan. Je kan ook externe bibliotheken raadplegen door onder libraries te zoeken in de menubar. Dit zijn de bibliotheken die meegeleverd zijn tijdens de installatie van Flash. Indien je reeds een Flash movie hebt gemaakt en je wilt elementen die in die bibliotheek zaten hergebruiken in een nieuwe movie kan je die library openen door op File>Open as Library te klikken. Buttons Een Button is een handig object als je wilt linken tussen verschillende pagina's in je movie of naar een externe pagina zoals Google. Maar alvorens je een Button hebt moet je het een en ander doen. Dat zal hier in het kort uitgelegd worden. Open een nieuwe file, door op File > New... te drukken. Om een Button te kunnen toevoegen aan de lege stage gaan we eerst naar Insert > New Symbol...

19

Je krijgt het volgende scherm:

In dit scherm kies je voor de behaviour (toepassing) Button en noem deze b. Je krijgt na de selectie dit te zien:

Je komt nu IN de tijdslijn en stage van de Button terecht. Als je kijkt naar de tijdslijn heb je 4 mogelijkheden om je frames in te vullen: • up • over • down • hit Up is de frame die je ziet als je niet met de muis over de Button gaat. Over is wat je ziet als je met de muis over de Button heen beweegt. Down is wat je ziet als je Button indrukt. Hit is het raakgebied van de Button. Dit frame is altijd onzichtbaar, maar bepaalt de ruimte wanneer het 'Over'-frame zal gaan werken. Door hier bijvoorbeeld een vierkant te plaatsen ter grootte van het raakvlak van de Button zal dit hierdoor geselecteerd worden. Door in elke van de vier frames een afbeelding te plaatsen zullen die elkaar afwisselen zoals hierboven beschreven als je met de muis beweegt en klikt over de Button. Je gaat weer uit de stage en tijdlijn van de Button door linksboven het tabblad 'scene 1' kiezen. Je kunt de Button weer bewerken door in library 'Button1' op te zoeken en te dubbelklikken op het icoontje.

20

Oefening 1 Button maken Hier leer je hoe je een simpele en blitse Button kunt maken zonder al te veel moeite. Druk eerst voordat je begint op Insert> New symbol. • Maak eerst één cirkel (Zonder vulling!). Selecteer daarna de cirkel en druk op ‘Command+C’ en druk daarna weer op ‘command+V’ als het goed is heb je nu de cirkel gekopieerd. • Maak de tweede cirkel kleiner door met de rechter muisbutton op de tweede cirkel de drukken en dan op ‘Scale’ te klikken.

•

• •

•

De grote cirkel is de achtergrond voor de Button en de kleine cirkel het stuk waar je op kan drukken. We voegen een kleurtje toe. Kies een leuke kleur voor beide cirkels. En voeg die toe met de Button ‘Paintbucket Tool’. (tip: bij een grijze gradiënt als buitencirkel, lijkt de Button metallic) Nu gaan we de kleine cirkel op de grote cirkel plaatsen. Het is handig als je de Button ‘Snap to Objects’ uit zet. Dan gaat het makkelijker. Als de kleine cirkel op de grote cirkel geplaatst is maak je een keyframe op over, down en hit en vervolgens voeg je hier per keyframe verschillende kleuren toe. Nu is je Button af! Test hem door op File>Publish Preview> Flash te drukken.

21

Onion Skin Onion Skinning Als je een cirkel tekent en deze laat bewegen van A naar B op de tijdslijn, dan zul je niet meteen weten hoe het animatiepad verloopt. Door middel van de Onion kan dit wel. Skinning Button Let wel: Dit werkt alleen als je een animatie maakt met keyframes, niet met een tween, want dan laat Flash alleen de keyframes zien in de animatie.

Onion Outline ernaast kan je alleen de outline van de verschillende Met de Outline Button keyframes binnen de animatie bekijken.

In de tijdslijn zie je welke keyframes met Onion Skin geselecteerd zijn. Je kunt zelf selecteren hoeveel keyframes je wilt zien door aan de hendels te trekken aan het uiteinde van het geselecteerde gedeelte of door op deze Button

te drukken.

22

Edit m ultiple fram es In het Onion Skin menu kun je ook de Button Edit Multiple Frames vinden. Met deze Button kan je verschillende keyframes tegelijk verplaatsen. Hoe doe je dat? Je maakt eerst een selectie van je Onion Skin keyframes en dan druk je op de Button Edit Multiple Frames. Alle Onion Skin keyframes worden nu zichtbaar. Door hier nu een selectie te maken en te verplaatsen is je animatie anders geworden!

23

Tw eening Het begrip tweening in Flash betekent dat je tussen twee of meerdere keyframes in een layer een beweging of vervorming van vorm, plaats of kleur van een object laat uitvoeren. Je hebt twee onderscheidingen binnen het begrip tweening: • M otion tw een • Shape tw een Bij een motion tween vindt er een verplaatsing plaats van een object van punt a naar punt b. Bij een shape tween vindt er een vervorming plaats van object a naar object b. Via een motion tween verplaatst een object zich dus van punt a naar punt b. Maar het is ook mogelijk het object te verkleinen, laten draaien, lichter van kleur te laten worden of te laten weg faden. Door creatief met deze functie om te gaan zijn zeer veel animaties te maken. Daarom vormt deze tween een belangrijk onderdeel voor de basis van een goede Flash animatie.

24

Oefening 1 Motion tw een In dit filmpje laten we zien hoe we een object laten bewegen door middel van de motion tween. Maak een nieuwe file aan door op File > New te klikken. We gaan nu een cirkel tekenen door de oval tool te gebruiken. Kies een leuke kleur voor de bal en de buitenlijn. Dit doe je door de kleuren te bepalen in de Properties Panel. Voor de binnenkant van de cirkel gebruik je

, voor de rand

.

Tevens kan je de dikte bepalen (staat nu op 1), door op het driehoekje naast de 1 te drukken en de schuifmaat omhoog of omlaag te schuiven. Om een motion tween te kunnen maken moet je eerst een symbol maken van je getekende object. Als het ware geef je Flash de opdracht om je object een naam te geven zodat het programma het kan herkennen voor bepaalde acties. Dit kun je doen door Insert>Convert to Symbol. (shortcut F8) te selecteren. Je krijgt nu een dialoogvenster (hetzelfde als bij het maken van een Button).

Selecteer een Graphic Symbol, geef de bal de naam ‘cirkel’. Zoals je ziet zal de bal niet meer allerlei puntjes laten zien als deze geselecteerd is, maar een blauwe lijn er om heen hebben.

25

Ga met de muis op frame 20 staan in de tijdbalk. Druk nu de muisbutton in, waardoor de frame geselecteerd is. Door naar Insert > Keyframe (shortcut F6) te gaan maak je een keyframe aan. Een keyframe is een hoofdpunt van je frames. Er staan nu twee keyframes in je film, een op frame 1 en de tweede op frame 20. De keyframe op frame 20 heeft nu een kopie gemaakt van je keyframe op frame 1.Daartussen gaan we de bal laten bewegen van links naar rechts. Selecteer op de tijdslijn, frame 1 tot en met frame 20. Ga naar het Properties Panel en selecteer bij het drop down menu van Tween ‘Motion’.

Nu wordt de geselecteerde balk paars met een pijl, wat betekent dat er een motion tween is toegevoegd aan de cirkel in deze layer. Nu selecteren we frame 20 in de tijdslijn en daarna verschuiven we de bal op de stage een paar centimeter naar rechts.

Je motion tween is af. Om de animatie te bekijken druk je op Command > Play Movie (shortcut ‘Command+Enter’). Overigens kan je het object ook groeperen (Command G) in plaats van er een symbol van te maken. De mogelijkheden zijn dan wel beperkter, dus daarom is gelijk gekozen voor het maken van een symbol.

26

Oefening 2 Een Graphic Symbol verplaatsen en roteren

• • •

Stap 1: Teken met de line tool een ster of een vierkant en vul deze met de paintbucket tool. Stap 2: Selecteer de hele ster en maak er een Graphic Symbol van (F8). Stap 3: Maak een keyframe op frame 40 (F6), en verplaats de ster naar waar je hem wil hebben.

• •

Stap 4: Draai de ster op frame 40 met behulp van de Stap 5: Ga naar frame 1 en voeg een motion tween toe.

•

En nu uittesten! (command>Test movie)

27

Button.

Oefening 3 Shape tw een/ m orphing In dit filmpje gaat een symbol over in een ander symbol (b.v. een rondje gaat langzaam over in een vierkantje). Dit kan ook met tekst. Het eerste figuur en het laatste figuur moeten worden getekend, en Flash laat de figuren dan in elkaar overgaan. Maak een nieuwe file aan door op file > new te klikken. We gaan nu een cirkel tekenen door de oval tool te gebruiken. Kies een leuke kleur voor de bal en de buitenlijn. Dit doe je door de kleuren te bepalen in de Properties Panel.

, voor de rand . Voor de binnenkant van de cirkel gebruik je Tevens kan je de dikte bepalen (staat nu op 1), door op het driehoekje naast de 1 te drukken en de schuifmaat omhoog of omlaag te schuiven. Ga met de muis op frame 20 staan in de tijdbalk. Druk nu de muisbutton in, waardoor de frame geselecteerd is. Door naar insert > keyframe (shortcut F6) te gaan maak je een keyframe aan. Een keyframe is een hoofdpunt van je frames. Er staan nu twee keyframes in je film, een op frame 1 en de tweede op frame 20. Selecteer nu frame 20 en wis de cirkel om deze te selecteren en op delete te drukken. Maak nu op de plaats van de verwijderde cirkel een vierkant van gelijke grootte en opmaak. Na het tekenen van de vierkant selecteer je een frame in je tijdslijn tussen 1 en de 20 (bijvoorbeeld frame 8).

28

Ga nu naar het Properties Panel en selecteer vanuit de dropdown menu waar 'Tween' voor staat, de optie 'Shape'.

Nadat je deze optie hebt aangevinkt, zijn de frames waartussen de tween plaatsvindt groen gekleurd. Je shape tween is af. Om de animatie te bekijken druk je Command > Play movie (shortcut 'Command+Enter').

29

Oefening 4 Een bal laten stuiteren /gebruik van Easing Met een shape tween kun je ook een bal laten stuiteren. Hieronder wordt aangegeven hoe.

• •

•

•

•

• •

Voor deze oefening is het aan te raden de hulplijnen (Grid) te activeren. Teken een bol in frame #1 Je zal merken dat je automatisch een randlijn zal verkrijgen. Wens je dat niet dan kan je vooraf de randlijn kleur laten verdwijnen. Plaats een keyframe op frame #40 en vervolgens ook op verschillende plaatsen. (steeds minder ruimte tussen de keyframes daar de hoogte ook steeds kleiner wordt.) Selecteer elk keyframe en voer er een shape tween aan toe.

Het is hier ook mogelijk om gebruik te maken van Easing. Indien deze waarde op 0 staat verloopt de verplaatsing of de vervorming steeds op een constante snelheid, indien je hier bvb bij het naar beneden gaan van de bal easing op -66 zou plaatsen zal je zien naarmate dat de bal meer naar beneden gaat dit ook sneller zal gebeuren, het omgekeerde kan je gebruiken wanneer de bal naar boven gaat. Enter drukken en uittesten. Command Enter om de movie te laten afspelen.

30

Shape Hint Naast de shape tween tutorial voor beginners zijn er ook enkele tips en tricks om een shape tween wat vloeiender te laten verlopen. Hieronder staat een voorbeeld weergegeven. Links is zonder Shape Hints, rechts is met Shape Hints.

Het verschil in shape tween ontstaat omdat we Shape Hints meegeven aan de tween. De Shape Hints geeft ons de mogelijkheid de tween te controleren. Shape Hints bevatten corresponderende punten die samenvallen met het begin en eind object. Druk op Choose Modify > Shape > Add Shape om een Shape Hint toe te voegen.

31

Oefening 5 Object langs een lijn laten bewegen (Motion Guide) Als je een object met een gewone motion tween hebt is het enkel mogelijk om deze het kortste pad tussen de beginframe en eindframe te laten doorlopen. Als je een Motion Guide toevoegt aan de motion tween (door de gehele layer met de motion tween te selecteren en dan Insert > Motion Guide te kiezen) ontstaat er een speciale layer, de Guide Layer. In deze layer kan je met de pencil tool elk willekeurige baan tekenen die je maar wilt dat je object doorloopt. Belangrijk is wel dat je de schets van de baan begint en eindigt in het middelpunt van je object (aangegeven door een witte stip in je object).

•

Voor deze opdracht hebben we twee lagen nodig. Eerst maken we de 'weg'. Kies daarvoor uit het menu insert> Motion Guide. Plaats een keyframe op frame#40 .Teken daarna met de pencil een kromme lijn.

•

In laag 1 tekenen we een object, maken er een symbol van en plaatsen het op de startpositie. Daarna plaatsen we een keyframe op frame # 40 en verplaatsen ons object naar de eindpositie.

32

•

In laag 1 frame#1 dubbelklikken we en maken een motion tweening en vinken 'Orient To Path direction' aan. Test dit uit. Test Movie.

33

Tekst invoegen Het is mogelijk om via de tool Er zijn • • •

tekst in te voegen in Flash.

drie soorten tekst Static tekst Dynam ic tekst Input tekst

Static tekst Als je een stuk tekst wilt typen in je Flash movie klik je op het icoon: Er verschijnt een transparante tekstbalk waarin je een stuk tekst kan typen. In het Properties Panel staat de eigenschap van deze tekstbalk op static. Dit betekent niets meer dan" normale statische tekst". De grootte van de tekstbalk kan je aanpassen door met je muis aan het rondje rechtsboven de tekstbalk te trekken. Het rondje verandert in een vierkant. Dit betekent dat de tekstbalk nu een vaste breedte heeft. Je kan static tekst selecteerbaar maken door het (ab) (selectable) icoon in de Properties Panel aan te zetten. Helemaal onderaan in de Properties Panel kan je een link toevoegen aan je tekst. Dit doe je door een gedeelte van de tekst te selecteren waar je de link wilt hebben. Dan typ je in de Properties Panel het pad van je link en geef je daarnaast aan wat de target is. Door de functie "use device fonts" aan te vinken geef je de opdracht aan Flash om zelf het meest geschikte lettertype op de computer van de bekijker van je Flash film te kiezen. Een bijkomend voordeel van deze optie is dat Flash het lettertype niet (anti aliased) vloeiend maakt. Dit verbetert de leesbaarheid van de tekst, zeker voor kleinere lettergroottes. Nieuw in Flash MX 2004 is de functie 'Alias Tekst'. Wat we al weten is dat tekst automatisch 'anti aliased', oftewel vloeiend wordt gemaakt. Dit is voor kleine lettergroottes niet mooi, omdat deze dan blurry worden. Om dit te voorkomen kan je deze functie aanvinken om de tekst beter leesbaar te maken.

Dynam ic tekst Dynamische tekst wordt vaak gebruikt voor dynamische films. Dat klinkt logisch... Het is mogelijk om een variabele te sturen uit bijvoorbeeld een tekstbestand of door actionscript naar een dynamische tekstbalk. Dynamische teksten zijn ook teksten die door een database worden aangeroepen. Dit kan met static tekst niet, omdat daarin de tekst vast staat. Bij dynamic tekst kan je elk willekeurige tekst in een enkele tekstbalk laten verschijnen.

34

In het Properties Panel kan je naast het selecteerbaar maken van de tekst ook enkele andere eigenschappen mee geven. Zo is er 'render as HTML'. Deze functie behoudt de "rich text formatting" en bevat fonts, hyperlinks en bold met de gebruikelijke HTML tags. Daarnaast staat de functie 'show border around tekst', die een rand en wit achtervlak in je tekstvlak zet. Links van deze opties staat een uitklap menu met drie functies: • Single line • Multi line • Multi line with no wrap De eerste optie zorgt ervoor dat de dynamische tekstbalk altijd een regel blijft. De tweede optie bepaalt dat de dynamische tekstbalk automatisch meerdere regels krijgt binnen de breedte de tekstbalk zodra er veel tekst in moet komen te staan. Bij de laatste optie is de functie 'Word Wrap' uitgeschakeld. Word Wrap houdt in dat het teveel aan tekst (voor de breedte van de tekstbalk) automatisch doorgeschoven wordt naar de volgende regel. Input tekst Deze optie wordt vaak gebruikt bij formulieren in Flash. Een tekstbalk met de input functie geeft de mogelijkheid om tekst in te vullen en deze te versturen via bijvoorbeeld actionscript naar een externe PHP file.

Typisch aan input tekst is om deze naast single line of multi line, de functie ‘password’ mee te geven. Hierdoor verschijnt de tekst die je intypt in de password tekstbalk in de vorm van zwarte bolletjes in plaats van tekst. Tevens is het mogelijk om via het Properties Panel (maximum characters) het

35

maximaal aantal letters aan te geven die men mag invoeren in de input tekstbalk. Break Apart Deze functie is uiterst handig als je tekst gebruikt in een Flash animatie. De functie ‘Break Apart’ heeft twee functies. Selecteer een stukje tekst van enkele woorden en druk op de rechter muisbutton. Daar verschijnt een scherm met de optie ‘Break Apart’. Als je deze optie selecteert, zal Flash woorden opdelen in afzonderlijke letters. De font eigenschappen van de letters blijven echter behouden, zodat elke letter veranderd kan worden met de tekst tool. Je kunt nu de letters afzonder animeren voor bijvoorbeeld een typewriter effect.

Als je nu een animatie wilt maken met tekst, of als je een font gebruikt dat zeer zeldzaam is en dus niet op de computer van de bekijker van je Flashfilm voorkomt, dan is het handig nogmaals de Break Apart functie te gebruiken. Flash zet nu de afzonderlijke letters om in vector afbeeldingen. Deze vector afbeeldingen hebben nu dezelfde eigenschappen als de shapes die je met de oval of square tool maakt. Je kunt nu de tekst niet meer bewerken met de tekst tool, omdat de tekst eigenschappen zijn verloren. Spelling checker Flash MX 2004 (en hoger) heeft een geweldige functie die het direct typen in een Flash een stuk eenvoudiger maakt. Met de spellingchecker kan namelijk, net zoals bij Word, een spellingscontrole worden uitgevoerd. Dit heeft natuurlijk als

36

voordeel dat je de tekst niet eerst in Word hoeft te typen, om dat daarna in Flash te kopiëren om zo taalfouten te voorkomen.

Deze functie is behoorlijk uitgebreid met een Dictionary (woordenboek) van ongeveer alle talen uit de Westerse wereld. Het enige wat de spellingchecker niet doet is direct de taalfouten onderstrepen (spellingscontrole tijdens het typen).

37

Oefening 1 Tekst veranderen van kleur

• • • •

• • •

• •

Start met het schrijven van een woord dat je wenst te veranderen van kleur, kies best een blokvormig lettertype zoals Arial (Bold, 36 ptn) Selecteer het en maak er een Graphic Symbol van (F8). Maak een frame van 30 frames. Plaats telkens keyframes op frame #10, #20 en #30 (F6) Selecteer keyframe 10 en klik op het woord. Nu verandert de Properties Panel onderaan. Daar zie je naast color een keuzelijst staan. Klik dit open, en selecteer tint. Daar kun je nu de kleur veranderen, door op het pijltje te klikken op het kleurenpalet.

Nu moet je nog het percentage veranderen, klik op het pijltje naast 0%, sleep dit naar boven, tot je aan 100% zit. Doe hetzelfde op de andere keyframes en kies telkens een andere kleur. Nu zet je nog een keyframe in frame 40, en zet in dit frame de kleur hetzelfde als in je eerste frame. (dan is de kleur tweening vloeiend, en onderbreekt ze op het einde niet.) Als laatste voeg je aan elk keyframe een motion tweening toe. Test dit uit.

38

Oefening 2 Tekst roteren en verplaatsen

• • • • • • •

• •

•

Start met het schrijven van een woord of een object dat je wenst te zoomen, te roteren en te verplaatsen. Plaats het bij voorkeur in de linkerbovenhoek. Selecteer het nu en maak er een Graphic Symbol van (F8) Maak een frame van 40 frames. Plaats daarna een keyframe op frame #40 (F6 of klik met je rechtermuisbutton de frame aan en selecteer 'Insert Keyframe'). Verplaats het woord of object naar rechts onder. Klik nu met je rechtermuisbutton op het woord in frame #40 en kies 'Scale'.

Vergroot nu het woord met behulp van de vierkantjes die je vind aan de zijkanten en de hoeken van het woord. Selecteer nu het eerste keyframe en ga naar Properties onderaan. Wijzig 'Tween' in 'Motion'.

Verander ook Rotate in 'CW'.

39

•

Test de animatie uit.

40

Oefening 3 Fade in, fade out

• •

• • • •

• • •

Plaats een woord in het midden van het scherm voldoende groot (Comic Sans MS ptn 42). Nadien is het wel nog mogelijk om je tekstgegevens te wijzigen in het Properties Panel.

We maken er een Graphic Symbol van via Insert>Convert to Symbol>naam geven>Graphic . Plaats een keyframe op frame #20 en ook op keyframe #40. Selecteer keyframe #20. Selecteer het object en kies uit het Properties Panel het onderdeel color.

Kies uit het onderdeel color voor Alpha (dit is de transparantiewaarde), wanneer we hier voor 0% kiezen dan is onze tekst niet meer zichtbaar. Voeg nog een motion tweening in op alle keyframes. Test je animatie uit.

41

Afbeelding toevoegen Een afbeelding toevoegen gaat vrij eenvoudig. Flash ondersteunt ongeveer alle standaard compressieformaten (JPEG, GIF, PNG, TIFF). Compressie van afbeeldingen is bedacht door verscheidene grote software bedrijven zoals Microsoft, om een afbeelding een kleinere filegrootte te geven dan het origineel. Hierbij gaat kwaliteit verloren, maar vaak is het de moeite waard om te spelen tussen kwaliteit en filegrootte. Er is nog wel het een en ander uit te leggen hoe Flash met de meest voorkomende compressieformaten omgaat. Zo heb je een standaard compressie in Flash zitten die een .JPEG afbeelding standaard comprimeert tot 50% van hun originele waarde. Tevens comprimeert Flash PNG/GIF bestanden zelf. Hieronder staan de compressiebestanden waarover een uitleg gegeven is: • •

JPEG PNG/GIF

JPEG Een JPEG importeer je door via 'File > Import > Import to Library' te kiezen. Als je met de muis naar de library gaat (F11 shortcut voor de Library Window) dan dubbelklik je op het plaatje wat je zojuist hebt geïmporteerd. Het properties scherm ziet er als volgt uit:

Dit scherm geeft je de mogelijkheid tot het verbeteren van de kwaliteit van je JPEG afbeelding. Door het vinkje achter 'Use Imported Data' uit te zetten, kan je de kwaliteit opschroeven van 50% naar bijvoorbeeld 80%. Druk op 'test' om je filegrootte van de afbeelding te bekijken. in dit voorbeeld is deze nu 17,6 kb bij 50%. door het percentage omhoog te schroeven neemt echter ook de zwaarte van de afbeelding toe. in dit geval is deze 54,3 kb voor 80%. Dit is best zwaar (denk aan de filegrootte en het laden). Als de juiste verhouding tussen kwaliteit en grootte is gekozen, kan je kijken of de verhouding echt goed is als de film wordt afgespeeld in de Flash player. Dit doe je door een preview te bekijken (Command+Enter) van je film.

42

Als je de afbeelding hebt bewerkt in een programma als Photoshop of Fireworks kan je het plaatje updaten in library door op 'Update' te drukken. Flash heeft het pad naar dit plaatje namelijk bewaard waardoor je niet bij elke verandering het plaatje opnieuw hoeft toe te voegen aan de library. Als het pad niet meer klopt kan je de juiste afbeelding importeren door 'Import...' te drukken en te browsen door je files. PNG/GIF Een .GIF of .PNG importeer je door via 'File > Import > Import to Library' te kiezen. Als je met de muis naar de library gaat (F11 shortcut voor de Library Window) dubbelklik je op het plaatje wat je zojuist hebt geïmporteerd. Het properties scherm ziet er als volgt uit:

Dit scherm geeft de mogelijkheid tot het verbeteren van de kwaliteit van je .PNG of .GIF afbeelding. Standaard staat de compressie op 'Lossless(PNG/GIF)'. Dit is een goede compressie, voor dit bestandstype. Zeker als je hoogwaardige transparantie gebruikt, zoals bij PNG-24 files (voor de grafici onder ons). Het verschil tussen PNG en GIF zit in de kwaliteit. In Photoshop heb je de optie om de afbeelding op te slaan voor het web. In dit menu krijg je de keuze tussen GIF, PNG-8 en PNG-24 (en JPEG). Nu verschillen PNG-8 en GIF niet van elkaar. Beide genereren ze de zelfde filegrootte en transparantie. Ga je echter voor een hoge kwaliteit transparantie, bijvoorbeeld zonder witte randen langs de afbeelding, dan kies je voor PNG-24. Dit resulteert echter wel weer in een grotere filesize. Het kan af en toe voorkomen dat Flash grote PNG/GIF files comprimeert door een standaard JPEG compressie te gebruiken. Dit maakt de afbeelding echter onscherp en vlekkerig als deze wordt afgespeeld in Flash player. Het is aan te raden de compressie voor .PNG of .GIF files altijd op 'lossless' te zetten. Door op 'test' te drukken gecomprimeerde afbeelding.

bekijk

je

de

filegrootte

van

je

originele

en

De kwaliteit van je comprimeerde afbeelding kan je checken door een preview te bekijken (Command+Enter) van je film. Als je de afbeelding hebt bewerkt in een programma als Photoshop of Fireworks kan je de afbeelding updaten in library door op 'Update' te drukken. Flash heeft het pad naar dit plaatje namelijk bewaard waardoor je niet bij elke verandering

43

het plaatje opnieuw hoeft toe te voegen aan de library. Als het pad niet meer klopt kan je de juiste afbeelding importeren door op 'Import...' te drukken en te browsen door de files. Trace Bitm ap Je kunt bitmap afbeeldingen ook op een andere manier in je Flash animatie gebruiken. Je kan bijvoorbeeld heel gemakkelijk bitmaps gebruiken als vulling of vulkleur voor je tekeningen. Een van de leukste opties bij Flash MX is het 'tracen' van een bitmap. Flash verandert dan jouw JPEG of GIF afbeelding in een vector image. Een groot voordeel is dat je dan heel wat filegrootte bespaart. Tevens is het dan mogelijk je afbeelding te schalen tijdens de animatie zonder dat de afbeelding lelijk en korrelig wordt. Selecteer een bitmap, JPEG of GIF afbeelding in Flash en kies Modify > Bitmap > Trace Bitmap uit het menu. Dan verschijnt er een dialog box waarin je de volgende opties hebt:

Color Threshold Deze optie vergelijkt aangrenzende pixels met elkaar. Als de RGB waarde tussen de twee pixels is minder dan de Color Threshold waarde, dan wordt de kleur gelijk bevonden. Je kan de waarde variëren tussen 1 en 500. Minim um Area Deze optie bepaalt hoeveel pixels met elkaar vergeleken moeten worden voordat de kleur van een enkele pixel bepaald kan worden. Deze waarde kan tussen de 1 en de 1000 gezet worden. Curve Fit Deze optie bepaald hoe vloeiend een vector lijn loopt na dat de trace is uitgevoerd. Corner Threshold In dit dropdown menu kan je kiezen uit: Many Corners, Few Corners en Normal. Als je 'Few Corners' kiest dan worden de hoeken zoveel mogelijk vloeiend afgerond. Bij 'Many Corners' zal de scherpe hoek zoveel mogelijk worden behouden. Normal zit hier precies tussen. Als je wilt dat je afbeelding het meest scherp blijft moet je 'Many Corners' kiezen, met een lage 'Color Threshold' en een lage 'Minimum Area' waarde. Maar dit zal ook de file grootte opblazen en zal ook niet ten goede komen aan een vloeiende animatie. Je kan dan beter voor een wat hogere Trace waarden gaan voor een gestileerdere 'look'.

44

Oefening 1 Masking gebruiken voor een afbeelding Hier wordt het begrip masking uitgelegd aan de hand van een opdracht. Ook leer je hier gelijk afbeeldingen toevoegen. Een mask gebruik je als je enkel een gedeelte wilt laten zien van een graphic of afbeelding. • • •

In een nieuwe scene maak je twee layers. In het onderste layer voeg je een afbeelding in. In de bovenste layer plaats je een Graphic Symbol, bijvoorbeeld een bol met een kleurtje (de kleur van de bol speelt helemaal geen rol). De bol is enkel de vorm waardoor de onderste laag zal zichtbaar zijn. Maak van die bol een Graphic Symbol. Je plaatst de bol aan de linkerkant van uw object.

•

Voeg in het bovenste layer een keyframe toe op frame # 40 en frame # 80. Om onze onderste layer nog te kunnen zien, zullen we ook nog een keyframe op frame # 80 moeten plaatsen. We verplaatsen ons symbol naar de rechterzijde van onze tekst. Om zeker op dezelfde hoogte te blijven hou je de shifttoets ingedrukt terwijl je het symbol verplaatst. Plaats op keyframe #40 de bal aan de rechterkant en op keyframe #80 de bal terug in de beginpositie links.

•

Voeg op de verschillende keyframes van het bovenste layer een motion tweening toe. Nu selecteren we onze bovenste layer en dubbelklikken (Command Klik) op het layer pictogram. Nu kan je de Layer Properties bewerken: voor de bovenste layer kies je Mask (het masker).

•

45

•

Voor de onderste layer kies je voor Masked.

•

Test je animatie door op Enter te drukken. Zorg er voor dat je layers gelocked zijn, anders laat Flash het masker niet zien!! Sla je bestand op en preview met Command Enter.

•

46

Actionscript Als Flash designer ontkom je er niet aan actionscript te gebruiken. Simpele handelingen zoals het stoppen, linken aan of laden van een film gaan door middel van actionscript. Actionscript is een programmeertaal. Bij programmeertalen moet je de taal tot op de letter nauwkeurig, exact volgens de syntax (grammatica) gebruiken. Doe je dat niet, dan snapt de computer het niet, en krijg je een foutmelding. Wanneer je gaat programmeren in Flash, dus in ons geval actionscripten, zul je regelmatig merken dat Flash helemaal niet doet wat jij wilt. Flash doet letterlijk wat jij hebt gezegd. Computers voeren stap voor stap de opdrachten uit de jij ze geeft. Vergeet je ook maar een komma of punt dan haakt Flash af en doet je opdracht het niet. Gelukkig hebben de versies Flash MX en Flash 8 een script editor mode. Flash MX 2004 heeft dit niet, maar na veel klachten over het weglaten van deze zeer handige functie is het weer in ere hersteld in Flash 8. De script editor mode, zoals hier onder afgebeeld, helpt de actionscript gebruiker met het osptellen van het script met de juiste syntax en in de correcte format.

Stel je wilt een url link toevoegen, maar je weet niet meer precies wat de code daar voor is. Dan kun je twee dingen doen. De Flash HELP raadplegen of de scripteditor mode activeren door op de Button te drukken.

Druk op F9 of ga naar ‘Window > Actions’ om het Actionscript Panel te openen. Klik vervolgens de script editor mode aan. Kies uit de linkerkolom de optie getUrl en dubbelklik daarop. Er verschijnen nu drie invul balken, waarin je kunt aangeven om welke pagina het gaat (bijvoorbeeld mijnwebsite.html), hoe je deze wilt openen (_self, _blanc etc) en of je een variabele wilt verzenden. Dat laatste is voor het maken van een eenvoudige link niet van belang (wel als je met

47

variabelen werkt). De eerste twee uiteraard wel. Tijdens het invullen van de juiste gegevens maakt de script editor het actionscript op in de juiste format. Zo hoef je dus, voor de meest voorkomende scripts, niet te weten hoe je het precies schrijft en maak je dus minder snel fouten. Het is een ideale functie voor de beginnende actionscripter. Action script is ooit bedoeld om simpele functies uit te voeren om een animatie te controleren, zoals stop() of Play(). Maar naarmate Flash uitgebreider werd, moest ook actionscript uitgebreid worden. Alleen actionscript is in beginsel nooit bedoeld voor complexe scripts en is daarom voor lastige scripts behoorlijk lastig onder de knie te krijgen. In actionscript 1.0 zit nog flink wat inconsequentie in de opbouw van bepaalde functies. Maar elke nieuwe versie van de programmeertaal wordt verbeterd, dus zo ook actionscript. We zijn nu aanbeland bij actionscript 2.0, en niet ver verwijderd van actionscript 3.0 dat waarschijnlijk gebruikt gaat worden voor Flash 9. De huidige versie van actionscript is een volwassen taal geworden met zeer veel mogelijkheden dat vergelijkbaar is met een scripttaal als PHP.

48

Oefening 1 Button m et hyperlink • • •

Maak vooraf een nieuwe Button (zie onderdeel Button). Plaats deze Button in je animatie. Nu moeten we nog een actie toevoegen aan deze Button, dit kunnen we doen door in de animatie de Button te selecteren en daarna via het snelmenu te kiezen voor actions (sneltoets voor dit paneel: F2). Daarna opent zich een venster actions.

•

De actie die we moeten kiezen om een andere pagina op te roepen is de actie geturl. Selecteer dit in de linkerkolom, dit verschijnt rechts en we kunnen ook onderaan enkele parameters meegeven.

49

Een beetje uitleg bij de parameters:  url Indien je gewoon kiest voor pagina.htm(l) moet deze pagina onder dezelfde map staan als de animatie. Indien je een volledige ander pagina wil benaderen plaats je er http:// voor.  Window Een extra toevoeging van waar de nieuwe pagina zich moet openen. Ofwel kies je uit de voorgestelde target namen, ofwel typ je zelf de naam van je target frame in. _self weergeven in het huidige frame van het window. _blank opent een nieuw window. _top gebruik het huidige window.  variables Een extra mogelijkheid voor het doorsturen van waarden in variabelen, hier kunnen we kiezen voor don’t send. Test dit uit. Command Enter om de movie te laten afspelen.

50

Oefening 2 Button voor e-mail •

•

•

•

•

Stap 1 Maak een nieuw 'Button Symbol', klik daarvoor F8, geef het de naam Briefje. Wijzig de Button naar eigen wens voor de Roll over, Down, etc.. Stap 2 Keer terug naar de Scene, open de bibliotheek via Windows>Library. Sleep nu die Button in het movie venster. Selecteer daarna deze Button en via de rechtermuisbutton selecteren we de Properties. (zie les Button met hyperlink) Stap 3 In het tabblad Actions klikken we op de '+' Button om een actie toe te voegen. Daar het hier om een Button gaat, kiezen we voor het toevoegen van een on mouseEvent. Na deze keuze krijg je de verschillende mogelijkheden (press, release, roll over, ...), in ons voorbeeld maken we de keuze press. Stap 4 Om naar een andere pagina te verwijzen kiezen we get url. Hier kunnen we de HTML code opgeven om e-mail te versturen. mailto: username@domeinnaam. Men kan dit ook nog uitbreiden met ?subject=onderwerp om zo onmiddellijk het onderwerp in het mailtje toe te voegen.

Stap 5 Test dit uit. (Test movie of Command Enter). Om dit volledig uit te testen zal je dit moeten bewaren en opnemen in een HTML document.

51

Oefening 3 Geluid invoegen Een flashanimatie zonder geluid is bijna niet voor te stellen, in dit en de volgende delen behandelen we het invoegen en gebruiken van geluid. In dit gedeelte maken we een balkje waarin je muziek kan laten afspelen, pauzeren en stoppen. •

We bereiden eerst ons filmpje voor in Modify > Document (Command + M). Ik heb hier de grote en achtergrondkleur wat aangepast. Maar wat belangrijker is, is de Frame Rate. Je moet het op 1 zetten zodat de seconden van je muziek overeenkomen met het framenummer.

•

We moeten natuurlijk een muziekje hebben. Je doet dat door File > Import.

•

Daar selecteer je het gewenste type (wav of mp3) en selecteer je het bestand dat je wilt. Ik heb hiervoor een stukje uit "Cleaning Out My Closet" van Eminem gekozen.

52

Note: Muziekfragmenten van langer dan 30 seconden gebruiken, zonder de schriftelijke toestemming van de auteur is strafbaar. We hebben je gewaarschuwd! Je ziet dat er in je library een symbol bijgekomen is. •

We voegen de muziek toe op de eerste layer. Je doet dit in het Propertiess Panel, waar rechts je muziekinstellingen staan. (zie wel dat je het eerste frame hebt geselecteerd)

•

Zorg ervoor dat Sync op Stream staat. Dat zorgt ervoor dat je muziek gelijk loopt met je filmpje. Je voegt na de laatste seconde van je muziek een keyframe toe (als je muziek 26 seconden lang is, dan zet je een keyframe op 27). Op je eerste keyframe voeg je de actie stop() toe. Op je laatste keyframe gotoAndStop(1). De layer muziek ziet er nu zo uit:

• • • •

•

Nu voeg je 3 layers toe, 1 voor de play Button, 1 voor de stop Button en 1 voor de pauze Button. Maak deze Buttons (zoals onderstaande afbeelding) of typ in de tekst van de 3 buttons. (Play, Pauze en Stop)

• • • •

Bij de acties van de Button play zet je de actie play. Bij stop zet je gotoAndStop (1). Bij pauze zet je stop(). Nu enkel nog uittesten!

53

Overige bewerkingen Distributie naar lagen (Distribute to Layers) Dit is een nieuwe vondst en het is er eentje die je heel veel tijd kan uitsparen. Waarschijnlijk ben je wel al eens gestart aan een project waarbij je een heleboel objecten had staan op één laag en later tot de conclusie bent gekomen, dat elk object (Graphics, Movie Clips,…) op een aparte layer moet staan. Dankzij Flash MX is dit euvel verholpen. Wat je moet doen is de objecten selecteren en naar Modify>Distribute to Layers gaan. Als je objecten benoemde symbolen zijn en je distribueert die naar lagen, dan krijgen de lagen de naam van je objecten. Zo weet je waar wat staat. Dit werkt ook met tekst. Je moet dan wel de tekst eerst breken (Modify>Break Apart of Command+B). Selecteer dan vervolgens alle letters en kies Modify>Distribute to Layers. Dit spaart héél wat tijd uit!

54

M ovie Publishing Publish Settings Als je de film die gemaakt hebt uiteindelijk wil gaan omzetten van .fla naar .swf (Shockwave) moet je de film eerst publishen. Om te beginnen ga je naar File > Publish Settings en dan krijg je het volgende scherm:

Je kan uit verscheidene formaten kiezen om de Flash film in op te slaan. Bij .swf published Flash een shockwave film. Een vinkje bij HTML zorgt dat de .swf in een HTML pagina gezet wordt.Een vinkje bij GIF, maakt van de Flash film een animated GIF. Voor ons is op dit moment alleen Publish als .swf van belang. Dus alleen een vinkje bij .swf is voldoende. het volgende scherm verschijnt na het klikken op het Flash tabblad:

Hier kan je een aantal eigenschappen aangeven die je de film meegeeft tijdens het publiceren. Als eerste is de Flash player aan te geven. Ik kies meestal voor player 6, omdat deze speler het meest ondersteund wordt door de browsers. Het nadeel is dat deze player een mindere performance heeft dan player 7 of player 8.

55

Daaronder kun je aangeven of de onderste layer of bovenste layer van de eerste frame eerst wordt geladen. Handig als de internetconnectie langzaam is. uit het volgende rijtje is alleen 'Protect From Import' en 'Compress Movie'. De eerste zorgt ervoor dat de film niet geconverteerd kan worden van .swf naar .fla door andere gebruikers. Dit is echter achterhaald, want er zijn meerdere Flash converters op markt die er geen enkele moeite mee hebben door deze barrière te breken. De tweede optie staat standaard aan en dat is maar goed ook. Vanaf Flash player 6 is het mogelijk de Flash film te comprimeren en dus kleiner te maken dan de originele .fla file. De 'Compress Movie' aanvinken tijdens het publiceren kan je filegrootte van je film heel wat kleiner maken. De schuifbalk verklaart zich zelf. Hiermee bepaal je de standaard kwaliteit van alle plaatjes die als JPEG gecomprimeerd zijn in je film. Als je geluid gebruikt dan is de onderste optie van belang. Hiermee kan je de kwaliteit (Quality Bitrate en compressieformaat) instellen van je mp3’s in je film. Als alle settings staan ingesteld dan druk je op OK en de film wordt gepubliceerd. Nadat deze instellingen vast staan kan je de film net zo vaak publishen na je veranderingen als je maar wilt via File > Publish... HTML en Flash Als je een Flashfilm gemaakt hebt en deze op internet zet is het verstanding deze te publishen als HTML. Dit doe je door met de muis naar ‘File’ te gaan en de optie ‘Publish Preview’ > HTML te kiezen. Flash zet dan het .swf bestand van jouw film automatisch in een HTML pagina. Deze HTML pagina wordt in hetzelfde mapje als de bronfile (fla) neergezet. Je kunt deze HTML pagina verder bewerken om bijvoorbeeld de achtergrond kleur te veranderen. Of om je Flash film in het midden te laten afspelen. Dit doe je zo: Open de map waar de Flash file en HTML pagina in staat. Selecteer de HTML pagina en druk op de rechter muisbutton en selecteer de optie ‘Open Met…’. Kies dan Kladblok uit het rijtje. Als deze er niet bij staat, kun je de pagina ook openen met een andere tekstverwerker. Nu zie je een tekstveld dat begint en eindigt met HTML en er ongeveer zo uit ziet:

56

Deze tekst is allemaal nodig om Flash weer te geven in een HTML browser. Meer over de uitleg van de codes staat in dit artikel. We gaan als eerst de titel en de achtergrondkleur van de HTML pagina aanpassen. Deze vind je redelijk bovenin de tekstfile en ziet er zo uit:

Bij ‘title’ kun je de gewenste titel neerzetten. Deze wordt linksboven in de browserbalk weergegeven als je de HTML pagina opent. Daaronder zie je ‘body bgcolor’ staan. Dit is niet de achtergrond kleur van je Flash film, maar van de HTML pagina. Wil je deze gelijk hebben, bijvoorbeeld rood, dan doe je het volgende… De kleur van het voorbeeld hierboven wordt gegeven in hexadecimalen (#ffffff). Dat hekje met die zes f-jes staat voor wit. Voor rood staat de hexadecimale waarde van #ff0000. Deze kan je opzoeken in het Color Panel van Flash. Als je naar het inktpotje gaat waar je de vulkleur kan selecteren, zie je linksboven in dit panel een preview van de kleur en de hexadecimale waarde ernaast. Om de Flash film in het midden te krijgen moet je iets toevoegen aan het tekstbestand. Je ziet dat de code om de Flash film te laten zien wordt omsloten door:

Tussen beide object tekens staat de gehele Flash code beschreven. Dit is gedaan om de browser te zeggen bij ‘object’ begint Flash en bij ‘/object’ eindigt Flash. We willen het Flash object in het midden van de pagina hebben. Dit kun je doen door een ‘center’ tag voor en na het aanduiden van het Flash object te zetten. Dit ziet er als volgt uit:

Vergeet niet dat de center tag wordt afgesloten met een ‘/’ voor de laatste center. Je kunt ook de Flash Player versie aanpassen als dat nodig is.

57

Praktijkopdracht Basis w ebsite Flash wordt tegenwoordig niet alleen gebruikt om simpele animaties te maken, maar vooral ook voor complexe websites die een animatierijke en grote vrijheid in navigatie vereisen. Op FW A vindt je veel voorbeelden en inspiratie van de mooiste huidige Flash websites. In deze tutorial zal worden uitgelegd hoe je een basis website in Flash maakt. Het is belangrijk dat de basis goed is, zodat je daarna zelf kan experimenteren met animaties en speelse navigatie. In deze tutorial gaan we uit van een website met twee pagina's en twee menubuttons die naar beide pagina's linken. Stap1 Open Flash en maak een nieuw document aan en noem deze 'basis'. Zorg dat dit document een stage grootte heeft van ongeveer 700 bij 500 pixels door op de Document Size Button onderaan het scherm te drukken. Deze is ook te bereiken via Modify > Document...

Dat is een site grootte die mooi uitkomt voor de meeste schermresoluties. Je kunt in dit menu ook de framerate aanpassen. Laat deze staan op 12fps. Stap2 Vervolgens maken we een nieuwe layer aan door op de Button ‘Insert New Layer’ te drukken:

58

Je kunt ook een nieuwe layer toevoegen via Insert > Timeline > Layer. Vervolgens we de layers beiden een naam. Noem layer 1 'achtergrond', door op de layer te dubbelklikken. Noem layer 2 'Buttons'. In deze layer komen de twee Buttons te staan en in layer 'achtergrond' komt uiteraard de achtergrond van de website. Stap3 Selecteer de layer achtergrond. Teken met de square tool de volgende site indeling:

Stap4 Je kunt een layer op slot doen als je deze niet meer gaat gebruiken en niet wilt dat deze onbedoeld wordt verschoven of aangepast. Omdat de achtergrond nu vaststaat gaan we deze layer 'locken' door op het slotje te klikken:

59

Stap5 Selecteer vervolgens layer 'Buttons'. Maak twee Buttons zoals is beschreven in de tutorial over Buttons. Sleep de beide Buttons vanuit de library (te openen via de shortcut F11 of via Window > Library) naar de stage (met de layer 'Buttons' nog steeds geselecteerd.

Geef de Buttons een gepaste naam door de Text Tool te gebruiken. Stap6 Selecteer de 'Home' Button en open vervolgens het actionscript panel via Window > Actions of de shortcut F9. We gaan in de home Button een script zetten dat er voor zorgt dat straks een pagina wordt geladen over deze basis pagina heen. Deze pagina noemen we 'home' en zullen we in stap 8 gaan maken.

60

Maar eerst zetten we het volgende script in het Actionscript Panel (zorg dat Script Assist uit staat, door op de Script Assist Button te drukken): on (release) { loadMovieNum("home.swf", 1); } Dit script laad de Flash film 'home.swf' in de huidige basis Flash site. De '1' staat voor de Level. De basis film staat op Level 0. De Flash film home.swf wordt dus 1 laag hoger ingeladen zodat deze over de basisfilm heen valt. Stap7 Herhaal stap 6 voor de pagina1 Button. Voer de volgende action in het Actionscript Panel: on (release) { loadMovieNum("pagina1.swf", 1); } Zoals je ziet moeten we een home.swf en een pagina1.swf gaan maken waarnaar wordt verwezen in de vorige scripts. Dit wordt besproken in de volgende stap. Stap8 Maak een nieuw Flash document aan, noem deze home en bewaar deze in de zelfde map als de basis site. Zorg dat de stage grootte gelijk is aan die van de basis Flash site (700 bij 500 px). Type vervolgens wat tekst in de rechter onderhoek zoals hieronder is gedaan:

Druk vervolgens op "Command + Enter" of ga naar Command > Test Movie om

61

de flash film te testen en te publiceren. Er wordt dan automatisch een swf file gemaakt, in dit geval 'home.swf'. Stap9 Maak wederom een nieuw Flash document aan en noem deze 'pagina1'. Zorg dat bij deze Flash film de stage grootte ook weer gelijk is aan die van de basis Flash site. Typ vervolgens weer wat tekst in de rechter onderhoek (het liefst iets anders dan in de home pagina zo dat je straks het verschil ziet). Druk vervolgens op "Command + Enter" om de flash film te testen en te publiceren. Beide pagina's (home.swf en pagina1.swf) zijn nu gepubliceerd en je zult ze ook zien staan in de map waar je de bronbestanden (home.fla en pagina1.fla) hebt gesaved. Deze bronbestanden kun je altijd aanpassen met Flash, de swf files niet. Stap10 Als je nu de basis site weer opent (basis.fla) dan kun je testen of de pagina’s worden geopend die je zojuist hebt gemaakt. Druk op "Command+ Enter" om de film te testen en druk op beide Buttons om te zien dat de pagina's verschijnen en veranderen:

Stap11 Het is uiteraard mooier als de home pagina direct wordt getoond als de basispagina wordt gestart. Dat doen we als volgt: Maak een nieuwe layer aan die we 'actions' noemen:

62

Selecteer vervolgens deze layer en open het Actions Panel (via F9). Zet in dit panel de volgende ActionScript: loadMovieNum("home.swf", 1); Door deze actie in de actions layer te zetten, wordt de pagina 'home.swf' geopend direct nadat de basis pagina is geladen. De basis website is nu af. Je kunt de stappen 8 of 9 eindeloos herhalen om extra pagina's te maken. Door Buttons te maken en het script uit stap 6 toe te voegen aan de Buttons kun je naar deze extra pagina's linken. Hieronder is een 'rar' bestand te downloaden met daarin alle bronbestanden van deze tutorial. Kijk deze eens rustig na als je ergens niet uitkomt. Veel succes en laat ons weten hoe mooi je Flash site geworden is... Klik hier om het bronbestand te downloaden.

63