Exempel: Del i animeringsportfolio (Flash Professional)

I det här exemplet får du en första möjlighet att lära dig hur du sätter samman bitar av ActionScript till ett fullständigt program. Det här kodstycket är ett exempel på hur du kan ta en befintlig linjär animering och lägga till några små interaktiva element. Du kan till exempel bygga in en animering som har skapats för en kund i en onlineportfölj. Det interaktiva beteendet som du lägger till i animeringen inbegriper två knappar som användaren kan klicka på: en för att starta animeringen och en för att navigera till en separat URL (som portföljmenyn eller författarens hemsida).

Processen med att skapa den här lilla biten kan delas upp i följande huvudavsnitt:

  1. Förbereda FLA-filen för att lägga till ActionScript och interaktiva element.

  2. Skapa och lägga till knapparna.

  3. Skriva ActionScript-koden.

  4. Testa programmet.

Förbereda för att lägga till interaktivitet

Innan du kan lägga till interaktiva element i animeringen bör du förbereda FLA-filen genom att skapa vissa platser där det nya innehållet kan infogas. I detta ingår att skapa faktiskt utrymme på scenen, där knapparna kan placeras. Det inbegriper även att skapa ”utrymme” i FLA-filen så att olika objekt kan hållas isär.

Så här förbereder du FLA-filen för att lägga till interaktiva element:

  1. Skapa en FLA-fil med en enkel animering, till exempel en rörelseinterpolering eller en forminterpolering. Om du redan har en FLA-fil med den animering som du visar i projektet öppnar du den filen och sparar den med ett nytt namn.

  2. Bestäm var på skärmen du vill att de två knapparna ska visas. En knapp används för att starta animeringen och den andra för att länka till författarens portfölj eller hemsida. Om det är nödvändigt kan du rensa eller lägga till utrymme på scenen för det nya innehållet. Du kan skapa en startbild i den första bildrutan om animeringen inte innehåller någon sådan. I så fall vill du förmodligen flytta animeringen, så att den börjar vid bildruta 2 eller senare.

  3. Lägg till ett nytt lager ovanför de andra lagren i tidslinjen och ge det namnet buttons . Det är i det här lagret du ska lägga till knapparna.

  4. Lägg till ett nytt lager ovanför buttons-lagret och kalla det actions . I det här lagret lägger du till ActionScript-kod i programmet.

Skapa och lägga till knappar

Sedan skapar och placerar du knapparna som utgör själva stommen i det interaktiva programmet.

Så här skapar och lägger du till knappar i FLA-filen:

  1. Använd ritverktygen och skapa den första knappens utseende (knappen ”play”) på lagret buttons. Du kan till exempel rita en vågrät oval med text ovanpå.

  2. Använd markeringsverktyget för att markera alla grafikdelar i knappen.

  3. Välj Ändra > Konvertera till symbol på huvudmenyn.

  4. I dialogrutan väljer du Knapp som symboltyp, ge symbolen ett namn och klicka på OK.

  5. När knappen är markerad ger du den förekomstnamnet playButton i egenskapsinspektören.

  6. Upprepa steg 1 till 5 för att skapa knappen som tar användaren till författarens hemsida. Ge knappen namnet homeButton .

Skriva koden

ActionScript-koden för det här programmet kan delas upp i tre funktionsuppsättningar, även om all kod införs på samma plats. De tre saker som koden utför är:

  • Stoppa spelhuvudet så snart som SWF-filen lästs in (när spelhuvudet kommer till bildruta 1).

  • Lyssna efter en händelse som startar uppspelningen av SWF-filen när användaren klickar på knappen Spela upp.

  • Lyssna efter en händelse som skickar webbläsaren till rätt URL när användaren klickar på författarens hemsidesknapp.

Så här skapar du kod som stoppar spelhuvudet när det kommer till bildruta 1:

  1. Markera nyckelbildrutan i bildruta 1 på åtgärdslagret.

  2. Om du vill öppna åtgärdspanelen på huvudmenyn väljer du Fönster > Åtgärder.

  3. Ange följande kod i skriptrutan: 

    stop();

Så här skriver du kod som startar animeringen när du klickar på Spela upp:

  1. I slutet av koden som anges i föregående steg lägger du till två tomma rader.

  2. Ange följande kod längst ned i skriptet: 

    function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}

    Den här koden definierar funktionen startMovie() . När startMovie() anropas resulterar det i att huvudtidslinjen börjar uppspelningen.

  3. På raden som kommer efter koden som lagts till i föregående steg skriver du in följande kodrad: 

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    Den här kodraden registrerar funktionen startMovie() som en avlyssnare för händelsen click till playButton . Det betyder att när någon klickar på knappen playButton anropas funktionen startMovie() .

Så här skriver du kod som skickar webbläsaren till en URL när du klickar på hemsidesknappen:

  1. I slutet av koden som anges i föregående steg lägger du till två tomma rader.

  2. Ange den här koden längst ned i skriptet: 

    function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}

    Den här koden definierar funktionen gotoAuthorPage() . Den här funktionen skapar först en URLRequest-instans, som representerar webbadressen http://example.com/. Sedan skickas webbadressen till funktionen navigateToURL() , vilket innebär att användarens webbläsare öppnar adressen.

  3. På raden som kommer efter koden som lagts till i föregående steg skriver du in följande kodrad: 

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    Den här kodraden registrerar funktionen gotoAuthorPage() som en avlyssnare för händelsen click till homeButton . Det betyder att när någon klickar på knappen homeButton anropas funktionen gotoAuthorPage() .

Testa programmet

Nu fungerar programmet som det ska. Låt oss testa och se om det fungerar.

Så här testar du programmet:

  1. Välj Kontroll > Testa filmen. SWF-filen skapas i Flash Professional och öppnas i ett Flash Player-fönster.

  2. Testa att båda knapparna fungerar som du tänkt dig.

  3. Om de inte fungerar kan du kontrollera följande:

    • Har båda knapparna tydliga förekomstnamn?

    • Använder metodanropen för addEventListener() samma namn som knapparnas förekomstnamn?

    • Används rätt händelsenamn i metodanropen för addEventListener() ?

    • Har rätt parameter angetts för varje funktion? (Båda metoderna måste ha en enda parameter med datatypen MouseEvent.)

    Alla dessa fel (och de flesta andra tänkbara fel) ger upphov till ett felmeddelande. Felmeddelandet kan visas antingen när du väljer kommandot Testa filmen eller när du klickar på knappen samtidigt som du testar projektet. Du kan kontrollera kompileringsfel på panelen Kompilatorfel (de som inträffar när du först väljer Testa filmen). Använd utdatapanelen för att kontrollera körningsfel som inträffar när innehållet spelas upp, till exempel när du klickar på en knapp.