Share
I den här handledningen skapar vi en SWF som förinstallerar sig, vilket betyder att förprogrammeraren och innehållet är i samma fil. Vi går över hur du gör saker på rätt sätt och undvik fällorna.
Idén om enkel SWF-förspänning är att du har ett Flash-objekt som förinstallerar sig själv. Det innebär att förprogrammeraren, med tillhörande funktionalitet och tillgångar, är inbäddad i samma SWF-fil som hela Flash-filmen eller -programmet.
Vi börjar med en viss teori och avslutar det med att skapa en FLA tillsammans med en preloader klass som du kan använda i framtida projekt. Under handledningen kommer vi att diskutera vanliga fallgropar och viktiga överväganden.
Nu när Activetuts + har börjat fokusera på dokumentklasser och i allmänhet håller saker i klassfiler så mycket som möjligt, gör vi just det i den praktiska delen av denna handledning. Kolla in Snabbtipset: Så här använder du en dokumentklass i Flash om du behöver lära dig grunderna.
Se till att du har en uppdaterad version av antingen Flash CS3 eller Flash CS4. Jag vet säkert att en senare CS4-uppdatering har ändrat hur klasserna laddas och det kan göra skillnaden här!
Jag erkänner genast att denna handledning är ganska lång för detta smala ämne, men det innehåller allt du behöver veta, så spänna upp och låt oss ta det!
Tanken med en förladare är ganska uppenbar: du vill se till att användaren får synlig återkoppling som indikerar att Flash-objektet laddas. Att bädda in en stor Flash-fil som tar 10 sekunder att ladda kan betyda skillnaden mellan användare som vistas eller lämnar webbplatsen, om det inte skulle vara förpreloader som säger att användaren ska hålla på.
Processen med att skapa "self preloading" Flash-filer presenterar vissa problem och problem. Det finns andra preloading tekniker som är väldigt lätta att sätta ihop, till exempel en SWF-fil som förinstallerar en annan och lägger den till scenen en gång laddad.
Så varför stör? Tja, det finns situationer där du inte har något val.
Du kan till exempel skapa Flash-spel som du hoppas sprida till så många Flash-spelportaler som möjligt. De flesta av dessa portaler stöder bara spel i form av en enda SWF-fil som lämnar dig utan annat än att se till att ditt spel preloads snyggt inom sig.
Bortsett från sådana självklara exempel är det argumentet att ha en färdig produkt i endast en fil som gör det lätt att hantera.
När din webbläsare snubblar på ett Flash-objekt och börjar ladda det, börjar det från början av tidslinjen. Det laddar ramarna en efter en. Så snart den första ramen är laddad, kan den visas.
Vårt tillvägagångssätt här är att lägga en förladare på den första ramen så att användaren ser någonting hända, medan webbläsaren fortsätter att ladda resten av filen. Vi skriver kod för att kontrollera övergripande framsteg och när det är klart fortsätter vi vidare till huvudinnehållet i filen.
Utmaningen är att hålla storleken på den första ramen till ett minimum. Om du låter kod och ljud hoppa upp i den första ramen kan du ha en förladare som inte är synlig förrän du har laddat upp kanske 60% av filmen.
Ett bra tips när det gäller att använda en procenträknare som visar siffror är att använda ett teckensnitt som är liten i byte storlek. Men det här tar bara dig så långt. Tyvärr måste vi jobba ganska svårare för att få saker på vår väg!
Det har sagts många gånger tidigare och det är värt att säga igen:
Preloaders, den svåraste av de enklaste uppgifterna i Flash ...
Det finns ett antal saker som kommer att påverka vad som kommer att sättas i vilken ram, till exempel:
Det största problemet vi står inför är kontrollerar vad som slutar på ram ett, eftersom, som nämnts ovan, allt på ram 1 måste laddas innan förläsaren kan visas.
Annat än det finns skillnader mellan hur Flash CS3 och CS4 fungerar. I nästa steg gör jag ett antal grundligt undersökta uttalanden som du kan hänvisa till om det behövs. Det borde vara en bra resurs om du snabbt vill felsöka din förladdning, för att ta reda på varför det inte beter sig som du förväntar dig.
Jag ska försöka göra uttalandena lite mer konkreta genom att hänvisa till TweenLite, ett bra tweening-bibliotek av Jack Doyle över på greensock.com. Vi använder TweenLite i den praktiska delen av den här handledningen, så det här kommer att ge mest mening.
Dessa påståenden gäller både för Flash CS3 och CS4 om inte annat anges. "Importera TweenLite" betyder i princip "importera och använda TweenLite" - resultaten kan skilja sig om du inte använder koden faktiskt eftersom Flash-kompilatorn ignorerar oanvänd import. Att bara skriva ett importdeklaration motsvarar inte koden.
De följande tre påståendena hänvisar till scenariot där du har en MovieClip som exporteras för ActionScript, med en extern klassfil, som i sin tur importerar TweenLite i klassfilen.
De följande tre påståendena hänvisar till scenariot där du har en MovieClip som exporteras för ActionScript som "CustomClass", antingen med hjälp av en extern klassfil eller inte, vilket är instantierat och läggs till scenen från en MovieClip som placeras på tidslinjen (bara som MovieClip från de tidigare tre uttalandena.) Denna CustomClass är endast instantiated och existerar inte tidigare på huvudtidslinjen.
Med alla dessa begränsningar, låt oss åtminstone betrakta detta positiva uttalande:
Här är en väldigt intressant en:
Ja, du läste det rätt. Jag antar att det är rimligt att anta att Adobe vill att människor ska uppgradera till CS4. Så vad gör du om du sitter fast med CS3 och gräset är grönare på andra sidan? Jag ska berätta för dig i nästa steg.
Hela det här steget är bara för dig som använder Flash CS3.
Om du läser igenom alla uttalanden i föregående steg så kommer du inse problemet med att ha massor av MovieClips exporterade för ActionScript. Dessa måste alla laddas i ram ett, eller vara otillgängliga. Lyckligtvis var dessa uttalanden under antagandet att dessa tillgångar aldrig placerades på den huvudsakliga tidslinjen, vilket råkar vara vår lösning! (Detta är också det enda sättet att ladda andra ljud än i ram ett ...)
Så här är det gjort:
Detta gör att alla dina tillgångar laddas i den andra ramen. Lösningen är lite klibbig, men det är inte så grovt som att behöva gå och köpa ny programvara för det här problemet.
(Kudos till 8bitrocket för detta trick!)
En sak jag bör nämna innan vi börjar jobba är bandbreddsprofilen. Detta är ett viktigt verktyg för att sortera ut dina preloadingproblem. När du förhandsgranskar en film kan du gå upp för att visa och välj sedan bandbreddsprofil. Eller klicka bara på Ctrl + B.
Här kan du växla mellan ramgrafikgrafer och strömmande grafer. Du kan också simulera nedladdning av filmen med en anslutningshastighet som du väljer, antingen genom att välja den från menyn Visa eller trycka på Ctrl + Enter igen (ändra den simulerade nedladdningshastigheten med undermenyn Visa> Hämta inställningar). Detta är viktigt för att ta reda på hur din förprogrammerare kommer att se ut, utan att gå igenom krånget för att ladda upp det och capping din bandbredd. För det specifika fallet kan jag dock rekommendera Firefox Throttle.
Förutom det mycket användbara verktyget som är bandbreddsprofilen finns det möjlighet att skapa en storleksrapport. Tryck Ctrl + Shift + F12 för att öppna dialogrutan Publiceringsinställningar.
Gå till fliken Flash, och i avsnittet Avancerat finns en kryssruta med etiketten "Generera storleksrapport". När den här rutan är markerad genererar en förhandsgranskning eller publicering av din film en textfil i samma mapp som din FLA-fil som innehåller användbar information om vilka delar som utgör den totala storleken på filmen.
Slutligen kan vi börja göra en Flash-film med en fin fristående förladdare!
Vi använder en "tre ramförlängning" -teknik. På den första ramen lägger vi en förprogrammerad MovieClip som har sin egen klass "Preloader". På den andra ramen laddar vi alla klasser och på den tredje ramen laddar vi och visar innehållet. Vi lägger innehållet i en MovieClip med namnet Application med en tillhörande klass "Application". Det är här köttet i ansökan går.
Börja med att skapa ett nytt AS3-dokument. Jag gör det 600x400px, mörkgrå bakgrund, 24 FPS. Dessa inställningar spelar ingen roll om.
Ställ in dokumentklassen i Main och tryck OK.
Gå till Arkiv> Publiceringsinställningar, fliken Flash och sedan ActionScript 3.0-inställningarna. Skriv in "ram 2" i fältet "Exportera klasser i ram".
Uppenbarligen kommer utformningen av en förladare inte att påverka funktionen. Jag kommer att ge steg för steg instruktioner, men gärna hoppa över dessa delar och ta din egen inställning om du så önskar. Se bara till att du noterar vilka delar jag refererar till i koden senare.
Rita en rektangel med runda hörn och ge den en blå gradient. Vrid sedan den till en MovieClip-symbol, kalla den Preloader. Välj att exportera den till ActionScript och ring klassen Preloader.
Inom den här nya MovieClip, rita en ny rundad hörnrektangel med en grå gradient, vrid den till en annan MovieClip och ge den ett exempel på progressArea.
Fortsätt och matcha laglayouten jag har pågått på bilden ovan. Därefter, gör en dubblett av den sista formen och placera den i Progress bar-lagret ovanför Progress-området ett. Ge den en ljusblå gradient, gör den till en MovieClip och ge den ett exempel på progressBar. Aktivera guider för 9-skalning och se till att du håller de vänstra och högra runda kanterna ute.
Slutligen, skapa ett dynamiskt textfält med ett förekomstnamn av procentText. Gör texten rätt inriktad. På så sätt kommer procenttalet aldrig att flytta, bara siffrorna (som ändå ändras). Gå in i karaktärsinbäddning och se till att du bäddar in siffror och procenttalet (%). För att göra en riktigt liten förladare använder jag en liten pixelfont som heter Pixel Mix från dafont.com. Jag ger det också en blå glöd bara för att jag kan.
Se till att hela preloader MovieClip är placerad i den första ramen och givet ett förekomstnamn för preloader. Skapa ett nytt lager som heter "AS" och stoppa (); i den första ramen. Håll förladaren i sitt eget lager, "Preloader". Gör ett annat lager som heter "Application". Det är här vi kommer att behålla huvudinnehållet i slutet.
Skapa en ny ActionScript-fil och spara den i samma katalog som din FLA-fil. Namn den Main.as:
paket import flash.display.MovieClip; importera flash.events.Event; public class Main utökar MovieClip public function Main () preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loader); privat funktion onPreloaderComplete (e: Event): void gotoAndStop (3);
Skapa en ny ActionScript-fil och spara den i samma katalog som Preloader.as:
paket import flash.display.LoaderInfo; importera flash.display.MovieClip; importera flash.events.Event; importera flash.events.ProgressEvent; public class Preloader utökar MovieClip public function Preloader () public function setLoaderInfo (ldrInf: LoaderInfo): void ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete); privat funktion onProgress (e: ProgressEvent): void var procent: int = Math.round (e.bytesLoaded / e.bytesTotal * 100); progressBar.width = procent / 100 * progressArea.width; percentText.text = procent + "%"; privat funktion onComplete (e: Event): void dispatchEvent (e);
Så vad gör dessa två klasser?
I huvudkonstruktorn kallar vi den vanliga setLoaderInfo () -metoden för vår preloader och passerar längs LoaderInfo-objektet som är associerat med Main.
Preloader tar emot det här objektet och lägger till två händelsehörare till det. ProgressEvent utlöser onProgress-funktionen, där vi beräknar procentandelen av de byte som laddas i jämförelse med de totala bitarna som ska laddas. Procentandelen används för att ställa in bredden på framdriftsfältet och texten i vårt textfält.
Den fullständiga händelsen skickas helt enkelt tillbaka ner till Main som i sin tur hoppar huvudtidslinjen för att rama tre när den mottas.
För att få något att tydligt visa förläsaren arbetar, lägger jag till ett trevligt makrofoto av en katt som heter Runa tagen av min vän. Du hittar bilden i källfilerna som medföljer denna handledning. Jag har importerat bitmappen och omvandlar den till en MovieClip kallad "Cat".
Använd gärna bilden du tycker är lämplig. Ge klippet ett förekomstnamn av "katt".
Som du kan se på skärmbilden ovan har jag placerat Cat MovieClip på ram tre i applikationslagret. Ta vad som helst MovieClip du gjorde, katt eller ingen katt, och slå F8 än en gång för att bo i en ny MovieClip som du kallar Application. Exportera detta till ActionScript som Application.
Skapa applikationsklassen genom att starta en ny AS-fil och spara den som "Application.as". Låt applikationsklassen se ut så här:
paket import com.greensock.TweenLite; importera com.greensock.easing.Sine; importera flash.display.MovieClip; public class Application utökar MovieClip public function Application () TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, lätthet: Sine.easeInOut); privat funktion tweenBack (): void TweenLite.to (cat, 3, scaleX: 1, scaleY: 1, onComplete: reTween, lätthet: Sine.easeInOut); privat funktion reTween (): void TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, lätthet: Sine.easeInOut);
Detta kommer att animera katten in och ut på obestämd tid så att du alltid kommer ihåg detaljerna i hennes näsan päls. Hur denna klass fungerar är inte viktigt, vad är viktigt är att vi importerar TweenLite och använder det, så att det blir en del av SWF-filen när den exporteras.
Låt oss gå tillbaka till skolbänken igen för bara en minut.
Den här filmen kompilerar böter i CS4. Programmet MovieClip är inställt att exportera på ram 2 om du inte har ändrat det. Om du har ändrat det kanske du märker något konstigt. Mer om detta i nästa steg.
Om du är på CS3 är denna inställning verkligen viktig. Du måste gå och kontrollera att du avmarkerar kryssrutan "Exportera i första rammen" i egenskaperna för programmet MovieClip, annars kommer alla att laddas i den första ramen!
Det är inte det enda problemet. Om du försöker kompilera får du ett 1046 typfel och säger att du inte har typen TextField tillgänglig. Så som du kan gissa, gör CS3 lite annorlunda. Vad händer? Tja, du försöker använda en TextField inuti Preloader MovieClip men du har inte den importerad. I CS4 hanteras det automatiskt för dig, men inte i CS3.
Lyckligtvis är lösningen enkel, lägg bara till:
importera flash.text.TextField;
till din Preloader klass, och du är helt upptagen.
Vissa av er kanske redan har trott att jag borde ha förlängt Sprite för min Preloader-klass istället för MovieClip. Jo, det här är anledningen till att jag inte gjorde det. Jag ville vänta tills den här punkten tar upp det. Eftersom preloader-symbolen innehåller både "ProgressArea" och "ProgressBar", som båda är MovieClips, skulle du ha fått samma 1046 typfel.
Den samma lösningen är också möjlig här självklart. Faktum är att du nu ska ändra Preloader för att förlänga Sprite istället för MovieClip, och om du använder CS3, se till att du importerar Sprite-klassen i Preloader-klassen också.
Jag nämnde en märklig händelse i det sista steget. Om du avmarkerar "Exportera i ram 2" till Program och kör en simulerad nedladdning ser du förprogrammeraren försvinner, om du inte har förlängt förinstallerarens nyckelram för att täcka den andra ramen också.
Så vad händer verkligen? Enkelt uttryckt, det första stoppet (); uttalandet räknas inte. Hur är det för uppenbart arbetsflödesplanering? Observera att om du lägger ett spårningsdeklaration i den första ramen efter stoppet (); ring, det spårar ut. Viktig: Observera att detta problem bara visar sig när vi simulerar nedladdning!
Lektionen lärde sig här är lita inte på den simulerade nedladdningen! Det kommer inte visa dig exakt hur sakerna laddas och fungerar. Du kan bara hålla stoppet (); och preloader i den första ramen och du kommer att vara bra när det gäller distribution. Det kan dock vara en smärta att förhandsgranska om du inte har Applikationsuppsättning att exportera på bild 2. Och det är bara för det här specifika scenariot.
I CS3 måste du avmarkera exportrutan på Application MovieClip annars kommer du att sluta ladda det i den första bilden. Men om du gör det kommer du att lösa problemet. Så fortsätt och förläng frontpanelen till den andra ramen.
Fortsätt och förhandsgranska filmen. Kör en simulerad nedladdning med låg hastighet och njut av den mästerliga * utformade förladdaren (* gäller mästerligt om du har följt mina instruktioner till brevet).
Om du tittar på ramgrafen eller en genererad storleksrapport ser du att koden är laddad i den andra ramen. Den första ramen är bara 4kb och består av Preloader-klassen och de inbäddade teckensnittet. Nu är 4kb ganska överkomligt så långt som väntetid innan man ser på förladaren, tror du inte?
Du kan se olika storlekar på CS3 och du kommer definitivt se olika storlekar med olika typsnitt. Eller katter.
Du kanske har en uppfattning om att du vill använda TweenLite för att fade bort förläsaren genom att tweening alfa till 0 - men du vill inte ladda TweenLite i den första bilden eftersom det ger ytterligare 8kb till den ursprungliga nedladdningen.
Det finns flera sätt att uppnå detta och vi kommer att lösa det genom att ha en MovieClip på den tredje ramen som hämtar förläsaren och tweens den. När den är klar kommer den att gå vidare till den fjärde ramen, som vi har flyttat till.
Anledningen till att den läggs i den tredje ramen är att vi inte kan placera den i den andra ramen utan att TweenLite laddas i den första ramen.
Nu flyttar vi bort från den vanliga treramsförlängningstekniken.
Lägg till ett nytt lager som heter "Preloader catcher". Se till att du lägger stopp (); uppmanar ramar en, två och tre. Det här för att förhindra att förhandsgranskning visas när du simulerar en nedladdning, som tidigare nämnts.
Gå vidare och flytta Applikation till den fjärde ramen samt utöka Preloader till den tredje ramen.
Se till att du har en keyframe på den tredje ramen för preloaderfångarskiktet. Gå till den här ramen, rita en liten form och fyll alfanumeriska fyllnadsfärgen till 0%. Detta är tänkt att vara en osynlig MovieClip. Vänd den till en MovieClip-symbol som heter PreloaderCatcher eller något liknande.
Exportera MovieClip som PreloaderCatcher. Om du använder CS4 spelar det ingen roll om du exporterar det till ram 2 eller inte, eftersom det kommer att laddas i den ramen oavsett vad. Tja, det ändrar en sak, kom ihåg? Huruvida eller inte form laddas på ram 2. I huvudsak spelar det ingen roll med tanke på den nära obefintliga filstorleken för denna form. Du kan lika väl avmarkera det för god vana men.
Skapa en ny klassfil som heter PreloaderCatcher.as:
Accentsconagua
paket import com.greensock.TweenLite; importera flash.display.MovieClip; importera flash.display.Sprite; importera flash.events.Event; importera preloader; public class PreloaderCatcher utökar Sprite public function PreloaderCatcher () addEventListener (Event.ADDED_TO_STAGE, onAdded); privat funktion onAdded (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, onAdded); var preloader: Sprite = MovieClip (förälder) .getChildByName ("preloader") som Sprite; TweenLite.to (preloader, 0.5, alf: 0, onComplete: function (): void MovieClip (förälder) .nextFrame ();); Som du kan se fungerar den här klassen genom att först hämta förläsaren genom att kasta föräldern som en Sprite och kallar getChildByName ("preloader"), där preloader är förekomstnamnet. Preloaderna är också gjord av en Sprite, då används TweenLite för att blekna det.
När tweening är klar, kollar funktionen onComplete i TweenLite föräldern som en MovieClip så det går att ringa nästaFrame-metoden.
Som jag sa tidigare har vi nu flyttat från de tre ramförlängningsteknikerna. Det i sig är inte exakt blasfemi, men jag är säker på att några av er undrar varför vi gjorde det. I stället kunde vi ha hanterat preloader-tweening inuti programklippet ...
I så fall har du helt rätt! Anledningen till att jag använde fyra bilder här var att visa dig hur du gör det medan du håller saker åtskilda. Tweening bort förladaren; hör det till preloaderdelen eller applikationsdelen? Preloader definitivt, men i det här fallet ville vi inte att det skulle laddas i den första ramen. Därför hamnar vi i denna extra "catcher" -klass.
Kom bara ihåg att detta är allt frivilligt. När du väl vet hur man gör allt kan du enkelt bestämma vad din situation kräver.
I steg 7 berättade jag om tillgångsbelastningsproblemen i CS3. Eftersom denna handledning riktar sig till både användare av CS3 och CS4 kommer vi att gå med den lägsta gemensamma nämnaren och använda AssetHolder-metoden. Om du använder CS4 kan du utföra nästa steg på samma sätt och det kommer att fungera på samma sätt, eller du kan hoppa över AssetHolder-strategin.
Börja med att importera ljudet "music.wav" från källfilerna till din FLA.
Gå in och exportera det till ActionScript och se till att du avmarkerar rutan "Exportera i första bild" i CS3. För CS4 kommer det inte att göra stor skillnad. Jag använder Flash CS4 som du förmodligen har tänkt ut nu, så skärmbilderna visar dialogrutan CS4. Om du vill kan du byta från standard MP3-komprimering till något mer tilltalande. På det sättet låter det inte hemskt.
Låt oss gå igenom ett par steg, lägga till lite text i filmen och sätta allt i en AssetHolder MovieClip!
Tryck Ctrl + F8 för att skapa en ny MovieClip-symbol. Namnge det TextHolder och exportera det till ActionScript, en gång till (i CS3) så att rutan "Exportera i första bild" inte är markerad.
När du skapar, kommer du att vara "inuti" den här MovieClip. Skriv lite statisk text och ge den en vit färg. Jag använder samma PixelMix-teckensnitt som tidigare. För att skapa en simulerad strokefärg, ger jag den en glödfiltereffekt med de inställningar som ses nedan.
Skapa ett nytt lager som heter AssetHolder. Gör en keyframe på den andra ramen, tryck Ctrl + F8 för att skapa en ny MovieClip och namnge den AssetHolder. Exportera inte detta för ActionScript.
I AssetHolder MovieClip skapar du tre lager som heter AS, musik och tillgångar. Eftersom "musik" är namnet på det ljudobjekt vi använder, det är vad jag namnger laget. Nu måste du stoppa (); ringa på den första ramen i AS-skiktet.
Gör sedan en keyframe på den andra ramen för både musik- och tillgångsskiktet. Dra musikljudet på scenen när du står på den andra keyframen i musiklagret. Gör sedan detsamma med TextHolder MovieClip på asset-lagret.
Avsluta från AssetHolder MovieClip och se till att du placerar den på andra keyframe i AssetHolder-lagret på huvudtidslinjen. Som du märker är MovieClip inte synlig, men det är placable vilket är ganska coolt!
Okej, nu vill vi bara se till att vi spelar ljudet och visar TextHolder MovieClip. Lägg till detta i applikationsklassens konstruktör:
var s: Musik = nytt musik (); s.play (); var textHolder: TextHolder = ny TextHolder (); textHolder.x = 120; textHolder.y = 20; addChild (textHolder);
Fortsätt och förhandsgranska filmen. Du borde nu, oavsett om du är på CS3 eller CS4, kunna simulera en nedladdning av den här filmen och se den preload vackert från 1 procent! Observera att det inte börjar med 0 procent. Hade vårt innehåll varit större och preloader mindre än det kunde ha varit möjligt.
Nu kanske du undrar varför du stirrar på den här apelsinkatten som är kopplad till en kort spelskärmsmusik. Det här är normalt att fråga dig själv.
Förhoppningsvis nu borde du ha all den kunskap du behöver för att förinställa saker som du vill, i en enda SWF-fil! För att se den slutliga versionen av alla klassfiler bara ladda ner källfilerna för denna handledning och kolla in dem.
Jag är ohälsosam besatt av detta ämne så jag kommer gärna att diskutera i kommentarerna. Vänligen gå med om du har frågor eller idéer!
