Högskolan i Halmstad Multimedia och visuell kommunikation Övning 2 Adobe Flash, interaktiva knappar inklusive ljud och video

Transkript

1 Högskolan i Halmstad Multimedia och visuell kommunikation Övning 2 Adobe Flash, interaktiva knappar inklusive ljud och video Efter övningen förväntas du kunna: Skapa interaktiva knappar för navigation i tidslinjen samt för navigation till en annan URL. Skapa interaktiva knappar för att spela upp video och ljud. 1. Lägg in en bakgrundsbild eller ändra bakgrundsfärg på scenen. Detta kan göras på två sätt: a. Ändra färgen under Stage i Properties. Döp om layer 1 till knappar. b. Rita en fyrkant med rectangle tool (R). Döp lagret till bakgrund och lås det. Skapa ett nytt lager och döp det till knappar. 2. Skapa en knapp: a. Välj Insert New symbol b. I rutan som öppnas, döp symbolen till ShapeTweenBtn. c. Välj Button under Type. Klicka på OK. d. Notera att det i övre vänstra hörnet nu står Scene 1 ShapeTweenBtn. Det innebär att du är inne i din nya knapp. Notera även att tidslinjen ser annorlunda ut än vanligt där står Up, Over, Down och Hit. e. Klicka i framen under Up. Rita en fyrkant. f. Skapa ett nytt lager. I det nya lagret, använd Text Tool (T) och skriv Shape tween ovanpå fyrkanten du nyss ritade. g. Klicka på Scene 1 i övre vänstra hörnet för att återvända till scenen. 3. Upprepa steg 2 och skapa fyra knappar till. Döp dem till FrameBtn (skriv texten Frame i steg f), LinkBtn ( Link ), SoundBtn ( Sound ) och VideoBtn ( Video ). 4. Om du inte har gjort det redan, återvänt till scenen. Ta tag i var och en av knapparna i biblioteket och dra ut dem på scenen (klicka, håll och dra), i lagret knappar. 5. Ge knapparna instansnamn: a. Medan du är på scenen, klicka (en gång) på ShapeTweenBtn. I Properties-panelen, skriv shapetweenbtn där det står <Instance Name>. b. Gör samma sak för de andra knapparna (döp FrameBtn till framebtn, LinkBtn till linkbtn osv.).

2 6. Instansnamnen är vad ActionScript 3.0 använder för att veta vilken symbol du vill lägga till kod på. Eftersom du i följande övningar kommer att lägga på kod på knapparna behöver de därför instansnamn om du inte lägger till kod så behöver du heller inte ange instansnamn. 1. Skapa en ny symbol, ett Movie Clip. Välj själv ett passande namn. 2. När du är inne i ditt nya movie clip ser du att den har en egen tidslinje. Där är det tänkt att du ska skapa en shape tween precis som du gjorde i förra övningen när du lärde dig göra tweens. Kommer du inte ihåg hur man gör, gå till den övningen och repetera. 3. Återvänd till scenen. Dra ut ditt nya movie clip från biblioteket till scenen. Ge den instansnamnet shape (precis som du gjorde med knapparna ovan). 4. Gå in i knappen ShapeTweenBtn. Detta kan du göra på två olika sätt: Dubbelklicka på ShapeTweenBtn på scenen. Ta fram biblioteket (klicka på Library ) om du inte redan har det öppet. Högerklicka på ShapeTweenBtn och välj Edit. 5. Skapa en ny keyframe under Over på båda lagren. Ändra färg på fyrkanten. 6. Klicka på Ctrl + Enter. För muspekaren över ShapeTweenBtn och se att färgen ändras. De fyra olika lägen som knappen har (Up, Over, Down, Hit) är olika stadier för knappen. Over-läget visas alltså när du för muspekaren över knappen. 7. Stäng preview-rutan som öppnades. Nu ska vi göra så att ditt movie clip bara spelas upp efter att du klickat på ShapeTweenBtn. Börja med att återvända till scenen om du inte är där redan. 8. Gå in i ditt movie clip. 9. Skapa ett nytt lager. Döp det till Actions. Högerklicka på frame 1 på actions-lagret, eller markera frame 1 och klicka på F I actionspanelen som visas, skriv stop();. 11. Tryck på Ctrl + Enter för att testa. Nu ska ditt movie clip inte röra på sig alls.

3 12. Återvänd till scenen. Klicka en gång på ShapeTweenBtn för att markera den. Gå in på Code Snippets (välj Code Snippets i menyn på sidan, eller gå in på Window Code Snippets). Välj Event Handlers och dubbelklicka på Mouse Click Event. ActionScript-rutan visas och där ligger nu lite kod. 13. Tryck på Ctrl + Enter. Klicka på ShapeTweenBtn och se vad som händer. Om allt går som det ska så bör det skrivas ut Mouse clicked i Output-rutan (där tidslinjen vanligtvis är). 14. För att få movie clip:et att spelas upp när du trycker på knappen måste du byta ut den kod som står inom { i den funktionen som skapades. Istället för trace("mouse clicked");, skriv shape.play();. I detta fall är shape det instansnamnet du gav ditt movie clip tidigare (se punkt 3 i denna övning). Stämmer allt ska det se ut så här: shapetweenbtn.addeventlistener(mouseevent.click, fl_mouseclickhandler); function fl_mouseclickhandler(event:mouseevent):void { shape.play(); 15. Tryck på Ctrl + Enter och testa knappen igen. Nu ska ditt movie clip spelas upp en gång när du trycker på ShapeTweenBtn. 1. Ibland vill man kontrollera vilken frame som spelas upp det är inte alltid man vill att alla frames ska spelas upp direkt. Du ska nu lära dig navigera mellan frames. 2. När du är på scenen, markera frame 1 på action-lagret och klicka på F9. På en tom rad (förslagsvis högst upp), skriv stop();. 3. På ett nytt lager, skapa en tween av något slag som startar på frame 2 och tar minst 10 frames (om du inte kommer ihåg hur man gör kan du repetera förra övningen). 4. Om du nu klickar på Ctrl + Enter kommer inte din nya tween att spelas upp detta är ju för att du skrev stop(); på frame Markera FrameBtn och (precis som du gjorde tidigare) gå in på Code Snippets Event Handlers Mouse Click Event. ActionScipt-rutan öppnas och ny kod har lagts till. 6. Istället för trace-funktionen, skriv gotoandplay(2);. Stämmer allt ska det se ut så här:

4 framebtn.addeventlistener(mouseevent.click, fl_mouseclickhandler_2); function fl_mouseclickhandler_2(event:mouseevent):void { gotoandplay(2); 7. Tryck på Ctrl + Enter och testa din knapp. Nu ska din nya tween spelas upp när du klickar på knappen. 8. Återvänt till actionpanelen. Byt gotoandplay(2); till gotoandstop(2);. Testa och se vad som är skillnaden. 9. Funktionerna gotoandplay() och gotoandstop() säger till Flash att den ska gå till en viss frame och fortsätta spela upp resterande frames (gotoandplay) eller gå till en viss frame och stanna där (gotoandstop). I fallet ovan går vi till frame nummer Du ska nu göra så att en knapp öppnar en länk i webbläsaren. Markera knappen LinkBtn på scenen och gå till Code Snippets Actions Click to Go to Webpage. 2. Tryck på Ctrl + Enter och testa din knapp. Om allt fungerar som det ska så öppnas Adobes webbsida i webbläsaren. 3. För att öppna en annan sida är det bara att byta ut länken inom i koden. function fl_clicktogotowebpage(event:mouseevent):void { navigatetourl(new URLRequest(" "_blank"); 1. Du ska nu testa på två olika sätt att spela upp ljud på. Börja med att skapa ett nytt lager (i scenen) och döp det till ljud. 2. Importera filen Slide.mp3 till biblioteket (File Import Import to Library ). 3. Markera frame 1 i ljud-lagret. Under sound i Properties välj ditt ljud (det går även bra att dra ljudfilen från biblioteket till scenen). 4. Tryck Ctrl + Enter och hör att ljudet spelas. 5. Radera lagret med ljudet på. 6. Gå in i knappen SoundBtn. Skapa ett nytt lager och döp även detta till ljud. 7. Skapa en ny keyframe under Down. Lägg in ljudet där (på samma sätt som i steg 3). 8. Lägg in en ny frame även på de övriga lagren i knappen (högerklicka Insert Frame).

5 9. Tryck Ctrl + Enter och testa din knapp. Om allt stämmer ska ljudet spelas upp när du klickar på knappen. 10. I steg 2 importerade du ljudet detta är något som är enkelt att göra när man har små filer (som Slide.mp3). Även grafik går alldeles utmärkt att importera på detta sätt. När man använder större filer (som t.ex. längre ljud- och videofiler) är det inte alltid bra att importera dem eftersom Flash-filen blir för stor. Det går att spela upp ljud med ActionScript utan att importera dem, vilken du ska göra i nästa övning nedan. 1. Återvänd till scenen. Skapa ett nytt lager och döp det till ljud. 2. Skapa två nya knappar, döp dem till PlayBtn (glöm inte instansnamn playbtn ) och PauseBtn (instansnamn pausebtn ). Precis som tidigare, rita en fyrkant och skriv en passande text (på ett eget lager) under Up. 3. Gå till actions på frame 1 och klistra in följande: var s:sound = new Sound(new URLRequest("Pale Rider.mp3")); var channel:soundchannel; var musicon:boolean = false; //Adds event listeners playbtn.addeventlistener(mouseevent.click, onsound); pausebtn.addeventlistener(mouseevent.click, offsound); //Plays music function onsound(e:mouseevent):void { if(!musicon) { channel = s.play(); //Stops music function offsound(e:mouseevent):void { channel.stop(); Här är det viktigt att filen Pale Rider.mp3 ligger i samma mapp som din FLA-fil. 4. Vad allt detta innebär är lite för mycket för omfattningen av denna övning, men här är en snabbgenomgång: första delen laddar in ljudet; andra delen lägger till event listeners för när användaren klickar på knapparna; tredje delen är de funktioner som hanterar eventen (när användarna klickar på knapparna), d.v.s. spelar upp eller stoppar ljudet. 5. Om allt fungerar som det ska så bör ljudet spelas upp när du klickar på PlayBtn, och stoppas när du klickar på PauseBtn. 6. Det går även att bara ha en knapp som sköter uppspelandet och pausandet den koden kan du lätt fixa själv genom att gå in på Code Snippets Audio and Video Click to Play/Stop Sound.

6 1. Du ska nu importera en flashvideo och lägga in den i din Flash-fil så att användaren kan titta på den. Gör följande: 2. Skapa ett nytt lager och döp det till video. Gå till Components (knappen under Code Snippets, via Window Components, eller klicka på Ctrl + F7) och lägg till en FLVPlayback, d.v.s. Components Video FLVPlayback (dubbelklicka på FLVPlayback). 3. Ge den instansnamnet vidplayer (i Properties, som vanligt). 4. Gå till actions och klistra in följande: videobtn.addeventlistener(mouseevent.click, vid); //Instance name of video button function vid(e:event):void { vidplayer.source = "scooter.flv"; //Sets video source Här är det viktigt att filen scooter.flv ligger i samma mapp som din FLA-fil. 5. Testa filmen. Många bra tutorials: Ännu fler tutorials: Hur du lägger in en Flash swf-fil på en webbsida (bläddra ner till Display Flash ): Bra e-bok om ActionScript 3.0: Googla