JOSTEIN NORDENGEN Snarveien til. Flash CC. Professional. I samarbeid med

Transkript

1 JOSTEIN NORDENGEN Snarveien til Flash CC Professional I samarbeid med

2 Gyldendal Norsk Forlag as og Dataservice as 2015 Redaktør: Formgiver: Omslagsdesign: Øystein Falch Lise Eastgate Hild Mowinckel Trykk og innbinding: Dimograf, Polen ISBN Alle henvendelser om utgivelsen kan rettes til: Dataservice as Storgata 4C 1767 HALDEN Det må ikke kopieres fra denne boka i strid med åndsverkloven og fotografiloven eller i strid med avtaler om kopiering inngått med KOPINOR, Interesseorgan for rettighetshavere til åndsverk. Kopiering i strid med lov eller avtale kan medføre erstatningsansvar og inndragning og kan straffes med bøter eller fengsel. Alle Gyldendals bøker er produsert i miljøsertifiserte trykkerier. Se

3 Forord Flash er et verktøy for å lage multimedieløsninger og har på mange måter satt standard for animasjoner og interaktive presentasjoner på web. Flash gir deg mulighet til å sette sammen tegninger, bilder, video, lyd og tekst på nye og spennende måter. Hvem er denne boka for? Denne boka er en del av et læremiddel for programfaget Informasjonsteknologi 1, men kan brukes i all grunnleggende opplæring i bruk av Flash. Eksemplene tar utgangspunkt i Adobe Flash Professional CC for Windows, og det forutsettes at du har tilgang til denne versjonen av Flash. Du kan laste ned en gratis prøveversjon fra I Flash har du mulighet til å lage interaktive animasjoner ved å programmere. Denne boka tar ikke for seg disse mulighetene. Du får en omfattende gjennomgang av hvordan du programmerer i Flash i boka Programmering i ActionScript 3.0, som er en del av læremidlene for programfaget Informasjonsteknologi II. Hvordan bruker du boka? Hvert kapittel i boka tar for seg et nytt emne i Flash. De mest grunnleggende emnene kommer først slik at det er lurt å jobbe med boka fra start til slutt. Du vil finne én eller flere øvelser i hvert kapittel som viser deg framgangsmåten trinn for trinn. Pass på at du gjennomgår øvelsene før du fortsetter videre i boka. Du finner oppgaver til hvert kapittel på nettstedet Flash er et omfattende verktøy slik at det er umulig å gjennomgå alle funksjoner i programmet. For å fordype deg i stoffet, gjennomgå andre emner eller finne svar på noe du lurer på, kan du benytte deg av Hjelp-funksjonen i programmet. Flash er et kreativt verktøy som utfordrer fantasien. Med andre ord: Flash er gøy! Mai 2015, Jostein Nordengen

4 Innholdsfortegnelse (1) Innledning Hva er Flash? 7 Flash-applikasjoner 7 Objekter i Flash 7 Grafikk i Flash 8 Starte Flash 9 Sette dokumentinnstillinger 9 Skjermbildet 10 Organisere skjermbildet 12 Utforske filene som blir laget i Flash 13 (2) Tegne i Flash Lage fyll og strek 15 Lage gress 16 Grunnleggende redigering 17 Kopiere og flytte en linje 17 Shape- og tegningsobjekter 18 Shape-objekter 18 Tegningsobjekter 18 Lage en halvsirkel 19 Zooming og panorering 19 Zoome og panorere 19 Tegneverktøy 20 Tegne et ansikt 21 Lag 22 Laglista 22 Skjule og låse lag 22 Lagmapper 23 Lagfarge 23 Lagtype 23 Bruke lag 24 Tegnehjelpemidler 24 Lage en lyspære 25 Tekst 27 Redigere tekst 28 Filtereffekter 28 Importere grafikk 29 Hente bilder fra Photoshop 29 Importere et bilde 29 (3) Redigere grafikk Velge objekter 31 Koordinatsystemet 32 Free Transform Tool 32 Transformasjonspanelet 33 Align-panelet 33 Lage en blomst 33 Tilpasse en firkant 33 Forandre form på objekter 34 Subselection Tool 34 Selection Tool 34 Width Tool 34 Lage en løkkuppel 35 Jevne og rette ut kurver 35 Redigere og bruke farger 36 Color-panelet 36 Gjennomsiktighet 37 Gradientfarger 37 Transformere gradienter 38 Bruke bilder som farge 38 Color Swatches-panelet 38 Lage en fisk 39 Andre redigeringsverktøy 40 Kombinere tegningsobjekter 40 Redigere fyll-grafikk 40 Konvertere strek til fyll 40 Redigere bilder 40 Symboler 41 Lage et symbol 42 Symboltyper 42 Library-panelet 42 Registerpunkt 43 Redigeringsvisning 44 Symbolhierarkier 44 Lage et nytt tomt symbol 44 Instanser 45 3D-transformasjoner 45

5 (4) Animasjon Hva er animasjon? 47 Bildehastighet (Frame rate) 47 Tweening 47 Animasjon og lag 48 Animasjonstyper i Flash 48 Tidslinja i Flash 49 Nøkkelbilder og bilder 49 Animasjon uten tweening 50 Lage animasjon uten tweening 50 Fordele grafikk over flere nøkkelbilder 51 Motion Tween 51 Lage en motion tween-animasjon 52 Forandre bane (Path) 54 Myke bevegelser (Easing) 54 Automatisk rotasjon 55 3D Tweening 55 Motion presets 55 Classic tween 56 Lage en classic tween-animasjon 56 Shape tween 57 Lage shape tween 57 Shape Hint 57 Lage en shape tween-animasjon 58 Justere easing 58 Interaktivitet 59 Lage en trykknapp 60 Code Snippets 60 Lage navigasjon med trykknapper 61 Publisering 62 Gjøre swf-fila mindre 63 Publisere til HTML5 64 Konvertere til HTML5 Canvas 64 Konvertere til WebGL 64 Publisere til smarttelefoner 65 (5) Redigere animasjon Redigere på tidslinja 67 Flytte bilder 67 Sette inn bilder 68 Skalere bilder 68 Animere tekst 69 Splitte opp motion tween 70 Sette inn nøkkelbilder 70 Slette bilder og nøkkelbilder 71 Slette tweening 71 Reversere bevegelse 71 Jevne ut bevegelse langs en sti 71 Konvertere til bilde-for-bilde-animasjon 71 Kopiere og lime inn bilder 72 Kopiere motion tween mellom objekter 72 Kopiere og lime inn lag 72 Kopiere fra hovedtidslinja til et symbol 72 Onion skin 73 Forandre grafikk på flere bilder samtidig 73 Motion Editor 73 Easingkurver 75 Animere ballsprett 75 Bruke lyd 77 Legge til lyd i animasjonen 77 Volumeffekter 78 Video 79 Importere video 79 Stikkord 80

6 I denne boka skal vi lære om Flash som er et svært populært verktøy for å lage animasjoner på websider.

7 1 INNLEDNING 7 >>1 Innledning I dette kapitlet skal vi lære > hva Flash er > hvordan vi starter Flash > å bli kjent med skjermbildet i Flash > om filer i Flash Hva er Flash? Flash er et program som brukes for å lage animasjoner som vises på websider. Den siste versjonen heter Adobe Flash Professional CC. Flash brukes også som navn på filtypen (swf) som overføres til nettleseren slik at animasjonen vises. For at nettleseren skal kunne vise animasjonen, må den ha installert et lite program som kan åpne og spille av Flashfila. Dette programmet kalles Flash Player og kan lastes ned gratis fra hjemmesidene til produsenten (Adobe). Flash-applikasjoner Animasjonene vi lager i Flash, kan enten vises fra begynnelse til slutt eller styres av brukeren på forskjellige måter. Animasjoner som styres av brukeren, lager vi ved å bruke et programmeringsspråk i Flash som kalles ActionScript. Fordi Flash-animasjonene kan være så mye forskjellig, alt fra stillestående grafikk til avanserte dataspill, blir de også kalt Flash-applikasjoner. I denne boka skal vi fortsette med å bruke betegnelsen Flash-animasjoner. Objekter i Flash I likhet med andre Windows-programmer jobber vi med objekter i Flash. Noen av de vanligste typene er grafikkobjekter, symbolinstanser og nøkkelbilder. Utover i boka skal vi lære hvordan vi bruker de forskjellige objektene.

8 8 Flash CC Professional Vektorgrafikk Grafikk i Flash I Flash finnes det mange muligheter for å lage grafikk. Grafikken vi lager, er av en type som kalles vektorgrafikk. Kurver og linjer i denne grafikken lagres som matematiske formler. Fordelen med dette er at Flash kan bruke matematiske beregninger for å vise animasjoner der grafikken forandrer seg. Dette gjør at animasjonene tar mindre plass og swf-fila blir liten. En annen fordel er at vi kan forstørre grafikken uten at kvaliteten blir dårligere. Dessuten vil vektorgrafikk være delt opp i forskjellige objekter (linjer, kurver, sirkler osv.) slik at vi enkelt kan forandre på dem. Ulempen med vektorgrafikk er at det er vanskelig å lage grafikk med stor detaljrikdom. Grafikken får vanligvis en enkel stil. En annen type grafikk er punktgrafikk (også kalt bitmap eller raster). Denne grafikken består av mange små punkter som blir kalt piksler. Pikslene sitter tett i tett og kan ha mange forskjellige farger. Når vi ser pikslene på avstand, vil det virke som vi ser et bilde. Det er denne typen grafikk som brukes i male- og fotoredigeringsprogrammer og i bildene vi får fra digitale kameraer og skannere. I Flash kan vi hente inn filer med punktgrafikk og bruke dem i animasjonen, men vi kan ikke lage punktgrafikk fra grunnen av. Punktgrafikk gir oss muligheter for stor detaljrikdom, men tar vanligvis større plass enn vektorgrafikk. En annen ulempe er at hvis vi forstørrer punktgrafikk, vil vi etter hvert se pikslene i bildet slik at det virker kornete. Når vi forstørrer punktgrafikk, blir bildet kornete Punktgrafikk

9 1 INNLEDNING 9 Starte Flash Det første vi gjør når vi skal jobbe med Flash, er å starte programmet, lage et nytt Flash-dokument og sette innstillinger for dokumentet. Sette dokumentinnstillinger 1 Gå i startmenyen og velg Adobe Flash Professional CC 2 Avhengig av hvilke innstillinger du har, vil det dukke opp et oppstartsvindu. Hvis vinduet dukker opp, så velg ActionScript 3.0 under Create New: 3 Velg i menyen Modify > Document Du får nå opp en dialogboks: 4 Under Units kan du velge hva slags måleenhet du vil bruke. Velg Pixels (punkter på skjermen). 5 Under Stage size kan du velge størrelsen på animasjonen. Skriv 640 som bredde (width) og 480 som høyde (height). Scale content vil automatisk skalere innholdet hvis du endrer størrelsen i etterkant 6 Under Stage color settes animasjonens bakgrunnsfarge. Velg her hvit 7 Under Frame rate velger du bildehastigheten. Det vil si hvor mange bilder som skal vises per sekund i animasjonen. Sett verdien til 24 8 Klikk på knappen Make Default for å la innstillingene gjelde også for nye dokumenter 9 Klikk på knappen OK

10 10 Flash CC Professional 3 Skjermbildet Skjermbildet i Flash ser slik ut: Liste med skjermbildeoppsett 2 Dokumentfane 3 Menylinja 4 Visningsområdet 5 Zoomlista 6 Tidslinja 7 Laglista 8 Verktøyboksen 9 Paneler 10 Panelmeny 11 Properties-panelet

11 1 INNLEDNING 11 Det ikke sikkert du har det samme skjermbildet som vist på forrige side. For å rette på dette kan du klikke i lista med skjermbildeoppsett (1) og velge Essentials og deretter Reset Essentials. Det kan også være at du har en mørkere farge. Du kan veksle mellom mørk og lys farge ved å gå i Editmenyen og velge Preferences... Velg User Interface under General-fanen: Hvis du har flere dokumenter oppe samtidig, kan du skifte mellom dem i dokumentfanene (2). Har dokumentnavnet en stjerne bak seg, betyr det at dokumentet ikke er lagret etter at det er gjort forandringer. Menylinja (3) i Flash virker på samme måte som andre programmer i Windows. File-menyen brukes blant annet for å lagre og åpne filer, lage nye Flash-dokumenter og importere grafikk. I Edit-menyen kan du kopiere, klippe og lime inn grafikk. Andre menyer inneholder funksjoner som er mer spesielle for Flash. Visningsområdet (4) også kalt stage er stedet der du lager og redigerer grafikk og andre typer objekter. Du kan også plassere objektene utenfor visningsområdet (i det grå feltet), men disse vil ikke bli vist i den ferdige animasjonen. I zoomlista (5) kan du regulere zoomfaktoren i visningsområdet. Tidslinja (6) viser hvordan animasjonen foregår over tid. Det er her du jobber når du skal lage bevegelser i Flash-animasjonen. Du kan organisere grafikk og andre elementer i laglista (7). Hvert lag kan animeres og har derfor sitt eget spor på tidslinja. Verktøyboksen (8) inneholder verktøy (trykknapper) som du bruker for å lage grafikk. Rundt visningsområdet finner vi en rekke paneler (9) med ulike funksjoner. Panelene har en panelmeny (10) som inneholder flere valg for panelet. Properties-panelet (11) er et av de viktigste panelene i Flash og brukes for å forandre på objekter som vi har valgt i visningsområdet eller på tidslinja.

12 12 Flash CC Professional Organisere skjermbildet Plasseringen og visning av panelene kan i stor grad bestemmes av brukeren, på samme måte som i andre Adobe-programmer. Hvis du ønsker å legge til et panel, kan du gå i Window-menyen og krysse av for det panelet du ønsker. Panelene ligger i panelgrupper. Hvert panel har en fane i panelgruppen: Du kan flytte en hel panelgruppe ved å dra på det grå feltet ved siden av fanene. Du kan hekte gruppen til kanten på skjermen ved å slippe opp når det dukker opp blå linjer. Hvert enkelt panel kan flyttes ved å dra på fanen til panelet. Panelet kan dras inn i en annen panelgruppe eller hektes på i kantene av skjermen eller andre grupper. Bruk de blå linjene for å bestemme hvor panelet havner. For å fjerne et panel eller en panelgruppe, kan du høyreklikke på panelfanen og velge Close eller Close Tab Group i menyen som dukker opp. Du kan også veksle mellom visning av fulle paneler eller ikoner ved å klikke på de små pilene over panelgruppen. På denne måten får du mer plass til visningsområdet eller tidslinja, samtidig som du har tilgang til panelene: Du kan forandre størrelsen på panelgrupper og ikoniserte panelgrupper ved å dra på kantene. Ønsker du å skjule eller vise alle panelene, kan du trykke på F4 på tastaturet. Du kan velge et fast skjermbildeoppsett i lista med oppsett. Har du forandret på et oppsett og ønsker å komme tilbake til originaloppsettet, kan du bruke Reset-valget. Du kan også lagre ditt eget oppsett ved å velge New Workspace og angi ett navn på oppsettet. Du kan slette og forandre navn på oppsett ved å bruke Manage Workspaces Properties-panelet er et av de viktigste panelene i Flash og brukes for å forandre på objekter vi har valgt i visningsområdet eller på tidslinja. Panelet viser også ulike innstillinger for verktøy vi har valgt i verktøyboksen. Ved å klikke på de små trekantene kan du velge å vise eller å skjule ulike deler av panelet.

13 1 INNLEDNING 13 Hjelp i Flash Du får omfattende informasjon om funksjoner og muligheter i Flash ved å gå i Help-menyen og velge Flash Help. Hvis du har tilgang til internett, vil hjelpen alltid være oppdatert og vises direkte fra Adobes nettsted. Filer i Flash Vi lagrer Flash-dokumentet ved å gå i menyen File > Save As Fila vi lagrer, får etternavnet fla. For å åpne et Flash-dokument går vi i menyen File > Open Fla-fila inneholder det som er nødvendig for å jobbe med animasjonen i Flash, men vær oppmerksom på at dette ikke er fila som spilles av i Flash Player. Fila som spilles av, har samme fornavn som fla-fila, men har etternavnet swf. Denne fila lages hver gang vi tester animasjonen i Flash, eller når vi publiserer animasjonen. Swf-fila er komprimert og lagd slik at den bare inneholder det mest nødvendige for å spille av animasjonen. Den blir derfor mye mindre enn fla-fila og kan raskt overføres på Internett. Utforske filene som blir laget i Flash 1 Bruk Windows Utforsker og lag en mappe under Mine dokumenter som du kaller Flashfiler 2 Start Flash og lag et nytt dokument 3 Trykk på bokstaven O på tastaturet eller klikk på knappen Oval Tool i verktøyboksen 4 Dra i visningsområdet slik at du lager en sirkel eller oval 5 Gå i menyen File > Save As Skriv Sirkel.fla som filnavn og lagre fila i mappa du lagde 6 Bruk Windows Utforsker og sjekk at fila du nettopp har lagret, er i mappa 7 Gå tilbake til Flash til menyvalget Control >Test Movie > Test. Du vil nå få opp et vindu (Flash Player) som spiller av animasjonen i vårt tilfelle en sirkel som står helt stille 8 Bruk Windows Utforsker og sjekk hva som ligger i mappa du lagde. Vi ser at vi har fått en ny fil som heter Sirkel.swf. Legg merke til at den er mye mindre enn fla-fila. Det er swf-fila som spilles av i Flash Player, og som lages på nytt hver gang vi bruker Test Movie for å kjøre animasjonen

14 14 Flash CC Professional I dette kapitlet ser vi på hvordan vi lager grafikk i Flash ved å bruke forskjellige tegneverktøy.

15 2 TEGNE I FLASH 15 >>2 Tegne i Flash I dette kapitlet skal vi lære Strek Fyll Strek Fyll > forskjellen mellom ulike typer grafikkobjekter > grunnleggende redigering > å bruke tegneverktøyene i Flash > å bruke lag > å bruke hjelpemidler for å tegne nøyaktig > å lage tekst > å hente grafikk fra andre programmer Lage fyll og strek Strekfarge (Stroke color) 2 Fyllfarge (Fill color) 3 Svart og hvit (Black and white) 4 Bytter fyll- og strekfarge (Swap colors) Grafikken vi tegner i Flash, kan bestå av både fyll (fill) og strek (stroke). Du kan forandre fyll- og strekfargen ved å bruke verktøyene som heter Fill color og Stroke color i verktøyboksen. Når du velger et tegneverktøy kan du angi farger, strektykkelse, strekstil (stipling) og variabel bredde i Properties-panelet: Strektykkelse (Stroke size) 2 Strekstil 3 Selvvalgt strekstil (Edit Stroke Style) 4 Breddeprofil Når du forandrer farger og strek, vil innstillingene gjelde for nye objekter du tegner. Hvis du har valgt ett eller flere objekter på forhånd, vil du også forandre disse til de nye innstillingene.

16 16 Flash CC Professional Lage gress I denne øvelsen skal du lage grafikk med en «gressaktig» strek. Husk at du alltid kan bruke Undo i menyen (Edit > Undo) for å angre det siste du gjorde. 1 Start Flash og lag et nytt dokument 2 Trykk på O på tastaturet eller klikk på Oval Tool i verktøyboksen 3 Gå i Properties-panelet og klikk på fargefeltet med strekfargen. Du vil nå få opp en palett hvor du kan velge farge. Velg en mørk grønn farge. Klikk på fargefeltet under Fill color og velg en lys grønn farge 4 Skriv 20 under Stroke height. Denne verdien angir strektykkelsen 5 Klikk på knappen Edit Stroke Style. I dialogboksen som dukker opp, kan du velge strekstilen. Velg først Hatched under Type og sett de andre verdiene slik det er vist nedenfor Det finnes mange måter å lage gress på. Bruk litt tid på å utforske de ulike innstillingene, og finn dine egne teknikker. 6 Klikk på knappen OK 7 Dra med musa i visningsområdet slik at du tegner en ellipse 8 Vi skal sette tilbake strekstilen slik at du ikke fortsetter å tegne med «gresstreken». Gå i Properties-panelet og skriv 1 under Stroke height. Velg deretter Solid i lista med strekstiler

17 2 TEGNE I FLASH 17 Grunnleggende redigering Du kan velge objektene enkeltvis ved å klikke på dem, eller du kan velge flere objekter på en gang ved å dra et vindu rundt dem. Du kan også velge flere objekter ved å holde Shift-tasten nede samtidig som du klikker på dem. Forandrer vi på grafikken i etterkant, sier vi at vi redigerer den. Vi bruker Selection Tool for å velge objektene vi vil forandre på. Valgte objekter blir markert med et prikket mønster eller en blå ramme. Når vi har valgt objektene, kan vi gjøre forskjellige ting med dem, for eksempel: Slette dem ved å trykke Delete på tastaturet. Flytte dem ved å dra med musa eller bruke piltastene på tastaturet. Hvis Snap to Objects-knappen i verktøyboksen er trykket ned, vil objektet du flytter, hekte seg til punkter på andre objekter. Kopiere dem ved å holde Alt-tasten nede samtidig som du drar på dem. Du kan også kopiere ved å høyreklikke på et objekt og velge Copy i menyen som dukker opp. For å lime inn høyreklikker du i et tomt område og velger enten Paste (limer inn i midten av visningsområdet) eller Paste in Place (limer inn i samme posisjon som originalen). Gruppere objekter ved å velge dem og velge menyen Modify > Group. Objektene vil da oppføre seg som ett objekt. For å løse opp gruppen bruker du Modify > Ungroup i menyen. Forandre rekkefølge slik at objektet kommer over eller under andre objekter. Du gjør dette ved å høyreklikke på objektet og velge Arrange i menyen som dukker opp. Vær oppmerksom på at dette ikke gjelder for Shape-objekter (se avsnitt om shape-objekter). Forandre ulike egenskaper i Properties-panelet. Kopiere og flytte en linje 1 Klikk på Line Tool og dra i visningsområdet for å tegne en linje 2 Klikk på Selection Tool og velg linja. Hold Alt-tasten nede samtidig som du drar på linja. Du får nå en kopi av linja. Plasser den litt til høyre for den gamle linja 3 Klikk på Selection Tool og velg den gamle linja. Gå i Properties-panelet og forandre farge og stil på streken slik at den blir stiplet 4 Velg en av linjene. Bruk piltastene for å flytte på den 5 Velg den stiplede linja. Pass på at Snap to Objects-knappen er nede, og dra på den nederste enden av linja. Legg merke til at musmarkøren hekter seg på endepunktet (vises med en liten sirkel). Dra linja til endepunktet på den andre linja. Legg merke til hvordan musmarkøren hekter seg på endepunktet (vises med en større sirkel) 6 Velg begge linjene. Slett dem med Delete på tastaturet

18 18 Flash CC Professional Shape- og tegningsobjekter Grafikken vi tegner i Flash, kan enten være shape-objekter (shapes) eller tegningsobjekter. Hvis Object Drawing-knappen i verktøyboksen er trykket ned ( ), tegner du tegningsobjekter (Object Drawing Mode). Hvis knappen er trykket opp ( ), tegner du shape-objekter (Merge Drawing Mode). Shape-objekter Shape-objekter er den mest grunnleggende formen for grafikk i Flash. Strek og fyll kan velges uavhengig av hverandre. I tillegg vil shape-objektene kombineres på forskjellige måter hvis vi tegner dem oppå hverandre: Streker vil kutte i fyll og andre streker. Fyll vil kutte i fyll med annen farge. Fyll vil også kutte streker. Fyll med lik farge vil smelte sammen. Hvis du ikke ønsker at shape-objektene skal kombineres, kan du konvertere dem til tegningsobjekter ved først å velge dem med Selection Tool og så gå i menyen Modify > Combine Objects > Union. Tegningsobjekter Tegningsobjekter (drawing objects) er grafikk på et høyere nivå. Slike objekter vil ikke kombineres med andre objekter og dekke over eventuelle shape-objekter. Hvis du bruker Selection Tool og dobbeltklikker på et tegningsobjekt, får du tilgang til shape-objektene inne i tegningsobjektet. For å gå ut av tegningsobjektet kan du klikke på pila over visningsområdet Bruk pila for å gå ut av tegningsobjektet 2 Viser at vi er inne i et tegningsobjekt Du kan bare ha shape-objekter inne i et tegningsobjekt. Prøver du å lage et nytt tegningsobjekt, blir objektet du er inne i, forandret til en gruppe. Ønsker du å bryte opp et tegningsobjekt slik at det blir et shape-objekt, kan du høyreklikke på objektet og velge Break Apart i menyen som dukker opp.

19 2 TEGNE I FLASH 19 Lage en halvsirkel 1 Start Flash og lag et nytt dokument 2 Trykk på o på tastaturet eller klikk på Oval Tool i verktøyboksen 3 Pass på at Object Drawing-knappen ikke er trykket ned 4 Dra i visningsområdet for å tegne en sirkel. 5 Klikk på Line Tool og tegn en strek over sirkelen 6 Klikk på Selection Tool, klikk på den nederste delen av fyllet og trykk Delete på tastaturet for å slette fyllet. Velg kurver og linjer og slett dem slik at du står igjen med en halvsirkel: Hand Tool (panorering) Zoom Tool Zoomlista Zooming og panorering For å tegne mer nøyaktig er det ofte nødvendig å zoome og panorere i tegningen. Vi gjør dette ved å bruke Zoom Tool og Hand Tool i verktøyboksen eller zoomlista over visningsområdet. Bruk Zoom Tool og klikk i visningsområdet for å zoome deg inn to ganger. Hvis du holder Alt-tasten nede, zoomer du deg ut to ganger. Du kan også angi om du zoomer inn eller ut ved å bruke pluss- og minus-knappene nederst i verktøyboksen. Zoom Tool kan i tillegg brukes ved å dra et vindu i tegningen. Det som er innenfor vinduet, forstørres slik at det fyller hele visningsområdet. Du kan flytte deg over tegningen (panorere) ved å bruke Hand Tool i verktøyboksen. Dra med musa for å flytte deg dit du vil. Ønsker du å angi forstørrelsen i prosent eller tilpasset visningsområdet, kan du bruke zoomlista til høyre over visningsområdet. Zoome og panorere 1 Start Flash og lag et nytt dokument 2 Trykk på o på tastaturet eller klikk på Oval Tool i verktøyboksen og tegn en sirkel 3 Klikk på Zoom Tool og klikk i tegningen for å zoome deg inn 4 Dra et vindu for å zoome deg enda lenger inn 5 Klikk på Hand Tool for å flytte deg (panorere) over tegningen 6 Gå til zoomlista og velg Show Frame for å midtstille visningsområdet 7 Gå til zoomlista og velg 100 % for å komme tilbake til utgangspunktet

20 20 Flash CC Professional Tegneverktøy Når du bruker Pencil Tool og velger Straighten nederst i verktøyboksen vil Flash kjenne igjen ulike grunnformer. Prøver du for eksempel å tegne en sirkel, vil Flash jevne ut kurvene slik at du får en perfekt sirkel. Vi finner de fleste tegneverktøyene i verktøyboksen. Line Tool brukes for å tegne rette linjer. Dra med musa i visningsområdet for å tegne linja. Hold Shift-tasten nede for å tegne horisontale, vertikale eller 45 linjer. Pen Tool brukes for å tegne kurver og sammenhengende linjer. Pen Tool ligger i en felles knapp (flyout) sammen med verktøy du kan bruke for å redigere kurver. Hold knappen nede en liten stund for å velge verktøyet du ønsker. Rectangle Tool og Rectangle Primitive Tool ligger i en felles knapp. Det samme gjelder Oval Tool og Oval Primitive Tool. Sammen med PolyStar Tool gir disse verktøyene deg mulighet til å tegne ulike former som sirkler, firkanter og polygoner. Pencil Tool brukes for å tegne linjer og kurver på frihånd. Nederst i verktøyboksen kan du velge ulike måter å jevne ut det du tegner. Bruk Straighten for å jevne ut til rette linjer og Smooth for å jevne ut til myke kurver. Ink gir liten utjevning, og resultatet vil bli omtrent slik du tegner. Brush Tool brukes for å male med fyllfarge. Dra med musa for å male. Du kan velge størrelse og form på penselen i Properties-panelet. Brush Mode nederst i vertkøyboksen bestemmer hvordan det du maler kombineres med annen grafikk. Paint Bucket Tool brukes for å forandre på fyll eller lage nytt fyll inne i et lukket område. Velg fyllfarge og klikk inne i området. Området trenger ikke være helt lukket. Du bestemmer toleransen under Gap Size nederst i verktøyboksen. Ink Bottle Tool brukes for å lage eller forandre på streken rundt et objekt med fyll. Velg strekfarge, strektykkelse osv. og klikk på fyllet. Eyedropper Tool brukes for å kopiere egenskaper som fyllfarge, strekfarge og strekstil fra et objekt til et annet. Klikk først på objektet (strek eller fyll) du vil kopiere fra og, klikk så på objektet du vil kopiere til. Eraser Tool brukes for å fjerne grafikk. Du kan bruke verktøyet nesten på samme måte som Brush Tool ved å velge penselstørrelse og form. Faucet kan brukes til å slette fyll og strek uavhengig av hverandre. Width Tool streken. brukes for å endre strektykkelsen forskjellige steder langs

21 2 TEGNE I FLASH 21 Tegne et ansikt 1 Start Flash og lag et nytt dokument 2 Klikk på Oval Tool og pass på at Object Drawing-knappen og Snap to Objects-knappen ikke er trykket ned 3 Velg strek- og fyllfarge og tegn sirkler slik at du får noe som ligner på figuren nedenfor. For å plassere sirklene nøyaktig kan det være lurt å tegne dem fra hverandre og så bruke Selection Tool for å velge dem og så flytte (dra) dem sammen: 4Klikk på Brush Tool og velg hvit fyllfarge. Mal reflekser i øyne og nese: 5 Vi skal bruke ansiktsfargen på nytt. Klikk på Eyedropper Tool og klikk på fyllet i ansiktet. Dette blir nå den gjeldende fyllfargen. Klikk på Oval Tool og tegn to sirkler som skal bli ører. Klikk på Selection Tool og velg de delene av sirklene som ligger øverst inne i ansiktet. Trykk Delete på tastaturet for å slette dem: 6 Klikk på Pencil Tool med utjevningen satt til Smooth for å lage folder på ørene. Lag en munn med Line Tool : 7 Lagre fila som Ansikt.fla

22 22 Flash CC Professional Lag Du kan tenke på et lag (layer) som et gjennomsiktig ark du kan tegne på. Du kan ha flere ark oppå hverandre, og hele bunken med ark blir den ferdige tegningen. Det er lurt å bruke lag for å gjøre tegningen mer oversiktlig. For eksempel kan du tegne landskap på ett lag, en vei på et annet, en figur på et tredje osv. Du kan slå lagene av og på slik at du kan konsentrere deg om den delen av tegningen du jobber med. Lagene skiller objektene fra hverandre slik at for eksempel shape-objekter som ligger på forskjellige lag, ikke vil kutte hverandre. Laglista Du får en oversikt over lagene i laglista på tidslinja: Lagtype 2 Lagnavn 3 Vise/skjule lag 4 Låse/låse opp lag 5 Slå av /på visning av omriss 6 Lage nytt lag (New Layer) 7 Lage ny lagmappe (New Folder) 8 Slette lag Når du starter med et nytt dokument i Flash, vil du alltid ha et lag som heter Layer 1. Det er dette laget du har tegnet på til nå. Du kan lage nye lag ved å klikke på knappen New Layer under laglista. Ønsker du å slette et lag (og all grafikken i det), velger du laget i lista og klikker på knappen Delete Layer. Det er lurt å navngi lagene etter hva de inneholder, for eksempel Bakgrunn, Vei, Gutt osv. Dette gjør at vi lett kan finne fram til ulike deler av tegningen. Du forandrer lagnavnet ved å dobbeltklikke på det og skrive inn det nye navnet. Laget vi tegner på (det aktive laget), er markert med en blyant. Ønsker du å tegne på et annet lag, klikker du på det i laglista. Grafikken i et lag vil vises over grafikken i lagene nedenfor. Du kan forandre rekkefølgen på lagene ved å dra dem opp og ned i laglista. Skjule og låse lag For å skjule (slå av) et lag klikker du i kolonnen under «øyet». Du får det fram igjen ved å klikke en gang til. Du kan også låse lag slik at du ikke uforvarende forandrer på innholdet. Du gjør dette ved å klikke i kolonnen under «hengelåsen». Den siste kolonnen brukes til å vise innholdet på laget med bare omriss (outlines). Hvis du klikker på øyet, hengelåsen eller omrisset øverst i laglista, endrer du alle lagene på én gang.

23 2 TEGNE I FLASH 23 Lagmapper Hvis du har mange lag, kan det være lurt å ordne dem i mapper. Du lager en ny mappe ved å klikke på knappen New Folder nederst i laglista. Etterpå kan du dra lag over i den nye mappa. Navngi mappa på samme måte som du navngir lag. Lagfarge Ved å høyreklikke på laget og velge Properties i menyen som dukker opp, kan du forandre lagfargen (Outline color). Det er denne fargen som brukes når laget vises med omriss. Sirkel på maskelag Bilde på maskert lag Resultat Lagtype Du kan forandre lagtypen ved å høyreklikke på laget og krysse av i menyen som dukker opp. Du kan også bruke Properties i menyen. Vi har disse lagtypene: Normal Dette er vanlige lag. Mask Slike lag maskerer ut grafikk på lag som er knyttet til maskelaget. Lag som er knyttet til maskelag, er av typen Masked. Når du forandrer lagtypen til et maskelag, vil laget under automatisk bli knyttet til maskelaget (bli maskert). Vær klar over at både maskelaget og det maskerte laget må være låst for at maskeringen skal vises. Guide Grafikk som ligger på guidelag, blir ikke vist når vi spiller av swf-fila. Vi kan derfor bruke slike lag som hjelpelag hvor vi jobber med grafikk vi ikke ønsker å se i den ferdige animasjonen. Guidelag kan også brukes for å lage animasjon der et objekt følger en kurve. Lag som er knyttet til et maskelag, er rykket inn i laglista. Du kan tilknytte flere lag ved å dra dem under og litt til høyre for maskelaget. Du kan bryte tilknytningen ved å dra lagene ut til venstre.

24 24 Flash CC Professional Bruke lag 1 Start Flash og lag et nytt dokument 2 Gå i laglista og dobbeltklikk på lagnavnet (Layer 1). Forandre navnet til Bakgrunn 3 Tegn en firkant 4 Gå i laglista og klikk på knappen New Layer 5 Forandre navnet på det nye laget til Figur og pass på at dette laget er aktivt 6 Tegn en sirkel på det nye laget slik at den delvis dekker firkanten 7 Gå i laglista og dra Figur-laget under Bakgrunn-laget. Legg merke til at firkanten nå dekker sirkelen (ligger på topp) 8 Slå av Bakgrunn-laget ved å klikke på prikken i kolonnen under «øyet». Legg merke til at bare sirkelen synes 9 Lås Figur-laget ved å klikke på prikken i kolonnen under «hengelåsen». Klikk på Selection Tool og velg sirkelen Legg merke til at du ikke kan velge eller redigere sirkelen 10Lås opp Figur-laget ved å klikke i kolonnen under «hengelåsen» 11 Slå på Bakgrunn-laget igjen ved å klikke på krysset i kolonnen under «øyet» 12 Vi skal nå flytte alt på Figur-laget over til Bakgrunn-laget. Klikk på Figurlaget i laglista. Alt på laget blir nå valgt. Gå i menyen og velg Edit > Cut. Klikk på Bakgrunn-laget og velg Edit > Paste in Place i menyen 13 Slett Figur-laget ved å velge det i laglista og klikke på knappen Delete Layer Tegnehjelpemidler For å kunne tegne nøyaktig kan vi bruke snap slik at musmarkøren hekter seg til punkter eller hjelpelinjer når vi tegner eller flytter objekter. Du kan slå av og på de ulike snap-typene ved å høyreklikke i visningsområdet og velge Snapping i menyen som dukker opp. Snap-typene vi har, er: Snap to Objects gjør at du kan hekte deg til punkter på objekter. I tillegg kan vi hekte oss til tenkte horisontale og vertikale linjer. Du kan slå av og på Snap to Objects ved å bruke knappen Snap to Objects nederst i verktøyboksen eller bruke Snapping-menyen nevnt ovenfor.

25 2 TEGNE I FLASH 25 Grid gjør at du kan hekte deg til krysningspunktene til et rutenett. Du kan vise rutenettet ved å høyreklikke i visningsområdet og velge Grid > Show Grid i menyen som dukker opp. Størrelsen på rutene kan du angi ved å velge Grid > Edit Grid. Du vil da få opp en dialogboks hvor du kan angi størrelsen i bredde og høyde. Guides gjør at du kan hekte deg til horisontale og vertikale hjelpelinjer (guides) som du drar ut fra linjalene (rulers). Linjalene får du fram ved å høyreklikke i visningsområdet og velge Rulers i menyen. Hvis du høyreklikker i visningsområdet og velger Guides, kan du låse hjelpelinjene (Lock Guides) slik at du ikke uforvarende flytter på dem. Du kan også velge å vise eller skjule hjelpelinjene (Show Guides) eller slette dem alle sammen (Clear Guides). Snap Align gjør at du kan hekte deg til hjelpelinjer som går ut fra kantene på objekter i visningsområdet. Denne funksjonen kan være lur å bruke når du skal flytte objekter i forhold til hverandre. Snap to Pixel gjør at du kan hekte deg på pikslene i bildet hvis du zoomer deg mye inn. Du kan dessuten låse retningen til musmarkøren horisontalt, vertikalt og 45 ved å holde Shift-tasten nede samtidig som du tegner eller flytter objekter. Lage en lyspære 1 Start Flash og lag et nytt dokument 2 Dobbeltklikk på Layer 1 i laglista og forandre lagnavnet til Fatning 3 Høyreklikk i visningsområdet og velg Grid > Edit Grid i menyen du får opp. Sett størrelsen på rutene til 10 og kryss av for Show grid og Snap to grid. Klikk på OK 4 Klikk på Line Tool og pass på at Object Drawing-knappen ikke er trykket ned. 5 Gå i Properties-panelet og angi svart strekfarge og en linjetykkelse på 2

26 26 Flash CC Professional 6 Bruk rutenettet og tegn linjer slik det er vist under: 7 Lag et nytt lag og kall det Glass. Klikk på laget i laglista for å aktivere det 8Klikk på Oval Tool. Tegn en sirkel ved siden av fatningen med en diameter på 140 (14 ruter bred). Dra med musa og tell ruter først mot høyre, så oppover 9 Høyreklikk i visningsområdet og velg Rulers i menyen som dukker opp. Dra fra den vertikale linjalen slik at du får en hjelpelinje (guide) midt på sokkelen. Dra fra den horisontale linjalen slik at du får en hjelpelinje 5 ruter ovenfor toppen av fatningen 10 Klikk på Selection Tool. Dobbeltklikk på fyllet i sirkelen slik at både fyll og strek blir valgt. Dra fra senter av sirkelen til krysningspunktet til hjelpelinjene 11 Klikk på Line Tool og tegn en strek tvers over sirkelen i samme høyde som toppen av fatningen. Slett den delen av sirkelen som er under streken. Bruk Paint Bucket Tool for fylle farge på forskjellige deler av lyspæren. Bruk til slutt Brush Tool for å lage en hvit refleks 12 Lagre fila som Lyspære.fla

27 2 TEGNE I FLASH 27 Tekst Du lager tekst ved å bruke Text Tool i verktøyboksen.velg deretter Static Text i lista i Properties-panelet: Du kan enten klikke eller dra ut en ramme der du vil ha teksten. Hvis du drar ut en ramme, vil teksten brytes i henhold til bredden på rammen. Du kan forandre bredden ved å dra på håndtakene i tekstrammen. Håndtak Du velger forskjellige egenskaper til teksten i Properties-panelet: 1 Teksttype 2 Tekstretning 3 Skrifttype 4 Skriftstil 5 Skriftstørrelse 6 Tegnavstand 7 Skriftfarge 8 Font rendering method 9 Valgbar tekst 10 Super/sub-skrift 11 Tekstjustering 12 Innrykk 13 Linjeavstand 14 Margavstand 15 URL Uten utjevning Med utjevning Du kan velge skrifttype, størrelse, farge og justering på samme måte som i et tekstbehandlingsprogram. Legg merke til de blå tallverdiene i panelet. Disse kan du enten klikke på for å skrive inn en verdi, eller dra på for å øke eller minske verdien. Slike parameterfelt finner du flere steder i Flash. Teksttypen vil vanligvis være Static. De to andre typene, Dynamic og Input, brukes når vi refererer til teksten i ActionScript. Static-teksten jevnes ut i kantene (Anti-aliasing) slik at den ser penere ut på skjermen. Vi kan velge typen utjevning under Font Rendering Method. Vil du at teksten skal være valgbar slik at den kan kopieres av brukeren, trykker du ned-knappen Selectable. I URL Link-feltet kan du skrive inn en lenke til en webside som vises i nettleseren når brukeren klikker på teksten. Hvordan siden vises, kan du angi under Target.

28 28 Flash CC Professional Redigere tekst Etter at du har lagd en tekst, kan du redigere den på forskjellige måter. Hvis du velger med Selection Tool, slik at den får en blå ramme rundt seg, kan du endre egenskaper til hele teksten i Properties-panelet. Hvis du dobbeltklikker på teksten eller bruker Text Tool, får du mulighet til å endre innholdet. Da kan du også velge deler av teksten og forandre egenskapene i Properties-panelet: Du kan konvertere tekst til Shape-objekter ved å høyreklikke på teksten og velge Break Apart i menyen som du får opp. Hvis teksten består av flere tegn, vil Break Apart først dele opp teksten i enkelttegn. Du må derfor bruke Break Apart to ganger for å konvertere teksten til Shape-objekter. Add Filter Break Apart 1. gang enkelttegn 2. gang shape-objekter... som du for eksempel kan endre form på Vær oppmerksom på at du ikke kan redigere tekstinnholdet etter at du har konvertert til shape-objekter. Filtereffekter Du kan legge på ulike filtre på teksten, for eksempel slagskygge (drop shadow). For å gjøre dette velger du teksten og legger til et filter ved å gå i Properties-panelet under Filters og klikke på knappen Add Filter. Nedenfor har vi valgt et filter som heter Glow for å lage en «Knock out»-effekt og Bevel for å lage en 3D-effekt:

29 2 TEGNE I FLASH 29 Importere grafikk I stedet for å tegne grafikken i Flash kan du hente inn grafikkfiler fra andre programmer. Du gjør dette ved å gå og velge File Import >Import to Stage... i menyen Du vil få opp en dialogboks hvor du kan velge grafikkfila. Vi kan hente inn både punktgrafikk og vektorgrafikk. I lista ved Filtype får du en oversikt over de ulike filtypene. JPG, PNG, og GIF generelle punktgrafikkformater BMP generelt punktgrafikkformat i Windows PSD punktgrafikk fra Photoshop. Henter du inn slik grafikk, kan du blant annet velge hvordan ulike lag i psd-fila skal håndteres i Flash. AI vektorgrafikk fra Adobe Illustrator Flash kan vise bilder (punktgrafikk) med gjennomsiktighet, men vær oppmerksom på at JPG-bilder ikke inneholder informasjon om gjennomsiktighet. Vanligvis er det best å bruke PNG eller PSD (Photoshop format). I tillegg til grafikk kan vi hente inn lyd og videofiler, men disse krever en litt annen behandling før vi kan bruke dem. Hente bilder fra Photoshop Når du henter inn et bilde i PSD-format, får du opp en dialogboks hvor du kan velge å la Photoshop-lagene komme inn som separate lag i Flash, slå lagene sammen i ett Flash-lag eller la lagene komme inn som bilder (keyframes) i en animasjon. Importere et bilde 1 Pass på at du har en bildefil (punktgrafikk) på datamaskinen. Du kan eventuelt laste ned en fil fra nettet ved å høyreklikke på et bilde i nettleseren og velge Lagre bilde som 2 Start Flash og lag et nytt dokument 3 Gå i menyen og velg File > Import > Import to Stage... 4 Velg bildefila og klikk på knappen Åpne. Bildet vil havne i visningsområdet

30 30 Flash CC Professional I dette kapitlet ser vi på hvordan vi transformerer (flytter, roterer og skalerer) objekter og forandrer form og farge på dem.

31 3 REDIGERE GRAFIKK 31 >>3 Redigere grafikk I dette kapitlet skal vi lære > å velge objekter > å transformere objekter > å forandre form på objekter > å redigere og bruke farger > å bruke symboler og instanser Velge objekter Før vi kan redigere objektene, må vi velge dem. Du kan velge objekter på forskjellige måter ved å bruke Selection Tool: Klikk på objektet for å velge det. Ønsker du å velge flere objekter, kan du holde Shift-tasten nede samtidig som du klikker på objektene. Du kan også dra et vindu rundt objektene for å velge dem. Pass på å starte å dra et sted det ikke er noen objekter. Dobbeltklikker du på fyllet i et Shape-objekt, vil både fyll og strek bli valgt (hvis streken finnes). Dobbeltklikker du på streken til et Shape-objekt, vil alle tilhørende linjer og kurver bli valgt. Hvis du klikker i et tomt område, forsvinner utvalget (ikke objektene). Du kan også velge objekter uten å bruke Selection Tool: Hvis du velger et lag i laglista, vil all grafikken på dette laget bli valgt. Du kan velge alle objektene i tegningen ved å gå og velge Edit > Select All i menyen, eller trykke på Ctrl+A på tastaturet. Lasso Tool brukes for å velge objekter innenfor et område du tegner selv. Hvis området du tegner delvis går over et Shape-objekt, vil delen innenfor området bli valgt. Ønsker du å tegne et polygon for å velge objekter kan du bruke Polygon Tool som ligger under samme knapp som Lasso Tool. Dobbeltklikk for å lukke polygonet.

32 32 Flash CC Professional Transformere objekter Transformere betyr å flytte, rotere eller skalere. I forrige kapittel så vi at vi kunne flytte objekter ved å dra på dem eller bruke piltastene på tastaturet. Vi skal nå se på noen andre måter å transformere objekter på. Y X Koordinatsystemet Alt vi tegner i Flash, bruker et koordinatsystem med x-retningen mot høyre og y-retningen nedover. Origo ligger i det øvre venstre hjørnet i visningsområdet. Vi kan flytte objekter ved å angi X- og Y-verdiene i Properties-panelet: Vi kan også forandre bredde og høyde på objektene ved å bruke W og H (Width og Height). Hvis du klikker på låseknappen vil forholdet mellom bredde og høyde låses slik at objektene beholder formen. X- og Y-koordinatene henviser til et punkt på objektet vi kaller registerpunktet. Vanligvis er dette det øvre venstre hjørnet i en tenkt boks rundt objektet. Håndtak Transformasjonspunkt Free Transform Tool Når vi bruker Free Transform Tool, dukker det opp håndtak vi kan bruke for å transformere objektene: Dra på objektet for å flytte det. Dra på håndtakene for å skalere det i ulike retninger. Holder du Shifttasten nede samtidig som drar på et hjørnehåntak, skalerer du likt slik at objektet beholder formen. Dra litt utenfor hjørnehåndtakene for å rotere objektet. Musmarkøren vil forandre seg til en sirkelpil. Du kan bestemme hvilket punkt objektet roterer, eller skalerer om, ved å flytte transformasjonspunktet. Dra på kantene mellom håndtakene for å parallellforskyve objektet. Hvis du bruker knappen Distort eller knappen Envelope nederst i verktøyboksen, kan du forandre form ved å dra på håndtakene.

33 3 REDIGERE GRAFIKK 33 Transformasjonspanelet Vi kan skrive inn verdier for transformasjonen ved å bruke transformasjonspanelet (Transform). Her kan du for eksempel speile et objekt ved å angi -100 som skalering i prosent horisontalt eller vertikalt. Ved å bruke knappen Duplicate selection and transform kan du lage kopier med den gjeldende transformasjonen. Align-panelet Vi kan bruke Align-panelet til å flytte og skalere objekter i forhold til hverandre. Slå på Align to stage hvis du ønsker å flytte og skalere objektene i forhold til visningsområdet. Hvis ikke, flyttes og skaleres objektene i forhold til hverandre. Lage en blomst 1 Start Flash og lag et nytt dokument 2 Velg Window > Transform i menyen 3 Klikk på Oval Tool og lag en ellipse 4 Klikk på Free Transform Tool og velg ellipsen. Dra transformasjonspunktet til midten nederst 5 Gå i transformasjonspanelet og skriv 45 som rotasjon. Klikk på knappen Duplicate selection and transform flere ganger til du har kopier hele veien rundt. Tegn til slutt en sirkel i midten Tilpasse en firkant 1 Start Flash og lag et nytt dokument 2 Velg Window > Align i menyen 3 Klikk på Rectangle Tool og lag en firkant. Størrelsen er ikke viktig 4 Gå i Align-panelet og slå på Align To Stage 5 Bruk Selection Tool og velg firkanten. Klikk på knappen Match width and height i Align-panelet 6 Klikk på knappen Align left edge og knappen Align top edge

34 34 Flash CC Professional Forandre form på objekter Grafikken vi lager i Flash, består av kurver og linjer mellom knutepunkter (anchor points). Du kan forandre form ved å flytte på knutpunktene. Subselection Tool Når du velger et objekt med Subselection Tool, vises knutepunktene. Knutepunktene kan enten være hjørnepunkter eller kurvepunkter. Hvis et kurvepunkt er valgt, vises tangenthåndtak som du kan bruke for å forandre retningen på kurven inn og ut av knutepunktet. Dra på knutepunktene og tangenthåndtakene for å forandre form på grafikken. Du kan endre et hjørneknutepunkt til et kurveknutepunkt ved å holde Alt-tasten nede mens du drar på det. Du kan endre et kurvepunkt til et hjørnepunkt ved å bruke Convert Anchor Point Tool som ligger i samme Fly-out som Pen Tool. Hvis du holder Alt-tasten nede mens du drar på et tangenthåndtak, kan du forandre retningen inn og ut av knutepunktet separat. Slett et knutepunkt ved å først velge det og så trykke på Delete på tastaturet. Hvis du holder Ctrl-tasten nede skifter du midlertidig til Free Transform Tool. Ønsker du å vise håndtak og knutepunkter i en annen farge, kan du endre lagfargen. Selection Tool I tillegg til å bruke Subselection Tool kan du bruke Selection Tool for å forandre form på objekter. Du gjør dette ved å dra på kanten til objektet. Pass på at objektet ikke er valgt fra før (i så fall flytter du på det). Hvis du drar på en rett linje mellom to knutepunkter, forandres den til en kurve. Hvis du holder Alt-tasten nede, samtidig som du drar på en kurve eller linje, lages det et nytt knutepunkt. Width Tool Du kan bruke Width Tool for å endre strekbredden på forskjelligs steder langs streken. Dra på streken der du ønsker å endre bredden.

35 3 REDIGERE GRAFIKK 35 Lage en løkkuppel 1 Start Flash og lag et nytt dokument 2 Klikk på Rectangle Tool og lag en firkant (pass på at Object Drawingknappen ikke er trykket ned). Bruk Selection Tool, hold Alttasten nede og dra på midten av den øverste streken for å lage et nytt knutepunkt: 3 Klikk på Subselection Tool og klikk på kanten til objektet. Velg hjørnepunktet på toppen ved å klikke på det. Hold Alt-tasten nede og dra på hjørnepunktet slik at det blir et kurvepunkt 4 Hold Alt-tasten nede og dra på tangenthåndtaket på den ene siden og flytt det nedover. Gjør det samme med det andre tangenthåndtaket slik at du får en spiss: 5 Velg knutepunktet i det øvre venstre hjørnet ved å klikke på det. Hold Alttasten nede og dra på knutepunktet slik at det blir et kurvepunkt. Gjør det samme med knutepunktet på den andre siden: Jevne og rette ut kurver Når du bruker Selection Tool, kan du bruke knappene og nederst i verktøyboksen for å jevne og rette ut linjer og kurver på objektene du har valgt. Hvis du har kurver som består av veldig mange knutepunkter, kan du redusere antallet ved å gå i menyen Modify > Shape > Optimize. Du får opp en dialogboks hvor du kan velge styrken på reduksjonen. Pass på at når du reduserer antallet knutepunkter på et objekt, vil formen alltid forandre seg litt.

36 36 Flash CC Professional Redigere og bruke farger Til nå har vi brukt enkle farger som vi har valgt i verktøyboksen eller Properties-panelet. Vi kan også lage gradientfarger og gjennomsiktige farger og bruke bilder som farge. Color-panelet Vi jobber med farger i Color-panelet: Strekfarge 2 Fyllfarge 3 Fargetype 4 Fargevalgfelt 5 HSB-verdier 6 RGB-verdier 7 Gjennomsiktighet (Alpha) 8 Fargekode (heksadesimal) 9 Forhåndsvisning av farge Velg først om du vil jobbe med strek- eller fyllfarge. I fargetypelista kan du velge vanlige enkle farger (Solid), gradientfarger (Linear eller Radial) eller farge fra bilder (Bitmap). Du kan også velge None. Det vil si at det ikke blir noe strek eller fyll. Velg en farge ved å flytte på krysset i det store fargevalgfeltet og dra på spaken ved det lille fargevalgfeltet. Innen datagrafikk er det vanlig å blande farger ved fargeblandingsmetoder som kalles RGB (Red, Green, Blue) eller HSB (Hue, Saturation, Brightness). I fargevalgfeltet blander du egentlig også RGB- eller HSB-verdier. For eksempel hvis du har merket av for R (Red), kan du bestemme rødverdien med spaken i det vertikale fargefeltet. Du kan deretter bestemme verdiene for B (Blue) og G (Green) i det store fargefeltet ved å dra krysset henholdsvis horisontalt og vertikalt. Ved å merke av for H (Hue) kan du velge fargetone i det vertikale feltet og fargemetning (Saturation) og lysstyrke (Brightness) i det store feltet. Mange synes dette er den enkleste måten å velge farge på. Den heksadesimale fargekoden brukes vanligvis for å angi fargen i Actionscript, eller kopiere koden til/fra andre programmer - for eks. Photoshop.

37 3 REDIGERE GRAFIKK 37 Gjennomsiktighet Alpha bestemmer gjennomsiktigheten. 100 % er helt ugjennomsiktig, mens 0 % er helt gjennomsiktig. Vi får en følelse av gjennomsiktigheten når objektene overlapper hverandre. Vær klar over at Shape-objekter som ligger på samme lag, ikke kan overlappe hverandre (de kombineres). De kan derfor ikke vise gjennomsiktighet i forhold til hverandre. Hvis du legger dem på forskjellige lag, går det greit. Gradientfarger Når vi lar en farge gradvis gå over i en annen farge, kaller vi den en gradient. Vi kan lage gradienter i Color-panelet. Du kan velge om du vil ha en lineær (Linear) eller sirkulær (Radial) form på gradienten. Når du har valgt gradienttypen, kommer det fram en gradientlinje med fargenoder: 3 Lineær gradient Gradientlinje 2 Fargenoder 3 Flow Sirkulær gradient Klikk på fargenodene for å velge dem og angi farge i fargefeltet. Du kan også dobbeltklikke på dem for å velge farge fra en palett. Fargene på nodene kan ha ulik gjennomsiktighet (Alpha) slik at gradienten gradvis går fra ugjennomsiktig til gjennomsiktig. Du kan flytte nodene ved å dra på dem. Lag nye fargenoder ved å klikke på gradientlinja. Du kan ha opptil 15 fargenoder. Hvis du vil slette fargenoder, drar du dem nedover og vekk fra gradientlinja. Vær oppmerksom på at du ikke kan slette slik at det blir mindre enn to fargenoder på gradientlinja. Hvis størrelsen på gradienten er mindre enn objektet, kan du bestemme hvordan gradientfargen blir i området utenfor under Flow.

38 38 Flash CC Professional Transformere gradienter Du kan flytte, rotere og skalere gradienter ved å bruke Gradient Transform Tool. Du finner dette verktøyet under samme knapp som Free Transform Tool. Bruk håndtakene som dukker opp når du klikker på objekter med gradientfarge. Senterpunkt Fokuspunkt Rotasjon Senterpunkt Bredde Størrelse Størrelse Vær klar over at noen ganger blir skaleringen på gradienten svært stor slik at du må zoome deg langt ut for å se håndtakene når du jobber med Gradient Transform Tool. Rotasjon Sirkulær gradient Lineær gradient Hvis du bruker Paint Bucket Tool og fyller gradientfarge i flere objekter, kan du bruke Lock Fill-knappen nederst i verktøyboksen for å låse fyllet slik at gradienten får den samme transformasjonen i alle objektene. Bruke bilder som farge Du kan bruke bilder (punktgrafikk) som farge ved å velge Bitmap fill under Type i Color-panelet. Du kan da velge blant bilder du har hentet inn tidligere. Hvis du ikke har hentet inn noen bilder fra før, får du opp en dialogboks hvor du kan åpne en bildefil. Du bruker Gradient Transform Tool vises og repeteres i objektet. Color Swatches-panelet for å bestemme hvordan bildet skal Swatches-panelet brukes for å ordne og ha oversikt over fargene i Flash. Hvis du har lagd en farge du er fornøyd med i Colorpanelet, kan du legge den til fargepaletten ved å klikke på Create a new swatch... Fargen blir da tilgjengelig overalt hvor du velger farger i Flash. 1 Panelmeny 2 Fargefelt (swatches) Nederst i paletten har du knapper for å organisere paletter i mapper. Du kan også slette en farge ved å klikke på Delete. I panelmenyen kan du organisere fargepaletten på flere måter. Du kan for eksempel lagre en fargepalett ved å bruke Save Colors Hvis du vil åpne en fargepalett, kan du bruke enten Replace Colors for å erstatte alle fargene i paletten, eller Add Colors for å legge til fargene i paletten. 2 1

39 3 REDIGERE GRAFIKK 39 Lage en fisk 1 Start Flash og lag et nytt dokument 2 Tegn fisken slik det er vist nedenfor: Tegn ellipse Tegn finner Slett streker inne i ellipsen Fyll farge i de tomme områdene 3 Ta fram Color-panelet og velg Linear gradient under Type. Dobbeltklikk på fargenoden til venstre og velg en brun farge i paletten. Dobbeltklikk på fargenoden til høyre og velg en lys oransje farge 4Klikk på Paint Bucket Tool og klikk inne i fisken for å male den med den nye gradientfargen 5Klikk på Gradient Transform Tool og klikk inne i fisken. Dra på det runde håndtaket øverst til høyre slik at du roterer gradienten ca. 90. Dra på det firkantede håndtaket for å redusere størrelsen på gradienten: 6 Lag et øye på fisken med en sirkulær gradient: Tegn sirkel Fyll gradienten i øyet Lag en refleks i øyet 7 Lagre fila som Fisk.fla

40 40 Flash CC Professional Andre redigeringsverktøy Det finnes noen andre redigeringsverktøy det kan være lurt å kjenne til. Kombinere tegningsobjekter Du kan velge tegningsobjekter og kombinere dem på forskjellige måter ved å gå i Modify-menyen og bruke Combine Objects: Orginal Union Intersect Punch Crop Redigere fyll-grafikk Du kan utvide eller skrumpe inn fyll ved å gå i menyen Modify > Shape > Expand Fill Du vil da få opp en dialogboks hvor du kan angi hvor mye du vil gå ut (Expand) eller inn (Inset). Du kan gjøre kanten på fyll myk ved å gå i menyen Modify > Shape > Soften Fill Edges... I dialogboksen som dukker opp, kan du angi hvor mye du vil gå ut (Distance), og hvor mange fargeoppdelinger (Number of steps) du vil ha. Mange oppdelinger gir et finere resultat, men gjør swf-fila større ettersom det lages flere objekter. Konvertere strek til fyll Du kan konvertere strek til fyll ved å gå i menyen Modify > Shape > Convert Lines to Fills. Redigere bilder Du kan velge deler av et bilde ved å konvertere det til et Shape-objekt med Break Apart. Hvis du vil velge områder i bildet ut fra en farge, kan du bruke Magic Wand (Ligger under samme knapp som Lasso Tool). Klikk i bildet. Områder med lik farge som der du klikket blir valgt. I Properties-panelet kan du kan stille inn hvor mye som blir valgt i bildet. Threshold angir hvor like fargene på pikslene i nærheten må være for at de skal bli valgt. Jo større tall, desto mindre like trenger fargene å være, og du velger et større område. Smoothing bestemmer hvor mye kantene på utvalget blir jevnet ut.

41 3 REDIGERE GRAFIKK 41 Hvis du ønsker å konvertere et bilde til vektorgrafikk, kan du velge bildet (her må du ikke bruke Break Apart på forhånd), gå i menyen Modify > Bitmap > Trace Bitmap. Du får da fram en dialogboks hvor du bestemmer hvor grov oppdelingen blir: Color Threshold angir hvor like fargene må være for at de skal smeltes sammen til én farge (ett Shape-objekt). Jo høyere tall, desto grovere oppdeling. Minimum Area angir hvor mange nærliggende piksler som blir tatt med i beregningen for å bestemme fargen på én piksel. Jo høyere tall, desto grovere oppdeling. De andre parametrene i dialogboksen bestemmer hvordan kantene på Shape-objektene skal jevnes ut. Symboler Symboler er ulike typer ressurser som vi kan bruke om igjen i animasjonen vår. Vanligvis består symbolene av grafikk, men de kan også være lyder og bilder (punktgrafikk). Egentlig ser vi aldri symbolene. I stedet ser vi kopier som er blitt lagd ut fra symbolene. Slike kopier blir kalt instanser (instances) eller forekomster. Instansene lagrer ikke grafikkdata, men refererer i stedet til grafikken i symbolet. Grafikkdataene blir dermed bare lagret ett sted, nemlig i symbolet. Instansene lagrer bare noen få data, som for eksempel hvilket symbol det refereres til, posisjon og gjennomsiktighet. Dette gjør det mulig å ha mange instanser i animasjonen uten at swf-fila blir stor. Symboler er spesielt viktig når vi animerer, fordi vi vanligvis viser den samme grafikken flere ganger i løpet av animasjonen. Vi kan derfor redusere størrelsen på swf-fila svært mye ved å bruke symboler. Dessuten har symbolene egne tidslinjer. Dette gjør det mulig å lage animasjon som ligger «inne i» annen animasjon. Vær oppmerksom på at selv om symboler og instanser er to forskjellige ting, vil vi ofte i dagligtale si «symboler» selv om vi mener «instanser».

42 42 Flash CC Professional Lage et symbol 1 Start Flash og lag et nytt dokument 2 Tegn en figur 3 Velg alle objektene i figuren og høyreklikk på dem. Velg Convert to Symbol i menyen som dukker opp. Det dukker opp en dialogboks hvor vi kan angi navn og symboltype. Skriv Ball som navn og velg Movie Clip som symboltype. Klikk på OK 4 Velg i menyen Window > Library. Library-panelet gir en oversikt over symbolene du har lagd 5 Lag en ny instans ved å dra symbolet fra Library-panelet og ut i visningsområdet. Gjør det tre ganger slik at du totalt får fire instanser 6 Dobbeltklikk på en av instansene. Du havner nå inne i symbolet slik at du kan redigere det. Legg merke til at toppen av visningsområdet viser at du er inne i Ball-symbolet 7 Forandre form på figuren. Ettersom vi forandrer på grafikken i symbolet, vil også alle instansene som er lagd ut fra symbolet, forandre form: 8 Gå ut av symbolet ved å klikke på (knappen) Scene 1 på toppen av visningsområdet eller pila mot venstre. Symboltyper Vi kan lage symboler av forskjellige typer i Flash. Vanligvis velger vi MovieClip som har sin egen selvstendige tidslinje. Graphic-symboler har også tidslinjer, men er synkron (følger) med hovedtidslinja. Buttonsymboler brukes for å lage trykknapper i interaktive animasjoner. Bilder og lyd regnes også som symboler og vises i Library-panelet. Library-panelet Vi ordner symbolene i symbolbiblioteket. Her får vi en oversikt over alle symbolene, og vi kan blant annet kopiere, slette og forandre dem på ulike måter. Library-panelet ligger vanligvis i fanen ved siden av Propertiespanelet, men du kan også ta fram panelet ved å gå i Window-menyen og krysse av for Library.

43 3 REDIGERE GRAFIKK Dokumentnavn 2 Lås (pin) biblioteket 3 Panelmeny 4 Lag nytt bibliotekpanel 5 Forhåndsvisning 6 Symboltype (ikon) 7 Symbolnavn 8 Søkefelt/filter 9 Linking 10 Symbolliste 11 Forandre egenskaper 12 Lage nytt symbol (New Symbol) 13 Slette symbol 14 Lage ny symbolmappe (New Folder) I symbollista får du en oversikt over symbolene i dokumentet. Både symbolnavn og symboltype vises. Du får også en liten forhåndsvisning av symbolet som er valgt. Ønsker du å lage instanser av symbolet, drar du symbolet over i visningsområdet. I knappene nede i panelet kan du lage, slette og forandre egenskapene til symbolet. Du kan også forandre navn på symbolet ved å dobbeltklikke på det i lista. Hvis du har mange symboler, kan det være lurt å organisere dem i mapper. Du lager en symbolmappe med New Folder-knappen og drar symboler inn i mappa. I søkefeltet kan du filtrere ut symboler og mapper som begynner med de bokstavene du skriver inn. Har du flere dokumenter oppe samtidig, kan du velge hvilket bibliotek du ønsker å bruke i lista med dokumentnavn. Det gjør det enkelt å hente symboler fra andre dokumenter. Hvis du veksler mellom ulike dokumenter, men ønsker å vise det samme biblioteket hele tiden, kan du klikke på Pin-knappen. Du kan også lage flere paneler slik at du viser bibliotekene fra flere dokumenter samtidig. Symboler kan linkes til ActionScript-kode som ligger i egne filer (klasser). I Linkage-kolonnen ser du hvilke klasser symbolet er linket til. Registerpunkt Når du er inne i et symbol, vises det et kryss (+) i midten av skjermen. Dette er registerpunktet til symbolet. Hvert symbol har sitt eget koordinatsystem med registerpunktet som origo. X- og Y-koordinatene i Properties- eller Info-panelet refererer til dette koordinatsystemet.

44 44 Flash CC Professional Hvis du er inne i et symbol og bruker Align-panelet og To Stage, er det registerpunktet du flytter i forhold til. Når du lager et symbol ut fra eksistrende grafikk, kan du justere registerpunktet i dialogboksen som dukker opp. Klikk på en av de små firkantene for å bestemme posisjonen: Redigeringsvisning Vi kan redigere et symbol ved å dobbeltklikke på en instans av symbolet i visningsområdet. Du vil da fortsatt se visningsområdet og eventuell annen grafikk som ligger der. Du kan også dobbeltklikke på symbolet i symbolbiblioteket eller bruke knappen Edit Symbols over visningsområdet. Da vil du kun se grafikken i symbolet og ikke annen grafikk i visningsområdet. Når du redigerer et symbol, er du inne i symbolet. Ettersom symbolene har egne tidslinjer, sier vi også at du er på tidslinja til symbolet. Symbolhierarkier Et symbol kan inneholde andre symboler, som igjen kan inneholde andre symboler osv. Vi får dermed et hierarki med symboler. Det øverste nivået kalles ofte hovedtidslinja. Vi kan flytte oss i hierarkiet ved å bruke toppen av visningsområdet. I eksemplet nedenfor er vi inne i Hjul-symbolet og jobber dermed også på tidslinja til dette symbolet: Vi er på tidslinja til Hjul-symbolet Øverste nivå (hovedtidslinja) Gå ett nivå opp Vær oppmerksom på at grupper også danner hierarkier, men dette er ikke symboler, og de har heller ikke egne tidslinjer. Lage et nytt tomt symbol Du lager et nytt tomt symbol ved å gå i menyen Insert > New Symbol... Angi navn og symboltype. Du havner nå inne i symbolet slik at du kan tegne grafikken. Husk på at det ikke automatisk blir lagd en instans av symbolet. Du må gjøre dette ved å dra ut en instans fra Library-panelet.

45 3 REDIGERE GRAFIKK 45 Instanser Vi har sett at instansene viser grafikken til symbolet, men det er enkelte ting vi kan forandre individuelt på hver instans. For eksempel er alle transformasjoner, det vil si posisjon, rotasjon og skalering, individuelle for hver instans. Du kan også forandre andre egenskaper i Properties-panelet. Farge og gjennomsiktighet endrer du i lista under Color Effect. Ønsker du å forandre farge, kan du velge Tint i lista og angi hvor mye du vil påvirke instansen under Tint Amount. Ønsker du å forandre gjennomsiktighet, kan du velge Alpha i lista. Vær oppmerksom på at forandringen virker på instansen i sin helhet. Du kan altså ikke forandre på for eksempel strek- og fyllfarge separat. Blending bestemmer hvordan symbolene vises i forhold til grafikk som ligger under. Velg typen du ønsker i lista under Display: Normal og Overlay blend Du kan også legge på filtre på instanser på samme måte som på tekst. 3D-transformasjoner Movie Clip-instanser har noen spesielle egenskaper. Vi kan for eksempel rotere og flytte dem i tre dimensjoner (3D). Det vil si at instansene retter seg etter en z-akse, i tillegg til x- og y-aksen. I visningsområdet (stage) vil z-aksen peke rett inn i skjermen. Bruk 3D Rotation Tool Bruk 3D Translation Tool og dra på sirklene for å rotere instansen. og dra på pilene for å flytte instansen. Vær oppmerksom på at 3D-transformasjoner ikke bestemmer rekkefølgen på objektene. Et objekt som ligger ovenfor et annet for eksempel på laget over vil uansett bli vist øverst, selv om det flyttes bakover i z-retningen. Vær også oppmerksom på at du må jobbe i et ActionScript 3.0-dokument for å bruke 3D-transformasjoner.

46 46 Flash CC Professional I dette kapitlet ser vi på det som gjør Flash til noe mer enn et tegneprogram, nemlig at vi kan lage animasjon.

47 4 ANIMASJON 47 >>4 Animasjon I dette kapitlet skal vi lære > hva animasjon er > hvordan tidslinja fungerer > å lage ulike typer animasjon > å publisere animasjonen Hva er animasjon? Bilde nr. 1 Bilde nr. 2 Bilde nr. 3 En animasjon er en serie med stillbilder hvor det neste bildet er litt forskjellig fra det forrige. Hvis vi viser bildene raskt etter hverandre, vil det se ut som vi får en jevn bevegelse. Dette skjer fordi hjernen vår ikke er rask nok til å behandle all informasjonen i hvert stillbilde. Denne teknikken ligger bak alle typer levende bilder, for eksempel film, tv, dataspill og Flash-animasjoner. Bildehastighet (Frame rate) Bildehastigheten angir hvor mange bilder som vises per sekund. Jo flere bilder som vises per sekund, desto jevnere blir bevegelsene. Ulempen er at swf-fila kan bli større, og det kreves mer av datamaskinen for å spille av animasjonen. I boka bruker vi 24 bilder per sekund som er det samme som kinofilm. TV har en bildehastighet på 25 bilder per sekund. Du kan sette bildehastigheten under FPS (Frames Per Second) i Propertiespanelet når du ikke har valgt noen objekter. Bilde nr. 4 Bilde nr. 5 Tweening I tegnefilmens barndom ble det utviklet en arbeidsmetode som besto i at de viktigste bildene ble tegnet av noen få animatører, mens bildene imellom ble tegnet av mange assistenttegnere. Slik kunne animasjonsarbeidet fordeles effektivt, og det gikk raskere å lage animasjonen.

48 48 Flash CC Professional Nøkkelbilde Nøkkelbilde De viktige bildene ble kalt nøkkelbilder (keyframes), mens det å tegne bildene imellom ble kalt inbetweening eller bare tweening. I Flash er det du som er animatør og lager nøkkelbilder, mens datamaskinen er assistenttegner og tar seg av tweeningjobben. Nøkkelbilde Direkte oversatt fra engelsk blir frames, keyframes og framerate til rammer, nøkkelrammer og rammehastighet. I noen norske bøker om animasjon brukes disse uttrykkene. I denne boka har vi valgt å oversette til bilder, nøkkelbilder og bildehastighet. Tweening Animasjon og lag I en tradisjonell tegnefilm blir ulike deler av bildet tegnet på gjennomsiktige ark, for eksempel et landskap på et ark, en ball på et annet ark og ei jente på et tredje ark. Hvert bilde i animasjonen blir fotografert med arkene lagt oppå hverandre. Ved å dele opp på denne måten trenger man bare å tegne nye tegninger på de arkene som skal animeres. Kanskje skal ikke landskapet forandre seg i løpet av animasjonen. Det hadde blitt mye ekstraarbeid å måtte tegne det samme landskapet på nytt for hvert eneste bilde i animasjonen. En annen fordel er at man kan animere selve arkene. For eksempel kan arket med bakgrunnen flyttes litt for hvert bilde slik at det virker som bakgrunnen glir forbi. I Flash er det lagene som er våre gjennomsiktige ark. Hvert lag kan animeres hver for seg akkurat som i en tradisjonell tegnefilm. Animasjonstyper i Flash Vi kan lage animasjon med og uten tweening i Flash. Når vi bruker tweening, lager du nøkkelbilder, og Flash lager bildene imellom. Vi har to typer tweening: Motion tween animasjon av flytting, rotasjon og skalering i tillegg til andre egenskaper til symbolinstanser, for eksempel forandring av gjennomsiktighet. Shape tween animasjon av shape- eller tegningsobjekter som forandrer form eller farge. I tillegg kan vi lage animasjon uten tweening ved å lage alle bildene selv. Dette blir kalt en bilde-for-bilde-animasjon. Ofte vil en ferdig animasjon i Flash inneholde en kombinasjon av flere animasjonstyper.

49 4 ANIMASJON 49 Tidslinja i Flash 1 Tidslinjal 2 Spillehode 3 Lag 4 Animasjonsspor 5 Tilgjengelige bilder (ubrukt animasjon) 6 Avspillingsknapper 7 Center frame 8 Loop 9 Onion skin 10 Gjeldende bildenummer 11 Bildehastighet 12 Gjeldende tid (i sekunder) 13 Zoom inn/ut Tidslinja viser hvordan animasjonen foregår over tid, og kan inneholde mye informasjon: På tidslinjalen ser vi tiden fra bilde nr. 1 og utover i animasjonen. Spillehodet markerer hvilket bilde i animasjonen som vises (gjeldende bilde). For å flytte deg i animasjonen kan du dra på spillehodet eller klikke på et bilde på tidslinjalen. Du kan også bruke avspillingsknappene. Center frame brukes til å sentrere tidslinja om det gjeldende bildet. Hvert lag har sitt eget animasjonsspor med nøkkelbilder og bilder. Nøkkelbilder og bilder Vi bruker ofte uttrykkene nøkkelbilder og bilder. Det er lurt å vite hvordan vi definerer forskjellen i Flash: Nøkkelbilder (keyframes) kan lagre grafikk eller verdier på ulike egenskaper. Hvert nøkkelbilde kan derfor vise forskjellig innhold, som igjen gir mulighet til å lage bevegelse eller annen type forandring i animasjonen. Nøkkelbilder markeres som små, svarte sirkler eller diamanter på tidslinja. Et nøkkelbilde uten grafikk markeres med en hvit sirkel. Bilder (frames) lagrer ikke grafikk eller verdier. I stedet viser de innhold beregnet ut fra nøkkelbilder enten i en tweening eller uforandret innhold fra forrige nøkkelbilde. Tweening vises som fargede felt på tidslinja, mens uforandret innhold vises i grått. En hvit firkant markerer slutten på uforandret innhold. Ettersom nøkkelbilder lagrer grafikk og verdier, er det lurt å ha så få nøkkelbilder som mulig i en animasjon slik at swf-fila blir mindre. 4 Nøkkelbildene har ulike egenskaper på samme måte som andre objekter i Flash. Du kan forandre på egenskapene ved å velge et nøkkelbilde på tidslinja og gå i Properties-panelet. Egenskapene for et nøkkelbilde gjelder fram til neste nøkkelbilde

50 50 Flash CC Professional Animasjon uten tweening Vi kan lage animasjon uten tweening ved å forandre grafikken bilde for bilde. På denne måten kan vi lage animasjoner svært fritt uten å tenke på hvordan datamaskinen lager bilder imellom. Ulempen er at det vanligvis tar lang tid å lage alle bildene. Swf-fila kan også bli stor ettersom det må lages mange nøkkelbilder. Lage animasjon uten tweening 1 Start Flash og lag et nytt dokument 2 Forandre navnet på Layer 1 til Potte. Bruk tegneverktøyene og lag en blomsterpotte 3 Lag et nytt lag som du kaller Blomst. Tegn en liten spire 4 Høyreklikk på bilde nr. 2 på Blomst-laget. Velg Insert Keyframe i menyen som dukker opp Høyreklikk og velg Insert Keyframe 5 Vi har nå lagd et nytt nøkkelbilde i bilde nr. 2 på Blomst-laget. Legg merke til at potta forsvinner. Grunnen til dette er at Potte-laget bare har grafikk i bilde nr. 1. Vi ønsker å se potta gjennom hele animasjonen. Høyreklikk på bilde nr. 5 på Potte-laget og velg Insert Frame i menyen som dukker opp. Potta vises nå uforandret til og med bilde nr. 5: Høyreklikk og velg Insert Frame 6 Klikk på bilde nr. 2 på Blomst-laget. Legg merke til at den lille spiren vi tegnet i bilde nr. 1, ligger i nøkkelbildet. Grunnen til dette er at grafikken i forrige nøkkelbilde automatisk blir kopiert når vi lager et nytt nøkkelbilde. Forandre på spiren slik at den blir litt større: 7 Høyreklikk på bilde nr. 3 på Blomst-laget og velg Insert Keyframe i menyen som dukker opp. Forandre spiren slik at den blir enda større. Gjør det samme i bilde nr. 4 og 5 slik at vi gradvis får en blomst:

51 4 ANIMASJON 51 8 Dra Blomst-laget under Potte-laget i laglista. Test animasjonen på tidslinja ved å trykke på Enter på tastaturet. Hvis du ønsker å vise animasjonen i FlashPlayer, kan du trykke på Ctrl + Enter eller gå i Control-menyen og velge Test Movie > Test. 9 Animasjonen begynner med en liten spire. Vi ønsker i stedet at blomsterpotta skal være tom til å begynne med. Velg alle bildene på Blomst-laget ved å klikke på laget i laglista. Dra på bildene på tidslinja slik at de havner ett bilde mot høyre. Det blir automatisk lagd et tomt nøkkelbilde i bilde nr. 1: 10 Nå mangler vi et bilde av potta i bilde nr 6. Høyreklikk på bilde nr 6 i Pottelaget og velg Insert Frame i menyen som dukker opp. Test animasjonen. Lagre dokumentet som Blomst.fla Fordele grafikk over flere nøkkelbilder Du kan velge flere objekter i visningsområdet og automatisk fordele de i nøkkelbilder ved å høyreklikke på dem og velge Distribute to Keyframes. Motion Tween Med Motion tween kan vi animere symbolinstanser og tekst på forskjellige måter. I en motion tween er det bare det første nøkkelbildet i tweeningen som inneholder grafikken. De etterfølgende nøkkelbildene inneholder verdier på egenskaper til instansen eller teksten som er animert. Slike nøkkelbilder blir vist som svarte diamanter på tidslinja. Egenskapene vi kan animere, er: Transformasjoner (flytting, rotasjon og skalering også i 3D) Fargeforandringer og gjennomsiktighet (kun Movie clip-instanser) Filterparametre

52 52 Flash CC Professional Lage en motion tween-animasjon 1 Start Flash og lag et nytt dokument 2 Tegn en «orm» med tegneverktøyene. Velg hele ormen og høyreklikk på den. Velg Convert to Symbol i menyen som dukker opp, og lag et symbol ut av ormen. Flytt ormen slik at den ligger til venstre i visningsområdet 3 Høyreklikk på nøkkelbildet på tidslinja. Velg Create Motion Tween i menyen som dukker opp. Det blir lagd Motion Tweening i ett sekund: 4 Vi ønsker å lage animasjonen noe lengre. Høyreklikk på bilde nr. 50 og velg Insert Frame i menyen som dukker opp. Tweeningen er nå 50 bilder lang: Ønsker du å endre fargen på animasjonskurven, kan du endre lagfargen 5 Vi skal nå forandre på posisjonen til ormen i løpet av tweeningen slik at ormen beveger seg. Flytt spillehodet til bilde nr 25. og flytt ormen oppover og mot høyre. Det lages nå et nytt nøkkelbilde i bilde nr Flytt spillehodet til bilde nr. 50 og flytt ormen enda mer mot høyre og nedover. Det lages nå et nytt nøkkelbilde i bilde nr. 50. Legg merke til at banen til ormen blir markert med en kurve (i samme farge som lagfargen) 7 Test animasjonen ved å trykke på Ctrl+Enter på tastaturet. Sjekk at ormen flytter seg i løpet av animasjonen. 8 Vi skal nå prøve å animere andre egenskaper til ormen. Vi kan for eksempel skalere den slik at det virker som den kommer nærmere. Flytt spillehodet til bilde nr. 50 og bruk Free Transform Tool for å skalere ormen slik at den blir større. 9 Vi skal nå prøve å få ormen til å ta en salto fra og med bilde nr. 25 til og med bilde nr. 45. Flytt spillehodet til bilde nr. 45 og ta fram Transformpanelet. Velg ormen og skriv inn 360 ved Rotate. Vær oppmerksom på at vi kunne ha brukt Free Transform Tool for å rotere ormen, men da kan vi ikke være helt sikre på om rotasjonen går den ene eller den andre veien. 10 Test animasjonen. Legg merke til at rotasjonen begynner i bilde nr. 1. For å rette opp dette kan du flytte spillehodet til bilde nr. 25 og skrive inn 0 ved Rotate i transform-panelet.

53 4 ANIMASJON Vi vil la ormen være nærmest usynlig i starten, for deretter å bli mer og mer synlig. Gå til bilde nr. 0 (flytt spillehodet) og velg ormen. Velg Alpha under Color Effect i Properties-panelet og sett verdien til 10 %: Gå til bilde nr. 45 og sett Alpha til 100 %. Test animasjonen. 12 Nå ønsker vi å la saltoen gå litt raskere. Vi kan gjøre dette ved å flytte rotasjonsnøkkelbildet i bilde nr. 45 litt mot venstre på tidslinja, slik at rotasjonen foregår over et kortere tidsrom. Høyreklikk på tidslinja og velg View Keyframes > None i menyen som dukker opp. Høyreklikk en gang til og velg View Keyframes > Rotation. 13 Velg nøkkelbildet i bilde nr. 45. og dra det til bilde nr. 30. Test animasjonen. Vis alle nøkkelbildene igjen ved å høyreklikke på tidslinja og velge View Keyframes > All i menyen som dukker opp 14 Ettersom ormen er en symbolinstans, kan vi lage en liten animasjon inne i ormsymbolet. Denne animasjonen vil spilles av samtidig med animasjonen vi allerede har lagd. Vi kan tenke på dette som en animasjon «inne i» en annen animasjon. Gå til bilde nr. 1 og dobbeltklikk på ormen. Du havner nå på tidslinja til symbolet. Lag en bilde-for-bilde-animasjon hvor ormen bøyer seg fram og tilbake: Bilde nr. 1 Bilde nr. 2 Bilde nr. 3 Bilde nr Test animasjonen og lagre den Vær oppmerksom på at du ikke kan ha flere instanser som er animert samtidig på ett lag. Hvis vi for eksempel skal lage en animasjon hvor en orm flytter seg i én retning, og en annen orm samtidig flytter seg i en annen retning, må de to ormene ligge på hvert sitt lag. Av den grunn får du ikke lov til å tegne nye objekter i en motion tween. Hvis vi har mange instanser vi skal animere med motion tweening, kan vi raskt legge dem på ulike lag ved å velge instansene, høyreklikke på dem og velge Distribute to Layers i menyen som dukker opp.

54 54 Flash CC Professional Legg merke til at instansen ligger bare i det første nøkkelbildet i tweeningen. Hvis du ønsker, kan du slette instansen for så å legge inn en Nøkkelbilde med grafikk (symbolinstans eller tekst) annen instans. Denne vil da få den samme tweeningen. Forandre bane (Path) Animasjon av forflytning (posisjon), blir markert med en kurve: De små prikkene representerer bildene i animasjonen, mens de store representere nøkkelbilder. Kurven kan redigeres på samme måte som en vanlig grafikkkurve der nøkkelbildene tilsvarer knutepunkter. På denne måten kan du «tegne» banen til objektet: Det er også mulig å erstatte banen med en annen kurve. For å gjøre dette kopierer du en kurve med Copy. Vær oppmerksom på at kurven ikke kan være lukket (den må ha to endepunkter). Deretter høyreklikker du på banen og velger Paste i menyen som dukker opp. Det er transformasjonspunktet som bestemmer posisjonen til banen i forhold til objektet. Vanligvis ligger det i midten. Flytter du dette punktet (med Free Transform Tool ), vil banen flytte seg etter: Forskjellig Ease-verdi på en ball som beveger seg fra venstre mot høyre Ease = 0 Ease = 50 Myke bevegelser (Easing) Du kan regulere hvordan objektet forandrer hastighet, ved hjelp av en parameter som heter easing. Klikk på tweeningen på tidslinja og gå i Properties-panelet: Ease = -50 Hvis du har en positiv ease-verdi, vil bevegelsen starte fort og så saktne

55 4 ANIMASJON 55 farten. En negativ verdi fører til at bevegelsen starter sakte og går fortere og fortere. Vær oppmerksom på at verdien gjelder for hele tweeningen. For å angi forskjellige easing-verdier i løpet av animasjonen kan du splitte opp tweeningen i flere deler. Velg et bilde i tweeningen ved å Ctrl-klikke. Høyreklikk på det valgte bildet og velg Split Motion i menyen som dukker opp. Automatisk rotasjon Du kan angi rotasjon i Properties-panelet: Ved å velge Orient to Path vil objektet rotere slik at det hele tiden har samme vinkel mot banen. Det vil da bli lagd nøkkelbilder for rotasjon for hvert eneste bilde i tweeningen: Du kan også rotere et visst antall ganger. Du angir retningen under Direction. Du kan velge mellom med og mot klokka (CW og CCW). Du angir hvor mange ganger objektet skal rotere under Rotate. Du kan også angi en nøyaktig tilleggsverdi i grader. 3D Tweening Animerer du transformasjoner i 3D, vil tweeningen defineres som en 3D Tween. Da kan du ikke lenger foreta vanlige 2D-transformasjoner. Vil du gå tilbake til 2D, kan du høyreklikke et sted på tweeningen på tidslinja og krysse bort 3D Tween i menyen som dukker opp. Motion presets Vi kan lagre og hente fram motion tweening ved å bruke Motion Presets-panelet. Her finner du også mange ferdiglagde tweeninger under Default Presets. For å legge en tweening på en instans kan du velge instansen og så klikke på Apply-knappen.

56 56 Flash CC Professional Classic tween Classic tween ble brukt i eldre versjoner av Flash og er nå delvis erstattet med motion tween, men classic tween kan fortsatt være nyttig i noen sammenhenger. Fordelen med classic tween er at du kan animere en symbol-instans langs en kurve på et guide-lag. Du kan også la instansen «hoppe vekk» fra kurven i løpet av animasjonen. Lage en classic tween-animasjon 1 Start Flash og lag et nytt dokument. Endre navn på Layer 1 til Hoppbakke 2 Tegn en «hoppbakke» slik som vist nedenfor. Pass på at ovarennet og unnarennet er separate kurver som for eks. er tegnet med med Pen Tool 3 Lag et nytt lag du kaller Stikurver, og kopier kurvene for ovarennet og unnarennet til dette laget slik at de ligger på samme sted (Paste in Place) 4 Lag et nytt lag du kaller Skiløper. Tegn en skiløper på dette laget som du deretter konverterer til et symbol. Bruk Free Transform Tool og flytt transformasjonspunktet ned til foten på skiløperen 5 Høyreklikk på nøkkelbildet på Skiløper-laget og velg Create Classic Tween. Sett inn et nøkkelbilde (Insert Keyframe) i bilde nr 40 6 Velg det første nøkkelbildet på Skiløper-laget på tidslinja og slå på Snap og Orient to Path i Properties-panelet. 7 Sett inn et bilde (Insert Frame) i bilde nr. 40 på Stikurver og Hoppbakkelaget 8 Høyreklikk på Stikurver-laget og velg Guide. Dra Skiløperlaget nedenfor og litt til høyre for Stikurver-laget slik at det rykkes inn. Skiløperen har nå mulighet til å følge kurven på guide-laget. 9 Lås både Stikurver- og Hoppbakke-laget

57 4 ANIMASJON Pass på at spillehodet er i bilde nr. 1 på tidslinja. Flytt skiløperen til starten på ovarennkurven. Pass på at løperen snapper seg til kurven 11 Gå til bilde nr. 15 på tidslinja og flytt skiløperen til enden av ovarennkurven. Pass igjen på at løperen snapper seg til kurven. Sjekk at skiløperen følger kurven når du flytter spillehodet Du kan bruke Free Transform Tool for å korrigere rotasjonen til skiløperen i endepunktene på kurven 12 Gå til bilde nr. 25 og sett inn et nytt nøkkelbilde (Insert Keyframe). Velg nøkkelbildet på tidslinja og slå av Snap i Properties-panelet. Flytt skiløperen litt ovenfor unnarennet 13 Gå til bilde nr. 30 og sett inn et nytt nøkkelbilde. Velg nøkkelbildet på tidslinja og slå på Snap i Properties-panelet. Sjekk at skiløperen snapper seg til unnarennkurven 14 Gå til bilde nr. 40 og flytt skiløperen til enden av unnarennkurven. Lagre animasjonen som Skihopp.fla Shape tween Vi kan bruke shape tween når vi vil animere et objekt som forandrer form eller farge. En forutsetning for å lage shape tween er at vi bruker shapeeller tegningsobjekter ikke symbolinstanser slik som ved motion tween. Lage shape tween Vi lager shape tween ved å høyreklikke mellom to nøkkelbilder på tidslinja og velge Create Shape Tween i menyen som dukker opp. Nøkkelbildene må inneholde shape- eller tegningsobjekter. Hvis ikke, vil vi få feil i tweeningen. Shape Hint Hvis forandringen av form ikke foregår slik vi ønsker, kan vi bruke Shape hint. Dette er markører (navngitt a, b, c osv.) som knyttes til grafikken i starten og slutten på en shape tween. Flash vil prøve å styre animasjonen slik at grafikken beveger seg mellom hintene. Du kan vise Shape Hints ved å gå i menyen View og krysse av for Show Shape Hints.

58 58 Flash CC Professional Lage en shape tween-animasjon Bilde nr. 1 Bilde nr Vi skal animere en sirkel som gradvis forandrer form til en firkant. Start Flash og lag et nytt dokument. Tegn en sirkel og bruk Align-panelet for å plassere den i midten av visningsområdet 2 Høyreklikk på bilde nr. 15 og velg Insert Keyframe i menyen 3 Pass på at spillehodet er i bilde nr. 30 og slett sirkelen. Tegn en firkant og bruk Align-panelet for å plassere den i midten av visningsområdet 4 Høyreklikk mellom nøkkelbildene på tidslinja og velg Create Shape Tween i menyen som dukker opp Bilde nr. 1 Bilde nr. 15 Bilde nr. 1 Bilde nr Test animasjonen. Legg merke til hvordan sirkelen roterer mens den forandrer form. Vi ønsker å unngå denne rotasjonen. For å gjøre dette bruker vi shape hint. Flytt spillehodet til bilde nr. 1. Gå i menyen Modify > Shape > Add Shape Hint. En rød a dukker opp. Flytt a-en til «hjørnet av sirkelen» ved å dra på den med musa. Flytt spillehodet til bilde nr. 15 og flytt a-en til det tilsvarende hjørnet av firkanten 6 Fargen på shape-hintene forandrer seg til gult i første nøkkelbilde og grønt i siste for markere at hintene er aktive. I noen tilfeller forblir hintene røde selv om de er aktive. Test animasjonen. Vi har fortsatt ikke et perfekt resultat. Vi prøver å løse dette ved å legge til enda et shape-hint. Flytt spillehodet til bilde nr. 1 og høyreklikk på hintet som er der fra før. Velg Add Hint i menyen. Flytt det nye hintet (b) til et annet hjørne 7 Test animasjonen. Av og til kan resultatet bli dårlig. I så fall kan du prøve å plassere et shape-hint på et annet sted (i et annet hjørne). I så fall må du passe på å flytte hintet i begge nøkkelbildene. Lagre animasjonen som SirkelTilFirkant.fla Justere easing Du kan justere hvordan shape tweeningen forandrer hastighet med easing. Gjør dette ved å velge et nøkkelbilde med shape tween på tidslinja og gå i Properties-panelet: En negativ verdi gjør at bevegelsen starter sakte og så øker farten. En positiv verdi gjør at bevegelsen starter fort og så reduserer farten. Verdien du setter, gjelder fram til neste nøkkelbilde.

59 4 ANIMASJON 59 Scener Når animasjonen begynner å bli lang, er det lett å miste oversikten på tidslinja. Vi kan da dele opp animasjonen i scener, for eksempel en innledning, hovedhandling og avslutning. På denne måten jobber vi med en mindre del av animasjonen av gangen, og vi får større kontroll. Vær oppmerksom på at det bare er hovedtidslinja som kan deles opp i scener og ikke tidslinjer inne i symboler. For å jobbe med ulike scener bruker vi Scene-panelet. Du får fram dette ved å gå i Window-menyen og velge Scene. Legg til nye scener ved å klikke på Add Scene-knappen nederst i panelet. Du kan kopiere scener ved å trykke på Duplicate Scene-knappen. Slett scener ved å klikke på søppelbøtta. Hvis du vil forandre navn på en scene, dobbeltklikker du på den i lista. Scenene blir spilt av i den rekkefølgen de ligger i lista. Du forandrer rekkefølgen ved å dra dem opp og ned i lista. For å gå til en scene kan du klikke på den i lista. Hvis du ikke har Scenepanelet oppe, kan du gå til de forskjellige scenene ved å bruke Edit Sceneknappen over visningsområdet. Interaktivitet Flash har mange muligheter for å lage interaktive animasjoner. Det vil si at brukeren kan styre hva som skal skje i animasjonen. For å gjøre dette må vi skrive programkode i et programmeringsspråk som heter ActionScript. Vær oppmerksom på at denne boka ikke er en lærebok i programmering. Vi skal derfor kun bruke ferdiglagd kode fra Code Snippets-panelet. For å få noe til å skje bruker vi ofte trykknapper og andre elementer som danner et brukergrensesnitt. Vi kan bruke Components-panelet for å lage ferdigdefinerte elementer i brukergrensesnittet. Flere av disse krever at vi manuelt skriver ActionScript-kode. Vi kan også lage våre egne trykknapper ved å lage symboler av type Button. Slike symboler har ikke en vanlig tidslinje. I stedet har vi mulighet til å angi hvordan knappen ser ut ved forskjellige tilstander, for eks. når vi klikker på den.

60 60 Flash CC Professional Lage en trykknapp 1 Start Flash og lag et nytt ActionScript 3.0 dokument 2 Lag en avlang firkant 3 Velg firkanten, høyreklikk på den og velg Convert to Symbol i menyen som dukker opp. Angi Knapp1 som navn og Button som type. Klikk OK: 4 Dobbeltklikk på firkanten slik at du havner inne i symbolet. Legg merke til tidslinja med de ulike tilstandene Tilstandene bestemmer utseende til trykknapper når musa er utenfor knappen (Up), over knappen (Over) og klikker på knappen (Down). Hit gir oss mulighet til å bestemme området musa reagerer på 5 Høyreklikk i Over-bildet på og velg Insert Keyframe. Endre fargen på firkanten i dette bildet 6 Gjør det samme i Down-bildet. Du trenger ikke lage noe nøkkebilde under Hit. Grafikken i Down brukes da som området musa reagerer på 7 Forandre navn på Layer 1 til Bakgrunn. Lag et nytt lag som du kaller Tekst. Bruk Text Tool og lag en tekst på dette laget 8 Gå ut av symbolet ved å klikke på pila over visningsområdet. Test animasjonen med Ctrl+Enter. Legg merke til hvordan utseendet på knappen forandrer seg når du klikker på den 9 Lagre fila som Trykknapp.fla Code Snippets Du kan lage interaktivitet ved å velge fra en samling med ferdiglagd kode i Code Snippets-panelet:

61 4 ANIMASJON 61 I de fleste tilfeller er det en symbolinstans som er utgangspunkt for å lage interaktivitet. For eks. at animasjonen skal hoppe til et annet bilde på tidslinja hvis du klikker på en trykknapp. Koden fra Code Snippets-panelet vil havne i Actions-panelet. Her kan du eventuelt endre koden slik du ønsker Du må som regel velge instansen før du angir koden i Code Snippetspanelet. Vær også oppmerksom på at instansen må ha et instansnavn for at koden skal kunne referere til den. Du kan angi instansnavnet i Propertiespanelet: Lage navigasjon med trykknapper Vi skal bruke trykknapper og Code Snippets for å hoppe til ulike bilder inne i et MovieClip-symbol. 1 Start Flash og åpne Trykknapp.fla fra forrige øving. Vi skal ha fire trykknapper som gjør at vi kan hoppe til ulike bilder 2 Dobbeltklikk på trykknappinstansen slik at du kommer inn i trykknappsymbolet. Forandre teksten i symbolet til Bilde 1 3 Gå ut av symbolet ved å klikke på venstre-pila over visningsområdet 4 Gå i Library-panelet og høyreklikk på Knapp1-symbolet. Velg Duplicate i menyen som dukker opp. Angi Knapp2 som navn 5 Dra ut en instans av Knapp2-symbolet i visningsområdet. Dobbeltklikk på instansen slik at du kommer inn i symbolet. Forandre teksten til Bilde 2 6 Lag to knapper til på samme måte med teksten Bilde 3 og Bilde 4 7 Velg Bilde1-knappen og angi knappbilde1 som instansnavn i Propertiespanelet. Gi de andre knappene tilsvarende navn: knappbilde2, knappbilde3 og knappbilde4 8 Lag et nytt tomt MovieClip-symbol ved å gå i menyen Insert > New Symbol... 9 Angi Bilder som navn og Movie Clip som type. Klikk OK 10 Du havner nå inne i det tomme symbolet. Lag 4 nøkkelbilder på tidslinja inne i symbolet. Lag litt forskjellig grafikk eller tekst i hvert av nøkkelbildene 11 Vi må stoppe animasjonen inne i symbolet slik at ikke alle bildene blir vist fort etter hverandre. Velg det første bildet på tidslinja og ta fram Code Snippets-panelet. Dobbeltklikk på Stop at this frame under Timeline Navigation

62 62 Flash CC Professional 12 Gå ut av symbolet og dra ut en instans av Bilder-symbolet i visningsområdet. Flytt trykknappene slik at de ikke dekkes av bildet 13 Velg Bilder-instansen og angi minebilder som instansnavn i Propertiespanelet 14 Velg Bilde1-knappen og ta fram Code Snippets-panelet. Dobbeltklikk på Click to Go to Frame and Stop under Timeline Navigation Hvis du har glemt å angi instansnavn på knappen vil du få en advarsel om at Flash Automatisk lager et instansnavn 15 Koden som blir lagd, vil referere til hovedtidslinja og ikke til tidslinja inne i Bilder-instansen. Vi må derfor endre koden litt. Velg nøkkelbildet på Actions-laget og ta fram Actions-panelet. Endre koden der det står gotoandstop(5); til minebilder.gotoandstop(1); 16 Velg Bilde2-knappen og ta fram Snippets-panelet. Dobbeltklikk på Click to Go to Frame and Stop. Ta fram Actions-panelet og endre den nye koden der det står gotoandstop(5); til minebilder.gotoandstop(2); 17 Bruk Snippets- og Actions-panelet for å lage tilsvarende kode for de to siste knappene også 18 Test animasjonen med Ctrl+Enter og sjekk at du kan hoppe mellom bildene ved å klikke på knappene. Lagre fila som Navigasjon.fla Publisering Ved å publisere animasjonen gjør vi den tilgjengelig slik at andre kan se den. Vi kan gjøre dette på forskjellige måter. Det mest vanlige er å vise animasjonen på en webside, men vi kan også publisere slik at animasjonen blir en app i en smarttelefon eller et program på PC-en. For å angi hvordan vi skal publisere animasjonen går vi i File-menyen og velger Publish Settings

63 4 ANIMASJON 63 Til venstre i dialogboksen kan du velge hvilke type filer du vil lage. Til høyre får du fram valgmuligheter for filtypen som er valgt. For eks. kan du stille inn hvor mye bilder og lyd skal komprimeres i swf-fila. For å publisere til websider velger du Flash (.swf). Det er også lurt å krysse av for HTML Wrapper. Da lages det en HTML-fil (webside) som inneholder animasjonen. Begge filene må kopieres over til webserveren hvis du ønsker å gjøre websida med animasjonen tilgjengelig på internett. Ved Target kan du velge hvilken versjon av Flash Player du publiserer til. Det kan være lurt å velge en litt eldre versjon. Det er ikke sikkert at alle brukerne har installert den aller nyeste versjonen. Men vær oppmerksom på at ny funksjonalitet ikke blir vist i eldre versjoner av Flash Player. Du kan også velge å publisere til smarttelefoner ved å velge Air for Android eller Air for ios (iphone etc.). Air er en type Flash Player som gjør at animasjonen blir installert og kjører som app-er på smarttelefoner eller som vanlige programmer på en PC eller Mac. Du kan eksportere animasjonen som en programfil som kan kjøres i Windows (exe) eller på Mac. Gå i Commands-menyen og velg Export as Projector. Det kan være lurt å lage en programfil hvis du ønsker å publisere animasjonen på CD eller DVD. Da trenger ikke brukeren å ha Flash Player installert ettersom den allerede er «bakt inn» i programfila. Gjøre swf-fila mindre Hvis swf-fila er stor, tar det lang tid å laste den ned over internett. Vi bør derfor prøve å gjøre swf-fila så liten som mulig ved blant annet å gjøre grafikk som skal brukes i flere sammenhenger, om til et symbol redusere antall knutepunkter på grafikken til et minimum redusere antall nøkkelbilder ved å bruke mest mulig tweening-animasjon være varsom med å bruke mye punktgrafikk. Hvis du bruker punktgrafikk, så reduser størrelsen (antall piksler) i et bildebehandlingsprogram til et minimum før du henter den inn i Flash regulere kompresjonen på punktgrafikk og lyd i Publish Settings slik at du får ønsket kvalitet, men heller ikke mer

64 64 Flash CC Professional Publisere til HTML5 Nettlesere som er kompatible med HTML5, vil i stor grad kunne vise grafikk og animasjoner uten hjelp av Flash Player. Ønsker du å publisere til HTML5, kan du starte med å lage et nytt HTML5 Canvas dokument i stedet for et vanlig Flash (ActionScript 3.0) dokument. Når du tester et HTML5 Canvas dokument (Ctrl + Enter), blir det lagd en HTML- og js-fil (JavaScript) som lastes opp og vises i nettleseren. Eventuelle bilder eller lyd blir kopiert til egne mapper. Det blir også lagd, eller linket til, JavaScript-filer og eventuelt andre filer som trengs for å kunne vise grafikk og spille av lyd på nettsida. ActionScript støttes ikke i nettlesere og du må derfor skrive JavaScriptkode for å lage interaktivitet. Mange av kodesnuttene i Code Snippetspanelet finnes også som JavaScript. Konvertere til HTML5 Canvas Du kan konvertere et vanlig Flash-dokument til et HTML5 Canvas dokument ved å gå i Commands-menyen og velge Convert to HTML5 Canvas... Vær oppmerksom på noen begrensninger, blant annet: ActionScript kode vil ikke fungere og blir konvertert til kommentarer Stiplede linjer blir konvertert til linjer uten stipling Blending på symbolinstanser blir fjernet (konvertert til Normal) Video og transformasjoner i 3D blir fjernet Visse typer filtereffekter blir fjernet Flere scener støttes ikke og blir konvertert til separate fla-filer Konvertere til WebGL Når du lager animasjonen i et nytt HTML5 Canvas dokument, eller konverterer til et HTML5 Canvas dokument, blir grafikken tegnet ut i et canvas-element på websida. Canvas-elementet kan også vise hardware akselerert grafikk ved å bruke en webteknologi som heter WebGL. Du kan lage nye dokumenter med WebGL eller konvertere til WebGL på samme måte som HTML5 Canvas. Begrensningene for WebGL er stort sett de samme som for HTML5 Canvas, men vær klar over at færre nettlesere støtter denne teknologien.

65 4 ANIMASJON 65 Publisere til smarttelefoner I dette eksemplet skal vi publisere en animasjon slik at vi kan vise den på en Android-telefon. Vær klar over at prosessen er nokså lik hvis du ønsker å publisere til ios (iphone osv.), men da må du først registrere deg som Apple programutvikler i ios Developer Center. Du finner mer informasjon om dette i hjelpen i Flash. 1 Åpne Navigasjon.fla fra eksemplet på side Gå i menyen File > Publish Settings 3 Velg AIR 16.0 for Android under Target og klikk på knappen Player Settings 4 Pass på at du er i fanen som heter General og sett Aspect Ratio til Landscape. Kryss også av for Full Screen. Under Output file har du mulighet til å angi navn på app-fila (.apk) og hvor den lagres. Du kan senere overføre fila til telefonen via USB eller over nettet. Et sertifikat skal i utgangspunktet bekrefte at utvikleren av app-en er den han utgir seg for å være. På denne måten kan brukeren være tryggere på at app-en ikke inneholder virus eller ondsinnet kode. Det finnes egne selskaper som utsteder sertifikater og går god for identiteten til utvikleren. I vårt tilfelle lager vi vårt eget sertifikat. Brukeren har derfor ingen garanti for identiteten til utvikleren. For å få installert app-en med et slikt sertifikat må vi stille telefonen inn slik at den godtar app-er med større risiko (se nedenfor). For å teste app en på telefonen må USBdebugging være slått på under Utviklervalg. For å kjøre appen må du også tillate telefonen å kjøre app er fra ukjente kilder under sikkerhets innstillingene. Pass også på at driverne til telefonen er installert på PC en. 5 Gå til Deployment-fanen. For å kunne installere animasjonen på telefonen må vi lage et sertifikat. Klikk på knappen Create og fyll ut alle feltene. Pass på at du husker passordet du lager. Angi også filnavnet på sertifikatet ved Save as... Fila skal ha etternavnet p12. Klikk på knappen OK 6 Skriv passordet inn på nytt i Deployment-fanen og kryss av for Remember Password 7 Kryss av for Device Release under Android Deployment Type. Kryss også på knappen Embed AIR runtime Da trenger du ikke ha AIR-playeren installert på telefonen for å spille av animasjonen. Kobler du til telefonen via USB kan du teste animasjonen direkte ved å krysse på Install application og Launch application under After Publishing 8 I Icons-fanen kan du legge inn bilder som skal fungere som programikoner. Disse må i tilfelle være lagd på forhånd og lagret i PNG-format. 9 I Permissions-fanen kan du angi hva app-en skal ha lov til på telefonen. Hvis du ikke krysser på noe her, vil du få en advarsel når du publiserer. I vårt tilfelle krysser vi på Internet 10 Klikk på OK to ganger slik at du går helt ut av Publish Settings 11 For å teste app-en i en simulator velger du menyen Control > Test Movie > In AIR Debug Launcher (Mobile). For å teste animasjonen direkte på mobiltelefonen velger du i menyen Test Movie > on Device via USB

66 66 Flash CC Professional I dette kapitlet skal vi se mer på hvordan vi kan redigere animasjon på tidslinja. Vi skal også se på hvordan vi kan bruke beinobjekter for å lage karakteranimasjon. Til slutt skal vi bruke lyd i animasjonen.

67 5 REDIGERE ANIMASJON 67 >>5 Redigere animasjon I dette kapitlet skal vi lære > å redigere bilder og nøkkelbilder på tidslinja > å bruke Motion-panelet > å bruke lyd og video i animasjonen Redigere på tidslinja Vi kan redigere bildene på tidslinja ved først å velge dem og så flytte eller kopiere dem. Vi kan også slette eller sette inn nye bilder og nøkkelbilder. Velge bilder på tidslinja Klikk på et bilde for å velge det. Dra over bilder for å velge flere bilder på en gang. Pass på at du ikke drar på bilder som er valgt da flytter du dem (på tidslinja). Du kan også dra over flere lag på en gang. Klikk på lagnavnet for å velge alle bildene på laget. Shift-klikk for å velge hver enkelt tween span (separate tweeninger på ett eller flere lag): Høyreklikk på et bilde og velg Select All Frames for å velge alle bildene på tidslinja. Flytte bilder For å justere hvordan animasjonen foregår, kan du flytte nøkkelbilder. Vil du for eksempel at en tweening skal gå saktere, kan du flytte nøkkelbildene lenger fra hverandre. Du flytter vanligvis bilder ved først å velge dem og så dra på dem, men vi har noen særtilfeller som det er lurt å være klar over.

68 68 Flash CC Professional For motion tween: Hvis du flytter ett eller flere bilder utenfor tweeningen, blir det lagd bilder uten innhold i området du flytter fra. Alle tweeningene får et nøkkelbilde i starten som inneholder grafikken: For annen animasjon: Hvis du flytter ett eller flere bilder (ikke nøkkelbilder), blir det lagd et nytt nøkkelbilde i begynnelsen på bildene. Hvis du flytter nøkkelbildet i starten av animasjonen, blir det lagd et nytt tomt nøkkelbilde i bilde nr. 1. Flytter du et nøkkelbildet på slutten bakover, vil det bli uforandret innhold fram til den gamle plasseringen av nøkkelbildet. Du kan flytte et nøkkelbilde eller et bilde markert med uforandret innhold ved å holde Ctrl-tasten nede og så dra på det. Du trenger altså ikke velge bildet først. Dette er en grei måte å justere tiden mellom nøkkelbildene i en tweening. Sette inn bilder Du setter inn bilder (mer tid) ved å høyreklikke på tidslinja og velge Insert Frame i menyen som dukker opp. Har du valgt flere bilder på forhånd, blir det satt inn like mange bilder som du har valgt. Du kan også trykke på F5 på tastaturet for å sette inn bilder. Skalere bilder I en motion tween kan du dra på enden av tweeningen for å gjøre den lengre eller kortere. Nøkkelbildene blir da skalert slik at hele tweeningen går saktere eller fortere. Hvis du holder Shift-tasten nede mens du drar, vil tweeningen ikke blir skalert. Ønsker du å skalere shape tween, classic tween eller en bilde-for-bildeanimasjon, må du sette inn, eller slette bilder, og flytte nøkkelbilder manuelt.

69 5 REDIGERE ANIMASJON 69 Animere tekst I dette eksemplet skal vi animere en tekst med motion tween. Vi skal flytte nøkkelbilder slik at bokstavene i teksten forandrer seg i løpet av forskjellig tid. 1 Start Flash og lag et nytt dokumment 2 Klikk på Text Tool og velg Static Text. Skriv en tekst på 5-6 bokstaver. La skriftstørrelsen være ca. 50 pt 3 Høyreklikk på teksten og velg Break Apart i menyen som dukker opp. Teksten består nå av enkelttegn 4 Pass på at alle bokstavene er valgt, og høyreklikk på dem. Velg Distribute to Layers i menyen som dukker opp. Nå vil bokstavene havne på hvert sitt lag slik at de kan animeres forskjellig 5 Pass på at alle bokstavene er valgt og gå i Properties-panelet. Klikk på knappen Add Filter under Filters og velg Blur. Sett Blur X og Blur Y til 80 6 Velg alle bildene med tegn ved å dra over dem på tidslinja: 7 Høyreklikk på de valgte bildene og velg Create Motion Tween i menyen som dukker opp 8 Pass på at spillehodet er i det siste bildet. Velg alle bokstavene i visningsområdet. Gå i Properties-panelet og sett Blur tilbake til 0. Legg merke til at det blir lagd nøkkelbilder ettersom vi endret verdien på blur 9 Test animasjonen. Vi ser at bokstavene gradvis får mindre blur 10 Velg det siste nøkkelbildet på det første «bokstav»-laget. Dra på bildet slik at det havner et stykke til venstre:

70 70 Flash CC Professional 11 Den første bokstaven vil nå bli uten blur tidligere enn de andre. Flytt nøkkelbildene i de andre lagene slik at hver bokstav bruker litt lengre tid på å bli uten blur 12 Høyreklikk på et bilde på tidslinja og velg Select All Frames i menyen som dukker opp. Gå i Properties-panelet og sett Ease til Dette får animasjonen til å begynne sakte og gå fortere på slutten 13 Test animasjonen og lagre den Splitte opp motion tween Du kan splitte opp en motion tween i flere deler slik at den nye delen starter med et nøkkelbilde med grafikk (instans/tekst). På denne måten kan du skifte til annen grafikk på det samme laget. For å gjøre dette velger du et bilde i tweeningen, høyreklikker på det og velger Split Motion i menyen som dukker opp. For å skifte til annen grafikk setter du spillehodet i det nye nøkkelbildet og forandrer grafikken. Du kan også slette grafikken og sette inn ny grafikk, men vær oppmerksom på at du ikke kan tegne på laget. Du må eventuelt kopiere og lime inn en tekst eller instans. Du kan bruke Join Motion i menyen for å koble sammen to tweeninger. Sette inn nøkkelbilder For motion tween: Vi har sett at vi kan lage nøkkelbilder ved å gjøre endringer på ulike egenskaper i løpet av tweeningen, men vi kan også sette inn nøkkelbilder manuelt. Flytt spillehodet til stedet du vil ha nøkkelbildet, og høyreklikk på tweeningen. Velg Insert Keyframe og velg hvilken egenskap du vil lagre i nøkkelbildet. Du kan velge All hvis du vil ha med alle egenskapene. Trykker du på F6 på tastaturet, lager du et nytt All-nøkkelbilde. Du kan sette inn ett tomt nøkkelbilde (nøkkelbilde uten grafikk) på slutten. Høyreklikk på et bilde og velge Insert Blank Keyframe i menyen som dukker opp. Ved å gjøre dette får du mulighet til å lage animasjon med annen grafikk etter den første tweeningen.

71 5 REDIGERE ANIMASJON 71 For annen animasjon: Sett inn et nytt nøkkelbilde ved å høyreklikke på tidslinja og velge Insert Keyframe. Du kan også trykke på F6. Sett inn et tomt nøkkelbilde ved å høyreklikke på tidslinja og velge Insert Blank Keyframe i menyen som dukker opp. Du kan også trykke på F7 på tastaturet. Vil du sette inn nøkkelbilder i et valgt område med bilder, kan du bruke Convert to Keyframes eller Convert to Blank Keyframes. Slette bilder og nøkkelbilder Du sletter bilder ved først å velge dem, høyreklikke på dem og så velge Remove Frames i menyen som dukker opp. Du kan også ta bort nøkkelbilder slik at de blir forandret til bilder, ved å bruke Clear Keyframe. I en motion tween kan du velge hvilke egenskap i nøkkelbildet du vil slette på samme måte som du velger egenskap når du setter inn nøkkelbilder. Slette tweening Du kan slette tweening ved å velge bilder med tweening og så høyreklikke på dem. Velg Remove Motion (motion tween) eller Remove Tween (shape tween) i menyen som dukker opp. Reversere bevegelse Du kan få animasjonen til å gå baklengs ved å velge nøkkelbilder, høyreklikke på dem og velge Reverse Keyframes i menyen som dukker opp. Du kan la en instans med motion tween gå baklengs ved å høyreklikke på tweeningen på tidslinja og velge Motion Path - Reverse Path i menyen som dukker opp. Jevne ut bevegelse langs en sti Når du lar en motion tween følge en tegnet kurve kan det være at bevegelsen ikke foregår med jevn fart. For å rette opp dette kan du høyreklikke på tweeningen på tidslinja og velge Motion Path - Switch keyframes to roving. Konvertere til bilde-for-bilde-animasjon Du kan konvertere motion tween til animasjon uten tweening. Gjør dette ved å høyreklikke på tweeningen og velge Convert to Frame by Frame Animation. Det vil da bli lagd ett nøkkelbilde for hvert bilde i tweeningen. Vær oppmerksom på at swf-fila da blir større.

72 72 Flash CC Professional Kopiere og lime inn bilder Du kopierer bilder ved først å velge dem, høyreklikke på dem og så velge Copy Frames i menyen som dukker opp. Høyreklikk på tidslinja der du vil lime dem inn, og velg Paste Frames i menyen som dukker opp. Hvis du har valgt bilder på forhånd, blir disse erstattet med dem du limer inn. Bilder som ikke er valgt, blir forskjøvet mot høyre. I en motion tween kan du også kopiere et nøkkelbilde ved å velge det, og deretter dra på det med Alt-tasten nede. Kopiere motion tween mellom objekter Du kan kopiere motion tween fra én symbolinstans til en annen. Gjør dette ved å høyreklikke på tweeningen og velge Copy Motion i menyen som dukker opp. Høyreklikk på instansen du vil kopiere til, og velg Paste Motion i menyen som dukker opp. Kopiere og lime inn lag Du kan kopiere og lime inn all animasjon på ett eller flere lag. Velg lagene i laglista, høyreklikk på dem og velg Copy Layers i menyen som dukker opp. For å lime inn lag høyreklikker du på et lag i laglista og velger Paste Layers i menyen som dukker opp. De kopierte lagene vil havne ovenfor det valgte laget. Kopiere fra hovedtidslinja til et symbol Ofte finner vi ut i etterkant at hele eller deler av animasjonen på hovedtidslinja burde ligge inne i et symbol. Vi kan da kopiere ett eller flere lag, lage et nytt symbol og lime lagene inn på tidslinja til symbolet. Animasjon i graphic-symboler Du kan bestemme hvordan animasjonen i graphic-symboler skal foregå i Properties-panelet. Du kan velge mellom Loop, Play Once eller Single Frame. Loop repeterer animasjonen, Play Once spiller animasjonen én gang, mens Single Frame viser det samme bildet hele tiden. First bestemmer hvilket bilde animasjonen starter med, eller som vises ved Single Frame.

73 5 REDIGERE ANIMASJON 73 Onion skin Vi bruker onion skin for å se flere bilder i animasjonen samtidig. Dette er nyttig hvis du skal tegne det neste bildet i forhold til andre bilder. Du kan slå av og på onion skin under tidslinja. 1 Onion skin 2 Onion skin med omriss 3 Edit Multiple Frames 4 Valgmuligheter for å velge bilder Når du bruker onion skin, vil det dukke opp noen håndtak på tidslinjalen: Håndtak Håndtak Onion skin vist med omriss Onion skin Du kan bruke håndtakene for å bestemme hvor mange bilder du vil se samtidig. Forandre grafikk på flere bilder samtidig Hvis du ønsker å flytte eller forandre på grafikk som ligger på flere nøkkelbilder, kan du trykke ned Edit Multiple Frames-knappen. Du velger tidsområdet på samme måte som onion skin. Edit Multiple Frames kan spare deg for mye arbeid. Tenk deg at du har fordelt grafikk over mange nøkkelbilder og du ønsker at all grafikken skal være i midten av visningsområdet. I stedet for å måtte flytte grafikken i hvert eneste nøkkelbilde kan du bruke Edit Multiple Frames, velge tidsområde med håndtakene og bruke Align-panelet for å midstille grafikken. Motion Editor Motion Editor brukes for å forandre bevegelsene i en motion tweening ved hjelp av kurver i en graf. På denne måten kan vi nøyaktig bestemme hvordan bevegelsene skal foregå. Du får tilgang til Motion Editor ved å dobbelklikke på en motion tweening på tidslinja. Du kan også høyreklikke på en tweening og velge Refine Tween i menyen som dukker opp.

74 74 Flash CC Professional Nedenfor ser vi grafen til en instans som er animert, slik at den flytter seg med jevn hastighet mot høyre. 1 Liste med animerte egenskaper 2 Animasjonskurve for valgt egenskap 3 Lag nytt punkt på kurven 4 Zoom tidslinja 5 Slett animasjonskurve 6 Angi Easing 7 Zoom animasjonsverdier Legg merke til at grafen viser tiden langs den horisontale aksen og verdien til egenskapen som er valgt langs den vertikale aksen. I eksemplet ovenfor er instansen animert slik at den flytter seg i x-retningen fra ca. 240 til 460 i løpet av 40 bilder. Du kan flytte punktene på kurven ved å dra på dem. Du kan også legge til nye punkter med Add anchor point-knappen nede til venstre. Vær oppmerksom på at nye punkter vil lage nye nøkkelbilder i tweeningen. Du kan endre et kurvet punkt til et hjørnepunkt ved å Alt-klikke på det. Du kan endre et hjørnepunkt til et kurvepunkt ved å Alt-dra på det og deretter dra på tangenthåndtakene. Du kan slette et punkt ved å trykke Delete på tastaturet. Nedenfor har vi lagt til et nytt punkt og endret kurvaturen med tangenthåndtakene: Resultatet blir at bevegelsen til instansen starter nokså kjapt mot høyre, men så avtar hastigheten og instansen begynner å gå litt mot venstre. Deretter øker hastigheten mot høyre igjen.

75 5 REDIGERE ANIMASJON 75 Vær oppmerksom på at selv om vi kan editere animasjonkurvene for både X og Y separat, vil fortsatt antall/plassering av nøkkelbilder være felles i tillegg til kurvaturen i hvert punkt på animasjonskurven. Easingkurver For å ytterligere kontrollere hvordan animasjonen skal foregå kan vi legge på det som kalles easingkurver. Det er kurver som kombineres med animasjonskurven og bestemmer animasjonen i prosent langs animasjonskurven. For å angi en easingkurve klikker du på Add Ease-knappen under grafen. Du kan velge mellom flere ferdiglagde, eller lage din egen under Custom. I noen typer animasjoner kan det være enklere å la easingkurven bestemme mesteparten av bevegelsen, for eks. en ball som spretter. Animere ballsprett I dette eksemplet skal vi bruke Motion Editor og easingkurver for å få en ball til å sprette. 1 Start Flash og lag et nytt dokument 2 Lag en sirkel. Velg sirkelen og konverter den til et MovieClip-symbol ved å høyreklikke og velge Convert to Symbol i menyen som dukker opp 3 Lag en Motion Tween-animasjon slik at ballen (sirkelen) går på skrått nedover i løpet av 40 bilder 4 Dobbelklikk på tweeningen på tidslinja. Du vil nå se animasjonskurvene til sirkelen

76 76 Flash CC Professional Grafen til en easingkurve viser tiden horisontalt og tweeningen i prosent vertikalt. Tweening i prosent vil være det samme som hvor langt langs animasjonskurven vi er kommet i prosent. I eksemplet til høyre ser vi at easingkurven viser 100 % i bilde nr. 20. Dvs. at her får ballen Y-verdien til animasjonskurven i slutten av tweeningen altså den laveste posisjonen til ballen 5 Velg Y i lista med egenskaper og klikk på Add Ease-knappen 6 Det dukker opp en pop-up boks hvor du kan velge easingkurven. Velg BounceIn under Bounce and Spring: 7 Du kan angi hvor mange «sprett» du ønsker nederst i pop-up boksen. I vårt tilfelle velger vi 4. 8 Legg merke til hvordan resultatet vises som en stiplet kurve: Legg også merke til hvordan banen til ballen forandres i visningsområdet. Test animasjonen og lagre den som Ballsprett.fla Vær oppmerksom på at du kan lage din egen easingkurve ved å velge Custom i stedet for BounceIn.

77 5 REDIGERE ANIMASJON 77 Bruke lyd Vi kan legge lyd inn i nøkkelbilder slik at den blir spilt av når spillehodet kommer til nøkkelbildet. Før vi kan legge inn lyd, må vi laste inn en lydfil i biblioteket. Vi gjør dette ved å gå i File-menyen og velge Import to Library. Du kan blant annet velge MP3- eller WAV-filer. Når vi har lastet inn en eller flere lydfiler, kan vi legge dem inn i et nøkkelbilde ved å velge nøkkelbildet på tidslinja og så gå i Properties-panelet. Velg lyden under Sound: For å bestemme hvordan lyden oppfører seg, kan vi bruke valgene under Sync: Event lyden starter når spillehodet kommer til nøkkelbildet med lyden og stopper ikke før lyden er ferdig. Lyden stopper også hvis spillehodet kommer til et nøkkelbilde med den samme lyden og hvor Sync er satt til Stop. Stream lyden er her synkronisert med tidslinja. Hvis animasjonen stopper, vil også lyden stoppe. Når du bruker Stream, vil du også høre lyden når du flytter spillehodet på tidslinja. Dette er et godt hjelpemiddel for å tilpasse animasjonen til lyden. Start samme som for Event bortsett fra at lyden stopper og starter igjen når spillehodet kommer til et nøkkelbilde med den samme lyden. Det vil si at vi unngår at den samme lyden spilles flere ganger oppå hverandre. Stop lyden stopper når spillehodet kommer til et nøkkelbilde med Sync satt til Stop. Legge til lyd i animasjonen 1 Vi skal legge lyd til ballsprettet du lagde tidligere. Åpne fila Ballsprett.fla 2 Pass på at du har en lydfil med en kort lyd, og at den er i et format vi kan importere i Flash, for eksempel MP3 eller WAV. Gå i File-menyen og velg Import - Import to Library... Åpne lydfila 3 Lag et nytt lag du kaller Lyd

78 78 Flash CC Professional 4 Høyreklikk på tidslinja i Lyd-laget der hvor det første sprettet er. Velg Insert Keyframe i menyen som dukker opp. Gjør det samme i de etterfølgende sprettene: 5 Velg det første sprett-nøkkelbildet på Lyd-laget og gå i Properties-panelet. Velg lyden under Sound og sett Sync til Start. På denne måten unngår vi at lyden spilles flere ganger oppå hverandre hvis den blir for lang i forhold til sprettene: 6 Sett inn lyden i de andre sprett-nøkkelbildene også. Test animasjonen og lagre den Volumeffekter Du kan legge til ulike volumeffekter under Effect, for eksempel fade lyden inn eller ut. Hvis du trykker på Edit-knappen i Properties-panelet, kan du forandre volum ved hjelp av en kurve langs lydgrafen. Du kan også klippe lyden slik at den blir kortere. Legg merke til at vi kan redigere lyden i to kanaler (stereo). 1 Lydkanal 1 2 Lydkanal 2 (hvis lyden ikke er i stereo, vil kanalene være like) 3 Håndtak for å klippe lyden 4 Volumkurve 5 Håndtak for å justere volum. Lag nye håndtak ved å klikke på volumkurven. Fjern håndtak ved å dra dem ut fra kanal-vinduet. 6 Avspilling og stopp-knapp 7 Zoom

79 5 REDIGERE ANIMASJON 79 Video Du kan hente inn en videofil i Flash som så kan spilles av i en egen videospiller. Videofila bør være i H.264 format (mp4). Du kan bruke Adobe Media Encoder for å konvertere video i andre formater til H.264. Importere video 1 Start Flash og lag et nytt ActionScript 3.0-dokument. Lagre dokumentet som Video.fla 2 Gå i menyen og velg File > Import > Import Video... 3 Kryss av slik som vist nedenfor og klikk på knappen Browse... 4 Velg videofila du ønsker å importere. Hvis fila ikke er i H.264-format, klikker du på knappen Launch Adobe Media Encoder og klikker på knappen Start queue Videofila vil nå konverteres. Gå tilbake til Flash og klikk påknapen Browse... på nytt. Velg den konverterte fila 5 Klikk på knappen Next og velg type videospiller i lista under Skin 6 Klikk på kanppene Next og Finish. Videospilleren og videoen vil nå havne i visningsområdet