Den omfattende guide til Preloading en enkelt SWF File

The omfattende guide til Preloading en enkelt SWF-fil
Del
Del
en
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil vi skape en SWF som forbelaster seg, noe som betyr at preloader og innholdet er i samme fil. Vi vil gå over hvordan du gjør ting riktig måte og unngå fellene




Trinn 1:.? Hva er Single SWF forhåndsinnlasting

Ideen om enkelt SWF forbelastning er at du har en Flash-objekt som preloads selv. Det betyr at preloader, med tilhørende funksjonalitet og eiendeler, er innebygd sammen i samme SWF-fil som hele Flash movie eller program.

Vi vil starte denne opplæringen med litt teori og avsluttet med skape en FLA sammen med en preloader klasse som du kan bruke i fremtidige prosjekter. I løpet av opplæringen vil vi diskutere vanligste fallgruvene og viktige hensyn.

Også nå som Activetuts + har begynt å fokusere på dokument klasser og generelt holde ting i klassefilene så mye som mulig, vil vi gjøre nettopp det i den praktiske delen av denne opplæringen. Sjekk ut Quick Tips:. Slik bruker du et dokument klasse i Flash hvis du trenger å lære det grunnleggende

Kontroller at du har en oppdatert versjon av enten Flash CS3 eller Flash CS4. Jeg vet med sikkerhet at en senere CS4 oppdatering har endret måten klassene er lastet og som kan gjøre hele forskjellen her!

Jeg skal innrømme med en gang at denne opplæringen er ganske lang for denne smale fag, men det inneholder alt du trenger å vite, så spenne opp og la oss få til det



Trinn 2: Hvorfor Enkelt SWF forhåndsinnlasting

ideen om en preloader er ganske åpenbar: du vil å sørge for at brukeren får visuell tilbakemelding angir at Flash-objekt lastes. Bygge en stor Flash-fil som tar 10 sekunder å laste kan bety forskjellen mellom brukerne bor eller forlate nettstedet, bør det ikke være for preloader fortelle brukeren til å holde på.

Prosessen med å lage "self preloading "Flash-filer presenterer noen problemer og problemer. Det er andre preloading teknikker som er veldig lett å sette sammen, for eksempel en SWF-fil preloading hverandre og legge det til scenen en gang lastet.

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

For eksempel kan det være lurt å lage Flash-spill som du håper å spre seg til så mange Flash gaming portaler som mulig. De fleste av disse portalene kun gi støtte til spill i form av en enkelt SWF-fil som etterlater deg med noe annet valg enn å sørge for at spillet forbelaster pent innenfra seg selv.

Bortsett fra slike åpenbare eksempler, det er argumentet for å ha et ferdig produkt i én fil som gjør det enkelt å administrere



Trinn 3:. Hvordan SWF-filer er lastet

Når nettleseren snubler over en Flash-objekt og begynner å laste den, starter fra begynnelsen av tidslinjen. Den laster rammer en etter en. Så snart den første rammen er lastet, kan den bli vist.

Vår tilnærming er å sette en preloader på den første rammen slik at brukeren ser noe som skjer, mens nettleseren fortsetter å laste inn resten av filen . Vi skrive kode for å sjekke den generelle fremdriften og når det er ferdig fortsetter vi videre til hovedinnholdet av filen.

Utfordringen er å holde størrelsen på den første rammen til et minimum. Hvis du lar koden og lyder hoper seg opp i det første bildet du kan ha en preloader som ikke er synlig før etter at du har lastet kanskje 60% av filmen.

Et godt tips når det gjelder å bruke en prosentandel teller som viser tall er å bruke en font som er liten i byte størrelse. Men dette bare tar deg så langt. Dessverre må vi jobbe mye hardere for å få ting på vår måte

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

preloaders, den vanskeligste av de enkleste oppgaver i Flash. .

Trinn 4: definere variabler

Det finnes en rekke ting som vil påvirke hva som vil bli satt i hvilken ramme, for eksempel:

Hvor på tidslinjen du putter eiendeler.

Hvilke ramme du velger som "class eksport frame" (se trinn 11).

Om du sette eiendeler før eller etter at klassen eksport rammen.

I Flash CS4 -. velge om du vil eksportere eiendelen i klassen eksport ramme (i dialogboksen symbol egenskaper)

I Flash CS3 - velge om du vil eksportere eiendelen i første bildet (i symbolegenskapsdialogen)

Enten du bruker lyder



Trinn 5:.. problemene

Det største problemet vi står overfor er Kontrollere hva som ender opp på ramme en
, fordi, som nevnt ovenfor, har alt på ramme en som skal lastes før preloader kan vises.

Annet enn at det er forskjeller mellom hvordan Flash CS3 og CS4 arbeid. I neste trinn vil jeg gjøre en rekke grundig undersøkt påstander som du kan se tilbake på ved behov. Det bør være en stor ressurs hvis du raskt ønsker å feilsøke forbelastning, for å finne ut hvorfor det ikke oppfører seg slik du forventer.

Jeg skal prøve å gjøre uttalelsene litt mer konkret ved å henvise til TweenLite, en stor tweening bibliotek av Jack Doyle over på greensock.com. Vi skal bruke TweenLite i hendene på en del av denne opplæringen slik at dette vil gjøre det mest fornuftig



Trinn 6:. Uttalelsene

Disse uttalelsene gjelder for både Flash CS3 og CS4, med mindre annet er angitt. "Importere TweenLite" i utgangspunktet betyr "å importere og bruke TweenLite" - resultatene kan avvike hvis du ikke egentlig bruke koden som Flash kompilatoren ser bort ubrukte import. Bare å skrive en import uttalelse ikke er lik ved hjelp av koden.

  • Hvis du importerer TweenLite på en ramme i hovedtidslinjen, vil TweenLite legges i det første bildet i filmen.
  • Hvis du har en MovieClip som importerer TweenLite i sin interne tidslinje og plassere denne MovieClip etter
    klassen eksport ramme, vil TweenLite legges i klassen eksport rammen.

    Hvis du har en MovieClip som importerer TweenLite i sin interne tidslinje og plassere denne MovieClip før
    klassen eksport ramme, vil TweenLite legges i det første bildet i filmen.

    de tre neste utsagn refererer til scenariet der du har en MovieClip som er eksportert for Actionscript, ved hjelp av en ekstern klasse fil, som igjen importen TweenLite i klassen filen.

    Plassere MovieClip etter
    klassen eksport ramme vil gjøre TweenLite belastningen på klassen eksport rammen. Det er ingen forskjell om du sjekke "Export i ramme X" ( "Export i første frame" for CS3) om importerte klasser som TweenLite. Imidlertid påvirker boksen hvorvidt eiendeler (former, punktgrafikk) av MovieClip vil bli lastet inn i eksport ramme eller ikke. I tilfelle av CS3, kan du selvsagt bare velge enten de eller ikke å legge det i den første rammen.

  • I Flash CS4 plassere MovieClip før
    klassen eksport rammen vil gjøre TweenLite belastning på den første ramme. Det er ingen forskjell om du sjekke "Export i ramme X". De ikke-kode eiendeler i MovieClip vil også belastningen på den første rammen.
  • I Flash CS3 hvis du plasserer MovieClip før
    klassen eksport ramme, så uansett om du har sjekket "Export i første frame", vil du få en stille mislykkes
    ! Betydning: den MovieClip du setter på scenen som skal bruke en ekstern klasse filen vil bare fremstå som en normal MovieClip, ikke gi deg noen indikasjon overhodet. Du kan fortsatt imidlertid påvirke om form /bitmap innholdet i MovieClip bør legges i det første bildet eller ikke. Dette betyr egentlig ikke hjelpe, men som du er like skrudd med klassen lasting.

    De tre neste utsagn refererer til situasjonen der du har en MovieClip som eksporteres for Actionscript som "CustomClass", enten ved hjelp av en ekstern klasse fil eller ikke, som er instansiert og legges til scenen fra en MovieClip som er plassert på tidslinjen (akkurat som MovieClip fra de tre tidligere uttalelser.) Dette CustomClass er bare
    startes og gjør ikke tidligere eksisterer på hovedtidslinjen.

    i Flash CS4 med "Export i ramme X" boksen merket, er CustomClass lagt i ramme X og vil vises riktig. Med boksen ukontrollert det fortsatt er lastet inn i rammen X og vises riktig.

  • I Flash CS3 med "Export i første frame" boksen merket, er CustomClass lagt i det første bildet, og vil vises riktig. Med boksen avkrysset vil du få en 1046 Type feil, som klassen ikke kan finnes

    Med alle disse restriksjonene, la oss i det minste vurdere denne positiv uttalelse.

  • Hvis du plasserer en MovieClip som bare inneholder former /bitmaps, vil det bare laste rett før rammen det er nødvendig. Med mindre du velger å eksportere det tidligere, er at

    Her er en veldig interessant!

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

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



    Trinn 7:.. Legge Eiendeler i Flash CS3

    Hele Dette trinnet er bare for de av dere bruker Flash CS3
    < p> Hvis du leser gjennom alle utsagnene i forrige trinn så vil du innse problemet med å ha mange movieclips eksporteres for Actionscript. Disse vil alle må legges i ramme en, eller være utilgjengelig. Heldigvis, disse utsagnene var under forutsetning av at disse eiendelene aldri ble plassert på hovedtidslinjen, som skjer for å være vår løsning! (Dette er også den eneste måten å belastning høres annet enn i ramme en ..)

    Dette er hvordan det gjøres:


      Gå inn i egenskapene til alle MovieClip /Sprite /lyd eiendeler du ønsker å eksportere og fjern haken "Export i første frame".

      i den andre rammen i hovedtidslinjen, opprette en tom MovieClip kalt AssetHolder.

      i denne AssetHolder MovieClip, skape en handlinger lag som har en stopper (); ringe på den første rammen.

      Fortsatt i AssetHolder, skape et lag for hver lyd du vil bruke, og dra disse lydene ut til den andre rammen av sitt eget lag. De ikke
      trenger å være lenger enn en ramme, heldigvis. For alle andre Sprites og movieclips kan du plassere disse i et enkelt lag eller flere for enklere organisering. Sett disse på andre rammen som godt og la den første rammen tom.

      Dette vil gjøre alle dine eiendeler belastning 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 en bestemt sak.

      (Kudos til 8bitrocket for dette trikset!)



      Trinn 8: båndbredde Profiler & Størrelse Rapporter

      En ting jeg bør nevne før vi begynner å jobbe er båndbredden profiler. Dette er et viktig verktøy i å sortere ut dine forbelastning problemer. Når du forhåndsviser en film du kan gå opp for å se, og velg båndbredde profiler. Eller bare trykke Ctrl + B.

      Her kan du bytte mellom frame-by-frame grafer og streaming grafer. Du kan også simulere laste ned filmen på en tilkoblingshastighet på ditt valg ved å enten velge det fra Vis-menyen eller trykke Ctrl + Enter igjen (endre den simulerte nedlastingshastighet bruker View > nedlastingsinnstillinger undermenyen). Dette er viktig i å finne ut hvordan din preloader vil se, uten å gå gjennom bryet med å laste opp det og capping båndbredde. For det spesifikke tilfelle skjønt, kan jeg anbefale Firefox Throttle.

      I tillegg til meget nyttig verktøy som er båndbredden profiler er det mulighet for å generere en størrelse rapport. Trykk Ctrl + Shift + F12 for å åpne opp Publish dialogboksen Innstillinger.

      Gå til fanen Flash, og under Avansert i det en rute merket "Generer størrelse rapporten". Når denne boksen er avkrysset, vil forhåndsvisning eller publisere filmen 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: End of Theory

      Endelig kan vi begynne å lage en Flash-film med en fin selvstendig preloader

      Vi kommer til å ansette en "tre ramme preloading" teknikk!. På det første bildet vil vi sette en preloader MovieClip som har sin egen klasse "preloader". På den andre rammen laster vi alle klassene og på den tredje rammen vi laste og vise innholdet. Vi setter innholdet i et MovieClip kalt Søknad med tilhørende klasse "Application". Det er der kjøtt av søknaden går



      Trinn 10:. Opprett nytt dokument

      Start med å lage en ny AS3 dokument. Jeg gjør det 600x400px, mørk grå bakgrunn, 24 FPS. Disse innstillingene har ingen betydning om

      Angi dokumentet klassen til hoved og trykk OK



      Trinn 11:.. Sett Class Export Frame

      Gå til Fil > Publish Innstillinger-fanen Flash, deretter Actionscript 3.0 innstillinger. Skriv inn "frame 2" i "Eksport klasser i ramme" -feltet



      Trinn 12:. Design en preloader

      Selvfølgelig utformingen av en preloader vil ikke påvirke funksjonen. Jeg skal gi trinnvise instruksjoner, men gjerne hoppe over disse delene og ta din egen tilnærming hvis du ønsker det. Bare husk å merke seg hvilke deler jeg refererer til i koden senere.

      Tegn et rektangel med avrundede hjørner og gi den en blå gradient. Deretter slå den inn i en MovieClip symbol, kaller det Preloader. Velg å eksportere den for Actionscript og ringe klassen Preloader.

      I denne nye MovieClip, tegne en ny avrundet hjørne rektangel med en grå gradient, slå den inn i en annen MovieClip og gi det en forekomst navn progressArea.

      Gå videre og matche laget layout jeg har fikk gå på i bildet ovenfor. Deretter lage en kopi av den siste formen og legg den i Progress bar lag på toppen av Progress området en. Gi den en lys blå gradient, slå den inn i en MovieClip og gi det en forekomst navn progressbar. Aktiver guider for 9-slice skalering og sørg for å holde venstre og høyre runde kanter utenfor.

      Til slutt, gjør et dynamisk tekstfelt med en forekomst navn percentageText. Gjør teksten høyrejustert. På den måten vil den prosenttegnet aldri flytte, bare tall (som endres uansett). Gå inn i karakter embedding og sørg for å legge inn tall og prosenttegn (%). For å gjøre en veldig liten preloader Jeg bruker en liten pixelfont kalt Pixel Mix fra dafont.com. Jeg er også å gi den en blå glød bare fordi jeg kan



      Trinn 13:. Tilbake til Stage

      Sørg for at hele preloader MovieClip er plassert i den første rammen og gitt en forekomst navn preloader. Lag et nytt lag som heter "AS" og sette en stopper (); i den første rammen. Hold preloader i sitt eget lag, "preloader". Lag et nytt lag som heter "Application". Det er der vi vil holde hovedinnholdet i slutten



      Trinn 14:. Lag Den største klassen

      Opprett en ny Actionscript-fil og lagre den i samme katalog som FLA fil. Name it Main.as:
      pakke {import flash.display.MovieClip; import flash.events.Event; public class Hoved strekker MovieClip {offentlig funksjon main () {preloader.addEventListener (Event.COMPLETE, onPreloaderComplete); preloader.setLoaderInfo (loaderInfo); } Private funksjon onPreloaderComplete (e: Hendelses): void {gotoAndStop (3); }}}



      Trinn 15: Lag den Preloader Class

      Lag en ny Actionscript-fil og lagre den i samme katalog som Preloader.as:
      pakke {import flash.display.LoaderInfo; import flash.display.MovieClip; import flash.events.Event; import flash.events.ProgressEvent; public class preloader strekker MovieClip {offentlig funksjon preloader () {} offentlig funksjon setLoaderInfo (ldrInf: LoaderInfo): void {ldrInf.addEventListener (ProgressEvent.PROGRESS, onProgress); ldrInf.addEventListener (Event.COMPLETE, onComplete); } Private funksjon onProgress (e: ProgressEvent): void {var prosent: int = Math.round (e.bytesLoaded /e.bytesTotal * 100); progressBar.width = prosent /100 * progressArea.width; percentageText.text = prosent + "%"; } Private funksjon onComplete (e: Hendelses): void {dispatchEvent (e); }}}



      Trinn 16: Grasping Hoved og Preloader

      Så hva gjør disse to klassene gjøre

      I hoved konstruktør, vi kaller den tilpassede setLoaderInfo () -metoden for vår? preloader og passerer langs LoaderInfo objekt som er forbundet med Main.

      preloader mottar dette objektet og legger til to hendelsen lyttere til det. ProgressEvent utløser onProgress funksjon, der vi beregne hvor stor andel av de bytes lastet i forhold til de totale bytes som skal lastes. Prosentandelen brukes til å angi bredden på fremdriftslinjen og teksten i vår tekstfeltet.

      Hele arrangementet er rett og slett sendt ned igjen til hoved som igjen hopper hovedtidslinjen for å ramme tre når du mottar hendelsen .



      Trinn 17: legge Noen Content

      for å ha noe å tydelig vise preloader arbeider, jeg legger en fin makro bilde av en katt som heter Runa tatt av en venn av mine. Du kan finne bildet i kildefilene som følger med denne opplæringen. Jeg har importert bitmap og jeg slå den inn i en MovieClip heter "Cat".

      Bruk gjerne det bildet du finner passende. Gi klippet en forekomst navnet "katt"



      Trinn 18:. Opprette Application MovieClip

      Som du ser på skjermbildet ovenfor jeg har plassert Cat MovieClip på ramme tre i programlaget. Ta det MovieClip du har gjort, katt eller ingen katt, og traff F8 igjen for å hekke det inne en ny MovieClip som du kaller Application. Eksportere dette for Actionscript som Application



      Trinn 19:. Program Class

      Opprett program klassen ved å starte et nytt AS fil og lagre den som "Application.as". Har Application klassen ser ut som dette:
      pakke {import com.greensock.TweenLite; import com.greensock.easing.Sine; import flash.display.MovieClip; public class Søknad strekker MovieClip {offentlig funksjon Application () {TweenLite.to (katt, 7, {scaleX: 4, Scaley: 4, onComplete: tweenBack, enkel: Sine.easeInOut}); } Private funksjon tweenBack (): void {TweenLite.to (katt, tre, {scaleX: 1, Scaley: 1, onComplete: reTween, enkel: Sine.easeInOut}); } Private funksjon reTween (): void {TweenLite.to (katt, 7, {scaleX: 4, Scaley: 4, onComplete: tweenBack, enkel: Sine.easeInOut}); }}}

      Dette vil animere katten inn og ut på ubestemt tid, slik at du alltid vil huske detaljene i nesen pels. Hvordan denne klassen fungerer er ikke viktig, hva er
      viktig er at vi importerer TweenLite og bruke det, og dermed gjør at det vil være en del av SWF-fil når eksporteres.



      Trinn 20: CS3 og CS4 Issues

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

      Denne filmen sammenstiller fint i CS4.. Applikasjons MovieClip er satt til å eksportere på ramme 2 med mindre du har endret den. Hvis du har endret det kan du legge merke til noe rart. Mer om dette i neste trinn.

      Hvis du er på CS3 denne innstillingen som virkelig teller. Du må gå og sørge for at du fjerner "Export i første rammen» i Egenskaper for Application MovieClip, ellers vil all last i den første rammen!

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

      Heldigvis løsningen er enkel, bare legge til:.
      Import flash.text.TextField;

      til Preloader klasse, og du ' re klar.

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

      Den samme løsningen er mulig her også selvfølgelig. Faktisk bør du nå endre Preloader å utvide Sprite stedet for MovieClip, og hvis du bruker CS3 sørg for at du har importert Sprite klasse inne i Preloader klassen også



      Trinn 21:. Likevel et annet problem

      jeg nevnte en merkelig hendelse i det siste trinnet. Hvis du fjerner "Export i ramme 2" av Application og kjøre en simulert nedlasting, vil du se preloader forsvinne, med mindre du har utvidet preloader er keyframe å dekke den andre rammen også.

      Så hva er egentlig skjer? Enkelt sagt, den første stopp (); uttalelse teller ikke. Hvordan er det for opplagt arbeidsflyt planlegging? Vær oppmerksom på at hvis du setter et spor uttalelse i den første rammen etter stopp (); ringer, det gjør spore opp. Viktig: Merk at dette problemet bare viser seg når vi simulerer nedlasting

      Den lærdom her er ikke stoler på simulerte nedlasting! Det vil ikke vise deg nøyaktig hvordan ting vil laste og funksjon. Du kan bare holde stop (); og preloader i det første bildet, og du vil være i orden når det gjelder distribusjon. Men det kan være smertefullt å forhåndsvise med mindre du har en programgruppe for å eksportere på ramme 2. Og det er bare for denne bestemte scenariet.

      I CS3 må du fjerne merket i eksport-boksen på program MovieClip ellers vil du ende opp med det du legger i det første bildet. Men hvis du gjør det, vil du støte på dette problemet. Så gå videre og utvide preloader til den andre rammen



      Trinn 22:. Test Movie

      Gå videre og forhåndsvise filmen. Kjør en simulert nedlasting på lav hastighet og nyte mesterlig * laget preloader (* mesterlig gjelder bare hvis du har fulgt mine instruksjoner til punkt og prikke).

      Hvis du ser på bilde-for-bilde graf, eller en generert størrelse rapport, vil du se at koden er lagt i andre rammen. Det første bildet er bare 4KB og består av Preloader klassen og den innebygde skrifttegnvariantene. Nå er 4KB ganske rimelig så langt som ventetiden før du ser den preloader er opptatt av, tror du ikke?

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



      Trinn 23: tweening den Preloader

      Du har kanskje ideen om at du ønsker å bruke TweenLite å visne bort preloader ved innsetting alfa til 0 - men du. ønsker ikke å laste TweenLite i den første rammen siden den legger til en annen 8 kb til den første nedlastingen.

      det er flere måter å gjøre dette, og vi vil løse det ved å ha en MovieClip på den tredje ramme som fanger preloader og tweens det. Når du er ferdig, vil det gå videre til fjerde ramme, som vi har flyttet Søknad til.

      Bakgrunnen for å sette den i det tredje bildet er at vi ikke kan sette den i den andre rammen uten å TweenLite som ligger i den første rammen

      nå skal vi gå bort fra standard tre ramme preloading teknikk



      Trinn 24:.. Legg et lag og Stop (); Samtaler

      Legg til et nytt lag som heter "Preloader catcher". Sørg for at du setter stop (); oppfordrer rammer én, to og tre. Dette for å hindre søl opp forhåndsvisning når simulere en nedlasting, som nevnt tidligere.

      Gå videre og flytte Søknad til fjerde ramme samt utvide Preloader til tredje rammen.



      Trinn 25: Lag Catcher

      Kontroller at du har en keyframe på den tredje rammen av preloader catcher laget. Gå til denne rammen, tegne en liten form og har alfa av fyllfarge satt til 0%. Dette er ment å være en usynlig MovieClip. Gjør det til en MovieClip symbol kalt PreloaderCatcher eller noe lignende.

      Eksporter MovieClip som PreloaderCatcher. Hvis du bruker CS4 det spiller ingen rolle om du eksportere den for frame 2 eller ikke, siden det vil bli lagt inn i den rammen uansett hva. Vel, det gjør endre én ting, husker du? Hvorvidt den form
      er lastet på rammen 2. I hovedsak spiller det ingen rolle med tanke på nær ikke-eksisterende filstørrelse for denne formen. Du kan like godt fjerne merket for god vane om



      Trinn 26:. Den PreloaderCatcher Class

      Lag ny klasse fil som heter PreloaderCatcher.as:
      pakke {import com. greensock.TweenLite; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import preloader; public class PreloaderCatcher strekker Sprite {offentlig funksjon PreloaderCatcher () {addEventListener (Event.ADDED_TO_STAGE, onAdded); } Private funksjon onAdded (e: Hendelses): void {removeEventListener (Event.ADDED_TO_STAGE, onAdded); Var preloader: Sprite = MovieClip (forelder) .getChildByName ( "preloader") som Sprite; TweenLite.to (preloader, 0.5, {alfa: 0, onComplete: function (): void {MovieClip (forelder) .nextFrame ();}}); }}

      Som du kan se, fungerer denne klassen ved først å få preloader ved å kaste den overordnede som en Sprite og kalle getChildByName ( "preloader"), hvor preloader er forekomstnavnet. Den preloader er kastet en Sprite også, så TweenLite brukes til å visne ut.

      Når tweening er fullført, onComplete funksjon i TweenLite kaster den overordnede som en MovieClip så det er mulig å ringe nextFrame metoden.



      Trinn 27: Hvorfor de fire rammer

      Som jeg sa tidligere, har vi nå flyttet bort fra de tre ramme forspenning teknikk. Det i seg selv er ikke akkurat blasfemi, men jeg er sikker på at noen av dere lurer på hvorfor vi gjorde det. I stedet kunne vi har håndtert preloader tweening i Application klippet ..

      I så fall er du helt rett! Grunnen til at jeg brukte fire rammer her var å vise deg hvordan du gjør det mens du holder ting separert. Tweening bort preloader; gjør som tilhører preloader del eller program del? Preloader definitivt, men i dette tilfellet vi ikke vil at den skal laste i den første rammen. Derfor ender vi opp med denne ekstra "catcher" klasse.

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



      Trinn 28:. Lyder og ekstra Eiendeler

      I trinn 7 fortalte jeg deg om eiendelen lasteproblemer i CS3. Siden denne opplæringen er rettet mot både brukere av CS3 og CS4 vil vi gå med et minste felles multiplum og bruke AssetHolder tilnærming. Hvis du bruker CS4 kan du utføre de neste trinnene på samme måte, og det vil fungere på samme måte, eller du kan hoppe over AssetHolder tilnærming.

      Start med å importere "music.wav" lyd fra kilden filer til din FLA.

      Gå inn og eksportere den til Actionscript og sørg for at du fjerner "Export i første frame" boksen i CS3. For CS4 dette ikke vil gjøre mye av en forskjell. Jeg bruker Flash CS4 som du har sikkert funnet ut av nå, så skjermbilder viser dialogboksen CS4. Hvis du vil kan du bytte fra standard MP3 kompresjon til noe mer behagelig. På den måten vil det ikke høres forferdelig

      La oss gå gjennom et par flere trinn, og legger til litt tekst til filmen og sette det hele i en AssetHolder MovieClip



      Trinn 29.!: Lag Noen Text

      Trykk Ctrl + F8 for å opprette en ny MovieClip symbol. Name it TextHolder og eksportere den til Actionscript, nok en gang (i CS3) å sørge for "Export i første frame" er merket av.

      Når du oppretter, vil du være "innsiden" dette MovieClip. Skriv inn noen statisk tekst og gi den en hvit farge. Jeg bruker den samme PixelMix font som før. For å opprette en simulert slag farge, jeg gir det en glød filter effekt med innstillingene sett under



      Trinn 30:. Opprett AssetHolder

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

      I AssetHolder MovieClip, lage tre lag kalt AS, musikk og eiendeler. Siden "music" er navnet på lydobjektet vi bruker, det er hva jeg navngi laget. Nå må du sette en stopper (); kalle på det første bildet av AS laget.

      Deretter lage en keyframe på den andre rammen av både musikk og eiendeler lag. Dra musikk lyden på scenen når du står på den andre nøkkelbilde i musikklaget. Gjør så det samme med TextHolder MovieClip på eiendeler lag.

      Exit ut av AssetHolder MovieClip og sørg for å plassere den på andre nøkkelbilde av AssetHolder lag på hovedtidslinjen. Som du vil legge merke til, er det MovieClip ikke synlig, men det er placable, noe som er ganske kult



      Steg 31: Endre Application Class

      Alright, nå er vi bare ønsker å sørge for at vi spiller av lyden og vise TextHolder MovieClip. Legg dette til Application klassens konstruktør:
      Var s: Musikk = new Music (); s.play (); Var textHolder: TextHolder = new TextHolder (); textHolder.x = 120; textHolder.y = 20; addChild (textHolder);



      Trinn 32: forhåndsvise filmen

      Gå videre og forhåndsvise filmen. Du skal nå, uavhengig av om du er på CS3 eller CS4, kunne simulere en nedlasting av denne filmen og se den forhåndslaste vakkert fra en prosent! Legg merke til at det ikke er starter på 0 prosent. Hadde våre innholdet vært større og preloader mindre da som kunne ha vært mulig.

      Nå kan du lurer på hvorfor du stirrer på denne oransje katt sammen med en kort spørreprogram-esque musikk tag. 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 klassen filene bare laste ned kildefilene for denne opplæringen, og sjekke dem ut.

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