Adobe Flash CS3 Grundkurs www.databok.se
Innehållsförteckning 1 Inledning... 1 Utbildningsmaterialet... 1 Övningsfiler och mappar... 2 2 Arbetsytan...3 Starta Flash... 3 Skapa ett nytt dokument... 4 Bekanta dig med arbetsytan... 4 Arbetsytan i Flash CS3... 5 Scen och tidslinjen... 5 Lager... 6 Bibliotek... 6 Verktygsfältet Standard... 7 Paneler... 7 Skapa en ny paneldocka... 7 Verktygspanelen... 8 Menyraden... 8 Menyradens innehåll... 8 Hjälpfunktionen... 9 Panelen Egenskaper... 10 3 Verktyg och inställningar... 11 Ange dokumentegenskaper... 12 Ändra bakgrundsfärg... 12 Markeringsverktygen... 13 Markeringsverktyget den svarta pilen... 13 Delmarkeringsverktyget... 13 Omforma fritt och övertoningsomformning... 13 Lasso... 14 Ritstiftsverktyget... 14 Text- och linjeverktygen... 14 Rektangel-, oval- och polygonverktygen... 14 Penn- och penselverktygen... 16 Färg- och retuschverktyg... 16 Ändra färg på objekt... 16 Markera/Avmarkera... 17 Visa och dölja paneler... 17 Flytta objekt... 18 Ritinställningar... 18 Användbara paneler... 20 Panelen Justera... 20 Panelen Färg och Färgrutor... 20 Panelen Omforma... 20 Tillämpningsuppgifter... 21 4 Lager...22 Detta är ett lager... 22 Arbeta med lager... 23 Skapa ett nytt lager... 23 Namnge lager... 23 Ordningsföljd på lager... 23 Flytta lager... 24 Flytta objekt till annat lager... 24 Lageregenskaper... 24 Redigera lager... 25 Ta bort lager... 25 Stödlinjelager... 26 Rörelsestödlinjelager... 26 Maskeringslager... 26 Maskera fler lager med samma masklager... 28 Bryta länkning mellan masklager och lager... 29 Lagermappar... 29 Tillämpningsuppgifter... 30 5 Symboler och panelen Bibliotek...31 Symboltyper... 32 Skandinaviska Databöcker AB Flash CS3 i
Skapa en symbol... 32 Skapa symbol ifrån biblioteket... 33 Redigera symboler... 34 Ta bort mapp eller symbol... 34 Bibliotek i Flash... 34 Överblick över bibliotekspanelen... 35 Delade bibliotek... 35 Hämta symboler från externa bibliotek... 36 Tillämpningsuppgifter... 37 6 Text...38 Inställningar för text... 38 Typsnitt... 39 Punktstorlek... 40 Textfärg... 40 Formatera, justera och flytta text... 40 Textorientering... 41 Redigera och omforma text... 41 Sök och ersätt... 43 Stavningskontroll... 44 Tillämpningsuppgifter... 45 7 Animera... 46 Två typer av animeringar... 46 Bild-för-bild... 46 Interpolerad animering... 46 Översikt över tidslinjen... 47 Bildrutehastighet... 47 Bildrutor och nyckelbildrutor... 48 Ta bort bildrutor... 49 Skapa en rörelseinterpolering... 49 Testa filmen... 50 Kopiera och klistra in bildrutor... 50 Hur olika animeringar visas i tidslinjen... 51 Interpolera längs en rörelsestödlinje... 51 Forminterpolering... 54 Figurtips... 55 Ta bort figurtips... 55 Bild-för-bild-animering... 55 Ha översikt över flera bildrutor: Lökskal... 57 Använda Lökskal... 57 Visa flera bildrutor som ingår i animeringen samtidigt.5 7 Ändra visning med intervallmarkören... 58 Avgör hur lökskalen ska visa bildrutorna... 58 Visa bilderna som konturer... 58 Redigera flera bildrutor... 59 Ändra Lökskalsmarkeringar... 59 Kapslade animeringar... 59 Använda kapslade animeringar... 61 Kopiera rörelse... 62 Återanvända kapslade animeringar... 63 Animera text... 64 Animera maskeringslager... 64 Tillämpningsuppgifter... 65 8 Importera bilder... 66 Skillnaden mellan vektorbaserad grafik och bitmapppgrafik... 66 Filformat vid import... 67 Importera till scenen eller till biblioteket... 67 Importera Illustratorfiler... 68 Redigera importerad bild... 70 Kopiera och klistra in... 70 Förbereda bilder för import... 71 Importera bitmappbilder... 72 Importera Photoshopbilder... 72 Importera bildsekvenser... 73 Tillämpningsuppgifter... 74 9 Knappar...75 Om knappar... 75 Knappar i Flash... 75 Skapa en egen knapp... 77 Förändra utseendet då muspekaren förs över knappen.7 7 Ändra storlek på knappen... 78 Duplicera symbol... 78 Att arbeta med förekomster av knappar... 79 Tillämpningsuppgifter... 80 10 Interaktivitet... 81 Hur du skapar interaktivitet... 81 Beteenden... 81 Vad är ActionScript?... 82 Infoga ett externt filmklipp... 83 Bakåtknapp... 85 Andra funktioner på panelen Beteenden... 87 Ladda upp en bild... 88 Länka till webbsida... 89 Stoppa och spela upp inbäddad film... 90 Ta bort beteende... 93 Kombinera Beteenden med Åtgärder... 93 Skapa en åtgärd som startar filmen... 95 Några övriga åtgärder... 95 Panelen Åtgärder... 96 Ange parametrar på panelen Åtgärder... 97 Alternativ för mushändelser... 97 ActionScript 3.0... 98 Tillämpningsuppgifter... 99 ii Flash CS3 Skandinaviska Databöcker AB
11 Filter och effekter...100 Panelen Filter... 100 Lägga till filter... 101 Ta bort filter... 101 Kopiera och klistra in filter... 101 Inställningar för filter... 102 Skapa ett filterbibliotek... 103 Effekter på tidslinjen... 104 Assistenter... 104 Redigera/Ta bort effekt... 105 Effekter... 106 Skugga... 106 Utöka... 107 Dela upp... 107 Omforma/Övergång... 108 Tillämpningsuppgifter... 109 12 Ljud... 110 Lägg till ljud i film...110 Olika slags ljud i Flash...112 Händelseljud...112 Direktuppspelningsljud...112 Ljud för mobila enheter...112 Import av ljud...112 Redigera ljud...113 Knappar med ljud...115 Samordna ljudet med animeringen...116 Export och komprimering av ljud...116 Tillämpningsuppgifter...117 13 Mallar och Device central... 118 Bildspel...118 Frågeformulär...119 Skapa en egen mall... 120 Device Central... 121 Tillämpningsuppgifter... 123 14 Publicera Flashfiler på webben...124 Förberedelser...124 Få filmen att fungera på bästa möjliga sätt...124 Testa filmen innan publicering... 125 Arbeta med flera dokument... 125 Skapa mappar i biblioteket... 125 Visa innehållet i alla mappar... 126 Ta bort mapp eller symbol... 126 Skapa ny symbol... 126 Publiceringsinställningar... 127 Format... 127 Flash... 128 HTML... 129 Publicera filmen...131 Lägga till en Flashfilm på en befintlig webbsida...131 Maximera Flashfilmen... 132 Exportera filmer och bilder... 133 Exportera film... 133 Exportera bild... 134 Tillämpningsuppgifter... 134 Kortkommandon...136 Sakregister...137 Skandinaviska Databöcker AB Flash CS3 iii
7 Animera 7 Animera I det här kapitlet ska du lära dig hur du skapar olika typer av animeringar som rörelse- och forminterpoleringar samt bild-för-bild-animeringar. Du kommer även att läsa om bildrutehastighet och om hur du skapar nyckelbildrutor. Du kommer även lära dig hur olika slags animeringar ser ut i tidslinjen. Två typer av animeringar Animeringar skapas genom att du förändrar innehållet i nyckelbildrutor som ligger efter varandra på en tidslinje. Genom att animera får du objekt att exempelvis byta färg och form, röra sig, förstoras eller förminskas. Det finns två typer av animeringar, den mest grundläggande animeringen kallas bild-förbild-animering och bygger på flera bildrutor som följer på varandra i en serie. Den andra typen av animering kallas interpolerad animering och är en något mer utvecklad typ av animering. Bild-för-bild Då du använder animeringstypen bild-för-bild skapar du en bild i varje bildruta. Filstorleken ökar p.g.a. att värdena för samtliga förändringar sparas, alltså bildruta för bildruta. Tekniken passar bäst för små okomplicerade förändringar och variationer som i minspel exempelvis. Interpolerad animering Med interpolerad animering skapar du en startbildruta och en slutbildruta (likt två poler) sen lägger Flash själv till bildrutorna däremellan. Det gör att animeringen (t.ex. toning, färg, förstoring eller förminskning) förändras i jämna steg mellan start- och slutrutorna. Att arbeta med interpolerade animeringar håller ner filstorleken eftersom endast förändringen mellan bildrutorna sparas. 46 Flash CS3 Skandinaviska Databöcker AB
7 Animera Översikt över tidslinjen Nedan kan du ta del av hur de olika delarna samarbetar på tidslinjen som bildrutor, nyckelbildrutor, interpoleringar och lager. Spelhuvud Nyckelbildrutor Används för att införa nya händelser eller egenskaper till objekt/animeringar i dokumentet. Bildruta Eftersom informationen i alla bildrutor på detta lager är densamma kan man använda bildrutor för att förlänga lagret så att det följer med animeringen. Rörelseinterpolering Första och sista bildrutan i en interpolering måste bestå av nyckelbildrutor. Bildrutehastighet Innan du börjar arbeta med animeringar är viktigt att du ställer in rätt bildrutehastighet eller bildrutefrekvens, alltså animeringens uppspelningshastighet (förkortas fps eng. frames per second). Eftersom du bara kan ange en bildrutehastighet för hela Flashfilen bör du göra det innan du skapar själva animeringen. Bildrutehastigheten anger du i etikettrutan Bildrutefrekvens på panelen Egenskaper som du öppnar via Fönster, Egenskaper. Vilken bildrutehastighet du ska välja för din Flashfilm beror på vilken typ av animering du vill skapa. Se exemplen till höger. Tecknade filmer (cartoons) tar ca 12-15 fps. Video och 3D-animeringar tar ca 30 fps. Spelfilmer tar ca 24 fps (alt. 48 fps på bio). Skandinaviska Databöcker AB Flash CS3 47
7 Animera Om du ställer in en för låg bildrutehastighet ser animeringen ut som den stannar till och startar igen. Ställer du in en för hög animeringshastighet kommer detaljer att se oskarpa ut. Bäst resultat får du för det mesta om du använder standardhastigheten 12 fps (eng. frames per second dvs. bildrutor per sekund). Hur jämnt animeringen sedan spelas upp beror bl.a. på datorns hastighet samt hur omfattande animeringen är. Det kan kännas lockande att dra upp bildrutehastigheten för att försöka få en jämnare animering men det är oklokt med tanke på webbens beskaffenhet; din publik har sällan exakt samma förutsättningar som du själv. En god regel är att pröva hur animeringen beter sig på olika datorer för att komma fram till bästa möjliga bildrutehastighet. Bildrutor och nyckelbildrutor En bildruta är ett steg eller just en bildruta på tidslinjen. I ett nyskapat Flashdokument är det befintliga lagret i filen endast en bildruta långt. Ofta krävs det fler bildrutor än en för att skapa en animering. Det finns olika sätt att lägga till ytterligare bildrutor i tidslinjen, mest tidsbesparande är det att använda kortkommandot F5 men det går ungefär lika snabbt att högerklicka på tidslinjen och välja Infoga bildruta. Ett något mer omständigt sätt att infoga fler bildrutor är att först markera en bildruta på tidslinjen, gå till Infoga i menyn och välja Tidslinje och Bildruta. För att kunna animera måste du skapa s.k. nyckelbildrutor. Med en nyckelbildruta bestämmer du var, när och hur förändringen i animeringen ska inträffa. I animeringstypen bild-för-bild är varje enskild bild en nyckelbildruta och vid en interpolerad animering lägger du in nyckelbildrutor på de ställen i tidslinjen mellan vilka något ska ske i animeringen. För att lägga till en nyckelbildruta markerar du en ruta i tidslinjen och väljer kortkommandot F6 eller högerklickar på tidslinjen och väljer Infoga nyckelbildruta. Om en nyckelbildruta inte har något innehåll i form av en bild, säger man att nyckelbildrutan är tom och i tidslinjen framgår det av att bildrutan består av en ofylld punkt. Motsvarigheten; en fylld punkt i tidslinjen avser en nyckelbildruta med innehåll. Tom nyckelbildruta. Nyckelbildruta med innehåll. Skillnaden mellan en enkel bildruta och en nyckelbildruta är att nyckelbildrutan på ett eller annat sätt utgör en förändring i tidslinjen och därmed i animeringen. 48 Flash CS3 Skandinaviska Databöcker AB
7 Animera Om du inte varken har bildruta eller nyckelbildruta kan du inte rita något överhuvudtaget på scenen. Flash kommer i de fallen att varna dig i en meddelanderuta. Se exemplet nedan. Ta bort bildrutor Ibland är det nödvändigt att ta bort bildrutor om du exempelvis vill korta och därmed snabba på en animering något. För att ta bort bildrutor måste du först markera dessa. Klicka i en bildruta för att markera den och Skift-klicka sedan några rutor bort för att markera bildrutorna däremellan. Högerklicka därefter och välj Ta bort bildrutor. För att ta bort nyckelbildrutor gör du ungefär på samma sätt, nämligen markerar nyckelbildrutan, högerklickar och väljer Ta bort nyckelbildruta. Skapa en rörelseinterpolering Nu ska du pröva att göra en rörelseinterpolering. Du ska först börja med att öppna ett nytt Flashdokument och därefter infoga en nyckelbildruta. 1. Skapa en ny Flashfil via Arkiv, Nytt, välj format och klicka på OK. I Flashfilens befintliga lager (Lager 1) ser du en tom nyckelbildruta i tidslinjen. 2. Döp det befintliga lagret till Boll. Rita upp en cirkel med ovalverktyget (och Skift nedtryckt), placera cirkeln på scenens vänstra sida. Välj en valfri men enhetlig linje- och fyllningsfärg i panelen Egenskaper. Konvertera cirkeln till en grafiksymbol och ge den namnet Cirkel. 3. Markera bildruta 20 i tidslinjen och tryck F6 för att infogat en nyckelbildruta där. Nu när du har infogat en nyckelbildruta är det en fördel att också göra den förändring som du vill ska ske vid den här punkten. Eftersom du vill att bollen ska studsa till motsatt sida av scenen, flyttar du därför cirkeln dit samtidigt som du har den nyinfogade nyckelbildrutan markerad i tidslinjen. 4. Välj markeringsverktyget, klicka och dra cirkeln till motstående sida av scenen. Klicka på bildruta 1 i tidslinjen för att se skillnaden. Skandinaviska Databöcker AB Flash CS3 49