7. Hemsida del 2

I denna övning får du som vill, göra hemsidan lite roligare. Motion tween kommer användas, och du får lära dig att hantera knapptryckningar. Exemplet utgår från att du har flashsidan från exemplet om hemsida del 1 öppnat.

Först skall Motion tween användas för att få innehållet på sidan att röra sig vid tryck i menyn. Börja med att trycka CTRL + L för att visa Libraryt, dubbelklicka på Movieclipet innehall_ett i Libraryt. Du kan nu ändra i detta. Skapa en Keyframe i frame 5 genom att högerklicka i Timeline, i Dropdownmenyn som visas välj Insert keyframe. Högerklicka någonstans mellan frame 1 och 5, i Dropdownmenyn som visas välj Create motion tween. Markera sedan frame 1 och flytta innehållet en bra bit åt vänster, ca 1 dm. Det skall nu se ut som i bild 7.1.

Bild 7.1. Innehållet får en motion tween

Om du testar flashfilmen genom att trycka CTRL + ENTER kommer du se att innehållet inte slutar röra sig, utan åker in från vänster hela tiden i en sorts loop. ActionScript kan användas för att få Movieclippet att stanna där vi vill. Sätt in ett nytt lager genom att trycka på Insert layer under Timeline. I det nya lagret, Högerklicka i frame 5, i Dropdownmenyn som visas välj Insert keyframe. Högerklicka sedan i denna nya keyframe, i Dropdownmenyn som visas välj Actions. Skriv nu följande kod i fliken för Actions.

stop();

Kommandot stop() innebär att Movieclippet stannar på denna frame. Testa flashfilmen genom att trycka CTRL + ENTER. Nu stannar innehållet förhoppningsvis på mitten av sidan. Se bild 7.2.

Bild 7.2. Actionscript för att stanna rörelsen

Gör nu på samma sätt med de andra MovieClippen. Tryck CTRL + L för att visa Libraryt, dubbelklicka på innehall_tva. Gör så att även i innehall_tva rör sig och stannar i mitten och sedan samma sak med innehall_tre.

Då alla tre Movieclippen rör sig och stannar i mitten, återgå till själva flashsidan genom att trycka på Scene 1 till vänster om Timeline. Högerklicka i det lager du har skrivit Actionscript, i Dropdownmenyn som visas välj Actions. Du skall nu skriva kod så att knapptryck i menyn inte bara visar aktuellt innehall, utan också ser till att Movieclippet går till frame 1 och därmed rör sig från vänster in till mitten. Vid koden för tryck på knapp_ett_btn kommer koden innehall_ett_mc.gotoAndPlay(1); att skrivas in. På samma sätt blir det för knapp_tva_btn och knapp_tre_btn. Koden skall nu se ut såhär:

innehall_tva_mc._visible=false;
innehall_tre_mc._visible=false;
knapp_ett_btn.onRelease=function(){
   innehall_tva_mc._visible=false;
   innehall_tre_mc._visible=false;
   innehall_ett_mc._visible=true;
   innehall_ett_mc.gotoAndPlay(1);
}
knapp_tva_btn.onRelease=function(){
   innehall_ett_mc._visible=false;
   innehall_tre_mc._visible=false;
   innehall_tva_mc._visible=true;
   innehall_tva_mc.gotoAndPlay(1);
}
knapp_tre_btn.onRelease=function(){
   innehall_ett_mc._visible=false;
   innehall_tva_mc._visible=false;
   innehall_tre_mc._visible=true;
   innehall_tre_mc.gotoAndPlay(1);
}

Testa flashfilmen genom att trycka CTRL + ENTER. Det skall nu fungera ungefär som i bild 7.3.

Bild 7.3. Tryck i menyn för att testa.

Det kan vara bra att visa tydligt var besökaren är på sidan. Du skall nu skapa en pil som pekar på aktuell sida. Börja med att rita en pil på Stagen med Brush tool. Ställ in en passande färg och tjocklek på penseln i nederdelen av Tools. Högerklicka sedan på pilen, i Dropdownmenyn som visas välj Convert to symbol. I rutan som visas skriv in arrow som namn och se till att typen Movieclip är markerat, Tryck Ok. Se bild 7.4.

Bild 7.4. Pil som visar var man är skapas

Ge pilen ett instansnamn genom att markera den och skriv in arrow_mc i fliken properties, fältet för instance name. Dra pilen så att den pekar på det första menyvalet. I properties kan du nu se vilket x värde pilen har. Flytta sedan pilen så att den är placerad ovanför knapp 2, notera x värdet. Flytta sedan pilen så att den är placerad ovanför knapp 3, notera x värdet. Se bild 7.5.

Bild 7.5. Pilens x värde

ActionScript kommer nu användas för att flytta pilen vid tryck i menyn. Högerklicka i det lager du har skrivit Actionscript, i Dropdownmenyn som visas välj Actions. Pilen skall flyttas vid tryck på respektive knapp. Detta görs genom att lägga till koden arrow_mc._x= ditt x värde, vid vardera knapptryckning. Koden skall nu se ut såhär:

innehall_tva_mc._visible=false;
innehall_tre_mc._visible=false;
knapp_ett_btn.onRelease=function(){
   innehall_tva_mc._visible=false;
   innehall_tre_mc._visible=false;
   innehall_ett_mc._visible=true;
   innehall_ett_mc.gotoAndPlay(1);
   arrow_mc._x=227;
}
knapp_tva_btn.onRelease=function(){
   innehall_ett_mc._visible=false;
   innehall_tre_mc._visible=false;
   innehall_tva_mc._visible=true;
   innehall_tva_mc.gotoAndPlay(1);
   arrow_mc._x=314;
}
knapp_tre_btn.onRelease=function(){
   innehall_ett_mc._visible=false;
   innehall_tva_mc._visible=false;
   innehall_tre_mc._visible=true;
   innehall_tre_mc.gotoAndPlay(1);
   arrow_mc._x=406;
}

Testa flashfilmen genom att trycka CTRL + ENTER. Det skall nu fungera ungefär som i bild 7.6.

Bild 7.6. Tryck i menyn för att testa.

Exempel 7 är nu klar. Om du vill jobba vidare kan du göra så att besökaren kan navigera med hjälp av knapptryckningar på tangentbordet. Detta görs med ActionScript. Skriv eller klistra in följande kod, efter den ActionScript kod du redan har skrivit in:

var myListener:Object = new Object();
myListener.onKeyDown = function() {
   if (Key.getCode() == Key.LEFT) {
      if(innehall_ett_mc._visible==true){
         innehall_ett_mc._visible=false;
         innehall_tre_mc._visible=true;
         innehall_tre_mc.gotoAndPlay(1);
         arrow_mc._x=406;
      }
      else if(innehall_tva_mc._visible==true){
         innehall_tva_mc._visible=false;
         innehall_ett_mc._visible=true;
         innehall_ett_mc.gotoAndPlay(1);
         arrow_mc._x=227;
      }
      else if(innehall_tre_mc._visible==true){
         innehall_tre_mc._visible=false;
         innehall_tva_mc._visible=true;
         innehall_tva_mc.gotoAndPlay(1);
         arrow_mc._x=314;
      }
   }
   else if (Key.getCode() == Key.RIGHT) {
      if(innehall_ett_mc._visible==true){
         innehall_ett_mc._visible=false;
         innehall_tva_mc._visible=true;
         innehall_tva_mc.gotoAndPlay(1);
         arrow_mc._x=314;
         }
      else if(innehall_tva_mc._visible==true){
         innehall_tva_mc._visible=false;
         innehall_tre_mc._visible=true;
         innehall_tre_mc.gotoAndPlay(1);
         arrow_mc._x=406;
      }
      else if(innehall_tre_mc._visible==true){
         innehall_tre_mc._visible=false;
         innehall_ett_mc._visible=true;
         innehall_ett_mc.gotoAndPlay(1);
         arrow_mc._x=227;
      }
   }
};
Key.addListener(myListener);

Koden innebär att objektet myListener skapas, denna reagerar sedan då en knapp på tangentbordet trycks ned. Om det är LEFT knappen som trycks ned, så visas tidigare innehåll. Det vill säga, om innehall_tva_mc visas, och LEFT trycks ned så skall innehall_ett_mc visas. Avslutningsvis, med koden Key.addlistener kopplas det skapade lyssnarobjektet till tangentbordet.

Testa flashfilmen genom att trycka CTRL + ENTER. Det skall nu fungera ungefär som i bild 7.7.

Bild 7.7. Prova även vänster och höger knapp på tangentbordet.