Den omfattende veiledningen for å forhåndsføre en enkel SWF-fil

I denne opplæringen lager vi en SWF som forhåndsinnstiller seg, noe som betyr at forprogrammeringen og innholdet er i samme fil. Vi går over hvordan du gjør ting på riktig måte og unngår feller.


Trinn 1: Hva er Single SWF Preloading?

Ideen om enkel SWF-forhåndsbelastning er at du har et Flash-objekt som forlaster seg selv. Det betyr at preloaderen, med tilhørende funksjonalitet og ressurser, er innebygd sammen i samme SWF-fil som hele Flash-filmen eller -applikasjonen.

Vi starter denne opplæringen med litt teori og avsluttes med å skape en FLA sammen med en forhåndslasterklasse som du kan bruke i fremtidige prosjekter. I løpet av opplæringen drøfter vi vanlige fallgruver og viktige hensyn.

Også, nå som Activetuts + har begynt å fokusere på dokumentklasser og generelt holder ting i klassefiler så mye som mulig, gjør vi nettopp det i den praktiske delen av denne opplæringen. Sjekk ut Quick Tip: Slik bruker du en dokumentklasse i Flash hvis du trenger å lære det grunnleggende.

Pass på at du har en oppdatert versjon av enten Flash CS3 eller Flash CS4. Jeg vet sikkert at en senere CS4-oppdatering har endret måten klassene er lastet inn, og det kan gjøre hele forskjellen her!

Jeg innrømmer med det samme at denne opplæringen er ganske lang for dette smale emnet, men det inneholder alt du trenger å vite, så spenne og la oss komme til det!


Trinn 2: Hvorfor enkelt SWF forhåndsinnlasting?

Ideen om en forhåndslaster er ganske åpenbar: du vil sørge for at brukeren får visuell tilbakemelding som indikerer at Flash-objektet lastes. Ved å legge inn en stor Flash-fil som tar 10 sekunder å laste kan det bety forskjellen mellom brukere som bor eller forlater nettstedet, bør det ikke være for forprogrammeringen som forteller brukeren å holde på.

Prosessen med å lage "selvlastende" Flash-filer presenterer noen problemer og problemer. Det finnes andre forhåndsbelastningsteknikker som er veldig enkle å sette sammen, for eksempel en SWF-fil som forhåndslaster en annen og legger den til scenen en gang lastet.

Så hvorfor bry deg? Vel, det er situasjoner der du ikke har noe valg.

For eksempel vil du kanskje lage Flash-spill som du håper å spre til så mange Flash-spillportaler som mulig. De fleste av disse portaler støtter bare spill i form av en enkelt SWF-fil, som gir deg intet annet valg enn å sørge for at spillet ditt laster inn pent i seg selv.

Bortsett fra slike åpenbare eksempler, er det argumentet om å ha et ferdig produkt i bare en fil som gjør det enkelt å administrere.


Trinn 3: Hvordan SWF-filer er lastet

Når nettleseren snubler over et Flash-objekt og begynner å laste det, starter det fra begynnelsen av tidslinjen. Det laster rammene etter hverandre. Så snart den første rammen er lastet, kan den vises.

Vår tilnærming her er å sette en forhåndslaster på den første rammen, slik at brukeren ser noe som skjer, mens nettleseren fortsetter å laste resten av filen. Vi skriver kode for å sjekke den generelle fremgangen, og når den er fullført fortsetter vi videre til hovedinnholdet i filen.

Utfordringen er å holde størrelsen på den første rammen til et minimum. Hvis du lar kode og lyder hakke opp i den første rammen, kan du ha en forhåndsinnlasting som ikke er synlig før du har lastet inn 60% av filmen.

Et godt tips når det gjelder å bruke en prosentvis teller som viser tall er å bruke en skrift som er liten i byte størrelse. Men dette tar bare deg så langt. Dessverre må vi jobbe litt vanskeligere for å få ting på vei!

Det har blitt sagt mange ganger før, og det er verdt å si igjen:

Preloaders, den vanskeligste av de enkleste oppgavene i Flash ...

Trinn 4: Definere variabler

Det er en rekke ting som vil påvirke hva som skal settes i hvilken ramme som:

  • Hvor på tidslinjen legger du eiendeler.
  • Hvilken ramme du velger som "Eksportramme for klasse" (se trinn 11).
  • Enten du lager eiendeler før eller etter klassen eksportramme.
  • I Flash CS4 - velger du om du vil eksportere aktiva i klassekortrammen (i dialogboksen for symbolegenskaper).
  • I Flash CS3 - velger du om du vil eksportere aktiva i første ramme (i dialogboksen for symbolegenskaper).
  • Enten du bruker lyder.

Trinn 5: Problemene

Hovedproblemet vi står overfor er kontrollerer hva som ender på ramme en, fordi, som nevnt ovenfor, må alt på rammen lastes før forhåndslaster kan vises.

Annet enn det, er det forskjeller på hvordan Flash CS3 og CS4 fungerer. I det neste trinnet skal jeg lage en rekke grundig undersøkte setninger som du kan henvise til om nødvendig. Det bør være en god ressurs hvis du raskt vil feilsøke forhåndsbelastningen, for å finne ut hvorfor det ikke oppfører seg som du forventer.

Jeg vil forsøke å gjøre uttalelsene litt mer håndgripelige ved å henvise til TweenLite, et flott tweening-bibliotek av Jack Doyle over på greensock.com. Vi bruker TweenLite i den praktiske delen av denne opplæringen, slik at dette vil gi mest mening.


Trinn 6: Erklæringene

Disse utsagnene gjelder både for Flash CS3 og CS4 med mindre annet er angitt. "Importere TweenLite" betyr i utgangspunktet "import og bruk av TweenLite" - resultatene kan variere hvis du ikke faktisk bruker koden som Flash-kompilatoren overser ubrukt import. Bare å skrive en importoppgave samsvarer ikke med koden.

  • Hvis du importerer TweenLite på en ramme i hoved tidslinjen, vil TweenLite lastes inn i filmens første ramme.
  • Hvis du har en MovieClip som importerer TweenLite i sin interne tidslinje og plasserer denne MovieClip etter klassen eksport ramme, vil TweenLite lastes i klassen eksport ramme.
  • Hvis du har en MovieClip som importerer TweenLite i sin interne tidslinje og plasserer denne MovieClip før Klassen eksportrammen, vil TweenLite lastes inn i filmens første ramme.

De neste tre setningene refererer til scenariet der du har en MovieClip som eksporteres for ActionScript, ved hjelp av en ekstern klassefil, som i sin tur importerer TweenLite i klassefilen.

  • Plassere MovieClip etter Klassen eksportrammen vil gjøre TweenLite belastning på klassen eksport ramme. Det er ingen forskjell om du sjekker "Eksporter i ramme X" ("Eksporter i første ramme" for CS3) om importerte klasser som TweenLite. Men avmerkingsboksen påvirker hvorvidt eiendelene (formene, bitmapene) til MovieClip vil bli lastet inn i eksportrammen eller ikke. Når det gjelder CS3, kan du selvfølgelig bare velge hvorvidt eller ikke å laste den i den første rammen.
  • I Flash CS4 plasserer MovieClip før Klassen eksportrammen vil gjøre TweenLite last på den første rammen. Det er ingen forskjell om du sjekker "Eksporter i ramme X" eller ikke. Ikke-kodeverdiene til MovieClip vil også lastes på den første rammen.
  • I Flash CS3 hvis du plasserer MovieClip før klassen eksport ramme, så uansett om du har sjekket "Eksporter i første ramme", vil du få en stille feil! Betydning: MovieClip du legger på scenen som skal bruke en ekstern klassefil, vises bare som en vanlig MovieClip, og gir deg ingen indikasjon overhodet. Du kan imidlertid fortsatt påvirke om form / bitmappeinnholdet til MovieClip skal lastes inn i den første rammen eller ikke. Dette hjelper ikke egentlig selv da du er like skrudd med klassen lasting.

De neste tre setningene refererer til scenariet der du har en MovieClip som eksporteres til ActionScript som "CustomClass", enten ved hjelp av en ekstern klassefil eller ikke, som er instantiated og lagt til scenen fra en MovieClip som er plassert på tidslinjen (bare som MovieClip fra de tre foregående setningene.) Denne CustomClass er bare instantiated og eksisterer ikke tidligere på hoved tidslinjen.

  • I Flash CS4 Med boksen "Eksporter i ramme X" merket, er CustomClass lastet i ramme X og vil vises riktig. Med boksen unchecked er den fortsatt lastet i ramme X og vises riktig.
  • I Flash CS3 Med boksen "Eksporter i første ramme" merket, er CustomClass lastet i den første rammen og vil vises riktig. Med boksen unchecked vil du få en 1046 Type feil, da klassen ikke kan bli funnet.

Med alle disse begrensningene, la oss i det minste vurdere denne positive uttalelsen:

  • Hvis du plasserer en MovieClip som bare inneholder figurer / bitmaps, vil den bare lastes rett før rammen det trengs. Med mindre du velger å eksportere det tidligere, så er det!

Her er en veldig interessant en:

  • I Flash CS3 Du kan ikke eksportere en lyd på noe annet enn den første rammen. I Flash CS4 du kan, på klassen eksport ramme.

Ja, du leser det riktig. Jeg antar det er rimelig å anta at Adobe vil at folk skal oppgradere til CS4. Så hva skal du gjøre hvis du sitter fast med CS3 og gresset er grønnere på den andre siden? Jeg forteller deg i neste trinn.


Trinn 7: Laster inn eiendeler i Flash CS3

Hele dette trinnet er bare for de som bruker Flash CS3.

Hvis du leser gjennom alle uttalelsene i forrige trinn, så vil du innse problemet med å ha mange MovieClips eksportert for ActionScript. Disse må alle lastes inn i ramme ett, eller være utilgjengelig. Heldigvis var disse utsagnene under antagelsen om at disse eiendelene aldri ble plassert på hovedlinjen, som er vår løsning! (Dette er også den eneste måten å laste inn lyder annet enn i ramme ett ...)

Slik gjøres det:

  1. Gå inn i egenskapene til alle MovieClip / Sprite / Sound-eiendelene du vil eksportere og fjern merket "Eksporter i første ramme".
  2. I den andre rammen av hovedtidslinjen lager du en tom MovieClip kalt AssetHolder.
  3. I denne AssetHolder MovieClip, opprett et handling lag som har et stopp (); ring på den første rammen.
  4. Fortsett i AssetHolder, lag et lag for hver lyd du vil bruke, og dra disse lydene ut til den andre rammen i sitt eget lag. De ikke må være lengre enn en ramme, heldigvis. For alle andre Sprites og MovieClips kan du plassere disse i et enkelt lag eller flere for enklere organisering. Legg også disse på den andre rammen og la den første rammen være tom.

Dette vil gjøre alle dine eiendeler lastet i den andre rammen. Løsningen er litt klebrig, men det er ikke så grov som å måtte gå og kjøpe ny programvare for dette bestemte problemet.

(Kudos til 8bitrocket for dette trikset!)


Trinn 8: Båndbreddeprofil og størrelsesrapport

En ting jeg bør nevne før vi begynner å jobbe, er båndbreddeprofileren. Dette er et viktig verktøy for å sortere ut forhåndsbelastningsproblemer. Når du forhåndsviser en film, kan du gå opp for å se, og deretter velge båndbreddeprofil. Eller bare klikk Ctrl + B.

Her kan du bytte mellom ramme-for-rammediagrammer og streaminggrafer. Du kan også simulere nedlasting av filmen med en tilkoblingshastighet du ønsker, enten ved å velge den fra Vis-menyen eller trykke på Ctrl + Enter igjen (endre simulert nedlastingshastighet ved hjelp av undermenyen Vis> Last ned-innstillinger). Dette er viktig for å finne ut hvordan forprogrammereren din vil se ut, uten å gå gjennom bryet med å laste opp det og capping din båndbredde. For det spesielle tilfellet skjønt, kan jeg anbefale Firefox Throttle.

Foruten det svært nyttige verktøyet som er båndbreddeprofilen, er det muligheten til å generere en størrelsesrapport. Trykk Ctrl + Shift + F12 for å åpne dialogboksen Publiseringsinnstillinger.

Gå til Flash-fanen, og i avanserte delen er det en avkrysningsrute merket "Generer størrelsesrapport". Når denne boksen er merket, vil det forhåndsvise eller publisere filmen din generere en tekstfil i samme mappe som din FLA-fil som inneholder nyttig informasjon om hvilke deler som utgjør den totale størrelsen på filmen.


Trinn 9: Teoriens slutt

Til slutt kan vi begynne å lage en Flash-film med en fin, selvforsynt preloader!

Vi vil benytte en "tre ramme forhåndsbelastning" teknikk. På den første rammen legger vi en forhåndslaster MovieClip som har sin egen klasse "Preloader". På den andre rammen laster vi alle klassene og på den tredje rammen laster vi inn og viser innholdet. Vi legger innholdet i en MovieClip navngitt Program med en tilhørende klasse "Application". Dette er hvor kjøttet i søknaden går.


Trinn 10: Opprett nytt dokument

Start med å opprette et nytt AS3-dokument. Jeg lager den 600x400px, mørkegrå bakgrunn, 24 FPS. Disse innstillingene spiller ingen rolle om.

Sett dokumentklassen til Hoved og trykk OK.


Trinn 11: Sett klasseeksportrammen

Gå til Arkiv> Publiser innstillinger, Flash-fanen og deretter innstillingene for ActionScript 3.0. Skriv inn "ramme 2" i "Eksportklasser i ramme" -feltet.


Trinn 12: Design en forhåndsinnlasting

Åpenbart vil utformingen av en forlaster ikke påvirke funksjonen. Jeg gir trinnvise instruksjoner, men vær så snill å hoppe over disse delene og ta din egen tilnærming hvis du ønsker det. Bare vær sikker på at du noterer hvilke deler jeg refererer til i koden senere.

Tegn et rektangel med avrundede hjørner og gi den en blå gradient. Deretter setter du det inn i et MovieClip-symbol, kall det Preloader. Velg å eksportere den til ActionScript og ring klassen Preloader.

Innenfor denne nye MovieClip, tegne et nytt avrundet hjørne rektangel med en grå gradient, slå den inn i en annen MovieClip og gi den et forekomstnavn på progressArea.

Fortsett og lag opp laglayouten jeg har gått på i bildet ovenfor. Deretter lager du en duplikat av den siste formen og plasserer den i fremdriftslinjelaget øverst i fremdriftsområdet ett. Gi den en lyseblå gradient, slå den inn i en MovieClip og gi den et forekomstnavn på progressBar. Aktiver guider for 9-skala-skalering og sørg for at du holder venstre og høyre runde kanter utenfor.

Til slutt, lage et dynamisk tekstfelt med et forekomstnavn på prosentteksten. Gjør teksten høyrejustert. På den måten vil prosentandesignalet aldri bevege seg, bare tallene (som endrer seg uansett). Gå inn i embedding av karakter og sørg for at du legger inn tall og prosentandelstegn (%). For å lage en veldig liten preloader bruker jeg en liten pixelfont kalt Pixel Mix fra dafont.com. Jeg gir det også en blå glød bare fordi jeg kan.


Trinn 13: Tilbake til scenen

Pass på at hele forhåndsinnstillingsfilmen MovieClip er plassert i den første rammen og gitt et forhåndsnavn for forhåndsinnlasting. Opprett et nytt lag kalt "AS" og sett et stopp (); i den første rammen. Hold preloaderen i eget lag, "Preloader". Lag et annet lag kalt "Application". Det er her vi vil holde hovedinnholdet til slutt.


Trinn 14: Opprett hovedklassen

Opprett en ny ActionScript-fil og lagre den i samme katalog som FLA-filen. Navn den Main.as:

 pakke import flash.display.MovieClip; importere flash.events.Event; offentlig klasse Main utvider MovieClip offentlig funksjon Main () preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loaderInfo);  privat funksjon onPreloaderComplete (e: Event): void gotoAndStop (3); 

Trinn 15: Opprett forlasterklassen

Opprett en ny ActionScript-fil og lagre den i samme katalog som Preloader.as:

 pakke import flash.display.LoaderInfo; importer flash.display.MovieClip; importere flash.events.Event; importer flash.events.ProgressEvent; offentlig klasse Preloader utvider MovieClip offentlig funksjon Preloader ()  offentlig funksjon setLoaderInfo (ldrInf: LoaderInfo): void ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete);  privat funksjon onProgress (e: ProgressEvent): void var prosent: int = Math.round (e.bytesLoaded / e.bytesTotal * 100); progressBar.width = prosent / 100 * progressArea.width; percentText.text = prosent + "%";  privat funksjon onComplete (e: Event): void dispatchEvent (e); 

Trinn 16: Ta tak i Main og Preloader

Så hva gjør disse to klassene?

I hovedkonstruktøren kaller vi den egendefinerte setLoaderInfo () -metoden til vår preloader, og passerer LoaderInfo-objektet som er knyttet til Main.

Preloader mottar dette objektet og legger til to hendelselyttere. ProgressEvent utløser onProgress-funksjonen, der vi beregner prosentandelen av byte lastet i forhold til totalt byte som skal lastes. Prosentandelen brukes til å angi bredden på fremdriftslinjen og teksten i tekstfeltet.

Den komplette hendelsen sendes ganske enkelt tilbake ned til Main, som igjen springer hovedlinjen for å ramme tre når den mottar arrangementet.


Trinn 17: Legge til noe innhold

For å ha noe å tydeligvis vise forlasteren, legger jeg til et fint makrobilde av en katt som heter Runa, tatt av en venn av meg. Du finner bildet i kildefilene som følger med denne opplæringen. Jeg har importert bitmapet og jeg slår den inn i en MovieClip kalt "Cat".

Ta gjerne med det bildet du finner passende. Gi klippet et forekomstnavn på "cat".


Trinn 18: Opprette applikasjonen MovieClip

Som du kan se på skjermbildet ovenfor, har jeg plassert Cat MovieClip på ramme tre i applikasjonslaget. Ta hva som helst MovieClip du har laget, katt eller ingen katt, og trykk F8 igjen for å nest den inn i en ny MovieClip som du kaller Application. Eksporter dette til ActionScript som Application.


Trinn 19: Søknadsklassen

Opprett applikasjonsklassen ved å starte en ny AS-fil og lagre den som "Application.as". La søknadsklassen se slik ut:

 pakke import com.greensock.TweenLite; importere com.greensock.easing.Sine; importer flash.display.MovieClip; offentlig klasse Søknad utvider MovieClip offentlig funksjon Program () TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, ease: Sine.easeInOut);  privat funksjon tweenBack (): void TweenLite.to (cat, 3, scaleX: 1, scaleY: 1, onComplete: reTween, ease: Sine.easeInOut);  privat funksjon reTween (): void TweenLite.to (cat, 7, scaleX: 4, scaleY: 4, onComplete: tweenBack, lette: Sine.easeInOut); 

Dette vil animere katten inn og ut på ubestemt tid, slik at du alltid vil huske detaljene i nesebelten hennes. Hvordan denne klassen fungerer er ikke viktig, hva er viktig er at vi importerer TweenLite og bruker det, slik at det blir en del av SWF-filen en gang eksportert.


Trinn 20: CS3- og CS4-problemer

La oss gå tilbake til skolebenken igjen for bare et minutt.

Denne filmen kompilerer fint i CS4. Programmet MovieClip er satt til å eksportere på ramme 2 med mindre du har endret det. Hvis du har endret det, kan du merke noe merkelig. Mer om dette i neste trinn.

Hvis du er på CS3, er denne innstillingen virkelig viktig. Du må gå og sørg for at du fjerner avkryssningsfeltet "Eksporter i første ramme" i Egenskapene til Application MovieClip, ellers vil det hele lastes inn i den første rammen!

Det er ikke det eneste problemet. Hvis du prøver å kompilere, får du en 1046 Type-feil, og sier at du ikke har typen TextField tilgjengelig. Så som du kan gjette, gjør CS3 litt annerledes. Hva skjer? Vel, du prøver å bruke en TextField inne i Preloader MovieClip, men du har ikke den importert. I CS4 håndteres dette automatisk for deg, men ikke i CS3.

Heldigvis er løsningen enkel, bare legg til:

 importer flash.text.TextField;

til Preloader-klassen, og du er helt klar.

Noen av dere har kanskje allerede trodd at jeg burde ha utvidet Sprite til min Preloader-klasse i stedet for MovieClip. Vel, dette er grunnen til at jeg ikke gjorde det; Jeg ville vente til dette punktet for å få det opp. Siden Preloader-symbolet inneholder både "ProgressArea" og "ProgressBar", som begge er MovieClips, ville du ha fått samme 1046 Type-feil.

Den samme løsningen er også mulig her selvfølgelig. Faktisk bør du nå endre Preloader for å utvide Sprite i stedet for MovieClip, og hvis du bruker CS3, må du importere Sprite-klassen i Preloader-klassen også.


Trinn 21: Enda et annet problem

Jeg nevnte en merkelig forekomst i det siste trinnet. Hvis du fjerner merket "Eksporter i ramme 2" av Program og kjører en simulert nedlasting, vil du se at forhåndsinstallatoren forsvinner, med mindre du har utvidet forhåndslasterens keyframe for å dekke den andre rammen også.

Så hva skjer egentlig? Enkelt sagt, det første stoppet (); erklæringen teller ikke. Hvordan er det for åpenbar arbeidsflytplanlegging? Vær oppmerksom på at hvis du legger en sporoppgave i den første rammen etter stoppet (); ring, det sporer ut. Viktig: Legg merke til at dette problemet bare viser seg når vi simulerer nedlasting!

Lærdommen lært her er ikke stol på den simulerte nedlastingen! Det vil ikke vise deg nøyaktig hvordan ting vil laste og fungere. Du kan bare holde stoppet (); og forhåndslaster i den første rammen, og du får det bra når det gjelder distribusjon. Det kan imidlertid være vondt å forhåndsvise, med mindre du har programmet satt til å eksportere på ramme 2. Og det er bare for dette bestemte scenariet.

I CS3 må du fjerne merket av eksportboksen på Application MovieClip ellers vil du ende opp med å laste den i den første rammen. Men hvis du gjør det, kommer du inn i dette problemet. Så gå videre og utvide preloaderen til den andre rammen.


Trinn 22: Test filmen

Gå videre og forhåndsvis filmen. Kjør en simulert nedlasting med lav hastighet, og nyt den mesterlige * utformede forlasteren (* gjelder kun mesterlig hvis du har fulgt instruksjonene i brevet).

Hvis du ser på rammen for ramme-rammen eller en generert størrelserapport, ser du at koden er lastet i den andre rammen. Den første rammen er bare 4kb og består av Preloader-klassen og de innebygde skriftglyfer. Nå, 4kb er ganske rimelig så langt som ventetid før du ser på forhåndslaster er bekymret, tror du ikke?

Du kan se forskjellige størrelser på CS3, og du vil definitivt se forskjellige størrelser med forskjellige skrifter. Eller katter.


Trinn 23: Tweening Preloader

Du kan ha ideen om at du vil bruke TweenLite til å fade bort forladeren ved å tweening alfa til 0 - men du vil ikke laste TweenLite i den første rammen siden det legger til en annen 8kb til den første nedlastingen.

Det er flere måter å oppnå dette, og vi vil løse det ved å ha en MovieClip på den tredje rammen som fanger preloaderen og tweens den. Når du er ferdig, vil den gå videre til den fjerde rammen, som vi har flyttet Program til.

Grunnen til å sette den i den tredje rammen er at vi ikke kan sette den i den andre rammen uten at TweenLite blir lastet i den første rammen.

Nå beveger vi oss vekk fra den vanlige trerammen for forhåndsbelastningsteknikken.


Trinn 24: Legg til et lag og Stopp (); samtaler

Legg til et nytt lag kalt "Preloader catcher". Pass på at du stopper (); kaller rammer en, to og tre. Dette er for å forhindre forstyrret forhåndsvisning når du simulerer en nedlasting, som tidligere nevnt.

Gå videre og flytt Programmet til den fjerde rammen, så vel som å utvide Preloader til den tredje rammen.


Trinn 25: Lag oppfangeren

Sørg for at du har en keyframe på den tredje rammen av forhåndslasterfangerlaget. Gå til denne rammen, tegne en liten form og ha alpha av fyllfarge satt til 0%. Dette er ment å være en usynlig MovieClip. Slå den inn i et MovieClip-symbol som heter PreloaderCatcher eller noe lignende.

Eksporter MovieClip som PreloaderCatcher. Hvis du bruker CS4, spiller det ingen rolle om du eksporterer det til ramme 2 eller ikke, siden det blir lastet i den rammen, uansett hva. Vel, det endrer en ting, husk? Hvorvidt eller ikke form er lastet på ramme 2. I hovedsak spiller det ingen rolle i betraktning av den nærværende ikke-eksisterende filstørrelsen for denne formen. Du kan like godt fjerne det for god vane skjønt.


Trinn 26: PreloaderCatcher-klassen

Lag en ny klassefil som heter PreloaderCatcher.as:

 pakke import com.greensock.TweenLite; importer flash.display.MovieClip; importer flash.display.Sprite; importere flash.events.Event; importere preloader; offentlig klasse PreloaderCatcher utvider Sprite public function PreloaderCatcher () addEventListener (Event.ADDED_TO_STAGE, onAdded);  privat funksjon onAdded (e: Event): void removeEventListener (Event.ADDED_TO_STAGE, onAdded); var preloader: Sprite = MovieClip (foreldre) .getChildByName ("preloader") som Sprite; TweenLite.to (preloader, 0.5, ala: 0, onComplete: function (): void MovieClip (foreldre) .nextFrame ();); 

Som du kan se, fungerer denne klassen ved å først skaffe preloaderen ved å kaste foreldre som en Sprite og ringer getChildByName ("preloader"), der preloader er instansnavnet. Preloaderen er også kastet en Sprite, så er TweenLite vant til det.

Når tweening er fullført, kaster onComplete-funksjonen i TweenLite foreldre som en MovieClip, så det er mulig å ringe nesteFrame-metoden.


Trinn 27: Hvorfor de fire rammene?

Som jeg sa før, har vi nå flyttet vekk fra de tre rammebelastningsteknikkene. Det er i seg selv ikke akkurat blasfemi, men jeg er sikker på at noen av dere lurer på hvorfor vi gjorde det. I stedet kunne vi ha håndtert forhåndsinnlastingstiltaket inne i applikasjonsklippet ...

I så fall er du helt riktig! Grunnen til at jeg brukte fire rammer her var å vise deg hvordan du gjør det mens du holder ting skilt. Tweening vekk preloaderen; tilhører det forprogrammeringsdelen eller applikasjonsdelen? Preloader definitivt, men i dette tilfellet ville vi ikke laste den i den første rammen. Derfor slutter vi med denne ekstra "catcher" -klassen.

Bare husk at dette er alt valgfritt. Når du vet hvordan du gjør alt, kan du enkelt bestemme hva situasjonen din krever.


Trinn 28: Lyder og ekstra eiendeler

I trinn 7 fortalte jeg deg om aktivitetslastingsproblemer i CS3. Siden denne opplæringen er rettet mot både brukere av CS3 og CS4, går vi med den laveste fellesnevneren og bruker AssetHolder-tilnærmingen. Hvis du bruker CS4, kan du utføre de neste trinnene på samme måte, og det vil fungere akkurat, eller du kan hoppe over AssetHolder-tilnærmingen.

Start med å importere lyden "music.wav" fra kildefilene til FLA.

Gå inn og eksporter den til ActionScript, og kontroller at du fjerner merket for "Eksporter i første ramme" i CS3. For CS4 vil dette ikke gjøre mye av en forskjell. Jeg bruker Flash CS4 som du sikkert har funnet ut nå, så skjermbildene viser CS4-dialogboksen. Hvis du vil, kan du bytte fra standard MP3-komprimering til noe mer behagelig. På den måten høres det ikke forferdelig ut.

La oss gå gjennom et par flere trinn, legge til litt tekst i filmen og legg alt i en AssetHolder MovieClip!


Trinn 29: Opprett litt tekst

Trykk Ctrl + F8 for å lage et nytt MovieClip-symbol. Navngi det TextHolder og eksporter det til ActionScript, igjen (i CS3), kontroller at boksen "Eksporter i første ramme" ikke er merket av.

Når du oppretter, vil du være "inne" i denne MovieClip. Skriv litt statisk tekst og gi den en hvit farge. Jeg bruker samme PixelMix-skrift som tidligere. For å opprette en simulert slagfarge, gir jeg den en glødfiltereffekt med innstillingene som er sett nedenfor.


Trinn 30: Opprett AssetHolder

Lag et nytt lag som heter AssetHolder. Lag en keyframe på den andre rammen, trykk Ctrl + F8 for å lage en ny MovieClip og gi den navnet AssetHolder. Ikke eksporter dette for ActionScript.

I AssetHolder MovieClip lager tre lag kalt AS, musikk og Assets. Siden "musikk" er navnet på lydobjektet vi bruker, det er det jeg navngir laget. Nå må du sette et stopp (); ring på den første rammen av AS-laget.

Deretter lager du en keyframe på den andre rammen av både musikken og aktiva-laget. Dra musikklyden på scenen når du står på den andre keyframe i musikklaget. Gjør det samme med TextHolder MovieClip på eiendomslaget.

Gå ut av AssetHolder MovieClip og sørg for at du plasserer den på den andre keyframe av AssetHolder-laget på hoved tidslinjen. Som du vil merke, er MovieClip ikke synlig, men det er plassbart, noe som er ganske kult!


Trinn 31: Endre applikasjonsklassen

Ok, nå vil vi bare sørge for at vi spiller lyden og viser TextHolder MovieClip. Legg dette til applikasjonsklassens konstruktør:

 var s: musikk = ny musikk (); s.play (); var textHolder: TextHolder = ny TextHolder (); textHolder.x = 120; textHolder.y = 20; addChild (textHolder);

Trinn 32: Forhåndsvis filmen

Gå videre og forhåndsvis filmen. Du bør nå, uansett om du er på CS3 eller CS4, kunne simulere en nedlasting av denne filmen og se den preload vakkert fra 1 prosent! Vær oppmerksom på at den ikke starter med 0 prosent. Hadde innholdet vært større og preloader mindre enn det kunne ha vært mulig.

Nå kan du kanskje lure på hvorfor du stirrer på denne oransje katten, parret med en kort spill-esque musikkmerke. Dette er normalt å spørre deg selv.


Konklusjon

Forhåpentligvis nå bør du ha all den kunnskapen du trenger for å forhåndslaste ting slik du vil, i en enkelt SWF-fil! For å se den endelige versjonen av alle klassefilene, laster du bare ned kildefilene for denne opplæringen og sjekker dem ut.

Jeg er usunn besatt av dette emnet, så jeg vil gjerne komme inn i diskusjonen i kommentarene. Vennligst bli med hvis du har spørsmål eller ideer!