Flash CS4 Created by Wendy Segaar

Tools‘R’Us Flash CS4

Created by Wendy Segaar

Inhoud Inleiding................................................................................................................................... 4 Uur 1 De Rondleiding ............................................................................................................ 6 Interface ................................................................................................................................ 8 Document properties ..........................................................................................................10 Layers en groups ................................................................................................................ 11 Timeline .............................................................................................................................. 13 Opslaan .............................................................................................................................. 17 Uur 2 Tekenen...................................................................................................................... 20 Vormen en kleuren .............................................................................................................22 Kleuren ............................................................................................................................... 25 Tekenen .............................................................................................................................. 30 Graphics, buttons en movieclips ......................................................................................... 39 Library ................................................................................................................................. 41 Uur 3 Animeren.................................................................................................................... 45 Animeren ............................................................................................................................ 47 Motion tween ...................................................................................................................... 47 Storyboard .......................................................................................................................... 55 Shape tween ....................................................................................................................... 55 Effects ................................................................................................................................. 58 Uur 4 Interactie .................................................................................................................... 64 Basis interactie ................................................................................................................... 66 Buttons vs. Actionscript ......................................................................................................67 Movieclips vs. Actionscript ..................................................................................................71 Uur 5 Website ..................................................................................................................... 80 Miniwebsite ......................................................................................................................... 82 Publiceren ........................................................................................................................... 89 Uur 6 Tutorials ..................................................................................................................... 92 Tutorials .............................................................................................................................. 94 Samengevat... ....................................................................................................................... 96 Bronvermelding .................................................................................................................... 98

Versie 2: Aangepast van Adobe Flash CS3 naar Adobe Flash CS4 door Sonja Rouwhorst.

HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

2


3

Inleiding Adobe Flash CS4 is een programma met erg veel mogelijkheden. Het programma wordt onder andere gebruikt voor het maken van animaties, banners en zelfs websites. Tijdens deze cursus zul je diverse skills ontwikkelen en, net als bij Photoshop en Illustrator, is het verder aan jou om je aangeleerde skills bij te houden. De onderstaande onderdelen zul je tegenkomen tijdens het doorwerken van deze cursus. 

Uur 1: Dit uur staat in het teken van de rondleiding. Je wordt bekend gemaakt met het uiterlijk van het programma en waar je de basistools en functies kunt vinden. De interface, layers, groeperen van layers, de timeline, document properties en natuurlijk het opslaan van de bestanden. Het verschil tussen een frame en een keyframe wordt besproken.



Uur 2: Dit uur ga je kennismaken met het tekenen in Adobe Flash CS4. Er worden verschillende tekentools besproken, hoe je vormen en kleuren gebruikt, wat het nut van de library is en de verschillende soorten items die je kan maken, zoals ene graphic, een button en een movieclip.



Uur 3: In dit uur komt het echte animeren aan bod. Hoe je een item laat bewegen door middel van een motion of shape tween en wat voor effecten je kunt toepassen aan je animaties.



Uur 4: Wanneer je het animeren wat meer onder de knie hebt, gaan we eens stilstaan bij de interactie. Je leer het fenomeen movieclip en button wat meer kennen. Je animatie krijgt extra actie door de invoering van jouw eigen interactie.



Uur 5 Na het uur interactie begint eigenlijk het echte werk. Wanneer je de eerste beginselen van de interactie een beetje beheerst, gaan we de basis maken voor een echte flashwebsite. Hiervoor gebruik je actionscript. Wat is dat eigenlijk? En waarom moet het in je website? Dat en natuurlijk het echt publiceren van je website komt in dit uur aan bod.



Uur 6: Het laatste uur laten we aan jou over. Zoek coole tutorials op, volg deze en hou op deze manier je aangeleerde skills bij. In een samenvattende opdracht kun je laten zien wat je allemaal hebt geleerd.

Wendy Segaar

Dit document is uitgebracht onder een Creative Commons Naamsvermelding-NietCommercieelGelijkDelen 2.5 Netherlands License. Dit betekent dat alles uit deze uitgave gekopieerd en verspreid mag worden onder bronvermelding, mits er geen commercieel gebruik van wordt gemaakt en het resultaat onder dezelfde voorwaarden wordt gedeeld.


4


5

Uur 1 De Rondleiding

Na dit uur weet je... 

hoe het werkveld in elkaar zit

 hoe je werkt met layers  hoe je werkt met frames  hoe de eigenschappen van het document aangepast worden


6


7

Interface Open het programma Adobe Flash CS4 en kies, in de middelste kolom, voor Flash File (ActionScript 3.0). ActionScript is de programmeertaal van Flash. Hier hoef je nu nog niet naar te kijken. Dit wordt later in de cursus behandeld.

Afbeelding 1. 1: openingsscherm van Adobe Flash CS4

Wanneer het document geopend is, heb je meteen het werkveld voor je. Onderstaande afbeelding benoemt de verschillende onderdelen.

1. Stage 2. Timeline 3. Properties 4. Tools 5. Workspace menu

Afbeelding 1. 2: Het werkveld

De stage en tools komen overeen met die van Photoshop en Illustrator. De timeline geeft de verstreken tijd aan. Dit gebruik je voornamelijk bij animaties. De Properties gebruik je om bijvoorbeeld het document op te maken (grootte, vorm, frame-rate etc.). Daarnaast kun je verschillende tekentools gebruiken. Rechts bovenin zie je een menu om het werkveld aan te passen. Waarschijnlijk staat hier nu “Essentials” geselecteerd.

  Opdracht   HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

8

We gaan het werkveld aanpassen naar een andere layout voor de eerste opdracht. In Flash zitten een aantal verschillende layouts voor het werkveld. Elke layout past bij een bepaald type gebruiker van Flash. Zo is er een layout voor een animator, voor een designer en voor een developer bijvoorbeeld. Je kunt voor zo’n standaard layout kiezen, maar je kunt het ook nog helemaal aan je eigen wensen aanpassen. 1. Klik op het woord “Essentials” in de menu balk en je krijgt een drop down menu zoals hieronder. Kies voor de layout “Classic”.

Afbeelding 1. 3: het werkveld menu

2. Je ziet dat alle panelen verplaatsen. De timeline staat nu bovenaan en de tools links. Ook zijn er een aantal extra panels bijgekomen die niet zichtbaar waren bij de vorige layout. Zie de figuur hier rechts naast. Klik er maar eens op om ze te bekijken. Van boven naar beneden gaat het om de panelen: color / swatches, align / info / transform, library / motion presets.


9

Document properties Natuurlijk wil je zelf bepalen hoe groot of klein je document is. Dit kun je instellen door middel van de Document Properties. Er zijn twee manieren om de Document Properties te openen. Je kunt in het hoofdmenu kiezen voor Modify en vervolgens voor de optie Document. De shortcut voor Document Properties is [ctrl] - J.

Afbeelding 1. 4: het menu modify

De tweede manier om de Document Properties te openen, is door rechts in het scherm, in de properties-tabblad, op de Size afmetingen te drukken. Zie de afbeelding hiernaast.

Afbeelding 1. 5: Het properties tabblad

  Opdracht   We gaan de Document Properties aanpassen voor de tweede opdracht. 1. Open de Document Properties op de manier die jij het makkelijkst vindt. 2. Als het goed is, zie je nu hetzelfde als de onderstaande afbeelding. Uiteraard zul jij de onderstaande afbeelding zonder beschrijvingen zien. In de beschrijving staan de elementen die je het meest zult gebruiken. 1. Dimensions: hiermee bepaal je de afmetingen van het document. Je kunt er alles aan geven. 2. Background color: het woord zegt het al, de kleur van de achtergrond. Wanneer je op het witte vierkantje klikt krijg een scherm met diverse kleuren. Ook kun je zelf een kleurencode ingeven. Zie Afbeelding 1. 7 3. Frame rate: Dit is vrij essentieel. Dit staat voor de hoeveelheid frames die per seconde worden afgespeeld. Het is te Afbeelding 1. 6: de document properties vergelijken met een film. Een standaard in de filmwereld is 25 frames per seconde. Voor het internet is het slim om de frame rate onder de 20 te houden. Dit omdat veel computers een hogere frame rate gewoon niet aan kunnen. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

10

Afbeelding 1. 7: het kleurenpalet voor de background color

4. Neem alle instellingen die je in Afbeelding 1. 6 ziet staan over. Links onderaan zie je een knop ‘Make Default’. Deze knop gebruik je wanneer je vaak dezelfde instellingen voor een document gebruikt. Deze instellingen kun je dan opslaan als de default, waardoor elk nieuw document jouw voorkeursinstellingen heeft. 5. Druk op de knop OK om het venster te sluiten. 6. Het document is aangepast. Sla het bestand vast op in een handige map en geef het de naam “Animatie_uur3.fla”.

Layers en groups Net als in Adobe Photoshop en Illustrator, werk je in Flash ook met layers. Dit is bijna noodzakelijk omdat je vaak meerdere animaties in één bestand hebt zitten. Wanneer je alle animaties in één layer zou zetten, zou je deze alleen na elkaar kunnen afspelen. Het handige van de layers is, dat je de animaties dan naast elkaar kan afspelen, oftewel tegelijk. Je ziet links naast de timeline een apart vakje staan voor de layers. Dit is het gedeelte waarin je layers toevoegt, verwijdert en beheerd. Je kunt het vergelijken met de layers palette in Adobe Photoshop en Illustrator.

Afbeelding 1. 8: layers

1. De layer Deze kun je een andere naam geven en verplaatsen naar boven en naar beneden. 2. Layers toevoegen, verwijderen en groeperen Het vierkantje met hoekje is om een layer toe te voegen, het mapje is om diverse layers te groeperen en het prullenbakje is om layers te verwijderen. 3. Layers aan- en uitzetten en locken Het oogje is het aan- en uitzetten van layers en het slotje is om de layers te locken.

Deze layer palette is minder uitgebreid. Je kunt er layers toevoegen, verwijderen en groeperen. Verder kun je de layers zelf aan- en uitzetten en locken. Dit laatste kan erg handig zijn wanneer een veel tekeningen over elkaar staan. Door de layers te locken, voorkom je dat je per ongeluk in andere layers gaat werken of (delen) van andere tekeningen selecteert of bewerkt.


11

  Opdracht   We gaan een aantal layers toevoegen, zodat het document straks helemaal klaar staat voor de animatie(s) die je gaat maken. 1. In totaal gaan we vijf layers plaatsen. Klik vier keer op het vierkantje links onderin het layers palette om vier extra layers aan te maken. Je hebt nu in totaal vijf layers staan. 2. We gaan de layers ieder een naam geven. Dit doe je door op de layer te dubbelklikken. Bekijk onderstaande afbeelding en neem de namen en posities van de layers over. 1. Actions In de Actionslayer zet je al je actionscript code. Dit komt later in de cursus terug 2. Animatie 2 Je tweede animatie die we later in deze cursus gaan maken 3. Animatie 1 De eerste animatie die we later in de cursus gaan maken 4. Background Dit wordt je achtergrond. Dit kan een kleur of een (zelfgetekende) afbeelding zijn. Afbeelding 1. 9: benoemde layers 5. Labels Labels geet je aan de keyframes. Dit zijn een soort ankerpunten. Omdat een animatie of flashwebsite vaak heel veel keyframes bevat, is het lastig te zien wat er op welk keyframe staat. De labels geven je hier meer inzicht over. Daarnaast is het handiger om buttons te linken. Dit laatste komt later in de cursus terug. Onthoud het in ieder geval, want het is een vrij belangrijk onderdeel. 3. Om te laten zien hoe je layers groepeert, gaan we nu een mapje aanmaken. Druk daarvoor op het mapje onderaan het layers palette. 4. Geef de map de naam Animaties en plaats de groep boven de layer animatie 2. De map benoemen doe je door er dubbel op de klikken. Je kunt daarna de map gewoon naar boven slepen. 5. Selecteer nu de layers Animatie 1 en Animatie 2. Dit doe je door de [ctrl] - toets ingedrukt te houden. Sleep de layers over het mapje, tot de muis precies op het mapje staat en laat de muis los. Zie Afbeelding 1. 10 Als controle voor jezelf, kun je zien dat de twee layers iets naar binnen springen. Dit betekent dat ze in het mapje staan. Wanneer je op het pijltje klikt, links van het mapje, kun je de map op en dicht doen. Dit is handig, wanneer je veel animaties hebt. Dat houdt overzicht en maakt je layers palette niet zo vol.


12

Afbeelding 1. 10: layers gegroepeerd

6. Je document is nu klaar voor gebruik. Vergeet het bestand niet op te slaan.

Timeline De timeline beheert de statische en bewegende beelden van je animatie. Dat wil zeggen: alles. Alles wat op de stage te zien is, is ook vastgelegd op de timeline. Hoe meer je werkt met Flash CS4, hoe meer je vertrouwd raakt met de timeline. Op de timeline zie je verschillende elementen.

Afbeelding 1. 11: de timeline

1. Timeline. Dit is de timeline op zich. De getalletjes die hier staan komen overeen met het aantal verlopen frames. Je kunt hier ook de tijd uit aflezen. Voorbeeld: je hebt de frame rate op 20 frames per seconde gezet (in de Document Properties), dan weet je dat er 20 x 60 = 1200 frames in een animatie van een minuut zitten. Dit hoef je niet te onthouden verder. Flash werkt altijd met frames en niet met tijd. 2. Keyframe Een keyframe is te herkennen aan het stipje of rondje wat in het vakje staat. Een zwarte stip betekent dat de keyframe gevuld is (dit kan van alles zijn, van een streep tot aan een afbeelding op hoge resolutie). Een wit rondje betekent dat de keyframe er al wel staat, maar nog niet gevuld is. Een keyframe houdt in, dat er iets gebeurt. Het is een “sleutel” tot de volgende stap. 3. Frame Wanneer je wel een vakje ziet staan, maar geen stip, dan is dit een gewoon frame. De animatie wordt voortgezet zonder dat er iets gebeurt.


13

4. Options menu In dit menu kun je de timeline aanpassen. Boven, beneden, links of rechts van je stage en je kunt de grootte van de (key)frames aanpassen. Hier wordt verder niet op ingegaan, omdat dit nauwelijks gebruikt wordt. Je kunt er zelf even naar kijken, als je nieuwsgierig bent. 5. Verslepen Je kunt de timeline en layers palette groter en kleiner maken. Dit doe je door je muis of een krijgt. Wanneer je deze tekentjes ziet, zo neer te zetten dat je een kun je, d.m.v. slepen de timeline en layers palette groter en kleiner maken. Keyframes Keyframes zijn de sleutels tot je animatie. Om je het verschil te laten zien is er een kleine opdracht aan gewijd. Op deze manier doe je ook meteen ervaring met de timeline op.   Opdracht   We gaan twee vormen maken en deze in keyframes zetten. 1. Maak voor deze opdracht een nieuw document aan. De shortcut voor een nieuw document is [ctrl] - N. Je ziet een venster met verschillende opties. Waarschijnlijk staat Actionscript 3.0 standaard geselecteerd. Deze kun je gewoon aanhouden. 2. Geef de eerste, en enige layer, de naam Cirkel. Om de layer te hernoemen moet je er op dubbelklikken. Je zult zien, dat er al een blank keyframe (leeg keyframe) als default staat.

Afbeelding 1. 12: benoemde layer Cirkel en een blank keyframe

3. Selecteer uit de Toolspalette de Oval Tool en teken een cirkel op de stage. De shortcut voor de Oval Tool is [O]. Je zult zien, zodra je de cirkel hebt getekend, dat de keyframe een zwarte stip wordt. Dit betekent dat deze gevuld is. We gaan de cirkel één seconde laten staan, en daarna een seconde laten verdwijnen. De frame rate van het document is 12 frames per seconde. Er zijn dus 12 frames nodig om de cirkel één seconde te laten zien. 4. Selecteer frame nummer 12. Er zijn drie manieren om een nieuw frame te plaatsen. a. Via het hoofdmenu HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

14

b. c.

Via de rechter muisknop Via een shortcut

Afbeelding 1.12: drie manieren om een nieuw frame aan te maken

5. Maak een nieuw frame aan op framenummer 12. Kies uit bovenstaande manieren de juiste manier die jij prettig vindt. Je zult merken dat je uiteindelijk de shortcuts veel gaat gebruiken, omdat dit gewoon lekker snel werkt. De shortcut voor het aanmaken van een nieuw frame is op een Mac iets anders dan bij Windows. De shortcut op een Mac zal waarschijnlijk [fn] - [F5] zijn, terwijl deze bij Windows gewoon [F5] is. Wanneer je de frame hebt aangemaakt, zie je dat de tussengelegen frames automatisch ook gevuld zijn. 6. We gaan de frame vervangen door een blank keyframe (lege keyframe). Dit gaat op dezelfde manier als een gewoon frame. Plaats een blank keyframe op een manier die jij het makkelijkst vindt. De shortcut voor een blank keyframe is [F7]. De timeline ziet er na afloop als volgt uit.

De eerste seconde is nu gedaan. We gaan de volgende seconde leeg laten. 7. Klik op frame 24 en plaats nogmaals een frame door op [F5] te drukken. Denk aan het optellen. Eén seconde was 12 frames, dus twee seconde is 24 frames.

8. In het laatste deel gaan we nog een seconde toevoegen waarin een vierkant op het scherm komt te staan. Tot nu toe heb je twee manieren van frames invoegen gebruikt, namelijk een normaal frame [F5] en een blank keyframe [F7]. Wanneer je een normaal frame invoegt, blijft de inhoud staan zoals die in het laatste keyframe stond. Wanneer je een blank keyframe toevoegt, wordt de inhoud uit voorgaande frames niet overgenomen. Je kunt er ook voor kiezen om een keyframe toe te voegen HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

15

met [F6]. In dat geval wordt de inhoud van het voorgaande keyframe overgenomen. Dit gaan we een keer proberen a. Plaats een keyframe op frame 25 shortcut [F6] b. Teken hier vervolgens een vierkant. Kies zelf welke kleur je deze wilt geven. c. Plaats in de volgende seconde op frame 36 weer een frame. shortcut [F5] Jouw werk zou nu overeen moeten komen met Afbeelding 1. 13.

Afbeelding 1. 13: frames en keyframes op een rij

9. Druk op [Enter] en kijk wat er gebeurd. Eigenlijk heb je nu al een kleine animatie gemaakt. Labels Bij het benoemen van Afbeelding 1. 10 kwam het begrip labels al naar voren. Labels zet je ook op keyframes. Deze keyframes blijven altijd leeg. Labels gebruik je alleen voor jezelf, om het overzicht te houden in je animatie of website.   Opdracht   We gaan labels toevoegen aan de opdracht met de cirkel. 1. Maak een nieuwe layer aan en zet deze onder de layer Cirkel 2. Geef deze layer de naam Labels Een layer opnieuw benoemen doe je door er dubbel op te klikken 3. Wanneer je de eerste (default) blank keyframe selecteert, zie je rechts in de properties palette staan. Hier kun je van alles invullen. In dit geval zet je er Cirkel in en druk op [Enter]. Als je nu op de Labels layer kijkt, zie je een vlaggetje staan bij de blank keyframe en daarachter het woordje Cirkel. Dit is je label van het eerste keyframe. 4. We gaan dit ook doen voor de lege keyframe en het keyframe van het vierkantje. Geef zelf passende namen voor deze keyframes. Voor je een label kan maken bij de andere keyframes, moet je op de layer van Labels nog twee keyframes bijmaken met [F6]. 5. Wanneer je de labels hebt toegekend, zal je resultaat overeenkomen met onderstaande afbeelding.


16

Afbeelding 1. 14: de labels die zijn toegevoegd aan de keyframes

Opslaan Je hebt nu twee documenten openstaan. In het cursusmateriaal van Photoshop en Illustrator is al benadrukt hoe belangrijk het is om alles goed op te slaan met handige namen en in handige mappen. Dit geld uiteraard ook voor Flash CS4 bestanden. Er zijn, net als bij Photoshop en Illustrator, diverse opties hoe je een bestand kunt opslaan. *.fla Dit is het rauwe bestand van flash. Dit is alleen te openen met Flash CS4 en kan gezien worden als het Master bestand, oftewel, het origineel. Het is heel belangrijk dit bestand altijd te bewaren. Alleen in dit bestand kun je dingen veranderen. *.swf Dit is het meest bekende bestand van Flash CS4. SWF staat voor Shockwave Flash File. Heel veel eenvoudige games op internet (bijvoorbeeld op de websites http://www.zylom.com en http://www.spelletjes.nl) worden weergegeven door middel van de *.swf extensie. Deze bestanden zijn te openen met een Flash Player. Elke moderne browser op het internet heeft standaard een plugin voor deze flashplayer. Een *.swf kan op twee manieren opgeslagen worden. 1. Via het hoofdmenu, exporteren naar een Flash-movie. Standaard staat dan de extensie .swf geselecteerd. 2. Tijdens het maken van een Flash animatie, kun je deze al testen door op [ctrl] [Enter] te drukken. Het filmpje gaan dan afspelen en automatisch wordt er in dezelfde map als waar het *.fla bestand is opgeslagen, een *.swf bestand opgeslagen.   Opdracht   We gaan beide documenten opslaan. Het eerste document is het document met de vijf layers en het tweede document is het document met de cirkel en het vierkant in de keyframes. 1. Sla het eerste document op met de extensie .fla. Geef het een handige naam en bewaar het in een handige map. 2. Sluit dit document. 3. Je hebt nu alleen nog het tweede document voor je neus. Sla eerst het .fla bestand op in een handige map en geef het een handige naam. 4. Druk nu op [ctrl] - [Enter] om het .swf bestand aan te maken en het filmpje af te laten spelen. In principe is het .swf bestand nu aangemaakt. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

17

5. Om er zeker van te zijn dat de .swf is opgeslagen, gaan we het nogmaals opslaan. Kies uit het hoofdmenu de optie File, vervolgens de optie Exporteer en tot slot Export Movie…Sla het bestand op onder dezelfde naam als het .fla bestand.

Afbeelding 1. 15: hoofdmenu exporteren

Je ziet in het window van opslaan, dat er achter de bestandsnaam .swf staat. Een goed teken. Als het goed is zal tijdens het opslaan de opmerking verschijnen over het al bestaan van het bestand. Dit betekent dat het goed is gegaan en je kunt het bestand gerust overschrijven. Wanneer je de opmerking niet krijgt heb je óf een andere bestandsnaam gebruikt, óf er is met het bekijken van het filmpje iets mis gegaan. Dit is niet erg, het belangrijkste is, dat het nu gelukt is!

Afbeelding 1. 16: waarschuwing overschrijven

Je kunt de instellingen voor het exporteren veranderen als je dat zou willen. In het menu File zit een optie Publish Settings. Je krijgt dan onderstaand scherm te zien. Je kunt bijvoorbeeld aan geven welke Flashplayer er gebruikt moet worden, welke versie van ActionScript compatible is en een hele hoop andere instellingen. Voor nu is het verder niet van belang, dus je kunt gewoon op OK drukken.


18


19

Uur 2 Tekenen


Hoe je kunt tekenen in Flash

 Hoe je kleuren van je getekende objecten kunnen veranderen  Hoe je de library gebruikt  Het verschil tussen een graphic, een button en een movieclip


20


21

Vormen en kleuren Toolspalette

Afbeelding 2.1: toolspalette van Flash CS4

Linetool vs. Rectangletool Anders dan in Photoshop en Illustrator, combineert Flash niet automatisch de lijn en de vulling. Bij het tekenen van een lijn teken je één ding, namelijk de rand. Bij het tekenen van een vorm (rectangle) teken je twee dingen tegelijk, namelijk zowel de rand, als de vulling.

Afbeelding 2.2: verschillende standaard vormen in Flash CS4


22

  Opdracht   Zoals je in afbeelding 2.2 kunt zien, heeft Flash meerdere standaard vormen. In de onderstaande opdracht komen ze allemaal een keer voorbij. 1. Maak een nieuw bestand aan en sla deze meteen op in een handige map en geef het de naam Vormen.fla. De shortcut voor een nieuw bestand is ctrl - [N]. 2. Nu gaan we van alle vormen er eentje op het canvas plaatsen. Als het goed is, zie je nu dezelfde vormen staan als op afbeelding 2.3. Dat ze misschien niet op dezelfde plaats staan, is niet erg.

Afbeelding 2.3: verschillende vormen op het canvas

3. Omdat nu bij de rechthoekige en ronde vormen niet duidelijk is welke tool je gebruikt hebt, gaan we de vormen even benoemen. Selecteer hiervoor de Text Tool en schrijf onder de vormen de naam van de tool. Jouw werk zal nu overeenkomen met de afbeelding 2.4.

Afbeelding 2.4: de verschillende vormen benoemd met de naam van de tool


23

Het lijkt in eerste instantie misschien niet zo, maar er zit wel degelijk verschil in de Rectangle en de Recangle Primitive Tool en de Oval en Oval Primitive Tool. Het verschil zit hem in het bewerken ervan. Wanneer je de vormen apart van elkaar selecteert, dan zul je de Properties mee zien veranderen. Bij de Primitive Tools kunnen de hoeken en vormen bewerkt worden, terwijl het bij de gewone Rectangle en Oval Tools slechts bij de lijn en vulling blijft.

Afbeelding 2.5: de properties voor de Rectangle (1) en de Rectangle Primitive tool (2 en 3)

Omdat we nu twee rondjes en twee rechthoeken hebben, gaan we de Primitive vormen veranderen, zodat je het verschil tussen deze twee ziet. 4. Selecteer de Rectangle Primitive, door deze éénmaal aan te klikken. Je ziet dat de properties rechts verandert met een aantal opties. Zie afbeelding 2.5. als het goed is, zie je nu de middelste properties staan. 5. Op de onderstaande afbeelding zie je een onderdeel van de properties. Speel er maar eens wat mee om te kijken wat het precies doet.

Afbeelding 2.6: de properties voor de hoeken van de Rectangle Primitive

Wanneer je op het slotje klikt, dan kun je de hoeken afzonderlijk van elkaar vervormen. 6. Maak de onderstaande vorm.

Afbeelding 2.7: een vervormde Rectangle

De Primitive Oval vorm is ook te bewerken, maar dat gaat net even anders. 7. Selecteer de Primitive Oval door er éénmaal op de klikken. Je ziet de properties veranderen. Het belangrijkste staat op de onderstaande afbeelding.

Afbeelding 2.8: de properties van de Primitive Oval

Je kunt de Primitive Oval half “openmaken”, alsof je een Pacman poppetje hebt. Je kunt de binnenkant “openmaken”, alsof je de letter O maakt. Speel er maar eens mee om te kijken wat het allemaal doet. Om alle instellingen weer te wissen, druk je op Reset. 8. Maak nu de onderstaande vorm. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

24

Afbeelding 2.9: een vervormde Primitive Oval

Als het goed is zie je nu ongeveer dezelfde afbeeldingen als in afbeelding 2.10. Het verschil in selecteren bij de gewone vormen en de Primitive vormen is het aanklikken ervan. Een gewone vorm wordt geselecteerd door er met de muis een kader om de vorm te trekken of door te dubbelklikken, terwijl de Primitive vormen slechts één muisklik nodig hebben. De gewone vormen kunnen ook voor een deel geselecteerd worden. Dit doe je door met de muis een kader te trekken om het gewenste deel. Speel er maar eens mee om te ontdekken hoe het in zijn werk gaat.

Afbeelding 2.10: alle vormen op een rij

9. De eerste kennismaking met vormen is nu achter de rug. Sla het bestand op in een handige map en geef het een handige naam.

Kleuren Net zoals in Photoshop en Illustrator kun je in Flash werken met kleuren. Er zit niet veel verschil in de manier van werken met kleur tussen de programma’s. Mocht je nog even willen weten hoe het ook alweer zat, dan kun je het stuk over kleuren in het derde uur van de Photoshop cursus nog even doorlezen. Hieronder zal even kort de verschillende opties in Flash doorgelopen worden.

Afbeelding 2.11: de lijn- en de vulkleur uit de toolspalette

1. De lijnkleur 2. De vulkleur 3. Resetten naar de default, de voor en achtergrondkleur wisselen en de optie “geen kleur” selecteren.

Het zwarte vierkantje geeft de kleur aan. Wanneer je hierop klikt krijg je een voorgeprogrammeerd kleurenpalet te zien. Je kunt ook de kleuren helemaal zelf instellen. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

25

Afbeelding 2.12: kleurenpalet

Om zelf een kleur samen te stellen kies je voor de optie rechtsboven (zie afbeelding 2.12). Wanneer je voor het samenstellen van een eigen kleur kiest heb je verschillende mogelijkheden om de kleur te selecteren. Onderstaande afbeelding laat zien welke opties er zijn. Daar onder staat een korte omschrijving wat elke optie inhoudt.

Afbeelding 2.13: verschillende opties om een kleur samen te stellen

1. Door met de muis in de cirkel te klikken en te schuiven kun je een kleur kiezen. De kleur wordt weergegeven in de balk bovenaan. 2. Door te spelen met de Hue, Saturation en de Brightness kun je je eigen kleur samenstellen. Deze optie is vooral handig als je de waarden weet van de kleuren. Mocht je willen weten hoe het ook alweer zat met de Hue, Saturation en de Brightness, lees dan nog eens het stukje over kleuren door in het derde uur van de Photoshop cursus. 3. De derde optie geeft een lijst met voorgeprogrammeerde kleuren weer. Deze kleuren hebben speciale namen. In het drop down menuutje (nu staat er Apple in) kun je verschillende soorten kiezen. Er staat ook een kopje Webcolors in. Dit is handig. Dan kun je uit de meest gebruikte kleuren op internet kiezen. 4. Deze optie geeft het spectrum van alle kleuren weer. Daarnaast kun je een afbeelding inladen en daar de kleuren uithalen door middel van een pipetje. Een nieuwe afbeelding kun je ophalen onder het drop down menuutje met “Palette” erin. 5. De laatste optie laat een aantal gekleurde krijtjes zien. Wanneer je een krijtje aanklikt zie je de naam van de kleur bovenaan verschijnen.


26

Voor alle opties geldt, dat je de kleur die boven in de balk verschijnt (met het vergrootglas ervoor) kun slepen in de vakjes die onderin staan. Zo kun je een aantal kleuren, die niet standaard geprogrammeerd zijn, vastleggen in dit kleuren palette. Zo heb je toch altijd de juiste kleuren bij de hand.

Afbeelding 2.14: een gekozen kleur vastleggen in de palette

Naast de opties van afbeelding 2.13 kun je ook nog kiezen hoe de kleur er precies uit moet zien. Dit kun je aangeven in het Color-palette aan de rechterkant van het scherm.

Afbeelding 2.15: colorspalette

  Opdracht   In het colorspalette van afbeelding 2.15 zie je dat je een type kleur kan selecteren. De default staat op Solid. We gaan de verschillende mogelijkheden doorlopen om je er kennis mee te laten maken. 1. Open de die je in de vorige opdracht hebt gemaakt. We hebben verschillende vormen gemaakt met behulp van de Rectangle en Rectangle Primitive tools. 2. Selecteer de eerste vorm. Je mag zelf bepalen welke vorm je neemt. In dit voorbeeld gebruikten we de Rectangle vorm. Om de Rectangle of Oval vormen in zijn geheel te selecteren moet je er een kader met de muis omheen slepen of dubbelklikken op de vorm. Let op dat je de tekst niet meeneemt.


27

3. Geef de vulkleur van de vorm de kleur rood. De lijnkleur kun je gewoon zwart laten. Maak wel de lijn wat dikker. Dit doe je door de vorm te selecteren en in de propertiesbalk onderaan de dikte van de lijn in te stellen. Zet deze op 3 pixels. In Flash CS4 zijn de lijn en de vulkleur altijd gescheiden. Hou hier dus rekening mee wanneer je tekent in Flash.

Afbeelding 2.16: propertiesbalk van de rectangle vorm

4. De vulling van de eerste vorm is nu Solid (gelijk). Dat is natuurlijk niet heel erg spannend. Flash CS4 heeft daarom verschillende opties om de kleur wat leuker te maken. Bekijk onderstaande afbeelding en selecteer de Linear optie.

Afbeelding 2.17: de opties in de colorspalette

5. Waarschijnlijk is je vulkleur een zwarte gradient geworden. Natuurlijk is dat niet de bedoeling. Daarom kun je door middel van het spectrum de juiste kleur weer terugzoeken. Voor deze oefening kun je de R uit het spectrum helemaal op maximaal (255) zetten. Je zult zien dat de gradient verandert in een rode kleur.

Afbeelding 2.18: de gradient een rode kleur geven

6. Herhaal punt vijf voor de Rectangle Primitive, de Oval en de Oval Primitive vorm. Wees creatief en geef verschillende kleuren en speel wat met de opties uit afbeelding 2.17. Je kunt bijvoorbeeld de schuifjes van de gradient eens wat verschuiven om te kijken wat voor effect dat geeft. De bitmap optie komt later aan bod. Tip: bekijk onderstaande afbeelding. Net als bij Photoshop, kun je, wanneer je net onder balk klikt, kleuren toevoegen aan de gradient. Dit geeft een leuk effect. Speel er maar eens mee. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

28

Afbeelding 2.19: meerdere kleuren in één gradient

Wanneer je de vormen bewerkt hebt, kun je deze eens vergelijken met het onderstaande resultaat. Vergelijk het met jouw werk.

Afbeelding 2.20: het resultaat van een beetje spelen met de kleuren en de verschillende opties

7. Er is nu één optie nog niet gebruikt, en dat is die van de Bitmap. Met de Bitmap kun je een afbeelding in de vorm zetten. En hoe persoonlijker kun je het maken, dan met een afbeelding van jezelf? Dat gaat we nu ook doen. Selecteer de Polystar vorm en selecteer vervolgens in de Colors palette de optie Bitmap. Het zijn, omdat je nog geen afbeelding in de library hebt staan, dat je bij het selecteren van Bitmap meteen een window krijgt om een afbeelding te selecteren.

Afbeelding 2.21: de optie Bitmap in de colors palette

8. Mocht je eerst bovenstaande afbeelding te zien krijgen, dan druk je op Import… om een afbeelding te kiezen voor in de vorm. Wanneer je afbeelding aan de grote kant is, zul je zien dat deze niet helemaal lekker past. Het is daarom belangrijk dat je afbeeldingen, die je gebruikt om een vorm in te vullen, van te voren op maat maakt. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

29

Afbeelding 2.22: het eindresultaat

9. Nu heb je alle vormen ingevuld met verschillende soorten vulling. Sla het bestand op in een handige map.

Tekenen Natuurlijk kun je in Flash ook tekeningen maken. Het is anders dan tekenen in Illustrator, al kun je wel overeenkomsten zien in de tools die heb gebruikt. We gaan een tekening maken, die we later gaan gebruiken bij het animeren in het vierde uur. In dit stukje leer je tekenen in Flash en daarnaast maak je kennis met de verschillende symbolen en leer je efficiënt werken met de library.   Opdracht   We gaan een glimmende smiley maken. De smiley komt van de website http://www.bewired.nl. 1. Maak een nieuw document aan en neem de onderstaande instellingen over. De instellingen kun je invullen in de Document Properties

Afbeelding 2.23: instellingen van het nieuwe document


30

2. Hernoem de eerste layer en geef het de naam bg smiley Hernoemen doe je door een dubbelklik op de layer te geven. BG staat voor Background. 3. Selecteer de Oval tool uit de Toolspalette en maak een cirkel op het canvas. Op de propertiesbalk onderaan kun je de hoogte (H) en de breedte (W) aangeven. Zet beide op 150. 4. De lijnkleur krijgt een geel/groene kleur. Dit kun je invullen in de kleurenpalette (#A08001). Zie afbeelding 2.24. De dikte van de lijn mag je zetten op 1.5.

Afbeelding 2.24: het kleurenpalette voor de lijnkleur

5. De vulkleur wordt een gelige Radial gradient vulling. Om te beginnen krijgt de vulling de kleur #FFFF66. Je kunt dit op dezelfde manier invullen als op bovenstaande afbeelding. Let op dat je wel het emmertje selecteert voor de vulkleur. 6. Het volgende wat we gaan doen, is de Radial gradient toevoegen. Selecteer de vulling, door er één maal op te klikken. 7. Selecteer nu het type Radial en neem de instellingen uit afbeelding 2.25 over. De kleurencodes op de afbeelding, aangeduid met een #, kun je invullen als je een dubbelklik op het kleine vierkantje geeft. Je krijgt dan net zo’n schermpje als in afbeelding 2.24. De code kun je daar dan invullen en dan heb je de juiste kleur.

Afbeelding 2.25: de instellingen voor de vulkleur

8. Maak nu een nieuwe layer aan en geef deze de naam Glans. Tijdens het tekenen is het handig om de layers, waar je niet mee bezig bent, te locken. Zo voorkom je dat je per ongeluk in andere layers gaat werken, of andere elementen van de tekening selecteert. 9. Selecteer opnieuw de Oval tool en teken een ovale cirkel over de bg smiley (wel in de nieuwe layer). De breedte (W) mag je zetten op 100 en de hoogte (H) op 120. De breedte en de hoogte vind je in de properties balk. 10. De lijnkleur gaan we weghalen. Deze is namelijk niet nodig. Neem de onderstaande HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

31

instellingen over.

Afbeelding 2.26: de instellingen voor de glans

11. Omdat de Linear gradient nu van links naar rechts gaat, moet de cirkel een kwartslag gedraaid worden, zodat de witte kant aan de bovenkant zit. Dit doe je door de free transformtool te selecteren . Als je vervolgens op een willekeurige hoek gaat staan, zul je een rond pijltje aantreffen. Hiermee kun je de cirkel draaien. 12. Daarna moet deze nog ietsje verplaatst worden, zodat het een echte glanslaag lijkt. Het resultaat ziet er ongeveer hetzelfde uit als op afbeelding 2.27.

Afbeelding 2.27: het eerste tussenresultaat

13. Om de smiley wat emotie te geven, gaan we nu de ogen tekenen. Maak opnieuw een nieuwe layer aan en zorg dat de andere twee layers gelockt zijn. Noem deze layer Reye. Bij een lichaam of gezicht gebruiken we altijd links en rechts gezien vanuit het gezicht. We gaan dus nu bezig met het rechter oog, maar dat wordt hier aan de linkerkant getekend. Vanaf het gezicht gezien, is het namelijk het rechteroog. 14. Selecteer weer de Oval tool en teken een willekeurig ovaal. Neem de onderstaande breedte en hoogte over in de propertiesbalk.


32

Afbeelding 2.28: de breedte en de hoogte van het oog

15. De lijnkleur van de cirkel wordt de kleur #EBD22D. Voor de vulkleur kun je de onderstaande instellingen overnemen.

Afbeelding 2.29: de kleurinstellingen voor het rechter oog

16. Om het oog wat diepte te geven, maken we nog een klein ooglid aan de onderkant. Dit doen we door een soort halve cirkel te tekenen. Selecteer de Oval tool en maak in het gebied naast het oog (waar het los staat) een cirkel met een breedte van 46. Geef zowel de lijn als de vulkleur kleurnummer # #D8B016. 17. Selecteer nu het rechteroog in zijn geheel, kopieer deze en plaats deze over de gele cirkel. Als het goed is, heb je nu zoiets als op de onderstaande afbeelding

Afbeelding 2.30: het begin van het rechter ooglid

18. Selecteer de zwarte pijl en selecteer het stukje geel wat aan de onderkant te zien is. Om zowel de lijn als de vulling te selecteren houd je de [shift] - knop ingedrukt. Kopieer vervolgens dit stukje en zet het even op zij. De shortcut voor kopiëren en plakken is [ctrl] - C en [ctrl] - V. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

33

19. Kopieer het stukje nogmaals en sleep het onder het rechteroog. 20. Selecteer de Free Transform-tool en maak het stukje passend onder het oog, zoals op onderstaande afbeelding. Omdat het best een precies werkje is, is het handig om even in te zoomen. Je kunt dan gedetailleerder werken.

Afbeelding 2.31: het ooglid precies passend om het oog

21. Het linker oog is erg makkelijk. Kopieer het linkeroog en plaats dit in een nieuwe layer, genaamd Leye. Probeer de ogen op één lijn te houden. Flash maakt het makkelijk voor je door automatisch hulplijnen te plaatsen. Zo kun je de ogen op precies dezelfde hoogte houden. 22. Om te zorgen dat je niet alles plotseling kwijt bent is het handig om nu alvast het document te bewaren in een handige map. Vergeet niet ook een handige naam. Dat je het document nu al bewaard hebt, is handig, want als je een aantal stappen hebt gedaan, dan kun je met de shortcut [ctrl] - S het document snel bewaren. Dat voorkomt dat je stukjes kwijt bent bij het uitvallen van je computer of het programma Flash. 23. Het volgende wat we gaan maken is de oogbal. We beginnen weer met de rechter. Maak een nieuwe layer aan en noem deze Reyeball. Zorg er ook nu weer voor dat de andere layers gelockt zijn. 24. Als eerste maken we de iris. Selecteer de oval tool en maak, ergens aan de zijkant, een cirkel. Verfijn de cirkel door een breedte van 26.6 en een hoogte van 31.9 mee te geven. 25. We geven aan dat de cirkel geen lijnkleur meekrijgt en de vulkleur krijgt weer een Radial gradient. Neem de onderstaande instellingen over in het colors palette.


34

Afbeelding 2.32: instellingen voor de iris

26. Als pupil maak je gewoon een zwart rondje met de Oval tool. Plaats dit rondje precies op het witte gedeelte in het blauw. Zorg er hierbij voor dat er nog een klein randje wit omheen komt, zoals in onderstaande afbeelding te zien is.

Afbeelding 2.33: de pupil in de iris

27. Tot slot, om het oog nog een beetje glans te geven, tekenen we met de Oval tool twee kleine cirkeltjes die we over de oogbal heen plaatsen. Neem onderstaande instellingen over voor de vul- en de lijnkleur. Let op: deze cirkels mogen op een nieuwe layer. Noem deze layer Shine R. Zoals je ziet is de Alpha geselecteerd voor 66%. Dit houd in dat de cirkels voor 66% zichtbaar zijn.

Afbeelding 2.34: de instellingen voor de Shine R

28. De rechter oogbal is nu af. Plaats deze in het midden van het oogwit. Let op dat je zowel de layer Reyeball als de layer Shine R selecteert. Dit moet omdat je elementen uit twee verschillende layers gaan verplaatsen. 29. Selecteer de Reyeball layer en lock de Shine R layer. Kopieer de inhoud van Reyeball layer en plaats dit op een nieuwe layer. Lock vervolgens ook deze layer. Unlock de Shine R en lock de Reyeball layer en kopieer ook dit element naar een nieuwe layer. Hernoem de nieuwe layers als Leyeball en Shine R. Plaat nu de iris op het linker oog en zorg dat deze gelijk staat als met de iris van het andere oog. Het is in Flash helaas niet mogelijk om layers te dupliceren, zoals dat in Photoshop wel kan. Vandaar dat het op zo’n omslachtige manier moet. Hoe meer ervaring je met Flash hebt, hoe handiger je hier in wordt.


35

Afbeelding 2.35: het resultaat met de ogen

30. De volgende stap is het maken van de wenkbrauwen. Ook hiervoor gebruik je de Oval tool. De wenkbrauwen maak je eigenlijk op dezelfde manier, als de oogleden onder de ogen. Selecteer de Oval tool. Geef geen lijnkleur mee (dus leeg) en de vulkleur wordt zwart. Daarna teken je er een grijze cirkel overheen (wederom zonder lijnkleur). Tot slot selecteer je het bovenste stukje van de zwarte cirkel en dit sleep je weg. Je wenkbrauw is bijna geboren. De hoogte en de breedte zijn nog niet van belang. Wel is het belangrijk dat je de cirkel op de zijkant maakt. Dit in verband met de gradient die er later overheen komt.

Afbeelding 2.36: links: de twee cirkels over elkaar heen, rechts: de eyebrow geselecteerd

31. Als vulling komt er nog een gradient overheen. Neem de instellingen van afbeelding 2.37 over. De eyebrow staat nog steeds op zijn kant, anders komt de gradient er verkeerd overheen.

Afbeelding 2.37: de instellingen van de eyebrow


36

32. Selecteer nu de Free Transform-tool en draai de eyebrow een kwartslag. 33. Voor de eyebrow boven het oog wordt geplaatst moet deze nog worden gekopieerd en in een nieuwe layer geplaatst worden. Noem deze layer Reyebrow.

Afbeelding 2.38: het resultaat met de wenkbrauwen

34. De mond gaat op dezelfde manier als de wenkbrauwen. Dit keer hoeft er geen gradient overheen. De kleur is zwart en er is geen lijnkleur. De hoogte is 10.6 en de breedte is 40. Probeer zelf het halve cirkeltje te maken, zoals je dat bij de eyebrow en het ooglid hebt gedaan. 35. Hetzelfde geld voor de onderlip. Deze is gekleurd met een gradient. Teken eerst de halve cirkel en neem daarna de instellingen van afbeelding 2.39 over. Plaats de layer van de lip onder de layer van de mond. Vergeet niet dat met een gradient de cirkel op zijn kant getekend moet worden. Zorgt dat je de rechterkant van de cirkel pakt. In plaats van een hulp cirkel, kun je nu een Rectangle gebruiken.

Afbeelding 2.39: de instellingen voor de onderlip


37

36. Wanneer je de mond klaar hebt, bewaar het document, zodat je niets kwijtraakt. Je afbeelding zal ongeveer overeenkomen met de onderstaande afbeelding. Je eerst tekening in flash is een feit!

Afbeelding 2.40: het eindresultaat, een smiley in Flash getekend


38

Graphics, buttons en movieclips In het programma Flash gebruik je verschillende symbolen die elk een eigen functie hebben. 1. 2. 3.

Graphics: dit zijn losse tekeningen waar je eigenlijk niet zoveel mee doet Buttons: dit zijn tekeningen die vooral als navigatie worden gebruikt. Een start/stop knop bijvoorbeeld. Movieclips: deze instelling gebruik je wanneer je een animatie maakt.

Wanneer je één van deze symbolen maakt, komt deze automatisch in de Library terecht. Over de library krijg je straks in het volgende stukje wat meer te horen.   Opdracht   Ook al gaan we de onderstaande smiley niet in de cursus animeren, het is wel handig om te weten hoe je alles kan omzetten, voor het geval je dat wel gaat doen. Je leert werken met de Library en hoe je deze kunt ordenen. 1. Open de afbeelding van de smiley, die je in de vorige opdracht hebt gemaakt. De shortcut voor het openen van een bestand is [ctrl] - O. 2. Zorg dat alle layers gelockt zijn, zodat je geen verkeerde symbolen maakt. Selecteer de layer BG smiley en unlock de layer. 3. Selecteer de grote ronde smiley in zijn geheel, door met de zwarte pijl een kader te trekken om de smiley. Kijk goed of ook de rand wordt meegenomen. Wanneer alle layers gelockt zijn, kun je ook [ctrl] - A gebruiken. Je selecteert dan alles wat niet gelockt is. 4. Kies in het hoofdmenu voor Modify en vervolgens voor Convert to Symbol… de shortcut voor deze actie is F8. Voor Apple-gebruikers: soms moet je de fn toets ingedrukt houden, wil je de F-toetsen kunnen gebruiken. Dit geld niet voor iedereen.

Afbeelding 2.41: kiezen in het hoofdmenu voor Convert to Symbol

5. Wanneer je daarvoor kiest, verschijnt er een venster waarin je moet aangeven wat voor symbool je toekent en hoe het symbool moet heten. Het is heel belangrijk dat je al je symbolen een naam geeft. Niet alleen kun je ze dan makkelijker terugvinden in de Library, ook is het van groot belang wanneer je gaat werken met actionscript. Hier komen we later op terug in de cursus. Neem de instellingen van de onderstaande afbeelding over.

Afbeelding 2.42: het creëren van een movieclip

Op de het canvas gebeurt er verder niets. Het enige wat is veranderd, is het symbool. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

39

Wanneer je nu klikt op de grote gele cirkel, zul je een dunne blauwe lijn om het figuur zien staan en je hoeft niet meer een heel kader om de cirkel heen te trekken. Alles is nu een geheel. Ook is er een kopie van de movieclip bewaard in de Library.

Afbeelding 2.43: de movieclip en de library

6. Op deze manier, zoals in stap vijf beschreven is, kun je alle layers afgaan. Alle elementen moeten als een movieclip in de Library opgeslagen worden. Je kunt de namen van de layers aanhouden. Zorg wel dat je geen spaties hebt en geen hoofdletters gebruikt. Mocht er een spatie voorkomen, zet daarvoor in de plaats een [ _ ] neer. Bijvoorbeeld: de layer Shine R, wordt als naam voor de movieclip “ shine_r”. 7. Wanneer je alle movieclips hebt gemaakt, sla je het bestand op. Je tekening is nu klaar voor een animatie.

Afbeelding 2.44: alle movieclips staan in de library


40

Library In de Library kun je alle afbeeldingen die je in je animatie of flashwebsite hebt bewaren en beheren. Het is erg belangrijk dat je de Library overzichtelijk en geordend houdt. Met een paar afbeeldingen is het niet erg, maar wanneer je bijvoorbeeld 100 afbeeldingen moet bewaren, wordt het al gauw en hoop zoekwerk. Je kunt het eigenlijk wel vergelijken met layers. Deze moet je ook geordend houden om het overzicht te bewaren.

Afbeelding 2.45: de library gevuld met movieclips

Het mooie van de Library is, dat je er ook afbeeldingen in kunt laden. Je hoeft dus niet perse alles te tekenen in Flash. Wanneer je een mooie tekening in Illustrator hebt gemaakt of een foto als achtergrond wilt hebben in je animatie, dan kun je deze in de Library importeren.   Opdracht   Om even kennis te maken met het importeren van een afbeelding, gaan we een afbeelding van een schaduw importeren. Deze schaduw vind je in het bronmateriaal van uur 2. 1. Open het bestand van de smiley uit de vorige opdrachten. 2. Kies in het hoofdmenu voor File, vervolgens voor Import… en tot slot voor Import to Library...

Afbeelding 2.46: importeren van een afbeelding

3. Haal de afbeelding van de schaduw uit de juist map en klik op Import to Library. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

41

4. De afbeelding staat nu in de Library, zowel als het gewone bestand, maar ook als een Graphic. Deze heeft meteen de naam Symbol meegekregen. Het is slim om dit meteen te veranderen, zodat je straks niet de weg kwijtraakt in alle symbolen. Hernoem de Graphic door er dubbel op de klikken. Geef het de naam schaduw.

Afbeelding 2.47: de schaduw is geïmporteerd in de library

5. Het is slim om je movieclips, afbeeldingen en graphics van elkaar te scheiden. Op die manier hou je het overzicht in je Library. Dit kun je doen door middel van mapjes. Maak drie mapjes aan. 1. Movieclips 2. Afbeeldingen 3. Graphics Een mapje kun je maken, door onderin de Library palette te klikken op het mapje. De naam verander je door er dubbel op te klikken.

Afbeelding 2.48: de library geordend.

6. De tekening is klaar en de library is geordend. Sla het bestand op. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

42

Tip: Het is ook mogelijk om meerdere afbeeldingen tegelijk te importeren. Belangrijk hierbij is, dat de afbeeldingen niet te zwaar zijn. Dit kan je computer vertragen en het programma zelfs doen vastlopen. Het is sowieso aan te raden om afbeeldingen, die je in Flash wilt gebruiken, eerst te bewerken met Photoshop. Hoe kleiner het bestand, hoe sneller je Flash-animatie of Flash-website werkt. Je kunt bijvoorbeeld in Photoshop de afbeeldingen opslaan “…for Web en Devices”. De kwaliteit blijft redelijk en de bestandsgrootte wordt geminimaliseerd.


43


44

Uur 3 Animeren

Na dit uur weet je...  Het verschil tussen een motion tween en een shape tween  Hoe je effecten kunt toepassen op je animatie


45


46

Animeren Animeren is iets waar het programma Flash CS4 om bekend staat. Het is het meest gebruikte programma voor een 2D animatie. Veel spellen die je op het internet vindt, zijn met dit programma gemaakt. Het is dan ook een erg uitgebreid programma. Dit uur begint met simpele animaties, om de je bekend te maken met het animeren. Wanneer je dit een beetje door hebt, ga je de smiley uit het vorige uur animeren. Op die manier kan je zien wat een animatie met je tekening kan doen. Frames vs. Keyframes In het eerst uur is het verschil tussen frames en keyframes uitgelegd. Een frame zet je neer voor het verloop van je animatie en een keyframe is een keerpunt van je animatie.

Afbeelding 3. 1: lege en volle keyframes

Motion tween In Uur 1 heb je een opdracht gedaan met twee vormen; een cirkel en een vierkant. Deze heb je in keyframes gezet met bepaalde tussenposen. Dit was eigenlijk al een animatie. Echt heel soepel ging deze animatie niet. Het leek meer op het aan en uitknipperen van de vormen. Hoe krijg je nou een mooie animatie? Twee begrippen: motion tween en shape tween. Hieronder wordt uitgelegd wat het verschil is en wanneer je ze inzet. Motion Tween betekent letterlijk “Tussenbeweging”. Een Motion Tween plaats je altijd tussen een keyframe en een of meerdere property keyframes. Hiermee vraag je Flash of deze wil uitrekenen hoe lang een figuur erover moet doen om zich van een keyframe naar een property keyframe te verplaatsen.   Opdracht   In deze opdracht ga je een simpele animatie maken. Daarbij maak je kennis met de Motion Tween. 1. Open het document “animatie_uur3.fla”. Deze heb je gemaakt in Uur 1. 2. Selecteer de background layer en geef deze de kleur #99CCFF. Je kunt hierna de background layer locken met het slotje. De kleur verander je in de document properties.

Afbeelding 3. 2: een gekleurde background

3. Selecteer nu de layer Labels en geeft de eerste keyframe de naam Home. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

47

Een keyframe een label geven doe je door de keyframe te selecteren en in de properties een frame-label te geven. 4. Selecteer de layer Animatie 1 en selecteer uit de Tools Palette de Rectangle tool. Geef de vulkleur de kleur #0033FF en laat de lijnkleur weg. Teken buiten het canvas een een vierkant, zoals op onderstaande afbeelding. Om precies een vierkant te maken, kun je de [shift] - toets ingedrukt houden. Zo blijft de verhouding van je vierkant precies goed.

Afbeelding 3. 3: het blauwe vierkant

5. Maak van het getekende vierkant nu een movieclip. Dit deed je door in het hoofdmenu te kiezen voor Modify en vervolgens voor Convert to Symbol. Vergeet niet dat je het vierkant eerst moet selecteren! Neem de instellingen van onderstaande afbeelding over. De shortcut voor deze actie is de toets [F8]. Voor de gebruikers van een Mac kan het zijn dat je de [fn] - toets ingedrukt moet houden voor de [F8] - toets werkt. In de naam van de afbeelding zie je de letters “mc”. Dit betekend Movieclip. Je zult ook zien dat de movieclip meteen in de Library is opgenomen.

Afbeelding 3. 4: de instellingen voor de movieclip

6. Plaats een nieuw frame in frame nummer 50. De shortcut voor een nieuw frame is [F5]. Voor Mac gebruikers geldt weer dat het kan zijn dat je de [fn] - toets ingedrukt moet houden voor de F-toetsen werken. 7. We gaan nu eerst aan Flash vertellen dat we een motion tween gaan maken. Zorg dat je op de timeline op een van de 50 frames van layer Animatie1staat. Selecteer dan uit het menu Insert de optie Motion Tween. Een andere mogelijkheid is met je rechtermuisknop te klikken op een van de 50 frames en vervolgens de optie Create Motion Tween te kiezen. Als het goed is zie je de kleur van de 50 frames in de timeline veranderen naar blauw. 8. Zorg dat je op frame 50 staat en verplaats nu het vierkant tot de linkerzijde ongeveer in het midden staat. Kijk maar eens op afbeelding 3.5. Om het vierkant op zijn plaats te houden, kun je de [shift] - toets ingedrukt houden HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

48

tijdens het slepen.

Afbeelding 3. 5: het vierkant is verplaatst

9. Druk op [ctrl] - [enter] om je animatie te testen.. 10. In de timeline zie je nu op frame 1 een normaal keyframe staan, te herkennen aan de stip, en op frame 50 een property keyframe, te herkennen aan het diamantje. Ga op frame 25 staan en verplaats het vierkantje naar de bovenkant van de stage. Het pad dat het vierkantje aflegt is zichtbaar door de lijn met stippels. Test je animatie door op [ctrl][enter] te drukken.

Afbeelding 3. 6: het vierkant op frame 25

11. Selecteer nu frame 100. Omdat er tussen frame 50 en 100 geen beweging afspeelt, plaats je een gewoon frame. In uur 1 is behandeld op wat voor manieren dit kan. Bekijk Afbeelding 1. 13 om het nog eens op te halen. De shortcut voor een gewoon frame is [F5]. Voor Mac gebruikers, kan het zijn dat je [fn] - [F5] moet gebruiken. 12. De tweede animatie is nu aan de beurt. Selecteer de layer Animatie 2 en plaats een nieuw keyframe in frame 50. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

49

Gebruik [F6] voor het plaatsen van een keyframe. Je zult zien dat dit een leeg keyframe is. Dit komt, omdat we nog niets op de layer hebben staan. 13. Net zoals bij het blauwe vierkantje, gaan we nu een roze vierkantje maken. Volg de stappen van het blauwe vierkant. a. Geef het roze vierkantje de vulkleur #FF99FF en laat de lijnkleur leeg. b. Het roze vierkantje mag iets kleiner zijn dan de blauwe. c. Maak meteen een movieclip van het roze vierkantje en geef deze de naam mc_meisje. Je document zal er ongeveer zo uitzien als onderstaande afbeelding Een handigheid is, wanneer je het vierkantje op dezelfde hoogte probeert te zetten als de blauwe, dan zul je aan de onderkant een hulplijn zien.

Afbeelding 3. 7: het roze vierkantje aan de linkerkant

14. Plaats nu, op dezelfde layer, een frame in frame 100. De shortcut voor een frame is [F5], en voor sommige Mac-gebruikers [fn] - [F5]. 15. Voeg nu eerst een motion tween toe. Ga dan naar frame 100 en verplaats het roze vierkantje zodat het vlak naast de blauwe komt te staan. Om te kijken of het gelukt is kun je de animatie even testen met [ctrl] - [Enter]. 16. Plaats nu een keyframe op frame nummer 110 én nog eentje op frame nummer 125 met de shortcut [F6]. Je ziet dat de Motion Tween gewoon blijft staan, maar zich opsplitst. 17. Laat de keyframe op frame 125 geselecteerd, selecteer de Free Transform Tool uit de tools palette en klik op het roze vierkantje. Draai het roze vierkant een klein stuk, zodat de rechterpunt omhoog staat. Bekijk afbeelding 3.9. Motion Tweens zijn niet alleen voor de verplaatsing op het canvas. Je kunt een movieclip ook draaien, verkleinen, vervagen en verkleuren.


50

Afbeelding 3. 8: het roze vierkantje een beetje schuin

18. Plaats op de layer van Animatie 2 een keyframe in frame nummer 140. Plaats op hetzelfde frame voor de layer van Animatie 1 een gewoon frame. Als je geen gewoon frame zet op hetzelfde framenummer, dan zul je het blauwe vierkantje niet meer zien. Dit maakt het animeren lastiger. 19. Selecteer de layer van Animatie 2. Zet het roze vierkantje nu weer gewoon recht. Dit gaat op dezelfde manier als in punt 18, maar dan de andere kant op. Check nogmaals je animatie, om te kijken of het gelukt is. Het constant checken van je animatie is erg belangrijk. Je kunt dan sneller de foutjes herkennen en die verbeteren. Voor een animatie als deze is het makkelijk terug te vinden, maar wanneer je grote en compliceerde animaties maakt, is het vaak moeilijk om achteraf uit te zoeken in welk frame de fout zit. 20. Dezelfde beweging gaat het blauwe vierkantje maken. Deze “kijkt” alleen omlaag i.p.v. omhoog. Probeer het zelf te maken. De property keyframes voor de layer van Animatie 1 mag je op framenummer 140, 155 en 170 zetten. Vergeet niet een gewoon frame te plaatsen in frame nummer 170 voor de layer van Animatie 2. Test ook je animatie. Als hint kun je de punten 18, 19 en 20 gebruiken. Doordat je de keyframes van te voren al plaatst, zul je zien dat je eigenlijk alleen maar framenummer 155 hoeft te veranderen.

Afbeelding 3. 9: het blauwe vierkantje een beetje schuin

21. Plaats een gewoon frame voor de layer Animatie 2 en een keyframe voor Animatie 1 HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

51

op framenummer 195. Selecteer het blauwe vierkantje en schuif deze iets over het roze vierkantje heen. Je zult zien dat deze iets verdwijnt achter het roze vierkantje. Daarom plaatsen we nu de layer van Animatie 1 boven die van Animatie 2. Zie onderstaande afbeelding.

Afbeelding 3. 10: links is het roze vierkantje iets over de blauwe heengezet

22. Plaats nu in layer Animatie 1 een keyframe op framenummer 210 en een gewoon frame in de layer van Animatie 2. Let op, je hebt de layers net verwisseld! 23. Plaats het vierkant weer terug en zet deze iets verder dan de de oorspronkelijke plaats. Bekijk hoe het filmpje eruit ziet met [ctrl][enter]. 24. Selecteer het pad door er 1 keer op te klikken. We willen de laatste twee bewegingen, waarin een soort botsing ontstaat, iets natuurlijker en dus iets minder rechtlijnig maken. Daarvoor gaan we Easing introduceren. 25. Omdat het blauwe vierkant iets sneller terug moet gaan, dan heen, plaatsen we een zogenaamde Custom Ease. Open hiervoor de Motion Editor. Deze vind je op een tabblad naast de timeline, of kies in het menu Window de optie Motion Editor. We gaan eerst de viewport een beetje aanpassen. Onderaan het panel van de Motion Editor staan drie opties om te veranderen wat de Motion Editor toont. Neem onderstaande instellingen over.

Afbeelding 3. 11: Instellingen van Motion Editor


52

26. Scroll naar beneden naar Eases en klik op het plusje en selecteer vervolgens de optie Custom Ease.

Afbeelding 3. 12: verschillende ease opties

27. De custom ease die je net hebt gemaakt wordt onderin de Motion Editor toegevoegd. Scroll hier naartoe. Scroll ook naar frame 170. Zorg dat de playhead in de Motion Editor op frame 170 staat en klik vervolgens op het grijze diamantje om een keyframe toe te voegen. Doe hetzelfde op frame 195 en 210.

Afbeelding 3. 13: custom ease met toegevoegde keyframes

28. Schuif met de bolletjes om de rechte lijn te veranderen in een curve zo ongeveer als hieronder.

Afbeelding 3. 14: aangepaste easing

Op deze manier kun je easing aanpassen bij een motion tween. Bekijk het resultaat met [ctrl][enter]. 29. Ga terug naar de timeline en zet in beide animatie layers op frame 260 een nieuw frame. 30. Selecteer het roze vierkantje uit layer Animatie 2. Ga naar de Motion Editor en klik bij Color Effect op het plusje en kies vervolgens voor Tint. 31. Ga in de Motion Editor met de playhead op frame 215 staan en druk bij zowel Tint Color als Tint Amount op het grijze diamantje om keyframes toe te voegen. Doe hetzelfde op frame 235.


53

32. Blijf met de playhead op frame 235 staan en verander de Tint Color naar een donker rood, met #990033. Verander de Tint Amount naar 80. Bekijk het resultaat in het filmpje.

Afbeelding 3. 15: instellingen voor de tint van animatie 2

33. Ga in de Motion Editor naar de eigenschappen X en Y onder Basic Motion. Voeg bij Y keyframes toe op frame 235, 245 en 260. Verander bij frame 245 de Y waarde naar 200.

Afbeelding 3. 16: instellingen voor de y van animatie 2

34. De laatste stap is dat het blauwe vierkantje als een haas het scherm weer verlaat. Verzin zelf hoe hij dit doet. 35. Test de animatie om te kijken of deze helemaal klopt. 36. Sla het document op. Je kunt het document opslaan onder de bestaande naam. Verstandiger is echter om het document onder een nieuwe naar in een nieuwe map op te slaan. Zo behoud je het eerste bestand (voor wanneer je dat opnieuw wilt gebruiken) en kun je dit bestand later beter terugvinden. Sla het bestand bijvoorbeeld op als “Animatie_Uur3.fla”. Dit kun je doen door [ctrl] - [shift] - [S] in te drukken.


54

Storyboard Belangrijk bij het maken van een animatie is de voorbereiding. Je begint altijd met een (kort) verhaal. Je maakt hier schetsen van, zodat je weet wat je figuren voor bewegingen maken. Wanneer je de volledige verhaallijn vastgesteld hebt, kun je beginnen met animeren. Zo’n verhaallijn wordt ook wel een storyboard genoemd. Je zult hier gedurende de opleiding veel mee te maken krijgen. In onderstaande afbeelding zie je het storyboard voor de animatie die je zojuist hebt gemaakt.

Afbeelding 3. 17: het storyboard van de animatie

Shape tween Naast Motion Tween heb je ook nog de optie Shape Tween. Deze tween gebruik je om vormen mee te veranderen. De naam Shape geeft dat al aan. Met de Shape Tween geef je een leuk overgangseffect. Omdat Shape Tweens veel rekenwerk vragen, is de animatie vaak trager. Het is verstandig om de framerate wat lager te houden, om schokken van de animatie te voorkomen. Helaas kun je Shape Tweens niet toepassen in een movieclip, maar je kan ze er natuurlijk wel in verwerken. Je kunt dus een Shape Tween op zowel een tekst als een vorm toepassen, maar je kunt deze ook combineren. Je kunt tekst in vormen laten veranderen en andersom. Dit kan leuke effecten opleveren.

Afbeelding 3. 18: een Shape Tween tussen twee keyframes

  Opdracht   HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

55

In deze opdracht ga je kennis maken met de Shape Tween. 1. Open een nieuw document. De shortcut voor een document is [ctrl] - N. Het maakt niet zoveel uit of je kiest voor een document met Actionscript 2.0 of Actionscript 3.0. 2. Selecteer de Oval Tool en teken in het midden van het canvas een cirkel. Geef als vulkleur de kleur rood mee (#FF0000) en als lijnkleur zwart (#000000). De dikte van de lijn mag op 5. De vulkleur kun je het beste van te voren invullen. Je weet dan zeker dat het goed gaat. De dikte van de lijn kun je instellen in de propertiesbalk. 3. Zet nu op de frames 10 een nieuw keyframe met [F6] en op 40 een nieuw blank keyframe met [F7]. 4. Selecteer de Rectangle Tool uit het tools palette en teken een rechthoek op de plaats van de cirkel.

Afbeelding 3. 19: de rechthoekvorm op de plaats van de cirkel

5. Selecteer nu één van de frames tussen frame 10 en 40. Het maakt niet zoveel uit welke. Kies in het menu Insert voor de optie Shape Tween. Je ziet dat de frames tussen frame 10 en 40 een pijl heeft gekregen en een groene achtergrondkleur. Dit betekent dat er een Shape Tween staat.

Afbeelding 3. 20: de Shape Tween op de timeline

6. Plaats nu een keyframe op frame 50 en een blank keyframe op frame 90. 7. selecteer de Text tool. Op de plek waar eerst de rechthoek stond, maak je een tekstveld en typ de zin “Tools ‘r’ Us!”. Het lettertype wat in deze cursus gebruikt is heet Fanzine. Dit hoef je niet te gebruiken, maar dat mag uiteraard wel. Deze kun je gratis downloaden op http://www.dafont.com/. Let wel op dat wanneer je het lettertype installeert, je Flash CS4 opnieuw moet opstarten voor het lettertype actief is. Vergeet dan niet je document op te slaan! 8. Om de letters “los” te maken, gaan we ze breaken en omzetten naar objecten. Dit doe je door twee keer in het menu Modify de optie Break Apart te kiezen.


56

9. Je kunt nu tussen frame 50 en 90 een Shape Tween zetten. De Shape Tween kun je vinden in de propertiesbalk onderaan.

Afbeelding 3. 21: de tweede Shape Tween in het document

10. Om de laatste tekst iets langer zichtbaar te maken, plaatsen we nog één keyframe op framenummer 100. Test je animatie om te kijken hoe deze eruit ziet. Om je animatie te testen druk je op [ctrl] - [Enter]. Je kunt je animatie ook de andere kant af laten spelen. Dit kan onder andere door alle frames te kopiëren en om te keren. 11. Selecteer alle frames, kopieer deze en plak ze achter het laatste frame. Frames kopieer je door op de geselecteerde frames te gaan staan, rechter muisknop in te drukken en te kiezen voor Copy Frames. Om ze te plakken klik je op het frame waar je ze wilt hebben (in dit geval is dat frame 101), je drukt de rechter muisknop in en selecteert Paste Frames.

Afbeelding 3. 22: frames kopieren

12. Selecteer nu de gekopieerde frames. Als het goed is, is dit frame 101 t/m 200. 13. Klik nu met de rechter muisknop op de geselecteerde frames en kies voor de optie Reverse Frames.

Afbeelding 3. 23: de optie Reverse Frames

14. Test je animatie om te kijken of het allemaal gelukt is. 15. Als je tevreden bent, kun je de animatie opslaan. Vergeet niet om een handig naam te geven en je document op te slaan in een handige map. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

57

Effects In Flash kun je op alle soorten afbeeldingen, vormen en teksten leuke effecten toepassen. Ze zijn simpel, maar geven je animatie toch even wat meer sjeu. Twee (meestgebruikte) voorbeelden zijn hieronder beschreven.  

Alpha effect: de afbeelding of vorm komt als het ware “in-ge-fade”. Natuurlijk kan dit ook andersom. Color effect: Dit gaat in principe op dezelfde manier als het Alpha effect, alleen is het verschil dat de kleur verandert.

Andere effecten kun je heel goed maken met movieclips. Je bijvoorbeeld een leuk menu voor je website maken. Deze kun je laten bewegen, stuiteren, verkleuren, verschuiven enz.   Opdracht   In deze opdracht introduceren we de effecten met Alpha en Color. Deze effecten kun je later in websites laten terugkomen. Simpleviewer bijvoorbeeld (http://www.airtightinteractive.com/simpleviewer/), een gratis applicatie voor op je website om foto’s mee te publiceren, maakt gebruik van het Alpha effect. 1. Open een nieuw document 2. Zoek een leuke foto van jezelf en importeer die in de library. Wanneer je niet meer goed weet hoe je afbeeldingen in de library importeert, kijk dan nog eens naar het tweede uur. In de laatste opdracht staat uitgelegd hoe dit ook alweer ging. 3. Plaats de afbeelding op het canvas, maak deze iets kleiner (maar nog wel goed zichtbaar) en maak er een Graphic van. Geef de Graphic jouw naam, met daar voor een “g_”. De afbeelding moet drie keer naast elkaar op het canvas passen. Een Graphic maak je door de shortcut [F8] te gebruiken. De “g” die je voor de naam zet staat voor Graphic. Nadat je de Graphic gemaakt hebt, kun je deze van het canvas halen. De Graphic is opgeslagen in de Library. 4. Maak nu twee layers aan. De eerste layer geef je de naam van je afbeelding en de tweede layer geef je de naam Tekst. 5. Selecteer het eerste (lege) keyframe in de layer van je afbeelding. Plaats de Graphic, die je zojuist gemaakt hebt, links boven op het canvas. Bekijk Afbeelding 3. 24 voor een voorbeeld.


58

Afbeelding 3. 24: het eerste keyframe met een afbeelding

6. Plaats nu op framenummer 10 nog een frame met [F5]. 7. Voeg een Motion Tween in. 8. Selecteer opnieuw het eerste keyframe. Klik vervolgens op de afbeelding. Ga naar het properties panel en kies voor Color Effect en vervolgens de optie Alpha.

Afbeelding 3. 25: de optie Alpha in de properties panel

9. Ga naar frame 10 en zet daar de Alpha op 100%. 10. Test of je filmpje werkt. 11. Maak nu de andere twee stukjes op dezelfde manier. Hieronder staan de details die je nodig hebt (in afbeeldingen). Doorloop de stappen hierboven om hetzelfde resultaat te krijgen.


59

Afbeelding 3. 26: de afbeelding in het midden

De afbeelding in keyframe 15 mag je een Alpha van 0% meegeven

Afbeelding 3. 27: de afbeelding aan de rechterkant

De afbeelding in keyframe 30 mag je een Alpha van 0% meegeven

Afbeelding 3. 28: De afbeelding in het midden in een wat groter formaat

De afbeelding in keyframe 45 mag je een Alpha van 0% meegeven.


60

12. In frame 200 mag je een gewoon frame plaatsen. Wanneer je dit gedaan hebt, is dit stuk klaar. Test je animatie, om te kijken of het goed gegaan is. 13. De volgende stap is de Tekst layer invullen. Op deze layer mag je een keyframe plaatsen op framenummer 60. 14. Selecteer de Text tool uit het Tools palette en typ je eigen naam onder de afbeelding die op het canvas staat. Geef de tekst, om te beginnen, een zwarte kleur mee.

Afbeelding 3. 29: een tekst onder de afbeelding

15. Maak van de tekst een Graphic. De tekst moet een Graphic zijn, anders kun je geen Effecten toepassen. 16. Plaats nu een frame in framenummer 70. Voeg een Motion Tween toe in de frames tussen 60 en 70. Ga naar frame 70 en geef de Graphic een andere kleur, door in de properties panel te kiezen voor de optie Tint in het drop down menu. Kies een kleur uit die je leuk vindt.

Afbeelding 3. 30: het eerste stukje van de tekst

17. Je kunt de animatie nu voortzetten. Dit gaat op dezelfde manier als hierboven. Kies zelf de kleur waarin je tekst moet veranderen. Maak ongeveer 5 keer een andere kleur. Eindig met een Alpha effect op framenummer 200. De Alpha moet dit keer dus uitfaden. Framenummer 200 krijgt dus een Alpha waarde mee van 0%. 18. Test je animatie om te kijken of het gelukt is. Als het is gelukt kun je je document HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

61

opslaan in een handige map met een handig naam.   Opdracht   Om te kijken of je de bovenstaande opdrachten een beetje begrepen hebt, ga je in deze opdracht zelf een animatie bedenken. 1. Bedenk wat voor animatie je gaat maken. Complexe figuurtjes of eenvoudige vormen. Welke bewegingen komen er voor? Leg dit alles vast in een storyboard. Een storyboard is slechts een schets, dus het hoeft niet heel precies te zijn. Wel is het belangrijk dat je het nog snapt wanneer je het even hebt weggelegd. Wees dus vooral duidelijk voor jezelf. 2. De volgende elementen moeten voorkomen in je animatie: a. Een Alpha en een Color effect b. Een Motion en een Shape Tween c. Een achtergrondkleur of afbeelding 3. Zorg dat je de Layers en de Library overzichtelijk houdt. Dat werkt voor jezelf het prettigst. Gebruik gerust dit uur om bepaalde onderdelen op te zoeken. Daar leer je alleen maar van. Je kan natuurlijk ook het internet eens opgaan voor tutorials. Succes!


62


63

Uur 4 Interactie


Hoe je een basisinteractie kan toepassen

 Hoe je interactie toepast op een button  Hoe je interactie toepast op een movieclip


64


65

Basis interactie Animaties maken met Flash CS4 is natuurlijk leuk. Nog leuker is het, wanneer je er actionscript bij gebruikt. Door actionscript kun je animaties laten stoppen, starten door middel van een button (of zelfs een andere animatie), animaties aan elkaar linken en een film laden in een door jou getekende omgeving. Actionscript is een programmeertaal. Het is een taal die de computer begrijpt. Om te zorgen dat de computer precies doet wat jij van hem vraagt, is het belangrijk dat de taal uiterst zorgvuldig wordt geschreven. Maak je een fout, en dat kan gaan van een vergeten komma tot een hele zin, dan kan de computer het niet lezen en zal je animatie het dus niet doen. Geschiedenis Actionscript is begonnen met versie 1.0. Het was ooit de bedoeling om alleen simpele functies uit te voeren zoals stop() of play(). Flash werd uitgebreider en daarmee moest Actionscript ook groeien. Omdat Actionscript niet bedoeld was voor complexe lijsten met codes, wat je nu vooral ziet, zijn de versies voor Actionscript uitgebreid naar 2.0 en later 3.0. Met de laatste versie is Actionscript vergelijkbaar met de programmeertaal PHP. Er zijn veel mogelijkheden die tot verassende resultaten kunnen leiden.

Afbeelding 4.1: een voorbeeld van actionscript

In deze cursus zul je niet hele complexe lijsten met codes hoeven leren. Dat word je geleerd gedurende het eerste jaar van de opleiding Interactieve Media. Er zal een vak gewijd worden aan Actionscript 3.0 en daarmee leer je animaties te maken puur en alleen door code te typen. Deze cursus houdt het bij buttons en movieclips. Dat is meer het visuele aspect en ook zeker handig bij de projecten en opdrachten die je gedurende de opleiding krijgt. Belangrijk om in het achterhoofd te houden, bij het gebruik van Actionscript, is dat je moet testen, testen, testen en nog een testen. Alleen dan kun je alle mogelijke foutjes uit je code halen en een perfecte animatie maken.


66

Buttons vs. Actionscript De makkelijkste vorm van Actionscript is het gebruik in combinatie met buttons. Button is het Engelse woord voor Knop. Door op een button te klikken, start je een animatie of link je door naar een ander frame. Je kunt het wel vergelijken met een link op het internet. Je klikt en komt vervolgens op een andere pagina terecht.   Opdracht   In deze opdracht ga je een button maken en maak je kennis met de eigenschappen ervan. 1. Open een nieuw document. Kies dit keer voor Actionscript 2.0. Als je kiest voor Actionscript 3.0, dan zul je uiteindelijk merken dat je geen actionscript op de buttons kunt plaatsen. De reden hiervoor is dat Actionscript 3.0 alle code in één bestand wilt hebben. Goed opletten dus welke versie van Actionscript je kiest!

Afbeelding 4.2: een nieuw bestand met Actionscript 2.0

2. Maak nu vier layers aan. Noem de onderste layer Buttons, de middelste twee layers Animatie1 en Animatie2 en de bovenste layer Actions. Lock de Actions-layer om te voorkomen dat je hier op gaat werken. 3. Maak nu twee kleine animaties. Één blokje wat van links naar rechts schuift en één balletje wat van boven naar beneden stuitert. Zet Animatie 1 op frame 5 t/m 60 en zorg dat deze ongeveer 4 keer heen en weer gaat. Voor animatie 2 geld hetzelfde, maar deze loopt van frame 65 t/m 120. Als je even wilt ophalen hoe je ook alweer een animatie maakt, dan kun je nog eens Uur 3 doornemen. Vergeet niet je animaties te testen! 4. De eerste actionscriptcode die je gaat plaatsen is in de Actionscript-layer. Unlock deze, door op het slotje te klikken, en plaats een keyframe op frame 60. Dit is een leeg keyframe en zal ook leeg blijven. Je zet er geen vormen in, maar plaatst er code op. 5. Open nu de Actions-window. Dit kan op verschillende manieren. a. Via het hoofdmenu kies je voor Window en vervolgens voor Actions. b. Je gebruikt de shortcut [F9] Voor Mac-gebruikers kan dit ook [fn] - [F9] zijn. Zie onderstaande afbeelding.


67

Afbeelding 4.3: actions menu met shortcut

6. Selecteer nogmaals de keyframe op frame 60 in de layer Actions en plaats in het Actions Window de onderstaande code.

Afbeelding 4.4: actionscriptcode in het actions-window

Als het goed is, zie je nu een kleine letter A boven het lege keyframe staan. Dit betekent dat er een code staat op de keyframe.

Afbeelding 4.5: kleine letter A op het keyframe

7. Herhaal de bovenste stap op frame 120. 8. Selecteer nu de layer Buttons en maak twee ovalen naast elkaar. Je mag zelf bepalen welke kleur je de ovalen geeft, als ze maar duidelijk verschillend zijn. 9. Maak van beide ovalen ieder een button. Geef de namen button_1 en button_2 mee. Vergeet niet de instance namen mee te geven. Deze vul je in de Propertiesbalk in wanneer je de button geselecteerd hebt. Een button kun je maken door de shortcut [F8] te gebruiken. Dit gaat op dezelfde manier als het maken van een movieclip. Mocht het wat weggezakt zijn, kijk dan nog eens in Uur 2 op pagina 34.

Afbeelding 4.6: twee buttons op het canvas

10. Dubbelklik op de linker button. Je komt nu “in” de button terecht, waar je kunt spelen HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

68

met verschillende opties. Flash geeft precies aan waar je bent, door een “spoor” te laten zien. Je ziet alles wat niet geselecteerd is wat vager. Zie onderstaande afbeelding voor verduidelijking. Het omcirkelde deel is het spoor. Je bevindt je momenteel in button1 van Scene 1.

Afbeelding 4.7: de opties voor de button

11. Selecteer het frame in “Over” en plaats een keyframe. Selecteer de gehele buttons en zet de lijndikte naar 5. De lijndikte kun je vinden in de propertiesbalk onderin. Wanneer je de animatie straks test, en je gaat met je muis over de button, dan zie je de button veranderen in wat jij hebt aangegeven. Vandaar het woordje “Over”. 12. Selecteer nu het frame in “Down”. Plaats een keyframe en geef de vulkleur een lichtere kleur. Ook de vulkleur kun je vinden in de propertiesbalk onderin. Wanneer je de muisknop ingedrukt houdt, zie je de button opnieuw veranderen. Vandaar het woordje “Down” (muisknop naar beneden). 13. Selecteer nu het frame “Hit”. Plaats een nieuw keyframe. Verder hoef je niets te veranderen. Wanneer je de muisknop loslaat, en dus daadwerkelijk de button aangeklikt hebt, betekent dit “Hit”. Je “hit” de button. 14. Om duidelijk te maken dat het de buttons voor animatie 1 is kun je een tekst in de button zetten. Maak een nieuwe layer aan en plaats in het eerste keyframe de tekst “Animatie 1”. Ga nu net als stap 11 t/m 13 alle opties af. Kies voor handige kleuren, zodat de tekst goed leesbaar is. Als alle frames ingevuld zijn, zie je layers er uit als onderstaande afbeelding.

Afbeelding 4.8: de layers van de button

15. Zoals je in afbeelding 4.7 en op je Canvas kan zien, staat er nog een button. Probeer hier nu zelf een button van te maken, zoals in de bovenstaande optie 11 t/m 14 is uitgelegd. Uiteraard gebruik je als tekst dit keer “Animatie 2”. 16. Als je klaar bent, sla je bestand dan op en test je animatie. Ga over de buttons, klik ze aan en kijk wat er gebeurd. Je wordt verder nog niet gelinkt, omdat er nog geen Actionscript code vermeld is. 17. Zorg dat het palette Actions openstaat. Mocht je dit weg geklikt hebben, dan kun je in punt 5 nog even nakijken waar je dit HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

69

palette ook alweer kunt vinden. 18. Selecteer nu de button “Animatie 1”. In het Actions palette type je de onderstaande code.

Afbeelding 4.9: actionscript code op eerste button.

Onderstaande afbeelding geeft uitleg over wat de code precies betekent.

Afbeelding 4.10: uitleg bij de actionscriptcode

Wanneer je in het Actions palette van Flash een opmerking wilt plaatsen, bijvoorbeeld om de code uit te leggen, dan plaats je een dubbele “slash forward” [/ / ]. Flash zal dit zien als commentaar en niet als code. Dit is vooral erg handig wanneer je grote lappen gecompliceerde code hebt. Boven een bepaalde code kun je kort uitleggen wat de code doet, zodat je weet welke code wat voor actie geeft. Dit komt verder terug in het vak Actionscript in het eerste jaar. 19. Selecteer nu de button “Animatie 2” en typ dezelfde code. Kijk goed op de timeline wanneer de tweede animatie begint! Hint: de eerste keyframe van animatie 1 staat op frame nummer 5. Bekijk dus waar het eerste (gevulde) keyframe begint op de layer van animatie 2. 20. Sla je bestand op en test je animatie. 21. Als het werkt, heb je het goed gedaan! Sla het bestand nogmaals op en sluit het venster. Niet alleen kun je door middel van frame nummers aangeven welk frame er afgespeeld moet worden. Je kunt ook de labels gebruiken. Op onderstaande afbeelding kun je kijken hoe dat eruit ziet. De groene tekst is de naam van het framelabel. Dit komt altijd tussen enkele aanhalingstekens. Framelabels worden vooral gebruikt in Flashwebsites. Alles over framelabels en Flashwebsites komt terug in het volgende uur van de cursus.

Afbeelding 4.11: actionscriptcode met een framelabel i.p.v. een framenummer


70

Movieclips vs. Actionscript In principe kunnen movieclips ook als buttons werken. Het verschil is dat deze buttons óók animaties kunnen zijn en dat de actionscript-code niet op de movieclip zelf wordt geplaatst, maar op de Actions Layer. Het voordeel daarvan is, dat je niet op zoek hoeft te gaan naar een bepaalde button om de code te veranderen. Je hebt alles in één scherm staan. Actionscript versie 3.0 werkt anders dan Actioscript 2.0. Wanneer je de versie wilt veranderen in je document kun je dit in de optie Settings doen, van de propertiesbalk

Afbeelding 4.12: de optie Settings… in de properties balk

Afbeelding 4.13: in het menu Actionscript version de juiste versie selecteren

Op deze manier kun je op elk gewenst tijdstip de versie van je Actionscript veranderen. Mocht je bijvoorbeeld alle objecten (buttons, movieclips, animaties enz.) al gemaakt hebben, maar tot de ontdekking komen dat je de verkeerde versie van Actionscript hebt geselecteerd, dan is dit een handige manier om het aan te passen, zonder helemaal opnieuw te hoeven starten. Belangrijk is, dat Actionscript 3.0 alleen te gebruiken is in Flash CS3 of hoger. Heb je een oudere versie van Flash op je computer staan (Flash 8, Flash MX), dan zal Actionscript 3.0 niet tussen de opties staan. Het is dus raadzaam om in ieder geval Flash CS3 op je computer te hebben. In Actionscript 3.0 kan er gewerkt worden met zowel Buttons als Movieclips. Omdat er in de vorige opdracht al aandacht is geschonken aan buttons, zal de onderstaande opdracht gaan over Movieclips. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

71

  Opdracht   In deze opdracht wordt gestart met het maken van een start en pauzeknop voor een animatie die je al eerder hebt gemaakt. Omdat een gewone knop maar saai is, geven we de knop een animatie mee. 1. Open de animatie die je in Uur 3 hebt gemaakt. Mocht je niet meer weten waar je de animatie hebt opgeslagen, kijk dan eens in de map voor bestanden van Uur 3. Als tip werd de naam animatie_uur3.fla gegeven. 2. Maak een nieuwe layer aan, geef deze de naam Buttons en plaats deze onder de Actions layer.

Afbeelding 4.14: Een nieuwe layer genaamd Buttons

3. We beginnen met het maken van een basis button. Selecteer de Oval Tool en teken een ovaal op het canvas en geef deze de vulkleur #0066CC. De lijnkleur mag je op none zetten. 4. Maak van de ovaal nu een movieclip en geef deze als naam btn1 mee. Mocht je even niet meer weten hoe je ook alweer een movieclip maakt. Bekijk dan nog eens het kopje Graphics, Buttons en Movieclips uit Uur 2 (blz. 34). 5. Dubbelklik nu op de movieclip btn1. Je komt nu in de movieclip terecht, net zoals bij de buttons in de vorige opdracht. 6. Je ziet dat de timeline weer voorzien is van één layer. Maak hierin vier layers. Een Actions layer, een Text layer, een Labels layer en een Base layer. De layer waar al een keyframe instaat wordt de base layer. 7. We beginnen met het plaatsen van de labels. Selecteer de Labels layer en plaats op frame 2 en 11 een keyframe. Geef keyframe 2 een framelabel met Over en keyframe 11 een framelabel met Out. Gef tot slot frame 19 een gewoon frame. Framelabels kun je geven door het lege keyframe te selecteren en in de propertiesbalk het framelabel in te voeren. Een gewoon frame kun je invoegen door op [F5] te drukken. 8. Selecteer het keyframe in de Base layer. Je ziet dat de ovaal ook geselecteerd wordt. Maak hier een movieclip van en noem deze base. Omdat je in een movieclip zit is de ovaal die te zien is geen movieclip, maar een gewone vorm. 9. Selecteer de Text layer en plaats het woord Start in de movieclip. De tekst kun je gewoon zwart houden. Omdat we verder niets met de tekst gaan doen, kun je een gewoon frame plaatsen op framenummer 19. Je ziet dat de tekst in alle frames te zien is. 10. Selecteer de Actions layer en plaats keyframes op frame nummer 2, 10 en 19. Open vervolgens het Actions Palette en plaats de onderstaande code op deze frames.

Afbeelding 4.15: De code om de animatie te stoppen.

11. Selecteer nu de Base layer en plaats een keyframe op frame nummer 2 en gewoon frame op frame 10. Plaats vervolgens een Motion Tween tussen de twee frames. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

72

12. Selecteer op de Base layer de keyframe op frame nummer 10. Klik op de movieclip. In de propertiesbalk zie je de eigenschappen veranderen. Kies in de optie Color voor Tint en kies een gepaste kleur. Bijvoorbeeld #CCCCCC.

Afbeelding 4.16: De properties voorde movieclip

13. We gaan het bovenstaande nu omdraaien. Plaats een nieuw keyframe op frame nummer 11 en één op frame nummer 19. Geef de tussenliggende frames weer een Motion Tween en zet de opties voor de Color in de propertiesbalk weer op None.

Afbeelding 4.17: De properties terug op none zetten

De button is nu gereed en je kunt weer terugkeren naar het gewone canvas. Terug naar het canvas ga je door te dubbelklikken ergens buiten de movieclip, of je klikt op het woordje Scene 1 bovenaan het canvas.

Afbeelding 4.18: Terugkeren naar Scene 1

14. De start-knop hebben we nu gemaakt. Nu moet er nog een stop-knop gemaakt worden. Om dit makkelijk op te lossen is er een eenvoudig trucje. Selecteer btn1 in de Library en klik op de rechter muisknop. Er verschijnt een menu. Selecteer de optie Duplicate.

Afbeelding 4.19: De movieclip btn1 dupliceren

Geef de movieclip de nieuwe naam btn2.


73

Afbeelding 4.20: De gedupliceerde movieclip hernoemen

15. Selecteer nu de movieclip Start en kopieer deze. Plak deze op dezelfde plaats. Dit doe je door in het hoofdmenu te kiezen voor Edit en vervolgens voor de optie Paste in Place. De shortcut voor Paste in Place is [ctrl] – [shift] – [V].

Afbeelding 4.21: Paste in Place

16. Houdt nu de [shift] – toets ingedrukt en sleep de button naast de andere. Door de [shift] ingedrukt te houden verschuift deze niet zomaar naar beneden en boven. 17. Zorg dat de movieclip geselecteerd is en kies de optie Swap in de propertiesbalk. De optie Swap geeft je de gelegenheid om een movieclip te vervangen door een andere movieclip uit de Library. Vervang de movieclip btn1 door de movieclip btn2. Dit doe je door btn2 te selecteren en op OK te klikken.

Afbeelding 4.22: De optie Swap om een movieclip te vervangen door een andere

Het voorwerk is nu gedaan. Wat er nu nog moet gebeuren is vertellen aan Flash wat wij graag willen. We willen de button (movieclip) Start de animatie laten afspelen en de button (movieclip) Stop de animatie laten stoppen. 18. Zorg dat je in Scene 1 staat en de lege keyframe in de Actions Layer hebt geselecteerd. Zorg er ook voor dat het Actions Palette open staat. Alle code die getypt wordt, zal op het eerste keyframe van de Actions Layer komen. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

74

19. Als eerste gaan we Flash vertellen dat de animatie niet meteen moet gaan spelen als we deze openen. Plaats bovenaan in de Actions Palette de code stop();

Afbeelding 4.23: De eerste code in de Actions Palette

20. In feite hoeven we voor maar één button (movieclip) de code te schrijven. Daarna kunnen we alles kopiëren en hoeven we alleen enkele aanpassingen te doen. Druk twee maal op de toets [Enter] om een witregel te maken. 21. We beginnen met de animatie van de buttons (movieclips) zelf. We gaan Flash vertellen dat wanneer de muis OVER de button gaat, deze van kleur moet veranderen. Dat geven we op de onderstaande manier aan. De grijze tekst is er voor de uitleg. Deze hoef je niet perse over te nemen. Deze legt alleen uit wat de functie doet.

Afbeelding 4.24: De code voor de Mouse over

Het begrip Void geeft aan dat het om een ongedefinieerd object gaat. Dit houdt in dat we de movieclip niet van te voren een naam hebben gegeven in de codelijst. 22. Het zelfde gaan we doen voor de functie OUT. Wanneer de muis weer van de button (movieclip) afgaat.

Afbeelding 4.25: De code voor de Mouse out

23. Tenslotte typen we de code voor wanneer er daadwerkelijk op de button (movieclip) geklikt is.


75

Afbeelding 4.26: De code voor wanneer er een muisklik heeft plaatsgevonden

Bekijk de bovenstaande afbeelding (4.26) goed. Je ziet staat event:MouseEvent. Er staat verder niet bij welk Mouse Event. Daarom moeten we dit nog vertellen aan Flash. Flash moet gaan ‘luisteren’ naar het event. Om dat voor elkaar te krijgen geven we een Even Listener op. Het woord zegt het eigen al. Flash gaat ‘luisteren’ naar het af te spelen Event. 24. Het eerste event wat we aangeven is een Mouse-over Event. Dat wil zeggen dat het event plaatsvindt, wanneer de muis óver de button gaat.

Afbeelding 4.27: De code om een MouseEvent aan te duiden

25. Het tweede even wordt een Mouse-out. Dat wil zeggen dat het even plaatsvindt wanneer de muis van de button afgaat. Deze plaats je zonder witregel onder de vorige code.


26. Tot slot geven we aan dat wanneer er met de muis wordt geklikt op de button, de animatie moet gaan afspelen.


De hele code voor bnt1 is nu geschreven. Je kunt het even testen om te kijken of het goed gegaan is. 27. Kopieer nu alle code, behalve het stukje stop(); en plak dit onder de bovenste code. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

76

Zorg dat er twee witregels vrij blijven, zodat je kan zien welke code voor btn1 is en welke voor btn2. 28. Zorg dat je alle btn1 vervangt door btn2. In de functie Down moet je play(); in stop(); veranderen. Je kunt jezelf controleren door onderstaande afbelding te bekijken en de code te vergelijken met die van jou. Voor je kijkt, kun je eerst zelf eens kijken of je ziet wat er verandert moet worden. Daarna kun je jezelf controleren om te kijken of je het begrepen hebt.

Afbeelding 4.30: De gekopieerde code met hints naar de verbeteringen

29. Test de animatie om te kijken of het gelukt is. Sla vervolgens het document op in een handige map en geef het een handige naam. Je kunt het opslaan onder dezelfde naam of een andere naam geven. Net wat je het handigst vindt.

Met de bovenstaande oefening heb je slechts een klein deel geoefend met de mogelijkheid van movieclips die als buttons fungeren. Je kunt bijvoorbeeld ook externe URL’s van websites invoegen, of framelabels. Hieronder zie je enkele voorbeelden.

Afbeelding 4.32: Enkele voorbeelden van het gebruik van movieclips als buttons

Actionscript 3.0 gaat nog veel verder. Zo kun je bijvoorbeeld met alleen code een complete website in elkaar ‘typen’. Dit is wel erg complex, maar het is mogelijk. Zolang je maar de juiste codes weet is er bijna alles mogelijk. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

77

In het propedeusejaar zul je daar meer over horen tijdens het vak Actionscript. Tip Wanneer je gaat oefenen met Actionscript, zorg dan dat je boven elke code een regel commentaar zet. Wanneer je de code later nog eens gaat bekijken hoef je niet eerst helemaal uit te zoeken wat de code ook alweer precies deed. Door het commentaar te lezen, zie je in één oogopslag wat de code uitvoert.


78


79

Uur 5 Website

Na dit uur weet je...  Hoe je een basis website maakt in Flash  Hoe je een flashwebsite kunt publiceren


80


81

Miniwebsite Het leuke van Flash is, dat je er een simpele website mee kunt maken. In het vorige uur heb je geleerd om te werken met zowel Actionscript 2.0 als Actionscript 3.0. In dit uur komt naar voren hoe je een simpele Flashwebsite kunt maken. Omdat je in het propedeusejaar leert werken met Actionscript 3.0, werk je in dit uur met Actionscript 2.0. Zo krijg je van allebei de soorten de kennis mee, die je weer kunt toepassen in de toekomst. Doelgroep In de wereld van Interactieve Media ontkom je niet aan werken met en voor een doelgroep. Bij elke website, applicatie of campagne bekijk je op wie je je wilt gaan richten. Dat geld ook voor de meest simpele Flash website. Bedenk wie je publiek wordt en pas je layout, tone of voice (de toon die je in je teksten geeft, noem je de lezer je of jij, of wordt het toch u?) en inhoud daarop aan. In de onderstaande opdrachten ga je een mini-portfolio samenstellen. Je kunt hiervoor je werk van de cursus gebruiken, dus je werk uit Illustrator, Photoshop en Flash. We starten met het framework, ook wel het skelet van de website genoemd, vervolgens hoe je het portfolio in kunt vullen en tenslotte hoe je de website kan publiceren (met het publiceren van je Flashwebsite kun je de site makkelijker online krijgen). De lay-out (dus hoe je website eruit ziet) mag je helemaal zelf bedenken, dat is immers persoonlijk.   Opdracht   Het framework. Dat is het skelet van je website. Hoeveel pagina’s heb je nodig? Welk formaat wil je de website maken? Het maakt niet uit of je twee of 22 pagina’s wilt gebruiken, het principe blijft hetzelfde. Het is alleen iets meer werk. 1. Maak een nieuw Flashdocument aan en kies voor Actionscript 2.0.

Afbeelding 5.1: Een nieuw flashdocument met Actionscript 2.0


82

2. Maak nu de layers aan, zoals je dat inmiddels gewend bent. Houd in ieder geval de onderstaande layers aan. De volgorde mag je zelf bepalen.

Afbeelding 5.2: De layers palette

3. We beginnen nu met het aanmaken van de labels. Daarvoor moet je eerst de paginaindeling hebben. Hieronder zie je een overzicht van de minimaal in te voegen pagina’s en wat je op de pagina’s moet gaan zetten. Hoe je de labels noemt mag je zelf bepalen. Zorg wel dat het makkelijke labels zijn, want je gaat ze later gebruiken voor de Actionscript 2.0 code. In afbeelding 5.3 zie je een voorbeeld van de labels. Je kunt dit aanhouden, maar bekijk wat voor jezelf het makkelijkst is.  Home: de voorpagina met een klein welkomstwoordje  About: hierin vertel je kort iets over jezelf en je achtergrond  Illustrator werk  Photoshop werk  Flash

Afbeelding 5.3: Een voorbeeld van de labels

4. Standaard staat een Flash document op 550 x 400 pixels. Om te zorgen dat je website op alle schermen goed weergegeven wordt, is een resolutie van 800 x 600 pixels voldoende. Natuurlijk mag je jouw website zo groot maken als je zelf wilt, maar hou daarbij altijd in je achterhoofd dat niet iedereen je website optimaal kan bekijken. Pas de resolutie aan naar jouw wens. In dit voorbeeld wordt 800 x 600 gebruikt. Je kunt Uur 1 gebruiken om even op te halen hoe je het document aanpast. 5. Om te voorkomen dat je website als één animatie doorspeelt, plaats je boven elke framelabel een keyframe met de code stop(); erin. Uiteraard plaats je deze code op de Actions layer. Om even op te halen hoe je de Actions Palette ook weer tevoorschijn haalt, kun je even kijken op Afbeelding 4.3.

Afbeelding 5.4: Actions layer gevuld


83

6. De stap nu is het maken van de background. Je kunt het voorbeeld aanhouden, maar het leukste is natuurlijk om en eigen identiteit mee te geven aan je website. Dit kun je doen door te tekenen in Flash, maar in Illustrator of Photoshop kun je ook een mooie achtergrond maken. Laad je background in de Library en plaats deze op het canvas. Zorg dat deze op alle frames te zien is. Om te voorkomen dat je de background per ongeluk verschuift, of dat je op de background layer gaat werken, kun je deze met het slotje blokkeren. Als je een background maakt in Illustrator of Photoshop, vergeet deze dan niet op te slaan “…for web and devices”. Om op te zoeken hoe je ook alweer een afbeelding in de Library laadt, kun je nog eens het kopje Library bekijken in Uur 2.

Afbeelding 5.5: De background voor de website

7. Niet geheel onbelangrijk in een website is het menu. De belangrijkste knoppen zijn Home, About, Illustrator, Photoshop en Flash. In totaal vijf knoppen dus. Maar voor elk menu-item een knop. Zorg dat je voor elke knop in ieder geval het verschil kunt zien tussen ‘gewoon’, ‘mouse over’. Omdat we gaan werken met Actionscript 2.0 ligt het voor de hand dat we gebruik maken van Buttons. Natuurlijk kunnen Movieclips ook als buttons gebruikt worden, maar dit gaat meer in combinatie met Actionscript 3.0. Mocht je hier graag mee aan de slag gaan, dan kun je op internet verschillende tutorials vinden. Uur 6 gaat wat dieper in op tutorials. Om even op te halen hoe je ook alweer een button maakte, kun je nog eens kijken in Uur 4.

Afbeelding 5.6: het menu

8. Omdat het menu in alle frames van de website te zien moet zijn, plaats je een gewoon frame op het laatste frame van de website. Datzelfde heb je ook gedaan bij de HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

84

background. 9. Selecteer de layer Content. Plaats vervolgens lege keyframes boven elk framelabel. Dit zijn je verschillende pagina’s van de website. Vergeet niet af te sluiten met een gewoon frame op het laatste frame van de website. 10. Om de verschillende pagina’s van elkaar te kunnen onderscheiden, en te controleren of we goed beginnen, plaatsen we de titel van elke pagina op het keyframe. Bij de home-pagina plaats je bijvoorbeeld bovenaan het woordje Home. Om te zorgen dat de woorden precies op dezelfde hoogte komen te staan, kopieer je het woordje Home en plak je die op dezelfde plaats. Dit kan door gebruik te maken van de shortcut [ctrl] – [shift] – V. Later verander je Home in het juiste woord.

Afbeelding 5.7: Een voorbeeld van verschillende contentpagina’s

11. De Home en About pagina zijn allebei maar één pagina. Maak een veld waarin je wat tekst kwijt kan. Dit kun je gewoon met de Rectangle Tool tekenen. Zorg dat het vlak een beetje past in de rest. Je kunt het vlak alvast kopiëren en plakken bij de andere pagina’s. Denk bij het plakken van de vlakken aan de eerder genoemde shortcut in punt 10. 12. De pagina’s van Illustrator, Photoshop en Flash bevatten meerdere pagina’s. Deze pagina’s kunnen we heel makkelijk op één keyframe plaatsen door middel van een Movieclip. Een movieclip wordt niet alleen gebruikt voor een animatie, maar ook voor Flash websites. Voor deze pagina’s selecteer je het vlak en maak je hier een movieclip van. Noem Illustrtor “mc_illu”, Photoshop “mc_phosho” en Flash “mc_fla”. Plaats deze movieclips in een aparte map in de Library. Noem deze map Content.

Afbeelding 5.8: Het mapje Content in de library.

13. Om in de pagina’s van Illustrator, Photoshop en Flash te kunnen navigeren, maken we een klein submenu aan. Dit gaat op dezelfde manier als het gewone menu, maar dan zit je in de Movieclip. Maar voor elke pagina het menu aan. Illustrator en Photoshop hebben 3 pagina’s en Flash heeft 2 pagina’s. Om in de movielip te komen, dubbelklik je erop. Zie onderstaande afbeelding voor een voorbeeld.


85

Afbeelding 5.9: Voorbeeld van het submenu in de movieclip

Zoals je ziet kun je ook buttons maken van alleen tekst. Het maakt niet uit wat je tekent of typt, zolang je maar aangeeft dat het een button wordt. 14. Het hele framework zit nu in elkaar. Alles moet nu nog aan elkaar gelinkt worden en dat gebeurd met Actionscript. Zorg dat je in Scene 1 staat. Het hoofdmenu moet goed zichtbaar zijn. Selecteer nu de button Home en open de Actions Palette. Typ de onderstaande code in de Actions Palette.

Afbeelding 5.10: de basis Actionscriptcode voor het hoofdmenu

15. Kopieer nu de code en plak deze op de andere menu-items. Vul op de plek “home” nu de naam van het framelabel in. Test vervolgens je website, door op [ctrl] – Enter te drukken. Als je het goed gedaan hebt, kun je nu door je website navigeren. Mocht je een melding krijgen van een Error, lees dan goed wat er staat en of je het op kunt lossen. Kom je er niet uit, vraag dan gerust een student-assistent om hulp.

Afbeelding 5.11: een voorbeeld van een Error in de Actionscript

Wanneer je een Errormelding krijgt, dan ziet deze er uit als bovenstaande afbeelding. Flash verteld je precies waar de fout zit, wat het voor een fout is en waar de bron vandaan komt. Bovenstaande Error verteld ons dat er een fout is opgetreden in Scene 1, het Menu layer op Frame 1 en op line 2 in de actionscript code. Als beschrijving verteld Flash dat hij een { verwachtte. Deze is dus blijkbaar niet geplaatst. Je kunt dan in de code kijken of dit het probleem is, de { plaatsen en je website opnieuw testen. 16. De volgende stap is het toevoegen van de Actionscript code aan de submenu’s in de HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

86

Illustrator, Photoshop en Flash pagina’s. Hiervoor gebruik je dezelfde code als bij het gewone menu. Let goed op de framelabels. Eén typefoutje kan al voor een Error zorgen. Bedenk goed dat er ook onderscheid wordt gemaakt tussen hoofdletters en gewone letters.

Afbeelding 5.12: het framework is af

17. Het framework is nu gereed om ingevuld te worden. Voor Illustrator en Photoshop kies je minimaal twee opdrachten uit waar jij trots op bent. Voor Flash kies je één opdracht waar je trots op bent. Deze opdrachten laad je in de Library. Denk bij het Photoshop en Illustrator werk dat je de bestanden iets verkleind opslaat “…for web and devices”. De bestanden kunnen anders te groot worden en dat vertraagd je website.

Afbeelding 5.13: een voorbeeld van de ingerichte library

Hierboven zie je een klein voorbeeld van een ingevulde library. Nu staat er alleen de movieclips van Flash, Illustrator en Photoshop in en een animatie die je eerder in de cursus gemaakt hebt, maar wanneer jij al je werk (waar je trots op bent) in de library hebt gezet, zal deze een stuk uitgebreider zijn.

18. Het plaatsen van je werk op de juiste pagina is een kwestie van slepen. Als voorbeeld wordt het plaatsen van de Flash-animatie gegeven. Dubbelklik op het contentvlak van HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

87

Flash. Je zit nu in de movieclip. Het enige wat je hoeft te doen is de animatie uit de library slepen en op de juiste keyframe in je website te plaatsen.

Afbeelding 5.14: Een flash animatie in de website slepen

Nadat je een item uit de library hebt gesleept kun je deze nog schalen naar het gewenste formaat. Dat kan ook met Flash animaties. Test daarvoor voortdurend je hele website, om te kijken of de animatie goed past. De bovenstaande stap kun je volgen met al het werk wat je in je portfolio wilt hebben. Even in het kort waar je goed op moet letten:  Zorg dat je de juiste opdracht bij de juiste programma zet  Zorg dat je in de movieclip van het juiste programma zit  Zorg dat je het juiste keyframe hebt geselecteerd in de movieclip In het volgende uur ga je je richten op tutorials om bezig te blijven met Flash. Het kan natuurlijk zijn dat je iets maakt wat je heel graag in je portfolio op wilt nemen. Dat kan. Je kunt ten alle tijden keyframes toevoegen en veranderen. Belangrijk daarbij is, dat je frame-labels gebruikt en de code goed overneemt. Probeer geordend te werken, dan hou je het voor je zelf het makkelijkst.


88

Publiceren Wanneer je website helemaal af is, wil je deze natuurlijk op het internet krijgen. Een website die niet op internet staat, heeft eigenlijk niet heel erg nut. Via de Hogeschool van Amsterdam heb je een zogenaamde STAP-account gekregen. Met dit account kun je je persoonlijke portfolio op een domein van school plaatsen. Voorafgaand aan de cursus Photoshop is uitgelegd hoe je deze account activeert.   Opdracht   In deze opdracht ga je stap voor stap je Flash-website gereed maken voor het internet. 1. Open het bestand van je Flash-website, als je dat nog niet had gedaan. 2. Test je website nog eenmaal om te kijken of alles echt werkt. 3. Maak in je mappenstructuur een nieuwe map aan en noem deze “tools”. Sleep vervolgens het *.fla en *.swf bestand hierin.

Afbeelding 5.15: een voorbeeld van de map om te publiceren

4. Kies in het hoofdmenu voor de optie File en vervolgens voor Publish Settings. Wanneer je wat beter met flash overweg kunt, kun je de instellingen van je publicatie hier zelf beheren. Je diverse opties aan of uitvinken, net naar je smaak. Voor nu laten we alles gewoon standaard staan, omdat dit de makkelijkste oplossing is. Je kunt er eens wat mee spelen om te kijken wat het allemaal uithaalt.

Afbeelding 5.16: De verschillende opties voor het publiceren

5. Kies opnieuw voor de optie File in het hoofdmenu en vervolgens voor de optie “Publish”. Als je nu in je mapje gaat kijken, dan zie je dat er een HTML-pagina is toegevoegd aan het rijtje. Als je deze pagina opent, dan zie je in je standaardbrowser jouw website staan. HVA Interactieve Media | Introductiecursus Propedeuse | Tools 'R' Us

89

Afbeelding 5.17: De website gepubliceerd en weergegeven in een browser

Om jouw website op je STAP-account te krijgen en dus op het internet, gebruik je een zogenaamd FTP-programma. Twee voorbeelden van makkelijk en gratis te gebruiken programma’s zijn: Windows:

Afbeelding 5.18: Filezilla, http://filezilla-project.org/

Mac:

Afbeelding 5.19: Cyberduck, http://cyberduck.ch/

6. Download één van deze programma’s en installeer deze op je computer. 7. De volgende stap is je STAP-account in het programma zetten. Dit zal klassikaal gebeuren. Mocht je echt al zo ver zijn dat je veel tijd overhoudt, dan kun je altijd een student-assistent aanschieten om je hierbij te helpen.


90


91

Uur 6 Tutorials


Waar je tutorials voor Flash kunt vinden

 hoe je een eigen draai kunt geven aan de tutorials


92


93

Tutorials Om je kennis van Flash bij te houden is het raadzaam om regelmatig tutorials op te zoeken en te volgen. Het internet staat er vol mee. Zoals in de cursussen Illustrator en Photoshop al verteld is, zijn er video en tekst tutorials. Het hangt er maar net vanaf wat jij het prettigst vindt werken. Enkele voorbeelden van websites waar je tutorials voor Flash kan staan hieronder.     

http://www.adobe.com - De website van Adobe waar een manual van Flash staat. http://www.bewired.com - Niet echt een website met tutorials, maar wel veel bronbestanden voor leuke ideeën. http://www.flashfiles.nl - een website met vele tutorials en bronbestanden. Je moet je hier wel even voor aanmelden. Dit is gratis. http://www.flashfocus.nl - Een groot forum voor en door Flash designers en Actionscripters. Elke vraag is wel eens gesteld. Je kunt hier veel hulp krijgen op het gebied van Flash. http://www.tutorialized.com/tutorials/Flash/1 - Een flinke lijst met Flash tutorials

Het fenomeen Google kan ook een goede uitkomst zijn. Combineer verschillende zoekwoorden en je krijgt vele opties die je kunnen helpen.   Opdracht   Volg een aantal tutorials die je interessant lijken. Is er eentje goed gelukt? Dan kun je deze natuurlijk opnemen in je portfolio, die je in het vorige uur gemaakt hebt. Als je merkt dat de tutorials je gemakkelijk afgaan, probeer dan eens dezelfde tutorial te maken, maar met je eigen idee. Geef het een ander design of verander het verloop.   Opdracht   Mocht je liever zelf aan de slag willen, dan kun je proberen om de smiley die je in het tweede uur getekend hebt, te gaan animeren. Als voorbeeld kun je het *.swf bestand uit het Bronmateriaal erbij pakken. Bekijk hoed hoe de smiley beweegt en probeer het na te maken. Niet makkelijk, maar daardoor juist een grote uitdaging en test om te kijken hoe ver je bent.

Afbeelding 6.1: De smiley uit Uur 2


94


95

Samengevat... ...heb je nu basiskennis opgedaan van Adobe Flash CS4. 

In uur 1 heb je geleerd... o ...hoe het werkveld van Flash CS4 in elkaar zit o ...hoe je werkt met layers o ...hoe je werkt met frames o ...hoe de eigenschappen van het document aangepast kunnen worden



In uur o o o o



In uur 3 heb je geleerd... o ...wat het verschil is tussen een motion tween en een shape tween o ...hoe je effecten kunt toepassen op een animatie



In uur 4 heb je geleerd... o ...hoe je een basisinteractie kan toepassen o ...hoe je interactie toepast op een button o ...hoe je interactie toepast op een movieclip



In uur 5 heb je geleerd... o ...hoe je een basis website maakt met Actionscript 2.0 o ...hoe je een Flash website kunt vullen met jouw werk o ...hoe je jouw website publiceert en op het internet krijgt



In uur 6 heb je geleerd... o ...waar je tutorials voor flash CS4 kan vinden o ...hoe je een eigen draai aan de tutorials kan geven

2 heb je geleerd... ...hoe je kunt tekenen in Flash CS4 ...hoe je de kleuren van je getekende objecten kunt veranderen ...hoe je de library gebruikt ...wat het verschil is tussen een graphic, button en een movieclip

Dit was een introductiecursus Adobe Flash CS4. Je denkt nu misschien dat je klaar bent, maar eigenlijk begint het echte werk nu pas. Je zelf verder ontwikkelen en het programma van top tot teen ontdekken. Er valt nog veel te leren. De basiskennis is er nu en dat helpt je verder met je eigen ontwikkeling.


96


97

Bronvermelding 

Kaft. De kaft is gemaakt door Francette Broekman. Het is een screenshot van een door haar gemaakte Flashapplicatie als opdracht voor de Hogeschool van Amsterdam.



Uur 2. De smiley komt van de website http://www.bewired.nl



Uur 3. De animatie is gemaakt door Wendy Segaar.



Uur 4. Uitleg over Actionscript komt van de website http://www.bewired.nl. De tekst is bewerkt en aangepast naar eigen woorden. De inspiratie voor de opdracht over de movieclip als een button komt van de website http://www.developphp.com/Flash_tutorials/show_tutorial.php?tid=26



Uur 5. De texture, gebruikt in als achtergrond van de voorbeeldwebsite, komt van http://www.grsites.com. De inspiratie van de website komt van een tutorial die geschreven is door Davy Vanhuffel.


98

Flash CS4 Created by Wendy Segaar

Recommend Documents