8. Banner

I denna övning kommer du lära dig att skapa banners. I slutet av övningen visas hur bannern kan länka till en webbsida.

Börja med att välja vad bannern skall göra reklam för. Förslag på teman är: A) ett online uppslagsverk B) en värmepumpstillverkare som lanserar sin 14e produkt och har fått den Svanenmärkt, och C) en barnleksak.

Börja med att ställa in storlek och bakgrundsfärg på Stagen genom att trycka på Size i properties. Width skall vara 468 och Height skall vara 60. Tryck Ok. Se bild 8.1.

Bild 8.1. Storlek och färg på Stagen

Nu kan du utforma bannern på det sätt du vill. Detta är ett exempel på vad du kan göra. Leta rätt på bilder att använda dig av via exempelvis google, spara dessa på hårddisken. I Flash, tryck sedan meny File>Import>Import to stage, och välj bild att använda dig av. Högerklicka på Frame 20 i Timeline och välj Insert keyframe. Skapa sedan en motion tween genom att högerklicka mellan frame 1 och 20 i Timeline, i Dropdownmenyn som visas välj Create motion tween. Flytta sedan bilden Längst till vänster i Frame 1 och längst till höger i frame 20. Markera lagret du har bilden i, tryck sedan på Add motion guide under Timeline. Med motion guide lagret markerat, rita den bana du vill att bilden skall följa. Markera sedan frame 1 i lagret med bilden och dra den till början av guiden. Dra på samma sätt bilden till slutet på motion guiden i frame 20. Se bild 8.2 och 8.3.

Bild 8.2. Bild med motion guide

Bild 8.3. Början på en fin banner

Skapa nu ett nytt lager att skriva passande text i genom att trycka på insert layer under Timeline. Högerklicka i frame 20 i det nya lagret, i Dropdownmenyn som visas välj insert keyframe. Använd Text tool och skriv en fin text i denna Keyframe. Markera texten och ställ in fin färg, font och fontstorlek i Properties. Högerklicka sedan i Frame 40, i Dropdownmenyn som visas välj insert Keyframe. Högerklicka sedan mellan frame 20 och 40, i Dropdownmenyn som visas välj Create motion tween. Flytta sedan texten Längst till vänster, och en bit upp i Frame 20 och längst till höger och en bit ned i frame 40. Du kan nu också sätta in en keyframe i frame 28 och en i frame 32. Dra texten i frame 28 så att den är ungefär i mitten av Stagen. Gör samma sak i frame 32. Det kan nu se ut som i Bild 8.4.

Bild 8.4. Början på en fin banner, nu även med text

Fortsätt nu med att skapa ett nytt lager. Sätt in en keyframe i frame 40 , och fyll den med något fint. Gör så att den rör sig mellan frame 40 och 60. Du kan exempelvis prova att rotera bilder och text med Free transform tool. Fortsätt på detta sätt tills du är nöjd med din banner. Se sedan bild 8.5.

Bild 8.5. En fin banner

Bannern är snart klar. Vi ska nu göra den klickbar. Skapa ett nytt lager och se till att det ligger ovanpå, över alla andra. Dra det högst upp vid Timeline. Med Frame 1 i detta lager markerat, använd rectangle tool för att rita en rektangel som fyller hela stagen. Högerklicka på det och välj Convert to symbol. I rutan som visas välj namnet klickruta och se till att typen MovieClip är markerad. Se bild 8.6.

Bild 8.6. MovieClip placeras ovanpå allt annat

Markera detta nya MovieClip och Markera Color>Alpha>0 i Properties. Det blir genomskinligt. Se bild 8.7.

Bild 8.7. MovieClip görs osynligt

Med den genomskinliga rektangeln markerad, skriv in instansnamnet klickruta_mc. Skapa sedan ett nytt lager att skriva ActionScript i. I frame 1 i detta lager, högerklicka och välj Actions i Dropdownmenyn som visas. I rutan för ActionScript, skriv in följande kod:

klickruta_mc.onRelease=function(){
getURL("http://www.toysrus.se/","_blank");
}

Koden betyder att då den genomsklinliga rutan med instansnamnet klickruta_mc klickas på, så skall en ny _blank ruta öppnas. Urlen är http://www.toysrus.se. Prova att klicka på bild 8.8.

Bild 8.8. Klickbar banner, klicka!

Gör nu på samma sätt en till banner i samma tema med måtten width: 88 och height: 31. Du är sedan klar med övning 8.

Du som vill bygga vidare kan prova att göra så att bannern stannar då muspekaren förs utanför bannern. I ditt layer för ActionScript, skriv eller kopiera så att det ser ut såhär:

klickruta_mc.onRelease=function(){
   getURL("http://www.toysrus.se/","_blank")
}
klickruta_mc.onRollOver=function(){
   _root.gotoAndPlay(_root._currentframe)
}
klickruta_mc.onRollOut=function(){
   _root.stop()
}

Filmen, som nu är på _rooten i flashsidan stannar då muspekaren förs utanför klickrutan. Den rullar vidare då muspekaren pekar på klickrutan, och börjar från den aktuella framen.

Bild 8.9. Bannern stannar och startar med muspekaren. Prova.