Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering. Efter övningen förväntas du kunna:

Transkript

1 Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering Efter övningen förväntas du kunna: Skillnaden mellan: o Bildrutor och nyckelbildrutor; o Classic-, Shape- och Motion Tween; o Movie Clip, Button och Graphic. Använda dig av Classic-, Shape- och Motion Tween. Hitta och känna dig hemma i programmet med dess olika verktyg. 1. Startmenyn Adobe Production Premium CS5 Adobe Flash Professional CS5 välj ActionScript Skapa ett nytt dokument: File New ActionScript3.0 (här går det att ändra scenens storlek, bakgrundsfärg samt frame rate; detta kan även göras i properties (Window Properties)).

2 1. Arbetsytans utseende går att förändra och anpassa efter behov. För denna övning, välj: Window Workspace Essentials. Verktygsfälten på arbetsytan går att flytta runt, och det går att lägga till ytterligare vid behov. 1. Börja med att rita en cirkel på scenen (oval tool). 2

3 När man skapar Classic Tween ska det göras med symboler. Symboler grupperar ihop alla objekt. Det finns tre olika symboler: Movie Clip, Button och Graphic. Movie Clip: är som en ny scen med en egen tidslinje och egna lager för att skapa animationer. Button: Används för att navigera genom olika bildrutor på tidslinjen eller till en annan URL adress. Button har en egen tidslinje som består av fyra olika bildrutor, UP (för utseendet), OVER (hur knappen ser ut när muspekaren förs över), DOWN (hur kappen ser ut vid musklickning) samt HIT (för att markera det klickbara området). Button används när en händelse är kopplad till musklickning, t.ex. val i menyn på en webbplats. Graphic: Används till grafik (det vill säga statiska bilder som ska återanvändas) samt animerade objekt som inte kräver de funktioner Movie Clip har. Varje symbol har ett instansnamn (instance name) och därmed kan kopior urskiljas och förändras utan att originalet i biblioteket ändras. Cirkeln som du har ritat på scenen består av två objekt, en kantlinje och fyllnad som inte är grupperade. Det går därmed att separera objekten samt att manipulera formen på cirkeln genom att dra i kantlinjen. För att kunna skapa Classic Tween måste objekten grupperas ihop till en symbol. 2. Markera hela cirkeln. 3. Konvertera till symbol: Modify Convert to Symbol (F8), eller högerklicka och välj Convert to symbol. 4. Namnge symbolen och välj Graphic, tryck sedan OK. 3

4 Nu har objekten konverterats till en symbol, vilket visas genom en blå ruta runt symbolen. Det går nu att flytta cirkeln utan att objekten separeras. Symbolen som du har skapat hamnar även i biblioteket. Symbolen kan därmed återanvändas för att hålla nere filstorleken (ändringar i en kopia av symbolen påverkar inte originalet). Nya symboler går även att skapa genom Insert New Symbol. Animering i Flash bygger på bildrutor (frames). Varje ruta i tidslinjen representerar en bildruta. En animering i Flash kan enbart ske mellan nyckelbildrutor (keyframes), vilka indikerar en förändring. Därför ska du skapa nyckelbildrutor i tidslinjen. 5. Högerklicka i tidslinjen på bildruta 15, välj Insert keyframe (F6). De två bildrutorna med svarta prickar är nyckelbildrutor (keyframes). De gråa rutorna är vanliga bildrutor (frames). 6. Klicka på nyckelbildruta 15. Med cirkeln markerad, flytta den någonstans på scenen. 7. Klicka på nyckelbildruta 1 cirkeln befinner sig här i sin startposition. Klicka på nyckelbildruta 15; cirkeln befinner sig här i sin slutposition. 8. Skapa en ny nyckelbildruta och flytta cirkeln till en ny position. 4

5 9. Högerklicka någonstans mellan nyckelbildruta 1 och nyckelbildruta 15, på det gråa området. Välj Create Classic Tween. Det finns även under Insert Classic Tween. Den blå färgen indikerar att du har skapat en Classic Tween. Om du istället för att se en hel pil ser en bruten pil är det något som blivit galet. Försök igen eller be om hjälp. Tryck på enter för att spela sekvensen och se skillnaden mellan det som är tweenat och det som inte är det. 10. Skapa en Classic Tween mellan nyckelbildruta 15 och Gå till nyckelbildruta 1 och tryck enter för att se en förhandsvisning av sekvensen. 12. Döp om layer 1 till Classic Tween. 5

6 Shape Tweens används för att skapa en effekt liknade morphing, det vill säga en form förvandlas till en annan. 1. Skapa ett nytt lager och döp det till Shape Tween. Dölj och lås det undre lagret (Classic Tween). 2. Rita en ny cirkel på scenen. Viktigt är att inte göra om denna cirkel till en symbol vid Shape Tween, eftersom Shape Tween inte fungerar med symboler. 3. Skapa en nyckelbildruta på ruta Markera nyckelbildruta 15 och förändra formen på cirkeln genom att dra i kantlinjen. 5. Högerklicka på den gråa ytan mellan första och sista nyckelbildrutan. Välj Create Shape Tween. 6

7 Den gröna färgen visar att du har skapat en Shape Tween. Om du istället för att se en hel pil ser en bruten pil är det något som gått snett. Försök igen eller be om hjälp. Dra i den röda platsindikatorn för att se hur formen förändras. Motion Tween är likt Classic Tween, däremot enklare att skapa och lättare att kontrollera. Rörelseinterpolering innebär att animeringen består av ett objekt som byter position mellan nyckelbildrutorna. 1. Skapa ett nytt lager och döp det till Motion Tween, lås och dölj de föregående. 2. Dra ut en ny instans av din symbol från första övningen på scenen från biblioteket. 3. Lägg till en vanlig bildruta i ruta 30 om det inte redan finns en där (högerklicka och välj Insert Frame, eller F5). 4. Högerklicka på en bildruta och välj Create Motion Tween. Tidslinjen blir ljusblå. Nu är det dags att välja hur cirkeln ska förflytta sig. 7

8 5. Markera någon bildruta längre fram på tidslinjen mellan 2 och 40. Ta tag i cirkeln och dra den dit du vill ha den. En linje ritas mellan cirkelns ursprungliga position och den nya. 6. Det går att förflytta den till en annan position om du hellre skulle vilja det. Markera en bildruta längre fram i tidslinjen (inom 40) och flytta cirkeln igen. Som du ser fortsätter linjen. Linjen visar hur cirkeln rör sig, dess rörelsebana. Varje prick på linjen representerar varje enskild bildruta och cirkelns position för den bildrutan. Fortsätt att skapa din egen rörelsebana. 7. Det går även att manipulera rörelsebanan själv genom att flytta positionerna (ta tag i de tjockare punkterna på linjen). Det går även att förändra rörelsebanan genom att med Selection tool (V) dra mellan positionerna, på själva linjen (för att få den kurvig). 8

9 8. Tryck enter och testa din animation. Gör övningarna tills du känner att du behärskar teknikerna genom att experimentera med egna former. Genom att använda någon (eller flera) av de ovanstående teknikerna försök göra en animation av en studsande boll. Tips: Ändra FPS (frame rate) till mellan (i Properties). Använd gradient (color) för att få bollen att se mer realistisk ut. Testa effekten ease för att få animeringen att se mer verklighetstrogen ut (Properties). Använd free transform tool (Q), för att skapa en mer verklighetstrogen effekt när bollen snuddar vid marken. Använd det hjälpavsnitt som finns genom att trycka F1, "Using flash". Lek nu runt i programmet och testa egna saker, det viktigaste är att du känner dig hemma och vet vart det mesta finns. Försök göra en Shape Tween fast med text istället för en cirkel. Tips: Testa funktionen Modify Break apart. 9