FLASH MX lessen. Het begin

Transcriptie

1 FLASH MX lessen Het begin

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

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

4 INHOUD: Flash algemeen De Flash ontwikkelomgeving o Het werkgebied o Algemene instellingen o De tijdslijn o De Property Inspector o De Toolbox o Layers o Basisbewerkingen Layers o Frames o Keyframes Movie properties o Test movie o Movie opslaan Tekenen in Flash o Vectoren o Lijnen o Vlakken o Groeperen o Kleuren o Kleurenpalet Symbolen o Graphic Symbol o Movie Clip Symbol o Button Symbol o Symbols versus instance o Library o Instance op de stage plaatsen o Symbols editen o Instance properties wijzigen o Kleureffect veranderen o Buttons o Oefening 1: Button maken Onion skin o Onion Skinning o Onion Outline o Edit multiple frames Tweening o Motion tween o Oefening 1: Motion tween o Oefening 2: Een symbol roteren en verplaatsen o Shape tween o Oefening 3: Shape tween/ morphing o Oefening 4: Een bal laten stuiteren/ easing o Oefening 5: Object langs een lijn laten bewegen o Shape hints Tekst invoegen o Static tekst 4

5 o o o o o o o Dynamic tekst Input tekst Break Apart Spelling check Oefening 1: veranderen van kleur Oefening 2: Roteren en verplaatsen Oefening 3: Fade in, fade out Afbeeldingen invoegen o JPEG o PNG/GIF o Trace Bitmap o Oefening 1: Masking Actionscript o Oefening 1: Button met een hyperlink o Oefening 2: Button voor o Oefening 3: Geluid toevoegen Overige bewerkingen o Distributie naar lagen Movie publishing o Publish Settings o HTML en Flash Praktijkopdracht: Basis website 5

6 Flash algemeen Flash is een animatie programma en heeft de extensie *fla. Flash files die gebruikt worden op websites hebben de extensie *.swf. Dit is het bestandsformaat van Macromedia dat herkend wordt door alle belangrijke browsers (Internet Explorer, Netscape, Mozilla etc.). Het principe van Flash is simpel: de animatie wordt gestart door vectoren (zoals lijnen en vlakken), afbeeldingen of en video in een frame te plaatsen. Een frame is een stilstaand beeldje. Door meerdere frames achter elkaar te zetten, krijg je een animatie, net als bij film. Vandaar dat flash animaties ook wel 'movies' worden genoemd. Op dit moment kan een Flash film afgespeeld worden met Flash player 9. Deze player staat niet altijd standaard op je computer. Als je een oudere browser gebruikt moet je soms een recente versie van Flash player downloaden alvorens je de Flash film kan bekijken. Maar 98% procent van de surfers op internet heeft een Flash player op de computer staan. Het voordeel van Flash ten opzichte van HTML is dat er veel meer mogelijk is als je een animatierijke en interactieve website wilt maken. Het principe is "WYSIWYG" (what you see is what you get). Dus hetgeen je maakt met Flash ziet ook zo uit als je de film op internet zet. Dat wil met HTML (veel programmeerwerk) nog wel eens anders zijn. De taal die gebruikt wordt in Flash heet actionscript. Dit is een scripttaal die voor het maken van simpele animaties zeer goed te begrijpen is. Voor ingewikkelde applicaties is het niet het meest vriendelijke script om te gebruiken. De laatste Flash versie is Flash 8 (geïntroduceerd medio augustus 2005). De meeste mensen maken gebruik van Flash MX of Flash MX Deze laatste versie wordt ook gebruikt in deze tutorials. 6

7 De Flash MX ontwikkelomgeving Wanneer je in Flash wil gaan werken krijg je te maken met een ontwikkelomgeving die enige gewenning vereist. Zoals je hieronder in het schermvoorbeeld kan zien, heeft Macromedia ervoor gezorgd dat al zijn producten op een gelijkaardige manier te bedienen zijn. Andere producten van Macromedia zijn: Fireworks, Dreamweaver, Authorware, Freehand, Generator enz... Eén van de extra pluspunten van het werken met Macromedia producten is dat de samenwerking tussen deze diverse pakketten vrij soepel en vrij simpel kan verlopen. Je kan de volgende onderdelen terugvinden in de werkomgeving: 1. werkgebied (stage) 2. algemene instellingen (properties) 3. de tijdslijn (timeline) 4. lagen (layers) 5. gereedschapskist (Toolbox) 6. menubalk 7. panels 8. Property Inspector (contextgevoelig) 9. Bibliotheek Het werkgebied In het midden van het scherm vind je het werkgebied of de canvas. Hierin kan je verschillende objecten plaatsen waarmee dan diverse animaties gemaakt kunnen worden. 7

8 Algemene instellingen Deze eigenschappen bepalen de snelheid van je animatie, de achtergrondkleur, de grootte van de animatie en de eenheden waarmee je in je werkgebied wenst te werken. Deze eigenschappen wijzigen kan je als volgt: modify> document. Frame rate is de snelheid van je animatie. Fps staat voor frames per seconde. Hoe hoger deze waarde hoe sneller je animatie zal afspelen. Om een soepele animatie te krijgen is het belangrijk dat je deze framerate niet te laag plaatst; vb. tussen 12 en 25 fps. (fps: frames per seconde) Match printer zal je werkgebied verkleinen zodanig dat het juist past binnen het afdrukbereik van je printer. Match Contents zal je werkgebied verkleinen naar de inhoud van uw werkgebied, zodanig dat het perfect past. Save Default: indien je speciale instellingen steeds wenst te gebruiken kan je deze bewaren als standaard instellingen, zodanig dat je die niet steeds meer hoeft in te stellen. Background color: achtergrondkleur. Ruler units: de eenheid van de linialen. Tip: Maak altijd je animatie in de linkerbovenhoek van je werkgebied zodanig dat je op het einde via de movie properties de juiste hoogte en breedte nog kan aanpassen. De tijdslijn Dit is het gebied dat je bovenaan je scherm ziet. Bij een nieuwe animatie staat er in de timeline al standaard 1 layer en zie je rechts allemaal blokjes met een soort liniaal erboven. De blokjes zijn frames. 8

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

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

11 Layers De tijdbalk van Flash maakt gebruik van layers en frames, zoals hieronder: Layers zijn 'lagen' (in het voorbeeld hierboven 'actions' en 'radial' genoemd). Door lagen boven elkaar te zetten ontstaat een hiërarchie. Net zoals bij Adobe Photoshop, kun je layers laten overlappen. Een voorbeeld van layer hiërarchie is een zwarte achtergrond (layer1) met Buttons er voor geplaatst (layer 2). Zou je de layer volgorde omdraaien, dan zou je de Buttons niet meer zien, omdat de zwarte achtergrond de Buttonpen overlapt. Met het +je geheel links van de tijdbalk, maak je een nieuwe layer aan. Je kan ook een nieuwe layer aanmaken door via Insert > Timeline > New Layer... te kiezen. Enkele basisbewerkingen van layers Toevoegen van een layer: klik op de linkse Button onderaan of kies in het menu Insert>Layer. Verwijderen van een layer: klik op de rechtse Button onderaan of kies na het selecteren van de layer via het snelmenu(rechter muisbutton op het betreffende layer) delete layer. Verplaatsen van een layer: selecteer en versleep naar boven of onder. Naam geven aan een layer: dubbelklik op de naam en wijzig. Toevoegen van een 'Guide Layer': dit is een layer die een weg bevat die een bepaald object moet afleggen. Kopiëren naar verschillende layers: wens je een stukje uit een bepaald layer te kopiëren naar een andere layer kies je best voor het plakken 'paste in place' dan krijg je de kopie op de exact aangeduide plaats. Layer in een map plaatsen: een bestaand layer kan in een map 11

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

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

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

15 Om een vlak te maken kies je de volgende iconen: voor een cirkel voor een vierkant voor een zeshoek Als je deze tools gebruikt maak je standaard een set lijnen in de vorm van de tool (de rand) met een opvulling. Voordat je het vlak maakt, kan je in de Properties Panel de rand bepalen door dit icoon te selecteren en met dit icoon bepaal je de vulling. Ook kan je op de bovenstaande iconen klikken om de kleur van de rand of vulling te bepalen nadat het getekende vlak geselecteerd is. Met de cursor is een vlak te vervormen net zoals bij het vervormen van een lijn. Groeperen Wil je twee vormen over elkaar tekenen, maar ze afzonderlijk van elkaar kunnen selecteren dan moet je de vormen afzonderlijk groeperen. Ook als je lijnen en vulkleuren gebruikt in 1 vorm zal Flash deze altijd afzonderlijk selecteren. Wil je ze samen selecteren dan zul je de lijn en het vlak moeten groeperen. Dit doe je in het menu Modify>Group of als shortcut Command>G. Kleuren Hier wordt de basis uitgelegd van het kleurgebruik in Flash. We gaan uit van een vector object op de stage. De kleuren van de rand bepalen we door dit icoon te selecteren in tools panel een juiste kleur te kiezen. Om de binnenkant te kleuren selecteren we en kiezen we de juiste kleur. Als je alleen een rand getekend hebt van bijvoorbeeld een cirkel en deze wilt vullen, dan gebruik je de paintbucket tool. Je selecteert weer een vulkleur via deze optie en klikt dan met de paintbucket tool in het midden van de cirkel. Een gradiënt kunnen we een richting geven en vervormen door deze tool te gebruiken. Je kan een "swatch" (een kleur of gradiënt) toevoegen aan je kleuren bibliotheek. Dit doe je door rechts bovenin de 'colormixer' het icoontje aan te klikken en de optie "add swatch" aan te klikken. Dan is de kleur of gradiënt toegevoegd aan je kleurenpalet en kan je deze kleur of gradiënt zo vaak oproepen als je wilt. 15

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

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

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

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

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

21 Oefening 1 Button maken Hier leer je hoe je een simpele en blitse Button kunt maken zonder al te veel moeite. Druk eerst voordat je begint op Insert> New symbol. Maak eerst één cirkel (Zonder vulling!). Selecteer daarna de cirkel en druk op Command+C en druk daarna weer op command+v als het goed is heb je nu de cirkel gekopieerd. Maak de tweede cirkel kleiner door met de rechter muisbutton op de tweede cirkel de drukken en dan op Scale te klikken. De grote cirkel is de achtergrond voor de Button en de kleine cirkel het stuk waar je op kan drukken. We voegen een kleurtje toe. Kies een leuke kleur voor beide cirkels. En voeg die toe met de Button Paintbucket Tool. (tip: bij een grijze gradiënt als buitencirkel, lijkt de Button metallic) Nu gaan we de kleine cirkel op de grote cirkel plaatsen. Het is handig als je de Button Snap to Objects uit zet. Dan gaat het makkelijker. Als de kleine cirkel op de grote cirkel geplaatst is maak je een keyframe op over, down en hit en vervolgens voeg je hier per keyframe verschillende kleuren toe. Nu is je Button af! Test hem door op File>Publish Preview> Flash te drukken. 21

22 Onion Skin Onion Skinning Als je een cirkel tekent en deze laat bewegen van A naar B op de tijdslijn, dan zul je niet meteen weten hoe het animatiepad verloopt. Door middel van de Onion Skinning Button kan dit wel. Let wel: Dit werkt alleen als je een animatie maakt met keyframes, niet met een tween, want dan laat Flash alleen de keyframes zien in de animatie. Onion Outline Met de Outline Button ernaast kan je alleen de outline van de verschillende keyframes binnen de animatie bekijken. In de tijdslijn zie je welke keyframes met Onion Skin geselecteerd zijn. Je kunt zelf selecteren hoeveel keyframes je wilt zien door aan de hendels te trekken aan het uiteinde van het geselecteerde gedeelte of door op deze Button te drukken. 22

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

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

25 Oefening 1 Motion tween In dit filmpje laten we zien hoe we een object laten bewegen door middel van de motion tween. Maak een nieuwe file aan door op File > New te klikken. We gaan nu een cirkel tekenen door de oval tool te gebruiken. Kies een leuke kleur voor de bal en de buitenlijn. Dit doe je door de kleuren te bepalen in de Properties Panel. Voor de binnenkant van de cirkel gebruik je, voor de rand. Tevens kan je de dikte bepalen (staat nu op 1), door op het driehoekje naast de 1 te drukken en de schuifmaat omhoog of omlaag te schuiven. Om een motion tween te kunnen maken moet je eerst een symbol maken van je getekende object. Als het ware geef je Flash de opdracht om je object een naam te geven zodat het programma het kan herkennen voor bepaalde acties. Dit kun je doen door Insert>Convert to Symbol. (shortcut F8) te selecteren. Je krijgt nu een dialoogvenster (hetzelfde als bij het maken van een Button). Selecteer een Graphic Symbol, geef de bal de naam cirkel. Zoals je ziet zal de bal niet meer allerlei puntjes laten zien als deze geselecteerd is, maar een blauwe lijn er om heen hebben. 25