En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan

Transkript

1 En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan ActionScript för att sätta den i arbete.

2 10 Ladda och optimera innehåll i Flash Lektionsöversikt I denna lektion får du lära dig följande: Ladda en SWF-fil Övervaka framsteg i laddningen Använda ActionScript för att animera en förladdare Arbeta med dynamisk text Göra symboler synliga och osynliga Mellanlagra bitmappbilder för att förbättra prestandan Att fullfölja lektionen tar mindre än en timme. Om det är nödvändigt, ta bort föregående lektion från mappen på din hårddisk och kopiera Lesson10 i mappen. Komma igång Du börjar lektionen med att titta på den färdiga filmen där det finns en förladdare som liknar den du skapade i Lektion 2. 1 Dubbelklicka på filen 10End.swf i mappen Lesson10/10End för att titta på filmen. Förladdaren ett glas som fylls med bubblande vatten visas. Medan marknadsföringsfilmen för dryckestillverkaren Aqua Zero laddas, fylls glaset och procentsatsen under glaset blir lägre. När hela filmen har laddats, försvinner förladdaren och filmen börjar. Förladdaren och marknadsföringsfilmen är redan färdiga. I den här lektionen kommer du att använda ActionScript för att ladda filmen och köra förladdaren tills filmen är helt laddad.

3 298 LEKTION 10 Ladda och optimera innehåll i Flash 2 Öppna filen10end.fla i mappen Lesson10/10End. Du ska jämföra din arbetsfil med den, speciellt när du lägger till ActionScript. 3 Öppna filen 10Start.fla i mappen Lesson10/10Start. Den animerade förladdaren finns redan på Scenen. 4 Välj Arkiv > Spara som. Döp filen till 10_workingcopy.fla och spara den i mappen 10Start folder. När du sparar en arbetskopia kan du vara säker på att originalfilen är orörd om du vill börja om från början. Samla ihop delarna till förladdaren När du öppnar filen 10Start.fla för första gången, är bubblorna i vattnet animerade men glaset är alltid fullt. Du kommer att lägga till en mask som du kan animera med ActionScript så att vätskan i glaset stiger i takt med att filmen laddas. Du ska också lägga till en text som visar procenten av filmen som har laddats.

4 ADOBE FLASH CS3 PROFESSIONAL 299 Allt i en bok 1 Dubbelklicka på glaset på Scenen för att redigera symbolen preloader. Symbolen preloader innehåller flera lager där det finns tecknade element som animerar bubblorna och bruset. När du markerar vätskan i glasobjektet, rapporterar Egenskaper att namnet av instansen är loadingbar_mc. 2 Dubbelklicka på glaset på Scenen igen för att redigera symbolen loader. I symbolen loader finns bara ett lager som innehåller formen för vattnet. Du ska nu lägga till text och en mask för att gömma vattnet.

5 300 LEKTION 10 Ladda och optimera innehåll i Flash 3 Klicka på ikonen Infoga lager och döp det nya lagret till Text. Ändra namnet på Layer 1 till Liquid. 4 Markera första bildrutan på lagret Text. 5 Använd Textverktyget och rita en textruta under glaset. 6 I Egenskaper, välj Dynamisk text i menyn ovanför rutan för namnet på instansen. Välj Arial som typsnitt, 16 som textstorlek och grå (#666666) som textfärg. Dynamisk text ändras genom användarens inmatning eller andra händelser i ActionScript. I den här lektionen, ska du skriva ActionScript för att ändra texten medan filmen laddas. 7 Döp instansen till loadertext_txt. Du kommer att referera till instansen loadertext_txt i ActionScript. 8 I textrutan på Scenen, skriv 0% loaded.

6 ADOBE FLASH CS3 PROFESSIONAL 301 Allt i en bok 9 Använd Markeringsverktyget för att ändra storleken och placeringen av rutan så att den är centrerad under glaset. 10 Välj lagret Liquid och klicka på ikonen Infoga lager. Döp det nya lagret till Mask. 11 Markera bildruta 1 på lagret Mask. 12 Dra symbolen loadermask från Biblioteket till Scenen. Placera den så att den täcker vätskan i glaset.

7 302 LEKTION 10 Ladda och optimera innehåll i Flash 13 Markera instansen av symbolen loadermask på Scenen. I Egenskaper, döp instansen till loadermask_mc. Du kommer att referera till instansen loadermask_mc i ActionScript. 14 Högerklicka (Windows) eller Kontroll+klicka (Mac OS) på lagret Mask och välj Mask. Flash gör ett indrag i lagret Liquid och låser både lagret Mask och lagret Liquid. 15 Klicka på Scen 1 för att komma tillbaka till huvudtidslinjen.

8 ADOBE FLASH CS3 PROFESSIONAL 303 Allt i en bok Ladda filmen Du ska använda ActionScript för att ladda marknadsföringsfilmen som heter WaterIntroAnimation.swf och förladdaren. För att ladda filmfilen, ska du använda ett objekt som heter URLRequest. 1 Markera bildruta 1 på lagret Actions. 2 Tryck F9 (Windows) eller alt+f9 (Mac OS) för att öppna panelen Åtgärder. 3 Skriv in följande rader exakt som det står nedan. Dessa rader laddar filen WaterIntroAnimation.swf. Obs! För att jämföra kommatering, mellanslag, stavning eller andra aspekter i ActionScript, titta på panelen Åtgärder i filen 10End.fla. var requestobj:urlrequest = new URLRequest( waterintroanimation.swf ); var loaderobj:loader = new Loader(); addchild(loaderobj); loaderobj.load(requestobj); Den första raden deklarerar en variabel som heter requestobj som är av typen URLRequest och definierar variabeln som en ny begäran av filen WaterIntroAnimation. swf. Den andra raden deklarerar en variabel kallad loaderobj som är av typen Loader och den skapar en ny instans av klassen Loader. Den tredje raden lägger till variabeln loaderobj som ett visningsobjekt på Scenen. Den fjärde raden laddar variablen requestobj som definierades på första raden som filen WaterIntroAnimation.swf.

9 304 LEKTION 10 Ladda och optimera innehåll i Flash 4 Välj Kontroll > Testa filmen för att se hur din film ter sig nu. Förladdaren visas och filmen laddas men förladdaren ändras inte. Du ska lägga till mer ActionScript för att animera texten och få masken att avspegla hur mycket av filmen som har laddats. För att se hur din film ser ut när den laddas ner, välj Visa > Simulera nedladdning i filmens visningsfönster (Kontroll > Testa filmen). För att visa simuleringen i olika hastigheter, som 56K modem, DSL eller T1, välj Visa > Nedladdningsintällningar. Animera förladdaren Du har använt händelseavlyssnare i tidigare lektioner. En händelseavlyssnare lyssnar efter en händelse som musklick och rapporterar sedan händelsen vidare så att en lämplig åtgärd kan vidtas. I det här fallet vill du kontrollera hur mycket av SWF-filen som har laddats och visa informationen på Scenen. Du vill alltså visa dess framsteg. Du kommer att lägga till en händelseavlyssnare för att registrera och rapportera förladdarens framåtskridande. Sedan ska du definiera en funktion som åberopas kontinuerligt medan filen laddas. Funktionen uppdaterar textrutan som rapporterar hur mycket av filmen som har laddats och höjer masken för att visa mer av vätskan. 1 Lägg till följande ActionScript i panelen Åtgärder loaderobj.contentloaderinfo.addeventlistener(progressevent.progress, preloadprogress);

10 ADOBE FLASH CS3 PROFESSIONAL 305 Allt i en bok Denna rad lägger till en händelseavlyssnare av typen ProgressEvent som lyssnar efter variabeln loaderobj som du definierade tidigare. När laddningen av filen har börjat, skapar ActionScript objektet LoaderInfo. Du använder egenskapen contentloaderinfo för att komma åt informationen i det objektet. Händelseavlyssnaren, som också är en funktion, heter preloadprogress. 2 Lägg till följande rader för att definiera funktionen som heter preloadprogress function preloadprogress(event:progressevent):void { var loadedpercent:int = event.bytesloaded /event.bytestotal * 100; preloader_mc.loadingbar_mc.loadertext_txt.text = loadedpercent + % ; preloader_mc.loadingbar_mc.loadermask_mc.scaley = loadedpercent / 100; } Första raden identifierar funktionen som heter preloadprogress som en händelse av typen ProgressEvent och informationen i den som tom, vilket betyder att den är odefinierad. Raderna i klammerparentesen defnierar själva funktionen. Först har du deklarerat en variabel som heter loadedpercent; int uttrycker att den är ett heltal, dess värde visar resultatet av bytes som har laddats delad med det totala antalet bytes gånger 100. Nästa rad definierar sökvägen till den dynamiska texten. Du kallade instansen loadertext_txt och den är kapslad i instansen loadingbar_mc som i sin tur är kapslad i instansen preloader_mc. Denna rad åberopar en text som mostvarar värdet i variabeln loadedpercent och ett %-tecken som finns inkluderat i en sträng. Obs! Du kan skriva vilken text du vill i en sträng. T ex kan du lägga till ordet laddad eller föregå variabeln loadedpercent med orden: Var snäll och vänta. Du är på så att det som visas på skärmen skulle vara Var snäll och vänta. Du är på 14%.

11 306 LEKTION 10 Ladda och optimera innehåll i Flash Den slutliga raden spårar sökvägen till masken som du kallade loadermask_mc. På samma sätt som textinstansen, är den inkapslad i instansen loadingbar_mc som är inkapslad i instansen preloader_mc. Denna rad definierar skalan på maskens y-axel (den lodräta axeln) så att den motsvarar värdet i variabeln loadedpercent delad med 100. Alla funktioner omges av klammerparentes, så en avslutande klammer färdigställer denna funktion. 3 Välj Kontroll > Testa filmen för att titta på resultatet. I visningsfönstret, välj Visa > Simulera nedladdning för att se den färdiga förladdaren. Medan filmen laddas, fylls glaset och procenttalet ändras på skärmen.

12 ADOBE FLASH CS3 PROFESSIONAL 307 Allt i en bok Ändra filmklippens synlighet Förladdaren gör sitt jobb: du kan se hur mycket av filmen som har laddats och den är underhållande. Men om du tittar på filmen tillräckligt länge, kan du se att förladdaren kommer fram närhelst filmen bleknar. Att korrigera problemet, kommer du att ändra förladdarinstansens synlighet så att den inte längre visas när filmen är färdigladdad. 1 I panelen Åtgärder, lägg till en händelseavlyssnare för att kontrollera när filmen är färdigladdad. loaderobj.contentloaderinfo.addeventlistener(event.complete,preloadcomplete); På samma sätt som tidigare, lägger du till en händelseavlyssnare för att komma åt objektet Loaderinfo för laddaren loaderobj som du skapade. Men denna gången kontrollerar du inte hur allt framskrider. Händelseavlyssnaren avslutas när filen har laddats helt. Den åberopar sedan en funktion som heter preloadcomplete.

13 308 LEKTION 10 Ladda och optimera innehåll i Flash 2 Definiera funktionen preloadcomplete genom att lägga till dessa rader i panelen Åtgärder function preloadcomplete(event:event):void { } preloader_mc.visible = false; I denna funktion, som åberopas när filmen har laddats, har egenskapen synlig (visible) av instansen preloader_mc satts till false, vilket betyder att den inte längre är synlig.

14 ADOBE FLASH CS3 PROFESSIONAL 309 Allt i en bok Mellanlagra bitmappbilder I Flash finns en funktion för mellanlagring av bitmappbilder som gör det möjligt att använda tidigare skapade, komplicerade och animerade vektorbilder utan att kompromissa kvaliteten i filmens prestanda. Du kan specificera att ett objekt ska mellanlagras som en bitmapp under tiden filmen körs och hindra Flash från att rita om symbolen kontinuerligt. Mellanlagring av bitmappbilder är idealiskt med komplicerade filmklipp där objektens placering ändras men deras form och innehåll förblir densamma. 1 Stäng panelen Åtgärder. 2 Välj lagret Preloader och markera sedan instansen preloader_mc på Scenen.

15 310 LEKTION 10 Ladda och optimera innehåll i Flash 3 I Egenskaper, välj Använd bitmappscache vid körning. Obs! Du kan välja mellanlagring av bitmappbilder i Egenskaper eller helt enkelt lägga till en rad ActionScript. För att använda mellanlagring av bitmappbilder genom ActionScript i det här projektet, kan du lägga till denna rad av skript preloader_mc.cacheasbitmap = true; Den brusande drycken visar att huvudinnehållet håller på att laddas och underhåller åskådaren samtidigt. Du kan använda denna grundprocess till att aktivera en förladdare på många webbplatser.

16 Genomgång Repetitionsfrågor 1 Vad är en förladdare? 2 Vad är fördelen med mellanlagring av bitmappbilder? 3 Hur kan du göra en instans synlig? Svar på repetitionsfrågorna 1 En förladdare är en animerad bild som spelar medan huvudfilmen eller webbsidan laddas. Den underhåller användarna och försäkrar dem om att något håller på att hända och i många fall meddelar den samtidigt hur mycket av filen som har laddats. 2 Mellanlagringsfunktionen för bitmappbilder gör det möjligt att använda tidigare skapade, komplicerade och animerade vektorbilder utan att kompromissa kvaliteten i filmens prestanda. Du kan specificera att ett objekt ska mellanlagras som en bitmapp under tiden filmen körs och hindra Flash från att rita om symbolen kontinuerligt. 3 För att göra en instans osynlig, sätt instansens egenskap synlig (visible) till false i ActionScript.