Flash

 skriv ut »

Onion skin - animering
(duplicateMovieClip)

Onion Skin är egentligen benämningen på den funktion som gör att du kan se innehållet i flera ramar samtidigt (se övningen "Onion Skin" »). I det här exemplet används en animation som tonar ut (alpha) de visade bildrutorna och ger en fördröjning i animeringen som ju kan liknas vid att du ser flera bildrutor samtidigt. Fördröjningen i animeringen skapas genom att ett Filmklipp (Movie Clip) dupliceras och startar i en senare bildruta än originalet med hjälp av ActionScript-elementet duplicateMovieClip. Innan du börjar med övningen kan det vara bra att kunna grunderna i Flash »

Skapa animeringen i ett Filmklipp

i övningen används Åtgärder (ActionScript) för att styra ett Filmklipp (MovieClip) upprepade gånger. Det är alltså viktigt att du gör ett Objekt med egenskapen "Filmklipp" (Movie Clip) redan innan du skapar animationen. Ett filmklipp är egentligen en "film i filmen". Animerade rörelser som ska ske oavbrutet i en Flashfilm är perfekta att ge symbolegenskapen Filmklipp. OBS! Om du redan har en animation som du vill använda till Onion Skin-animeringen kan du se i punkt 2 nedan hur du gör om animeringen till ett Filmklipp i efterhand.

1. Välj menyn "Infoga/ Ny Symbol..." (Insert/New Symbol...). Välj egenskapen "Filmklipp" (Movie Clip) och ge den ditt eget namn:
   
   
2. Filmklippet är en underordnad del av Scenen. Du ser inte längre scenens yta i fönstret utan den ytan som utgör själva Filmklippet. När du placerar ut dina objekt i Filmklippet är det bra om de hamnar nära centrumpunkten av Filmklippet. Du kan senare lägga Filmklippet i vilken position du vill på scenens yta. Nedan ser du vilka kontroller du kan använda för att flytta dig mellan Scen och Filmklipp:
   
   
3. Skapa en animering i ditt nya Filmklipp (se grunderna i animering »). I exemplet nedan har vi gjort en rörelseinterpolering (Motion Tween) av ett textobjekt mellan två bildrutor.
   
   Första Keyframe markerad och symbolen i startläget:
   
   
   Sista Keyframe markerad och symbolen i slutläget:
   

Exempel:

Ditt Filmklipp och ditt objekt du animerat är kan du även se i Biblioteket (Library). Välj att visa fönstret med menyn "Fönster/Bibliotek" (Window/Library). Det finns två objekt i Library nedan; Filmklippet och textobjektet:



Ett objekt som inte är namngivet men ingår i en animation får automatiskt namnet "Tween". Du kan själv ändra namnet i efterhand genom att högerklicka och välja "Byt namn" (Rename):

Gör en befintlig animation till ett Filmklipp

Om du glömt att göra ett Filmklipp innan du animerar och även om du vill använda en egen animation du gjort tidigare så kan du flytta alla bildrutor från din animation till ett nytt Filmklipp i efterhand.

1. Markera alla bildrutor i din befintliga animation genom att klicka på Lagernamnet. Om du har flera Lager kan du Shift+Klicka på Lagernamnen för att markera alla bildrutor i alla Lager.
   
   
2. Högerklicka på någon av bildrutorna och välj att "Klipp ut bildrutor" (Cut Frames). Du kan också använda snabbkommandot CTRL+ALT+X.
   OBS! Viktigt att du klipper ut bildrutorna och inte kopierar dem eftersom de ska flyttas från scenen till Filmklippet.
   
   Byt arbetsläge till Filmklippet (se punkt 1:2 ovan). Högerklicka i den första bildrutan och välj att "Klistra in Ramar" (Paste Frames):
   
   
3. Testa ditt Filmklipp i fönstret Bibliotek (Library). Du kan använda kontrollerna för att spela och stoppa filmen:
   
   

OBS! Om du byter till scenen som animeringen låg på tidigare så ska den vara helt tom innan du fortsätter med ActionScript enligt nedan. Alla bildrutor ska nu finnas i själva Filmklippet!

Lägg till Filmklippet på scenen

Filmklippet måste placeras ut på Scenen för att vara med i Flashfilmen. Innan ett Filmklipp placeras på scenen är det bara ett av andra passiva objekt i Biblioteket. Genom att placera det på scenen blir det en aktivt objekt och en del av Flashfilmen.

1. Se till att du befinner dig i Scenen och inte i Filmklippet (se punkt 1:2 ovan). Dra ditt filmklipp till scenen. Det hamnar automatiskt i den första bildrutan:
   
   
   
   Testkör filmen i ett eget fönster med kommandot CTRL+ENTER.

Lägg till ActionScript för effekten

Nu kommer vi äntligen till själva poängen med guiden; fördröjningen i animeringen skapas genom att ett Filmklipp (Movie Clip) dupliceras och startar i en senare bildruta än originalet med hjälp av ActionScript-elementet duplicateMovieClip. Macromedia's scriptspråk ActionScript gör det möjligt att i detalj styra hur en Flashfilm ska fungera. Du behöver egentligen inte behärska scriptkoden i detalj då det finns färdiga Åtgärdsmoduler (Actions) som klarar många uppgifter. ActionScript har har en del likheter med Javascript och Flash MX kan använda ActionScript som skrivits i tidigare versioner av Flash. De olika objekten som ingår i filmen måste kunna identifieras av ActionScript och det styrs ofta av namnet på objektet. I denna övning måste du dessutom ge ditt Filmklipp ett unikt händelsenamn (Instance Name) som används av ActionScript för att identifiera Filmklippet och utföra den åtgärd du valt.

1. Markera ditt Filmklipp och titta i paletten "Egenskaper" (Properties):
   
   
   
   
   Tips! Om du inte ser paletten Properties kan du välja att visa den med menyn "Fönster/Egenskaper" (Window/Properties) eller CTRL+F3.
2. Namnge händelsen. I exemplet används samma namn som på själv Filmklippet men namnet behöver alltså inte vara detsamma:
   
   
3. Skapa ett nytt Lager att användas till dina ActionScript:
   
   
   
   I exemplet nedan är namnet på Lagret ändrat:
   
4. Infoga en ny Nyckelbildram (Keyframe) i bildruta 2:
   
   
5. Se till att bildruta 2 är markerad och välj paletten Åtgärder (Actions). Om den inte syns kan du visa den med menyn "Fönster/Åtgärder" (Window/Actions). Välj åtgärden "Actions/Movie Clip Control" och dubbelklicka på åtgärden "duplicateMovieClip".
   
   Parametrarna du skall ange är:
   Target = Namnet på just ditt Filmklipp (ange exakt samma namn som du gav händelsen (Instance Name) tidigare)
   New Name = unik identifierare för den nya kopian. I exemplet "kopia1"
   Depth = nummer som anger i vilken ordning filmen placeras
   
   
6. Åtgärden duplicateMovieClip gör att Filmklippet nu startar om i bildruta 2. Filmklippet i "original" ligger i det nedersta Lagret som nu bara består av en enda bildruta. Det innebär att Filmklippet avslutas i bildruta 1 innan kopian hinner starta i bildruta 2. För att kunna testa Flashfilmen och se både originalklippet och kopian kan du lägga till tillräckligt antal bildrutor i det nedre Lagret. Högerklicka i bildruta 20 och välj att "Infoga Bildruta" (Insert Frame):
   
   
   
   Tidslinjen i nedre Lagret kompletterad med tomma bildrutor:
   
   
7. Testkör din Flashfilm med CTRL+Enter. Filmklippet startar nu 2 gånger med en bildrutas fördröjning. När filmen avslutas i bildruta 20 startar filmen om och så här kan den se ut i startläget:
   
   
   

   Exempel:

Upprepa ActionScriptet och lägg till en toning (Alpha)

För att få intrycket av att objektet har en fördröjd skuggning och borttoning krävs att föregående ActionScript upprepas på fler nyckelbildrutor (Keyframes) och dessutom att objektet tonas ner med filtret Alpha.

1. Markera nyckelbildrutan (Keyframe) som innehåller ActionScriptet:
   
   
2. Lägg till den nya åtgärden setProperty genom att dubbelklicka. I valet "Property" väljer du med pilmenyn till höger valet _alpha (Alpha). Tilldela den nya egenskapen den kopia du skapade med föregående Actionscript. I exemplet nedan är namnet "kopia1". Som värde på opaciteten (Value) har vi valt värdet 90 vilket gör filmklippet 90% synligt:
   
   
3. Infoga ytterligare två nyckelbildrutor (Keyframes) efter de första två:
   
   
4. Markera bildruta 4 och upprepa steg 4:5 ovan men ge den nya kopian namnet "kopia2" (New Name) och djupet "2" (Depth):
   
   
5. Lägg till Alpha även på denna kopia men sänk opaciteten (Value) till 80. OBS! Målet (Target) är nu "kopia2":
   
   
6. Upprepa punkt 3-5 tills du har tonat ner den sista kopian till 10%. I exemplet nedan används åtgärderna på 9 kopior och opaciteten är alltså ändrad från 90% stegvis ned till 10%. Varannan nyckelbildruta ska alltså både tilldelas åtgärden duplicateMovieClip och åtgärden setProperty
   
   
   
   Testkör din Flashfilm med CTRL+Enter!

Exempel:

Du kan variera effekten genom att öka antalet bildrutor mellan kopiorna eller helt enkelt förlänga hela Flashfilmen med fler bildrutor. Prova också att ändra Filmklippets rörelser!

Exempel:

Exempel:

Exempel: