MACROMEDIA FLASH MX 2004 Peter Stenlund, Presens Design Version 2005-04-20 Får endast användas i privat bruk För att få ut det mesta av denna kurs bör du behärska fönster- och filhantering, ordbehandling och Internet. Helst bör du också ha provat på enkel bild- och musikhantering och HTML/hemsideproduktion. Det är utmärkt om du jobbat med något vektor/objektorienterat ritprogram. I vissa fall kan skärmdumparna vara hämtade från en tidigare version. I dessa fall är det ingen större skillnad mellan versionerna. Vad är egentligen Flash De sista åren har företaget Macromedias program Flash blivit något av en standard när det gäller att skapa liv och rörelse till websidor. Flash är ett vektorbaserat ritprogram med möjlighet att jobba med lager samt importera pixelgrafik. Så långt gör Flash samma sak som de stora vektorbaserade ritprogram som finns på marknaden (Corel Draw, Adobe Illustrator samt Macromedia Freehand). Är du bekant med någon av dessa har du en stor fördel när det gäller att komma i gång med Flash. Det som skiljer Flash från dessa program är tidsaxeln, möjligheterna att importera ljud samt möjligheten att omvandla skapad vektorgrafik till animeringar och klickbara knappar samt koppla åtgärder till dessa. Dynamiken i Flash ligger i kombinationen av dessa i sig rätt enkla element. Liten filstorlek och flexibilitet två orsaker till programmets framgångar En stor orsak till framgången är att programmet genererar små filer med kort laddningstid. Detta är möjligt på grund av att programmet jobbar med vektorgrafik. Den andra orsaken till framgången är att Flash-filen trots den lilla filstorleken ger en större flexibilitet är t.ex. ett javascript idag gör. Du kan i Flash få helt flytande övergångar i både tid (animeringar) och rum (layoutdispositioner) samt kombinera detta med ljud och musik. Två typer av grafik Vektorgrafik Liten filstorlek Upplösningsoberoende Stelt (passar till grafisk design) Program: Corel Draw, Illustrator, Freehand I Flash som grafik Pixelgrafik. Ofta större filstorlek Upplösningsberoende Levande (passar till foton och målningar) Program: Photoshop, Paint Shop Pro I Flash som importerade bitmappar 1
Vad är det du ser när du startar programmet MX 2004? Tidsaxeln med aktuell nyckelbild (jmf filmruta) markerad Verktygslådan: Här finns verktygen att påverka grafiken på scenen Scenen: Här lägger du objekten Olika paneler. Den viktigaste är Properties och ligger nederst Du som är van vid något vektorbaserat rit- eller layoutprogram känner du igen verktygslådan och scenen (papperet, ritytan). Tidsaxeln hittar du även i film- (t.ex. Adobe Premiere eller Pinnacle Studio) eller musikprogram (t.ex. Adobe Audition eller Steinberg Cubase). Som standard öppnas Flash med en scenstorlek (ritytan alltså) på 550 x 400 pixlar. Vill du ha annan storlek ändrar du det i Properties-panelen nederst Lassoverktyg: Markera delar av objekt Pilvertyget. Till att markera, flytta, storleksförändra och rotera grafik Delmarkeringsverktyget: Till att markera och ändra vektorkurvor/segment Pincett att suga upp färg från objekt Vyhanteringsverktyg Skaparverkyg; Linje att skapa räta linjer Stift till att skapa segment A till att skapa text Oval- och rektangel att skapa objekt med både fyllning och linje Pennan att skapa linjer på fri hand Penseln att skapa fyllning på fri hand Ändra-verktyg: Storleksförändra/rotera Ändra linje respektive fyllning på redan gjorda objekt. Aktuell linje och fyllning Suddgummi att sudda delar av objekt Alternativ till valt verktyg finns här och här nedanför 2
Skapa objekt Övning 1 Skapa en röd cirkel med en blå konturlinje Markera ovalverktyget. Gå till Propertiespanelen. Välj en blå färg och 10 punkters tjocklek på linjerutan och röd färg på fyllningsrutan (se bild nedan) Rita sedan en cirkel på scenen. Ett objekt = fyllning + linje Endast fyllningen markerad Endast linjen markerad Endast vissa delar av objektet markerat Hela objektet = fyllning + linje markerat Tjocklek på linje ställs in i Properties-panelen Markera och radera objekt och delar av objekt Prova att markera din cirkel. Klickar du med pilverktyget på fyllningen markeras bara fyllningen, klickar du på linjen markeras bara linjen. Vill du markera både fyllning och linje på en gång dubbelklickar du var som helst på objektet. Om du använder lassoverktyget eller drar en ruta med pilverktyget genom halva cirkeln markeras endast delar av den. Du avmarkerar genom att klicka var som helst utanför markerat objekt. Du tar bort objekt eller delar av objekt genom att markera dessa och trycka på tangenten Delete alternativt använda suddvertyget Övning 2 Skapa ett antal cirklar och testa ett markera dessa på alla ovan beskrivna sätt. Radera dem sedan. Övning 3 Flytta objekt Markera objektet med pilverktyget. Peka med spetsen på muspekaren mitt i objektet och dra. Storleksförändra objekt Markera objektet med pilverktyget. Klicka i Free transform-verktyget i verktygspanelen. Åtta rektanglar runt objektet dyker upp. Peka med spetsen av pilmarkören på någon av rektanglarna och dra. Smälta samman objekt med lika färg Skapa två röda cirklar med valfri konturlinje, Markera bara konturlinjen. Tryck på tangenten Delete. Nu har du två cirklar utan någon konturlinje. Dra den ena cirkeln så den skymmer den andra. Avmarkera allt. När du markerar igen märker du att cirklarna smält samman. Det finns även ett antal sätt att förhindra detta (bl.a. att lägga likadana objekt i skilda lager) 3
Avancerad redigering av objekt. Det finns ytterligare massor av sätt att skapa komplexa former men då tenderar denna kurs att bli en kurs i vektorgrafik och förändring av bezierkurvor därför nöjer vi oss här med att kunna skapa text och enkla objekt. Det finns en utmärkt handledning som följer med programmet om du vill fördjupa dig. Du hittar den under Hjälpmenyn. Själv skapar jag mer komplexa former i ett andra vektorbaserade program (Corel Draw eller Illustrator) jag behärskar bättre och kopierar sedan in objekten i Flash via klippbordet. 4
Symboler Skapa en rektangel med orange fyllning och blå konturlinje. Markera både fyllning och linje genom att dubbelklicka på den. Välj Modify-menyn Convert to symbol Nu dyker en egenskapsruta upp. Fyll i den som nedan. Markera rektangeln. Som du ser är markeringen nu annorlunda. Du kan inte längre separera linje och fyllning, sudda ut delar av den mm. Om man ska återanvända objekt flera gånger finns det skäl att konvertera den till symboler. Då behöver nämligen Flash inte spara en ny version för varje ny rektangel utan återanvänder symbolen. Så här ser en markerad symbol ut på scenen (till vänster) och i Windowsmenyn Library (till höger) Detta går till så att alla symboler lagras i ett bibliotek. Detta bibliotek hittar du under Windowsmenyn Library. Öppna detta och du ser symbolen där (se bild nederst föregående sida) Nu ska vi lägga upp fyra rektanglar på scen. Detta gör vi genom att med pilverktyget ta tag i symbolen i biblioteket och dra ut den på scenen. Upprepa detta tills du har fyra rektanglar på scenen. Prova lägg dem så de skymmer varandra. Som du ser smälter de inte ihop längre utan lägger sig istället ovanför och under varandra. Du styr vilken som ska ligga överst respektive underst genom Modifymenyn Arrange Förekomster Var och en av de fyra rektanglarna på scenen är en förekomst (eng. instance) av symbolen orange rektangel. Det betyder att de alla har sitt ursprung i symbolen men lever ett eget liv på scenen. Vi ska se hur. Övning 4: Klicka på vilken som helst av rektanglarna/förekomsterna. Titta på egenskapspanelen (Property) i fliken nedanför scenen. Välj i property-rutan Color: Tint Ställ det mittersta av RGB- reglagen (som styr det gröna i RGB ) på ca 62. Nu har fyllningen antagligen en annan färg. Markera nu en annan av förekomsterna och Välj alfa. Välj 40% och klicka OK 5
Nu blir förekomsten bara 40% synlig. Lägg den ovanför en annan av förekomsterna så ser du att den är genomskinlig. Klicka på ytterligare en av förekomsterna, välj storleksverktyget på verktygspanelen och förstora förekomsten. Klicka på den sista av förekomsterna och färga den med hjälp av förekomstpanelen på valfritt sätt Det kan då se ut som nedan. 4 förekomster utifrån samma symbol Relationerna grafik symbol förekomst Man skulle schematisk kunna beskriva grafik i Flash på nedanstående sätt. Modify- Convert to symbol. Förekomst Grafik Symbol Förekomst Förekomst Modify Break apart Förekomst För att kunna återanvända grafik måste den först konverteras till en symbol. Återanvändning sker sedan genom att utifrån en symbol dra ut förekomster (instance) på scenen och förändra dessa. Det finns två sätt att skapa symboler. Att först skapa grafik på scenen som man därefter genom Modify- Convert to symbol gör till symboler. Detta har vi testat i tidigare övningar. Att från början bygga upp grafiken inne i symbolen. Då startar man med en tom scen och väljer därefter Modify New symbol Välj Grafic. Nu är du inne i själva symbolen. Det ser du längst uppe till vänster. Om du dubbelklickar på en redan gjord symbol i biblioteket kommer du också in i symbolen och kan redigera en redan gjord symbol. Det är mycket viktigt att du har koll på om du är på scenen eller inne i en symbol när du skapar grafik i Flash. 6
Textverktyget När du skapar text grupperas texten på en gång. Du som är van vid Photoshop märker att det påminner redigeringsmöjligheterna i ett Textlager. Du kan alltså ändra färg och rätta stavfel men t.ex. inte sudda ut halva bokstäver. För att kunna göra detta måste du markera texten och välja Modifymenyn-Break apart två gånger. Nu förstår Flash inte längre att det är frågan om bokstäver och du kan t.ex. inte byta teckensnitt eller rätta stavfel däremot kan du sudda ut halva bokstäver mm. Text som delas upp två gånger och nu är grafik Text som delat upp en gång går redigera bokstav för bokstav Text som inte är delad upp (förhandsval) Övning 5 Skriv in lite text på scenen, storleksförändra, byt färg, rotera m.m. Dela upp texten och byt färg på endast vissa partier, sudda ut delar av texten tills du förstår principen med grupperad och icke grupperad text. 7
Övningar med symboler och förekomster Övning 6 Skapa tre valfria former med hjälp av oval och rektangelverktyget. Spara dessa som två symboler och dra ut ett valfritt antal förekomster som du ändrar och åstadkommer en bild som bygger på en färgmässig ide. (t.ex. komplementfärger eller många nyanser inom ett snävt område). Vad som menas med färgmässig ide framgår av bifogat häfte. Du kan även ändra bakgrundsfärgen på scenen i Properties-panelen I bilden ovanför har enbart symbolen orange rektangel används, men jag har använt 37 förekomster av denna. I Windowsmenyn Design Panels - Align kan du markera flera förekomster och få dem att linjera exakt eller hålla samma avstånd sinsemellan osv. Ett annat användbart tips är att använda rutnätet som visas genom Wiewmenyn Grid Show grid. Där kan du även göra nätet magnetiskt genom Viewmenyn - Grid Edit grid - Snap to grid. Färgen på rutnätet kan du påverka där. I bilden nedan har jag utgått från 2 symboler, en blå cirkel och en röd kvadrat. Hela bilden är uppbyggd av förekomster utifrån dessa två symboler, förekomsterna är roterade, färgförändrade, storleksförändrade m.m. Den färgmässiga iden är massor av blå och rödbruna toner med en liten gul krydda. 8
Lager Har du jobbat med Photoshop är du redan bekant med lager. Lager kan liknas vi ett antal OH-blad som staplas på varandra. Aktivt lager är mörkt. I detta fall innehåller lagret den blå texten hej. Vill du byta ordning på lagren tar du tag i lagret och drar det. Genom att dubbelklicka på lagernamnet kan du döpa om lager Genom att klicka på ögat och låset kan man göra lagren synliga/osynliga samt redigerbara/icke redigerbara Genom att klicka på + skapar du nya lager Klickar du på papperskorgen raderas markerat lager Övning 6 Scenen ovanför består av tre lager med cirkeln, texten och rektangeln i var sitt lager. Försök åstadkomma detta själv. Lägg till ytterligare lager, ta bort lager, byt ordning med lager och byt namn på lager tills du känner att du förstår principen. Även här finns det mycket mer att lära sig om lager men vi nöjer oss med detta så länge. 9
Tidslinjen och animering. Tidslinjen består av en matris rutor med möjlighet att lägga in bilder. Bildrutorna motsvarar en filmruta på en filmremsa. I filmsammanhang brukar man säga att det behövs 25 bilder i sekunden för att ögat ska uppfatta stillbilder som rörliga men i datasammanhang har man tummat på kraven och brukar nöja sig med 12 bilder/sekund. Det är också förhandsvalet i Flash. Vill man ändra bildhastighet ändrar man det i Ändramenyn Film På bilden nedan är stora delar av tidslinjen tom (i lager 4 är t.ex. hela rutmatrisen utom den första utan bildrutor). I tidlinjematrisen kan man lägga in två typer av bildrutor, nyckelbilder och vanliga bilder. Det görs i Insertmenyn > Timeline > Frame och Keyframe. I tidslinjen markeras nyckelbildrutor med en tom eller fylld ring nertill. Tom ring betyder att scenen i den aktuella nyckelbildsrutan är tom och fylld ring indkerar på att det finns något på scenen i den aktuella nyckelbildsrutan. Det är bara i nyckelbilder man kan påverka vad som händer på scenen. Vanliga bildrutor används anpassa längden på filmen samt för att behålla ett objekt på scenen under längre tidsrymd. Nyckelbild med något på scenen Matris med bildrutor Matris utan bildrutor Nyckelbild utan något på scenen Uppspelningsmarkör Vi ska titta närmare lite på animeringen nertill som beskriver scenen vid ruta 4 (där uppspelningsmarkören är) I lager 4 finns just denna ruta bara tom matris. Det finns alltså inget där i lager 4. I lagret landskap syns de objekt (gräset och träden) man placerade in i nyckelbildrutan i filmens ruta 1. Detta objekt går alltså inte redigera från ruta 4 eftersom det inte finns någon nyckelbild där, däremot är det ju nödvändigt med en bildruta eftersom landskapet ska finns i bakgrunden under hela filmsekvensen. I lagret boll finns däremot en nyckelbild med fylld ring, det betyder att det finns något på scenen som är möjligt att redigera (den gula bollen). Detta lager är exempel på en steg för steg animering. I lagret bil finns inte heller någon nyckelbild, däremot finns det en nyckelbild både i ruta 1 och 5. I ruta 1 befinner sig bilen till vänster på scenen och i rutan 5 befinner sig bilen till höger på scenen. I rutorna däremellan (2-4) räknar datorn ut ett medelvärde mellan de två positionerna. Detta gör att man kan få bilen att köra från väster till höger utan att flytta den bild för bild. Detta är inte bara en arbetsbesparande animering utan också en animering som skapar små filer. Interpolerad animering kallas denna typ av animering. 10
Tre typer av animeringar Det finns tre typer av animeringar i Flash: Steg- för-steg animering Både grafik och symboler/förekomster kan steg-för-steg animeras. Rörelse-interpolering Endast symboler/förekomster kan rörelseinterpoleras Figur-interpolering Endast grafik kan figurinterpoleras Steg för steg-animering 1.Skapa en valfri symbol och placera den på scenen eller rita lite grafik på scenen. 2. Skapa en ny nyckelbild i ruta 2. Detta görs med Insertmenyn Timeline Keyframe eller genom att trycka på tangenten F6. En ny förekomst eller kopia av grafiken från ruta 1 läggs då automatiskt i rutan 2. 3.Markera och flytta förekomsten/grafiken lite åt höger. 4.Skapa ytterligare en ny nyckelbild i ruta 3. Detta görs med Insertmenyn Timeline Keyframe eller genom att trycka på tangenten F6. En ny förekomst eller kopia av grafiken från ruta 2 läggs då automatiskt i rutan 3. 5. Markera och flytta förekomsten/grafiken lite åt höger. 11
6.Fortsätt på detta sätt tills du har cirka 10 rutor. Du har nu en knapp sekund lång film (12 rutor = 1 sekund). 7. Nu är det dags att testa animeringen. Det finns olika sätt att spela upp animeringar. Alternativ a/ Ta tag i den röda uppspelningsmarkören och dra den över tidslinjen Alteranatv b/ Tryck på tangenten Enter Alternativ c/ Öppna Controlmenyn Test movie (i detta fall loopar animeringen (det vill säga att när filmen kommit till sista rutan börjar den om med första rutan igen) i ett eget fönster) 8. När du testat att det fungerar kan du bort hela animeringen genom att markera alla nyckelbilder i tidslinjen och klicka på tangenterna SHIFT + F6. Då omvandlas nyckelbildsrutorna till bildrutor. Du kan nu åter markera alla bildrutorna och klicka på tangenterna SHIFT + F5. Då tar du bort även bildrutorna och har en tom matris utan vare sig nyckelbildsrutor eller bildrutor. Du infogar ånyo bildrutor med tangenten F5 och nyckelbildrutor med tangenten F6. Rörelseinterpolerad animering (lilafärgade pilar och symboler/förekomster). 1.Välj en ny film genom Filemenyn New New Flashdokument 2.Skapa en ny symbol och lägg en förekomst på scenen. Skapar du bara grafik kommer det inte att fungera. 3.Markera ruta 1 i tidslinjen och tryck på tangenten F5 för att lägga till en ny ruta. Fortsätt att lägga till cirka 15-20 rutor. Du har nu skapat en cirka 1,5 sekund lång film. 4. Markera första bildrutan så att det Frame är aktivt i Properties-panelen längst ner. Du hittar också då där Tween:none. 5.Ändra till Tween: Motion. Filmmarkeringen uppe i tidslinjen blir nu lilafärgad med en prickad rand i mitten. 6. Markera ruta 17. Infoga en nyckelbildsruta (tangenten F6). Flash lägger då en ny förekomst av symbolen från nyckelbildsruta 1 i nyckelbildsruta 17 och den prickade linjen blir heldragen med en pil. 12
7. Redigera förekomsten i ruta 17 på valfritt sätt samt flytta den till en valfri ny position på scenen. 8. Provkör animeringen, gärna på alla de 3 sätt du fick lära dig i steg-för-steg animeringen. Som du ser räknas Flash ut förekomsternas mellanpositioner mellan de båda nyckelbildsrutorna. Det går alltså endast påverka förekomsterna i dessa två rutor. Vill du påverka förekomsterna i någon annan bildrutan måste du först infoga en ny nyckelbildsruta där. Figurinterpolerad animering (grönfärgade pilar och grafik). 1.Välj en ny film genom Filemenyn New New Flashdokument 2.Skapa någon typ av grafik på scenen. Använder du en symbol/förekomst kommer det inte att fungera. 3.Markera ruta 1 i tidslinjen och tryck på tangenten F5 för att lägga till en ny ruta. Fortsätt att lägga till cirka 10 rutor. Du har nu skapat en cirka 1 sekund lång film. 4. Markera första bildrutan så att det Frame är aktivt i Properties-panelen längst ner. Du hittar också då där Tween:none. 5.Ändra till Tween: Shape. Filmmarkeringen uppe i tidslinjen blir nu grönfärgad med en prickad rand i mitten. 6. Markera ruta 10. Infoga en nyckelbildsruta (tangenten F6). Flash lägger då en kopia från grafiken i nyckelbildsruta 1 i nyckelbildsruta 10 och den prickade linjen blir heldragen med en pil. 7. Redigera grafiken i ruta 10 genom att sudda bort vissa delar eller dra i kurvnoderna så den ändra form. 8. Provkör animeringen. Som du ser räknas Flash ut förekomsternas mellanpositioner mellan de båda nyckelbildsrutorna. Det går alltså endast påverka grafiken i dessa två rutor. Vill du påverka grafiken i någon annan bildruta måste du först infoga en ny nyckelbildsruta där. Testa dessa tre typer av animeringar tills du behärskar animeringstekniken. Det är viktigt för fortsättningen. Prova också att i efterhand lägga till och ta bort bildrutor och nyckelbildsrutor och se hur det påverkar de olika animeringteknikerna. Blanda också de tre olika animeringsteknikerna i en och samma film. 13
Skapa knappar En knapp är en typ av symbol. Sedan tidigare har du ju skapat symbolen orange rektangel där beteendet var grafik. Välj Infoga-menyn och Ny symbol Denna ruta kommer då upp. Fyll i den som nedan och klicka OK. Nu kommer du in i symbolen redigeringsläge. Redigeringsläget skiljer sig från scenen genom att du har ett markeringskors i mitten på redigeringsytan och att du ser namnet på symbolen uppe till vänster. Korset markerar centrum på den blivande symbolen. För att komma tillbaka till den vanliga scenen klickar du på Scen1 uppe till vänster. Specifikt för redigeringsläget för knappar är att tidslinjen är utbytt mot fyra knapplägen. Dock fungerar knappläget precis som tidslinjen med bilder och nyckelbilder. Här ser du att du är i symbolens redigeringsläge och inte på scenen. Skilj på redigeringsläget och scenen!!! För att skapa en knapp skapar du alltså en nyckelbildsruta (F6) för vart och ett av de fyra lägena och placerar något på scenen. Upp-läget Tvärs över-läget Ner-läget Träff-läget Så här ser knappen ut när muspekaren inte befinner sig ovanför träffläget Så här ser knappen ut när muspekaren befinner sig över träffläget Så här ser knappen ut nät man håller musknappen nertryckt över träffläget Här bestämmer du vilken area som ska vara träffläge 14
Lägg valfria former till de fyra träfflägena. När du lagt in nyckelbilder och skapat grafik till de fyra träfflägena återgår du till scenen genom att klicka på scen1 uppe i vänstra hörnet. Du kommer nu tillbaka till scenen. Din knapp-symbol hittar du i biblioteket och kan i vanlig ordning dra ut förekomster på scenen. Gå till biblioteksfönstret och dra in en förekomst av knapp-symbolen min egen knapp på scenen. För att kunna kontrollera om knappen fungerar måste du aktivera knappen. Det gör du i Controlmenyn Enable simple buttons. Tag också för vana att alltid testköra dina filmer via Control menyn och Test movie. Det är egentligen bara det som händer här du kan lita på. Åtgärder Tänk dig att du gjort en enkel animation på 10 rutor med en boll som rullar från vänster till höger. I ruta 1 befinner sig bollen till vänster och i sista ruta 10 befinner bollen till höger. Om du testkör denna film i Controlmenyn Test movie kommer filmen att loopa, d.v.s bollen kommer att rulla från vänster till höger (ruta 1-10) och sedan hoppa tillbaka till väster (när filmen tar slut på ruta 10 börjar den om med ruta 1) och rulla till höger, hoppa tillbaka till vänster, rulla till höger o.s.v i all evighet. När man vidtar åtgärder i verkliga livet bryter man ett passivt pågående förlopp (man klipper naglarna som annars bara skulle växa och växa eller målar om huset som annars bara skulle förfalla och förfalla) med en aktiv åtgärd. Det är på samma sätt i Flash, man ligger in åtgärder (eng. actions) för att bryta ett annars passivt loopande förlopp. Det kan handla om att stoppa en film på en viss ruta eller ge besökaren möjlighet att starta ett alternativt förlopp genom att klicka på en knapp. Vi ska nedan göra en mycket enkel interaktiv film. 1.Börja med att skapa en valfri knappsymbol. 2.Gör därefter en enkel film bestående av två nyckelbildsrutor. I ruta 1 skriver du för att senare kunna orientera dig in texten Detta är ruta ett och i ruta två skriver du in texten Detta är ruta två, Lägg också in en förekomst av knappsymbolen i varje bildruta. Det bör då se ut som nedan (där visas ruta 1). 3. Testa filmen genom att köra den i Controlmenyn > Test movie. Som du märker spelas först rutan 1 upp, sedan rutan 2 och sedan rutan 1 igen o.s.v. Det beror på att när filmen kommit till sista bildrutan börjar den om från början igen. Man säger att filmen loopar. Med åtgärder kan man alltså bryta detta evigt pågående förlopp. I Flash kan åtgärder kopplas till två saker: bildrutor (genom att något händer när filmen kommer fram till en viss bildruta) objekt (genom att något händer när man t.ex. trycker på knapp eller en tangent) Vi ska med hjälp av en åtgärd bryta det loopande förloppet vår film genom att hindra filmen att ta sig från ruta 1 till ruta 2. Det gör vi genom att lägga in en stopp-åtgärd som utförs när filmen kommer till ruta 1. 4. Skapa först ett nytt lager och döp det till åtgärder. 15
5. Se sedan till att bildruta 1 i lagret åtgärder är markerad och kontrollera i panelen Actions nertill och att det där står Frame. 6.Välj i Actions-panelen Global Functions > Timeline control > Stop. Dubbelklicka på stop. Nu lägger Flash in stop(); i scriptrutan och ett a dyker opp i bildruta 1 på tidslinjen. 7. Skapa en nyckelbild i lagret åtgärder på ruta två och lägg även där en stopåtgärd på bildrutan. Har du gjort rätt bör det se ut som nedan (bildruta 2 visas där). a markerar att en åtgärd är kopplad till bildrutan 5. Kontrollera att det står Frame och inte Object här Stopp-åtgärd i scriptrutan 8. Testkör filmen. Har du gjort rätt stannar nu filmen på ruta 1 eftersom vi där lagt en stopåtgärd som hindrar filmen att ta sig till ruta 2. Skulle vidare filmen av något outgrunderlig anledning ta sig till ruta 2 skulle den fastna även där eftersom vi lagt en stoppåtgärd även på denna ruta. Vi har alltså gjort en ganska meningslös film som fastnar på bildruta 1 och sedan händer inget mer. Vi ska dock lösa det hela genom att koppla åtgärder till knappförekomsterna i ruta 1 och 2. 9.Markera knappförekomsten i ruta 1 och kolla att det verkligen står Action Button så du inte kopplar åtgärden till bildrutan istället för knappen. Detta är superviktigt och lätt att missa! Åtgärder kopplade till objekt måste till skillnad från bildrutor göras i två steg. Vi måste ange både hur ska knappen beröras för att åtgärden ska utlösas och vilken åtgärd ska utlösas. När det gäller bildruteåtgärder behöver man ju inte tala om hur, när filmmarkören kommit fram till den aktuella bildrutan utförs helt enkelt åtgärden. 10. Vi börjar alltså med att tala om hur knappen ska beröras. Dubbelklicka på Global functions > Movie clip control> On. Du kan nu välja mellan ett antal alternativ. Dubbelklicka på release. 9. Kontrollera att det står Button här och inte Frame Vi har nu bestämt att när man med muspekaren klickat på knappen och släpper upp musknappen ska något utföras. Vi ska nu bestämma vad som ska utföras. 16
11. Flytta först markören mellan måsvingarna i scriptet. 12. Dubbelklicka sedan på Global functions > Timeline control > GoToAndPlay och skriv in 2. Du har nu sagt att när man släpper upp musknappen ska filmen gå till ruta 2. Har du gjort rätt bör det se ut som nedan. 13. Gör sedan samma sak med knappförekomsten i ruta 2 med den enda skillnaden att du här ska gå till ruta 1. 14. Testkör filmen. Har du nu gjort rätt ska du med hjälp av knappförekomsterna kunna klicka dig mellan filmens två rutor. Nedan följer en schematisk beskrivning av filmen och det vi gjort. Bildruta 1 innehåller 3 saker: Stopåtgärd på bildrutan som hindrar filmen att gå till bildruta 2 En knappförekomst med en åtgärd som ger möjlighet att gå till bildruta 2 Orienteringstexten Detta är ruta 1 Bildruta 2 innehåller 3 saker: Stopåtgärd på bildrutan som hindrar filmen att börja om på bildruta 1 En knappförekomst med en åtgärd som ger möjlighet att gå till bildruta 1 Orienteringstexten Detta är ruta 2 Kombinera symboler Strykan i Flash ligger mycket i att kombinera symboler. Till exempel kan man skapa mer levande knappar. 1. Skapa en filmklippssymbol Välj Insertmenyn > New symbol och välj Movie clip som beteende. Döp filmklippet till min egen filmsnutt 17
Du kommer nu in i redigeringsläget för filmklipp. Redigeringsytan är som sagt förvillande lik scenen, tidslinjen och lagren finns där, det är bara hålkorsmarkeringen och länken uppe till vänster som skvallrar att detta inte är scenen (se sidan 6). Skapa en valfri enkel interpoleringsanimation och återgå sedan till scenen. Du har nu gjort animeringen inne i symbolen och inte på scenen så scenen bör vara tom. 2. Skapa en knapp där du infogar filmklippssymbolen i Tvärs över-läget Välj Insertmenyn - New symbol och välj Button som beteende. Döp knappen till min nya knapp Lägg in en valfri grafik på Över, Ner och Träff-läget. I Tvärs över-läget öppnar du biblioteksfönstret och infogar symbolen min egen filmsnutt Animeringen kommer alltså att visas först när du håller muspekaren ovanför träffläget. 3. Testa knappen genom att testköra filmen Återgå till scenen. Skapa en nyckelbild i ruta 1. Öppna symbolbiblioteket och dra in en förekomst av min nya knapp på scenen. Tyvärr kan du inte direkt se animeringen i tvärsöver-läget utan du måste köra en testfilm. Detta gör du genom att Controlmenyn > Test movie. Ta alltid för vana att testköra filmerna på detta sätt, först då kan du få en riktig uppfattning om hur det skulle se ut i någon annans dator. Det finns många fler sätt att kombinera animeringar, grafik och knappar men vi nöjer oss med detta så länge. 18
Ljud I Flash kan du också koppla ljud till filmrutor och objekt. Ljudet förbereder/skapar du i andra program och importerar det i Flash med File-menyn> Import Ljudet ska vara i wav (PC) - aiff (Mac) eller mp3-format. Det är lämpligt att lägga ljudet i ett eget lager på scenen. Det finns två typer av ljud: Händelseljud kopplas till enskilda nyckelbildsrutor, laddas in direkt (används t.ex. till knappljud ) Strömmande ljud behöver inte följa bildrutorna, laddas in eftersom (används t.ex. till bakgrundsljud, stämmingsskapande ljud och musik) Kort övning med ljud Välj ett ny film genom File-menyn New Skapa en nyckelbild i ruta 1. Gör en 40 bildrutor lång film (F5-tangenten) Återgå till nyckelbilden i ruta 1. Vi ska här använda två ljud som du importerar och lägger i din films bibliotek. Fråga läraren var du får tag i ljuden. Välj ljudet Beam Scan och dra ut en förekomst på scenen. På tidslinjen kan du se att ljudet är 25 rutor långt. Testspela det genom att trycka på Enter-tangenten. Skapa en nyckelbild i ruta 30 och infoga ljudet Book Drops där. Testspela tidslinjen. Ljudet Beam scan Ljudet Book drops 19
Även om ljudet Beam Scan hörs i 25 rutor är det ändå bara i nyckelbilden i ruta 1 du kan påverka ljudet. Markera rutan/ljudet och titta nere i Properties-panelen. Här kan du ange om ljudet ska vara ett händelseljud eller strömmande ljud och om det ska loppa eller repeteras ett visst antal gånger. Med effekt kan du påverka ljudet på en massa sätt, tona in och tona ut, låta det vandra mellan högtalarna o.s.v. Vill du skapa egna effekter klickar du på Edit och rutan Edit envelope öppnas (se nedan) Genom att dra i volymreglagen kan du tona ljudet på egna sätt Här finns ett antal förprogrammerade effekter höger och vänster kanal Vill du skapa egna ljud behöver du kunna enkel ljudredigering. Med lite kunskap kan du spela in eget ljud med mikrofon till ljudkortet eller omvandla musik på CD-skivor till mp3-filer som sedan kan importeras i Flash. Ett enkelt och bra shareware-program för musikredigering är Audiocity där du kan förbereda ljudsnuttar för Flash på samma sätt man i ett bildprogram kan förbereda bitmapbilder för import i Flash. 20
Exportera När man jobbar med digitala produktioner av olika slag brukar man skilja på skaparformat och distributionsformat. Skaparformat - fla Ett skaparformat bör vara maximalt flexibelt för att man ska kunna ändras och korrigeras i efterhand. Ofta vill man ha så hög kvalité som möjligt vad gäller upplösning och djup. Formaten oftast skapar stora filer och går inte öppna utan dyra program. Det är dock inte något stort problem då dessa filerna är främst avsedda att köras i producentens dator. Exempel å sådana format är Photoshops psd-format för bilder och musikprogammen Cubase och Logics filformat för musik. Flash skaparformat heter fla. Distributionsformat -swf Ett distributionsformat däremot bör skapa små filer. Därför har någon form av komprimering ägt rum. Formatet bör även ha stor acceptans bland allmänheten och kunna visas i gratisprogram typ webläsare eller liknande. I distributionsformaten vill producenter inte heller att filerna ska gå dissekera då det kan leda till förvanskning och problem med upphovsrätt m.m. Typiska distributionsformat är jpg för bilder, mp3 för musik, wma/quicktime för film och pdf för elektroniska dokument. Flash distributionsformat heter swf. Flash-produktioner som exporteras i swf-format kan köras i varje modern webläsare med Flash-plug in installerad. Jag hörde någon siffra på att 90-95 % av alla webläsare (2005) har aktiverat möjligheten. Med tiden kommer troligen funktionen att läsa swf-filer att byggas in direkt i webläsarna. Det är mycket enkelt att exportera en flashproduktion. Välj Filemenyn > Export> Export movie och välj lämplig mapp på din hårdisk och swf-format. Du får då upp nedanstående dialogruta. Här kan du ställa in en massa värden. Du har då en liten behändig Flash-fil som du kan infoga i ett HTML-dokument på samma sätt som en bild. Vill du ha hjälp med att skriva HTML-koden klickar du i Flash istället på File-menyn och Publicera. Utifrån valda inställningar skapar Flash då både HTML-filen som behövs och infogar automatiskt flashfilen. Swf-filerna blir oftast förvånansvärt små. Detta beror på att vektorbaserade symboler återanvänds i förekomster, bitmappar komprimeras till JPG-filer och wav-filerna görs om till mp3-format. 21