Flash CS4 Created by Wendy Segaar

Transcriptie

1 Tools R Us Flash CS4 Created by Wendy Segaar

2 Inhoud Inleiding... 4 Uur 1 De Rondleiding... 6 Interface... 8 Document properties Layers en groups Timeline Opslaan Uur 2 Tekenen Vormen en kleuren Kleuren Tekenen Graphics, buttons en movieclips Library Uur 3 Animeren Animeren Motion tween Storyboard Shape tween Effects Uur 4 Interactie Basis interactie Buttons vs. Actionscript Movieclips vs. Actionscript Uur 5 Website Miniwebsite Publiceren Uur 6 Tutorials Tutorials Samengevat Bronvermelding Versie 2: Aangepast van Adobe Flash CS3 naar Adobe Flash CS4 door Sonja Rouwhorst. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 2

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

4 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-NietCommercieel- GelijkDelen 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 4

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

6 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 HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 6

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

8 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 werkveld Afbeelding 1. 2: Het 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

9 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 9

10 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. Opdracht We gaan de Document Properties aanpassen voor de tweede opdracht. 1. Open de Document Properties op de manier die jij het makkelijkst vindt. Afbeelding 1. 5: Het properties tabblad 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 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

11 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 11

12 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. 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. Afbeelding 1. 9: benoemde layers 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 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 12

13 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 13

14 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 zo neer te zetten dat je een of een krijgt. Wanneer je deze tekentjes ziet, 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

15 b. Via de rechter muisknop c. 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

16 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 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 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 <Name> 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 16

17 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 en 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

18 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 18

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

20 Uur 2 Tekenen Na dit uur weet je... 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 HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 20

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

22 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 HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 22

23 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 HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 23

24 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

25 Afbeelding 2.9: een vervormde Primitive Oval Als het goed is zie je nu ongeveer dezelfde afbeeldingen als in afbeelding 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

26 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 26

27 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. HVA Interactieve Media Introductiecursus Propedeuse Tools 'R' Us 27