Lage Flash Komponenter for Distribution

Creating Flash Komponenter for distribusjon
Del
Del
3
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil jeg forklare hvordan du oppretter en FLA-basert brukergrensesnitt (UI) komponent. I likhet med de komponentene som følger med Flash, vil det være synlig på scenen, forhåndsvisnings da automatisk oppdatering når du endrer parametrene. Dette konkret eksempel er en sirkulær fremdriftslinje.

Forhåndsvisning

Her er hvordan vår del vil se. Klikk på eksempel for å se det fungerer med tilfeldige verdier:

Men vi er ikke fokus på SWF resultat i denne opplæringen. For å se den komponenten i seg selv og endre sin hud, laste ned zip-filen, pakke den ut og kjøre RoundProgress.mxp å installere den. (Du må kanskje laste ned Adobe Extension Manager først.)

Trinn 1: Konfigurer Flash for UIComponent

UIComponent er base klassen for alle Flash-komponenter. Alle brukergrensesnitt komponenter som allerede er i Flash (som ColorPicker, den boksen og så videre) utvider UIComponent (eller utvide noen klasse som utvider UIComponent); Årsaken er at UIComponent gjør det enklere for utviklere å la sine komponenter som skal "flådd".

Når den brukes, gjenskaper UIComponent klasse objektet, fjerner alt på scenen og legger skins. Dette er viktig for personalisering av komponenten; kan brukeren bare å dobbeltklikke på komponent og redigere det visuelt, med Flash. Du bare lage en komponent avatar på Frame 1 og sekkene på Ramme 2, og UIComponent klassen gjør resten

Du kan gjøre alt dette manuelt, men det er mye bedre å bruke UIComponent -. Vil du se hvorfor

. Jeg har forklart hva UIComponent er og hva den gjør, men du må konfigurere klassebane for UIComponent som det ikke er konfigurert som standard. Så må noen skritt følges:

La oss begynne med å lage en ny Flash AS3 fil. Lagre den som RoundProgress.fla, hvor du vil (eksempel: C: \\ RoundProgress \\)

Vi vil anta pakken org. vise
for vår komponent, så i samme mappe som du har lagret RoundProgress.fla, opprette en mappe med en undermappe, /org /display (f.eks: c: \\ roundprogress \\ org \\ skjerm \\)
< p> Det er der vi vil redde vår komponent Actionscript-fil. Dette blir bare brukt til å opprette komponent eller redigere det; du vil ikke gi den endelige brukeren .as filen

Trinn 4:. Konfigurer bibliotek Mapper

Når vi oppretter en komponent for Flash biblioteket organisasjonen er svært viktig (kanskje enda mer enn vanlig). Når du drar komponenten til scenen av et prosjekt sine bibliotek eiendeler vil bli automatisk lagt til prosjektets bibliotek, så holde den organisert.

Lag en mappe i biblioteket som heter RoundProgress Eiendeler
.

Inne i denne mappen oppretter to andre mapper, Skins Hotell og _private

Trinn 5:. Opprett RoundProgress Object
< p> Klikk Sett > New Symbol. For navnet: RoundProgress; Type: Movie Clip; sammenhengen: sjekk alternativene "Eksport for Actionscript" og "eksport i ramme 1"; for klassen: org.display.RoundProgress; base klassen. flash.display.MovieClip (selv om det vil bli endret når vi skaper .as fil for dette objektet)

Trinn 6: Komponent Definisjon av
La oss behandle RoundProgress objekt som Component. For å gjøre dette, åpne bibliotek, høyreklikker du på RoundProgress objektet og klikk "Component Definition"

I vinduet som åpnes, i klasse feltinnsats. Org.display.RoundProgress (vi vil lage dette klasse senere); i alternativpanelet, sjekk alle alternativene, og for Edit Frame type "2" (det er faktisk irrelevant). Det viktigste feltet her er "Display i Datautstyr panel". Dette alternativet gir den komponenten som skal vises show i komponenter panelet når du publiserer det (vi vil se dette senere)

Så langt vi har i vår Biblioteket på "RoundProgress" objekt som en komponent og mappen "RoundProgress Assets" med undermapper "skins" og "_private."

Trinn 7: Konfigurer Tidslinje

Som vi vil bruke UIComponent, vil vi trenge tre lag og to rammer på hvert lag. Vi trenger to rammer fordi UIComponent bruker dimensjonene på den første rammen for å definere størrelsen på komponent, og bruker den andre rammen for Skin redigering.

I biblioteket dobbeltklikker RoundProgress komponent for å åpne det som et filmklipp.

I tidslinjen, legge til to nye lag, endre navn på det øverste laget til "Avatar", det midterste laget til «Skins» og det nederste laget til "Shim."

også opprette en ny tom keyframe for hvert lag (velg Frame 2 og trykk F7). Det skal nå se ut som på bildet:

Trinn 8: Avatar

Nei, ikke filmen, er Avatar en gjenstand som UIComponent tar som størrelsen på objektet, og deretter fjerner. La oss lage en firkant med en hvit bakgrunn og svart ramme (hårfestet)

Velg torget og konvertere den til et filmklipp (Endre > Convert to Symbol), med type. Filmklipp, og navn: RoundProgressAvatar . Det er viktig at registreringspunktet er konfigurert til venstre; navnet er helt irrelevant.

Gå til biblioteket igjen og dra RoundProgressAvatar til mappen "_private" innsiden "RoundProgress eiendeler."

Deretter dobbeltklikker du på RoundProgress komponenten på nytt for å redigere den, velger Frame 1 og Avatar lag, og drar en forekomst av RoundProgressAvatar på scenen (slik at det vil være på ramme 1, på Avatar laget av RoundProgress komponent). Satt sin stilling til x: 0 og y:. 0

Trinn 9: Lag bakgrunns

Bakgrunnen skal være en av sekkene vi vil skape, vil det være bakgrunnen av vår RoundProgress komponent

Opprett en ny filmklipp (Insert > New Symbol):.

For det navnet vi skal bruke "RoundProgressBarBackground"; sjekk "Export for Actionscript" og "Export i ramme 1"; for klassen vil vi bruke "RoundProgressBarBackground" akkurat som navnet; og for base klassen, siden vi ikke vil bruke animasjon vil vi bruke "flash.display.Sprite" (men hvis du bruker flash.display.MovieClip det vil fungere også).

Trinn 10 : Tegn Bakgrunn

Antar i det siste trinnet du forlot RoundProgressBarBackground objektet åpen (hvis ikke, dobbeltklikker du på den i biblioteket for å åpne den igjen), la oss trekke en ring. Først tegne en sirkel med en diameter på 150 piksler

Juster det til toppen og venstre (Vindu > Align).; sin posisjon vil være x: 0 og y:. 0

Hvis du kopiere og lime-in-place (ved hjelp av Ctrl + Shift + V) vil du lage en kopi av sirkelen, men ikke velge den bort , bare endre størrelsen for å gjøre det litt mindre enn den andre sirkelen. Deretter endre farge, alt uten å deaktivere kopi av sirkelen. Etter dette kan du velge den bort, slik at du får en sirkel inne i en annen, så du kan velge den mindre sirkel (som vil ha en annen farge) og sletter den, så du vil sitte igjen med en ring.

Endre sin farge alfa til 20%.

Nå kan du gå ut av redigeringsmodus for RoundProgressBarBackground objekt.

Åpne biblioteket og dra RoundProgressBarBackground vi har skapt til mappen RoundProgress Eiendeler /Skins.

Trinn 11: Lag Face

Ansiktet er en kopi av bakgrunnen, men med farge alfa satt til 100%; det må ha nøyaktig samme bredde og samme høyde på bakgrunn ...

Åpne biblioteket, høyreklikk RoundProgressBarBackground og klikk "Kopier". Dette vil skape et annet objekt akkurat som RoundProgressBarBackground; for navnet på denne bruken RoundProgressBarFace, for typen: MovieClip, sjekk alternativene "Eksport for Actionscript" og "Export på ramme 1", for klassen bruk "RoundProgressBarFace", og siden vi ikke har animasjoner satt base klassen til "flash.display.Sprite."

Enter redigeringsmodus (i biblioteket dobbeltklikk på objektet) og sette farge alfa til 100%.

Hvis den ikke er der ennå Dra den RoundProgressBarFace objektet til mappen RoundProgress Eiendeler /Skins.

Så langt vi har i vårt bibliotek på RoundProgress komponenten, RoundProgressAvatar i _private mappen og RoundProgressBarBackdround og RoundProgressBarFace i Skins-mappen.
< hr>
Trinn 12: RoundProgress.as File

OK, er design klar, nå vil vi starte skitten jobb, er koden ... Først opprette en ny Action File

Lagre den som RoundProgress.as i org /display mappen som ble opprettet i begynnelsen av opplæringen, og la oss starte koding det

Trinn 13:. Pakke og Import

La oss opprette pakken og importere de nødvendige klassene
pakke org.display {import fl.core.UIComponent.; import flash.display.Sprite;.}
Som vi ønsker å bruke pakken org.display vi frelst våre RoundProgress.as inne i org /display-mappen, slik at pakken er org.display

Vi importerer klassen fl.core.UIComponent, som vi vil utvide. Dette vil være basen vår komponent og Sprite klassen vil være masken

Trinn 14:. Opprett Class

Nå skal vi lage Class, utvide UIComponent Class .
pakke org.display {import fl.core.UIComponent; import flash.display.Sprite; public class RoundProgress strekker UIComponent {}}

Trinn 15: Variabler

Neste opp, skaper vi variablene som brukes i RoundProgress
pakke org.display {import fl.core.UIComponent; import flash.display.Sprite; public class RoundProgress strekker UIComponent {private konst RAD: Number = Math.PI /180; private Var _face: Sprite; private Var _background: Sprite; private Var _mask: Sprite; private Var _ratio: Antall = 0; }}
_face og _background blir huden for ansikt og bakgrunn; vi vil bruke Sprites for disse. Den _mask vil være en tom Sprite, er const RAD bare en omregningsfaktor fra grader til radianer, og _ratio er gjeldende fremgang verdien, som varierer fra 0 til 1.

Trinn 16: Overordnet configUI ()

Den beskyttede configUI () -funksjonen er fra UIComponent klasse; det kalles når objektet er opprettet - nesten som konstruktøren funksjon, men det fjerner alt fra scenen, så du må gjenskape alt

Siden vi overstyre funksjonen configUI (), må vi ringe. det i vår klasse. Hvis ikke, vil skriptet vil kjøre, men ingenting bli fjernet fra scenen, så vår Avatar vil være der når vi bruker komponenten. Vi kaller superklassen sin configUI () metoden ved å bruke super.configUI ():
pakke org.display {import fl.core.UIComponent; import flash.display.Sprite; public class RoundProgress strekker UIComponent {private konst RAD: Number = Math.PI /180; private Var _face: Sprite; private Var _background: Sprite; private Var _mask: Sprite; private Var _ratio: Antall = 0; styre beskyttet funksjon configUI (): void {//Ring super configUI funksjon super.configUI (); //Opprett en definisjon for bakgrunnen Var bgDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarBackground"); //Opprett en definisjon for ansiktet Var fcDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarFace"); //Opprett bakgrunnen objekt, kast det som Sprite og legge den i vår RoundProgress objekt _background = addChild (ny bgDef) som Sprite; //Opprett ansiktet objekt, kast det som Sprite og legge den i vår RoundProgress objekt _face = addChild (ny fcDef) som Sprite; //Opprett masken objekt, kast det som Sprite og legge den i vår RoundProgress objekt, også sette _face.mask da dette objektet _face.mask = _mask = addChild (ny Sprite ()) som Sprite; }}}
Legg merke til at siden addChild () -funksjonen returnerer en Displayobject kan vi instantiate et objekt når vi skaper det og kastet det som hva vi vil (i dette tilfellet jeg kastet det som Sprite). I én enkelt linje opprettet jeg objektet, kastet det som Sprite og lagt i vårt objekt

Trinn 17:. Trekningen () Metode

Metoden draw () er også fra UIComponent; det heter når en eiendom er endret i vår FLA-filen og oppdaterer live forhåndsvisning av komponenten. Dette gjør at brukeren se hvordan komponenten vil endre på scenen, heller enn å måtte kompilere en SWF. Vi kommer til å overstyre det slik at når vi endrer en verdi trekningen metoden vil bli kalt
pakke org.display {import fl.core.UIComponent.; import flash.display.Sprite; public class RoundProgress strekker UIComponent {private konst RAD: Number = Math.PI /180; private Var _face: Sprite; private Var _background: Sprite; private Var _mask: Sprite; private Var _ratio: Antall = 0; styre beskyttet funksjon configUI (): void {super.configUI (); Var bgDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarBackground"); Var fcDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarFace"); _background = addChild (ny bgDef) som Sprite; _face = addChild (ny fcDef) som Sprite; _face.mask = _mask = addChild (ny Sprite ()) som Sprite; } Ride beskyttet funksjon draw (): void {//det er alltid viktig å sette bakgrunnen og ansiktet objekter med samme bredde av komponenten //Den ikke endre størrelse automatisk _background.width = _face.width = bredde; _background.height = _face.height = høyde; //Beregn vinkel basert på forholdet //Den 0,1 er fordi hvis grafikken doesnt trekke litt mer vil det bli en linje av mislykkes Var vinkel: Number = (360,1 * _ratio) -90; //lagre litt mer enn radien av ansiktet Var h: Nummer = _face.height * 0,6; //Hvis vi endrer størrelsen vår komponent, men bredden og høyden bli annerledes, blir bredden også Var w: Number = _face.width * 0,6; //dette er for offset maske, som vi ønsker å trekke fra midten av ansiktet, vi trenger å få dette oppveie Var dx: Number = _face.width /2; Var dy: Number = _face.height /2; //Start tegning fra sentrum og lage en linje til toppen av objektet _mask.graphics.clear (); _mask.graphics.beginFill (0x00FF00); _mask.graphics.moveTo (dx, dy); _mask.graphics.lineTo (dx, dy-h); //Opprett et segment av sirkelen, vil dette være masken av _face objekt //Disse linjene er det som gjør den magiske, starter på -90 grader og kjører rundt med mengden grader spesifisert for (var i: int = -90; i < vinkel; i ++) {//Math.cos vil returnere cos av vinkelen, multiplyed av w (bredde radius) //Som Math.cos trenger å bruke radianer som parameter vi konvertere vinkelen jeg til radianer ved å multiplisere det etter vår konstante RAD Var px: Number = Math.cos (i * RAD) * w; //Math.sin Vil returnere synd vinkelen, multiplyed ved h (høyde radius) //Som tak i Math.sin trenger å bruke radianer som parameter vi konvertere vinkelen jeg til radianer ved å multiplisere det med vår konstante RAD Var py: Antall = tak i Math.sin (i * RAD) * h; //Her er forskjøvet, det er basert på en radius av ansiktet px + = dx; py + = dy; //så skaper vi en linje til posisjon px og py _mask.graphics.lineTo (px, py); } //Etter at koden er utført, må vi grafikken går tilbake til midten av _face objektet //Så linje den til den første stilling, som er forskjøvet _mask.graphics.lineTo (dx, dy); _mask.graphics.endFill (); //det er alltid viktig å bruke super.draw () for å oppdatere bredder og høyder super.draw (); }}}
Ikke bekymre deg for mye om denne koden. Som jeg sa tidligere, det er ikke fokus for opplæringen

Trinn 18:. Opprette Ratio Eiendom

Vel, her skaper vi forholdet eiendommen. Dette er som en variabel, men det er en funksjon: vi bruker [Inspectable] tag umiddelbart før funksjonen definisjon slik at denne egenskapen kan endres ved hjelp av "Component Inspector" når vi bruker den i Flash

La oss komme. i kast med [Inspectable]. Vi har noen parametere som vi kan bruke på det, som Default, navn og noen andre. Hvis du bruker Default deretter Flash vil bruke det som standardverdi i komponenten inspektør (der vi kan endre parameterne); navnet parameteren definerer hvordan det vil se ut i komponenten inspektør, men er ikke nødvendig. Hvis du ønsker å velge et annet navn for dette for eksempel kan du bruke [Inspectable (name = "MyCustomName", Default = 0)]
. Du kan også stille inn Type (Antall, String), men som det er satt i vår forholdet eiendom dette ikke er nødvendig
pakke org.display {import fl.core.UIComponent.; import flash.display.Sprite; public class RoundProgress strekker UIComponent {private konst RAD: Number = Math.PI /180; private Var _face: Sprite; private Var _background: Sprite; private Var _mask: Sprite; private Var _ratio: Antall = 0; styre beskyttet funksjon configUI (): void {super.configUI (); Var bgDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarBackground"); Var fcDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarFace"); _background = addChild (ny bgDef) som Sprite; _face = addChild (ny fcDef) som Sprite; _face.mask = _mask = addChild (ny Sprite ()) som Sprite; } Ride beskyttet funksjon draw (): void {_background.width = _face.width = bredde; _background.height = _face.height = høyde; if (! _ maske) tilbake; Var vinkel: Number = (360,1 * _ratio) -90; Var h: Number = _face.height * 0,6; Var w: Number = _face.width * 0,6; Var dx: Number = _face.width /2; Var dy: Number = _face.height /2; _mask.graphics.clear (); _mask.graphics.beginFill (0x00FF00); _mask.graphics.moveTo (dx, dy); _mask.graphics.lineTo (dx, dy-h); for (var i: int = -90; i < vinkel; i ++) {var px: Number = Math.cos (i * RAD) * w; Var py: Number = tak i Math.sin (i * RAD) * h; px + = dx; py + = dy; _mask.graphics.lineTo (px, py); } _mask.graphics.lineTo (Dx, dy); _mask.graphics.endFill (); super.draw (); } [Inspectable (Default = 0)] //gjør forholdet eiendom skal settes i Component Inspektør offentlig funksjon får ratio (): Antall {//Returner forholdet verdi (0 til 1) avkastning _ratio; } Offentlig funksjon sett ratio (verdi: Number): void {//Hvis verdien er utenfor området det kaster en feil hvis (verdi > 1 || verdi < 0) kaste nytt Feil ("Verdien er utenfor rekkevidde (0 -1)"); //sette variabelen _ratio _ratio = verdi; //Oppdater komponent for den nye _ratio verdi draw (); }}}

Trinn 19:. Den setProgress () Funksjon

La oss legge til en funksjon for å sette fremdriften, kan du bruke en gjeldende verdi og en maks verdi
pakke org.display {import fl.core.UIComponent; import flash.display.Sprite; public class RoundProgress strekker UIComponent {private konst RAD: Number = Math.PI /180; private Var _face: Sprite; private Var _background: Sprite; private Var _mask: Sprite; private Var _ratio: Antall = 0; styre beskyttet funksjon configUI (): void {super.configUI (); Var bgDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarBackground"); Var fcDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarFace"); _background = addChild (ny bgDef) som Sprite; _face = addChild (ny fcDef) som Sprite; _face.mask = _mask = addChild (ny Sprite ()) som Sprite; } Ride beskyttet funksjon draw (): void {_background.width = _face.width = bredde; _background.height = _face.height = høyde; if (! _ maske) tilbake; Var vinkel: Number = (360,1 * _ratio) -90; Var h: Number = _face.height * 0,6; Var w: Number = _face.width * 0,6; Var dx: Number = _face.width /2; Var dy: Number = _face.height /2; _mask.graphics.clear (); _mask.graphics.beginFill (0x00FF00); _mask.graphics.moveTo (dx, dy); _mask.graphics.lineTo (dx, dy-h); for (var i: int = -90; i < vinkel; i ++) {var px: Number = Math.cos (i * RAD) * w; Var py: Number = tak i Math.sin (i * RAD) * h; px + = dx; py + = dy; _mask.graphics.lineTo (px, py); } _mask.graphics.lineTo (Dx, dy); _mask.graphics.endFill (); super.draw (); } [Inspectable (Default = 0)] offentlig funksjon får ratio (): Antall {return _ratio; } Offentlig funksjon sett ratio (verdi: Number): void {if (verdi > 1 || verdi < 0) kaste nytt Feil ("Verdien er utenfor rekkevidde (0-1)"); _ratio = verdi; tegne(); } Offentlig funksjon setProgress ($ bytesLoaded: Antall, $ bytesTotal: Number): void {//Forholdet er bare den nåværende verdien delt på maksimal belåningsgrad = $ bytesLoaded /$ bytesTotal; }}}

Trinn 20: Prosent Eiendom

Det prosent egenskapen er som forholdet eiendommen, men i stedet for verdier mellom 0 og 1 vil du bruke 0 til 100. Det er en prosentberegning, den returnerer også en dupp verdi mellom 0 og 100:
pakke org.display {import fl.core.UIComponent; import flash.display.Sprite; public class RoundProgress strekker UIComponent {private konst RAD: Number = Math.PI /180; private Var _face: Sprite; private Var _background: Sprite; private Var _mask: Sprite; private Var _ratio: Antall = 0; styre beskyttet funksjon configUI (): void {super.configUI (); Var bgDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarBackground"); Var fcDef: Object = this.loaderInfo.applicationDomain.getDefinition ("RoundProgressBarFace"); _background = addChild (ny bgDef) som Sprite; _face = addChild (ny fcDef) som Sprite; _face.mask = _mask = addChild (ny Sprite ()) som Sprite; } Ride beskyttet funksjon draw (): void {_background.width = _face.width = bredde; _background.height = _face.height = høyde; if (! _ maske) tilbake; Var vinkel: Number = (360,1 * _ratio) -90; Var h: Number = _face.height * 0,6; Var w: Number = _face.width * 0,6; Var dx: Number = _face.width /2; Var dy: Number = _face.height /2; _mask.graphics.clear (); _mask.graphics.beginFill (0x00FF00); _mask.graphics.moveTo (dx, dy); _mask.graphics.lineTo (dx, dy-h); for (var i: int = -90; i < vinkel; i ++) {var px: Number = Math.cos (i * RAD) * w; Var py: Number = tak i Math.sin (i * RAD) * h; px + = dx; py + = dy; _mask.graphics.lineTo (px, py); } _mask.graphics.lineTo (Dx, dy); _mask.graphics.endFill (); super.draw (); } [Inspectable (Default = 0)] offentlig funksjon får ratio (): Antall {return _ratio; } Offentlig funksjon sett ratio (verdi: Number): void {if (verdi > 1 || verdi < 0) kaste nytt Feil ("Verdien er utenfor rekkevidde (0-1)"); _ratio = verdi; tegne(); } Offentlig funksjon setProgress ($ bytesLoaded: Antall, $ bytesTotal: Number): void {ratio = $ bytesLoaded /$ bytesTotal; } Offentlig funksjon sett prosent (verdi: Number): void {if (verdi > 100 || verdi < 0) kaste nytt Feil ("Verdien er utenfor rekkevidde (0-100)"); //Bare litt matematikk ... ratio = verdi /100; } Offentlig funksjon få prosent (): Antall {return ratio * 100; }}}
Lagre dokumentet (husk, i /org/display/RoundProgress.as
hvis du ikke har lagret det ennå)

Trinn 21:. Levende Forhåndsvisning

Nope, det er ikke ferdig ennå. Hvis vi drar vår komponent til scenen nå, vil det fremstå som den hvite firkanten med svart ramme, men hvis vi teste vår film det vil vise den komponenten. Dette er fordi vi ikke har opprettet en "live preview" - live forhåndsvisning kan visualisere en SWF av komponenten, og som vi setter eiendommene vil det justere og oppdatere visuelt også. . Hvis vi ikke har en direkte forhåndsvisning bare avataren vil bli vist

La oss lage vår live forhåndsvisning; det er to måter jeg vet om for å skape levende forhåndsvisning, så jeg skal forklare det som fungerer perfekt for meg.

I biblioteket av RoundProgress.fla, høyreklikker over RoundProgress komponent, klikk " Eksport SWC "og eksport i samme mappe på RoundProgress.fla filen. Den .swc filen er en zip-fil, slik at du kan åpne den med WinRAR eller noe lignende. Alternativt kan du endre navn utvidelsen til «Zip" og åpne det på den måten.

Åpne .swc som ovenfor, og du vil se noen filer. En av dem er library.swf; trekke ut library.swf til samme mappe som FLA filen

Trinn 22:. Implementere Live Preview

Gå tilbake til Flash redigeringsmiljøet. I RoundProgress.fla filen, åpne bibliotek, høyreklikker du på RoundProgress komponent og klikk på alternativet "Component Definition".

I Component Definition, merk at i Parametere vi har nå parameter ratio, som er variabelen "forholdet" og verdien "0" - dette er de [Inspectable] vi har definert med Default = 0 (de andre parameterne kommer fra UIComponent klasse). Det kan ikke være konfigurert ennå; hvis ikke du trenger å åpne Component Definition panel og klikk på OK for å oppdatere denne, når du gjør endringer i .as filen.

Nå kan du klikke på knappen "Set ..." i Live Preview delen.

I dette vinduet som åpnes, velger du alternativet «Live forhåndsvisning med .swf innebygd i FLA fil", og klikk på Bla gjennom:

... velg deretter library.swf som vi hentet fra den .swc filen.

Hvis du drar RoundProgress komponent på scenen bør du nå være i stand til å se den "live preview". Prøv å endre verdien av "forholdet" i Component Inspektør

Trinn 23:. ComponentShim

Så langt har vi laget komponenten, og det er allerede arbeider med en live forhåndsvisning, men hvis du ønsker å distribuere komponenten som en .mxp fil, må du sende .as filen i .mxp filen. Kanskje du ikke vil at folk har tilgang til kilde .as fil, eller, hvis du har en masse .as filer, kanskje du ville finne det kjedelig å opprette .mxi fil (forklaring senere). Det beste du kan gjøre er å legge .as fil inne FLA-filen i en kompilert klippet, som vi kaller ComponentShim.

Merk at hvis du drar noen brukergrensesnitt komponent til scenen vil det være en ComponentShim objekt. For eksempel, se i biblioteket i Component Eiendeler /_private - som er en samlet klipp, men vi vil ikke bruke denne, vil vi skape vår egen

En annen god grunn til å bruke et mellomlegg kompilert klippet er. at det allerede er utarbeidet, slik at når du kompilere .swf vil det bare bli lagt til, ikke rekompileres, noe som gir en raskere kompilering.

La oss begynne med å lage en annen FLA fil og lagre den med navnet "RoundProgressShim. fla "i samme mappe som" RoundProgress.fla. "

I RoundProgressShim.fla dokument, åpner biblioteket.

For hver komponent som har eksterne .as filer du kan opprette en ny objekt i RoundProgressShim.fla. Som vi har bare én komponent med ett .as fil, vil vi skape mellomlegg for bare denne komponenten.

Opprett en ny Symbol i biblioteket, må det være av type filmklipp og for sitt navn velger det samme navnet som vår komponent (i dette tilfelle RoundProgress). Sjekk alternativene "Eksport for Actionscript" og "eksport i ramme 1"; for klassen vil vi bruke navnet på komponenten, så bruk "org.display.RoundProgress."

OK, dette er vår referanse for org.display.RoundProgress objekt (vi trenger en referanse for hver komponent ).

Nå skaper vi mellomlegg kilde. Åpne biblioteket igjen i RoundProgressShim.fla, og opprette et nytt symbol som heter "RoundProgressShim source". Sjekk alternativene "Eksport for Actionscript" og "eksport i ramme 1"; for sin klasse bruk org.display.RoundProgressShim (dette er irrelevant); for sin base klasse bruker flash.display.Sprite. Legg merke til at navnet og klassen ikke eksisterer, egentlig, men dette vil være vår utarbeidet klippet, så for å unngå konflikter det ikke kan ha samme navn eller samme klasse som vår komponent ...

Nå i biblioteket, høyreklikk på "RoundProgressShim source" og velg "Konverter til Utarbeidet Clip"; Nå vil vi ha en mer objekt i biblioteket som heter "RoundProgressShim kilde SWF". Endre navnet til "RoundProgressShim".

OK, vår skikk ComponentShim er opprettet, bare lagre RoundProgressShim.fla i samme mappe som RoundProgress.fla, og nær RoundProgressShim.fla.

< h2> Trinn 24: Bruke RoundProgressShim

Tilbake i vår RoundProgress.fla dokument og velg Fil > Import og klikk "Åpne ekstern bibliotek" (Ctrl + Shift + O), finne og velge RoundProgressShim.fla og åpne det som biblioteket.

Sett to bibliotekene ved siden av hverandre, biblioteket av RoundProgress.fla og biblioteket av RoundProgressShim.fla.

Nå drar RoundProgressShim objekt fra RoundProgressShim.fla biblioteket til RoundProgress Eiendeler /_private
mappe i RoundProgress.fla biblioteket.

... og nå kan du lukke RoundProgressShim.fla biblioteket.

Gå til redigeringsmodus av RoundProgress komponent igjen (dobbeltklikk på RoundProgress objekt i biblioteket), velger du laget Shim, og gå til Bruk 2 .

Nå bare dra RoundProgressShim fra RoundProgress Eiendeler /_private i biblioteket til scenen.

OK, nå vår komponenten er klar til bruk. Lagre den og la oss lære å pakke det inn i en .mxp fil, klar til å distribuere

Trinn 25:. Opprett .mxi XML File

Opprett en ny XML-fil utenfor Flash kan du bruke Dreamweaver for dette, eller til og med notepad. Jeg skal bruke Dreamweaver.

Lagre som "RoundProgress.mxi" i samme mappe som RoundProgress.as. Det er svært viktig at du definerer type (.mxi), eller annet du vil spare bare som en XML-fil som ikke er bra for oss.

Kopier XML jeg har opprettet for denne opplæringen og lim inn dine RoundProgress.mxi:
< forlengelse Macromedia-name = "RoundProgress Bar" version = "1.0" type = "Library" > < forfatter name = "Andre Cavallari" /> < produkter > < produkt name = "Flash" version = "9" primære = "true" /> < /produkter > < beskrivelse > <! [CDATA [A Circle Progress Bar]] > < /beskrivelse > < ui-tilgang > <! [CDATA [window - Komponenter (Ctrl + F7)]] > < /ui-tilgang > < filer > < file name = "RoundProgress.fla" destinasjon = "$ flash /Components" /> < /filer > < Macromedia-extension > /;
La oss bryte ned XML-filen: den første linjen er der vi tildele navnet på vår komponent (dette er for Adobe Extension Manager, ikke for Flash) versjon og type (som er bibliotek, for andre typer sjekke Manager manuell Adobe Extension).

Forfatteren tag er å definere forfatteren av pakken. Igjen, dette er bare for Extension Manager.

Produktet tag definerer hvilket produkt komponenten er for. I vårt tilfelle er det for Flash CS3 eller CS4, så for navnet vi bruker "Flash", versjon være "9" (CS3).

Beskrivelsen koden er for en beskrivelse i Adobe Extension Manager. Det kan ikke være null, men du kan skrive noe der. Den CDATA tag forteller oss at vi kan ha HTML kode inne slik at det ikke vil prøve å lese som xml.

Inne i ui-tilgang tag kan du definere hvordan du bruker komponent, hvordan du tilgang til den i Flash forfatterverktøy.

filer tag inneholder listen over filene som skal kopieres til konfigurasjon mappe Flash-tallet. I vårt tilfelle vil vi kopiere bare de RoundProgress.fla, som vi skapte RoundProgressShim, vil vi ikke trenger å kopiere org /skjerm /RoundProgress.as også. Hvis du har flere filer kopieres du kan angi dem inne i filene tag

Step 26 (derav grunnen til å ha massevis av AS-filer kan gjøre dette trinnet kjedelig!): Pakk MXI inn MXP Anmeldelser
Den .mxi filen gir bare informasjon om hvordan Adobe Extension Manager skal lage .mxp filen. Den .mxp filen er som en zip-fil, men hvis du prøver å åpne den i noen zip program eller endre navn på den, vil den returnere en feil. Dette er fordi dens sammentrykningsalgoritme er forskjellig zip algoritmen. Imidlertid kan Adobe Extension Manager lese innholdet i mxp filen og instrukser MXI-fil, og vil bruke denne informasjonen til å installere komponenten.

Når du installerer MXP-filen med Adobe Extension Manager, den MXI-filen er også kopiert for senere fjerning av komponenten;

Previous:Quick Tips: Første titt på Adobe Media Encoder CS5

Next Page:Quick Tips: A Guide to Cross domenepolicy Files