Tailor Din Flash arbeidsområde ved å opprette egendefinerte Panels
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
I min siste tut. Opprett Nye funksjoner for Flash med JSFL vi skapt nye kommandoer for Flash. Nå skal vi ta ting videre ved å lage helt nye paneler i Flash authoring miljøet.
Endelig resultat Forhåndsvisning
For å prøve Buttonizer panel, laste ned Kilde zip-filen og pakke ut Buttonizer.swf filen til mappen oppført i trinn 3. Start Flash, og du finner den i Vindu > Andre Paneler En Flash-panelet er bare en vanlig SWF at du forteller Flash for å kjøre i et panel i stedet for et eget vindu. Alt du trenger å gjøre er å opprette en ny FLA. Navnet på FLA vil bli vist som tittelen på panelet; Jeg ringer min Buttonizer.fla. Vi vil bruke AS3 for denne opplæringen En vanlig hvit panel er ganske ubrukelig, selvfølgelig, så la oss fylle det ut. Endre størrelsen på scenen for å 250px bred og 170px høy (ikke at det betyr noe - Jeg har plukket disse tallene fordi jeg vet de er store nok for det jeg har planlagt senere) og endre bakgrunnsfargen til #EDEDED (dette sams bakgrunn av panelene på systemet mitt, uansett) Åpne Components panelet ( Vindu >.. Komponenter Utarbeide en SWF fra denne FLA. For å få Flash for å bruke dette som et panel, alt du trenger å gjøre dra SWF til riktig mappe, deretter starter Flash. Mappen heter WindowSWF Hotell og dens plassering varierer avhengig av operativsystemet: brukernavn (ærlig, er det sannsynligvis enklest å søke på datamaskinen din for å finne alle mapper med navnet WindowSWF. En vil være riktig.) Dra SWF over til WindowSWF Awesome Med panelet åpent, flytt knappen i FLA, deretter re-kompilere SWF . Panelet endres ikke. Flytt SWF til WindowSWF Lukk panelet og åpne det fra menyen. Det forandrer. Vi kan fremskynde dette opp ved å ha panelets SWF publisere direkte til WindowSWF Fjern krysset HTML Nå flytter på knappen igjen, rekompilere SWF (du kan trykke Shift-F12 for å gjøre dette uten å gjøre Flash Player vises), lukke panelet, re-åpne den, og det vil ha oppdatert Som panelet er et fungerende SWF, vi er ikke begrenset til å endre hvordan det ser ut;. Vi kan legge til kode, også. Opprett en ny AS fil som heter Buttonizer.as, og sette den opp som dokumentet klassen din FLA. Her er den grunnleggende koden: (Hvis du ikke er kjent med å bruke et dokument klasse, sjekk ut denne rask innføring.) For å bevise kode kan arbeide, vi vil endre teksten på knappen. I FLA, gi knappen en forekomst navn theButton plakater (fantasifull), deretter i konstruktør-funksjonen Legg til denne linjen med kode: Hit Shift -F12, nært og re-åpne panelet, og du vil se teksten er endret. Hvis ikke, så sjekk at du har koblet den FLA til dokumentet klassen og kåret knappen. La oss få en funksjon i det å håndtere knappen skyves: Ingenting komplisert der. Jeg har brukt et spor () for å sørge for at alt er koblet riktig. Last panelet og sikre at det fungerer Oh ... det gjør ikke Det er riktig.?; AS3 trace () -funksjonen ikke spore resultatene til utdatapanelet da kjøres fra et annet panel. Jeg hater å jobbe uten spor (), så vi må komme rundt dette liksom I min JSFL opplæringen, viste jeg deg Javascript fl.trace () -funksjonen. Det spor tekst til Output panel, men drives i Flash authoring miljøet selv, snarere enn fra en Flash Player-vinduet. Det er flott - det betyr at vi kan kjøre det fra i vår panel Men vi kan ikke bare skrive fl.trace ("Button klikket"); MMExecute () tar en streng og kjører den som en JSFL samtale. Det er helt ignorert av Flash Player-vinduet. Hvis du tester ut dette nå, klikke på knappen vil spore til utdatapanelet. Utmerket Det ville være upraktisk å ta en lengre manus og presse den gjennom en MMExecute () kall. I stedet kan vi lagre JSFL til et script fil og fortelle Flash for å kjøre den Hvis du har fulgt min JSFL opplæringen, vil du ha en Buttonize.jsfl filen allerede.; hvis ikke, kopiere følgende kode til en ny JSFL fil. Lagre den som Buttonize.jsfl For å holde ting enkelt, flytte JSFL filen inn WindowSWF katalogen. Du kan nå erstatte '(bane-to-your-script)' Start en ny FLA, lage litt tekst, velger du den og traff Buttonize knappen. Det bør gjøres om til en knapp, akkurat som scriptet gjør normalt Tilbake i Buttonizer FLA, dra en ColorPicker og en Etikett fra brukergrensesnittet komponenter til scenen. Vi vil bruke fargevelgeren til å endre fargen på teksten i knappens Down tilstand. Ordne komponenter hensiktsmessig: Gi fargevelgeren en forekomst navn downColorPicker Vi må passere fargen fra ColorPicker til Buttonize script, men først skal vi slå skriptet inn en funksjon slik at den kan akseptere argumenter Endre det slik:. Nå bør vi endre MMExecute () kall, for å referere til den spesifikke funksjon i manuset. Alt som kreves er å passere funksjonsnavnet som andre parameter: For hvert argument vi ønsker å passere til JSFL funksjon, vi bare å legge til parameter til MMExecute () kall. Så, for å passere den valgte fargen: Vi må bryte ut av de doble anførselstegn for å inkludere det argumentet, siden vi får det via AS3, ikke via JSFL. Det er rotete, og mer enn litt forvirrende, jeg vet La oss legge en enkel spor til JSFL funksjonen for å sørge for at dette fungerer. (Siden det er over utvalget tilstand, kan du se spor uten å faktisk buttonize litt tekst.) Jeg prøvde det med svart og deretter hvitt, og her er hva dukket opp i utdatapanelet: Ser ut som det fungerer for meg For å finne ut hva JSFL å bruke for å endre tekstfarge, bruke knep fra JSFL tut; trykke "Select All", og deretter endre fyllfargen og ta en titt på koden i historikkpanelet: Uh-oh. Er vi nødt til å konvertere uint fargen vi fikk fra ColorPicker i en HTML-streng? Heldigvis ingen; den document.setFillColor () hjelpesiden forteller oss at vi kan bruke begge format. Så, alt vi trenger å gjøre er å sette inn som nytt manus på riktig sted. Siden "Down" rammen er den tredje, bør vi sette det inn etter den andre convertToKeyframes () Anmeldelser call: Dette fungerer: Legg en ny ColorPicker ( overColorPicker Endre signaturen til JSFL funksjonen til å akseptere dette andre farger: Mens vi redigerer JSFL funksjon, kan vi like godt legge manuset for å endre fargen på "Over" state: Nå skal vi endre kallet til MMExecute () i AS3 slik at den passerer langs "Over" color: ... Ugh. Det er for rotete, og det kommer til å bli verre. Hvordan kan vi fikse dette Steven Sekker og Steven Hargrove kom opp med en pen liten funksjon for å gjøre denne samtalen enklere. Jeg har tilpasset den her: Så nå kan vi kalle: Mye penere ! Legg til nye komponenter: Endre signaturen JSFL funksjon: Gjør JSFL endre farge av text: Pass "Up" farge til JSFL fra AS3: Test det: Brilliant. Bare en ting igjen Sjansene er, blir brukeren kommer til å ønske å feste med den fargen de plukket for teksten i minst en av de tre statene. Men vi starter alle tre ColorPickers med svart som den valgte fargen. Så nå må vi få den eksisterende fyllfarge fra teksten objekt, og bruke JSFL å passere den gjennom til panelet, og deretter bruke AS3 til endre fargen på ColorPickers. Det er det motsatte av hva vi har gjort, egentlig. Hvor i vår AS3 kode bør vi sette farge på våre plukkere, skjønt? Jeg ser tre valg: Så, legge til en ny knapp til Buttonizer, merket "Set Defaults". Gi den en forekomst navn setDefaults Tilbake i Buttonizer.as: Bare for å sørge for at dette vil jobbe når vi har riktig data: Pass på at det fungerer ved å sette noen tilfeldige farger, deretter klikke på Set Defaults-knappen. Det bør tilbakestille dem alle til svart MMExecute () -funksjonen returnerer returverdien av en funksjon kjøre gjennom den. (Hvis flere funksjoner blir drevet, returnerer returverdien av den siste.) For å få fargen på den markerte teksten, kan vi bruke JSFL document.getCustomFill ('valg') funksjon. Dette returnerer en Fill objekt, som farge Dette er faktisk ikke helt hva vi vil, som det returnerer farge i CSS String format : "# AA43E2", f.eks. Jeg har skrevet litt ekstra kode for å konvertere dette til uint format som vi trenger: Prøv dette: Awesome :) Ta en titt tilbake på hva du har lært . Nå kan du lage dine egne paneler inne Flash, kjøre JSFL kommandoer og skript, overføre data fra et panel på scenen, og selv få data fra scenen for å bruke i panelet. Congrats!
Trinn 1:. Lag Panel SWF
Trinn 2:. Fylle Din Panel
) og dra en knapp fra User Interface mappen på scenen
Trinn 3: Slå SWF til et Panel
Mac OS X: [harddisk] Hotell /Users / username Twitter /Bibliotek /Application Support /Adobe /Flash CS3 /< em> språket Twitter /konfigurasjon /WindowSWF
Windows XP: [boot-stasjon]
\\ Documents and Settings \\ brukernavn
\\ Lokale innstillinger \\ Programdata \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ WindowSWF
Windows Vista: [boot-stasjon]
\\ Users \\ brukernavn
\\ Lokale innstillinger \\ Programdata \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ WindowSWF
Windows Vista (alt): [boot-stasjon]
\\ Users \\ brukernavn
\\ AppData \\ Local \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ WindowSWF
Windows 7: [boot-stasjon]
\\ Users \\ brukernavn
\\ Local innstillinger \\ Programdata \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ WindowSWF
Windows 7 (alt): [boot-stasjon]
\\ Users \\ brukernavn
\\ AppData \\ Local \\ Adobe \\ Flash CS3 \\ språket
\\ Configuration \\ WindowSWF
mappen vil matche navnet du bruker for å logge på med, språk
vil endre seg avhengig av hva du plukket når du installerte Flash (for engelsktalende vil det trolig være en-us
eller bare en
), og hvis du bruker en nyere versjon av Flash enn CS3, vil denne mappen endres også.
mappe start deretter Flash. Ikke bekymre deg, vil du ikke å starte Flash hver gang du gjør en endring. Når du har åpnet den igjen, sjekk ut Vindu > Andre Panels
sub-menyen, og du bør se Buttonizer
som et alternativ. Klikk det:
Trinn 4:. Endre Panel
mappe. Panelet fremdeles ikke endres.
mappe. Klikk på Fil > Publish Settings
, klikk deretter på mappeikonet ved siden av boksen som sier Buttonizer.swf
, bla til WindowSWF
mappen og trykk på Lagre.
boksen, også; du trenger ikke det.
Trinn 5: Kjør noen kode i Panel
pakke {import flash.display.MovieClip; public class Buttonizer strekker MovieClip {offentlig funksjon Buttonizer () {}}}
theButton.label = "Buttonize";
Trinn 6: Gjør Button gjøre noe
pakke {import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer strekker MovieClip {offentlig funksjon Buttonizer () {theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); } Private funksjon onClickTheButton (a_event: MouseEvent): void {trace ("Button klikket"); }}}
Trinn 7:. Debugging uten Trace ()
innenfor vår AS3 kode, fordi det er! ikke en AS3 funksjon. Vi må fortelle Flash for å kjøre dette som JSFL, og å gjøre det vi bruker adobe.utils.MMExecute () -funksjonen, som er
AS3:
pakke {import adobe.utils.MMExecute; //ikke glem dette! import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer strekker MovieClip {offentlig funksjon Buttonizer () {theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); } Private funksjon onClickTheButton (a_event: MouseEvent): void {MMExecute ("fl.trace ('Button klikket');"); //sitater i anførselstegn bli forvirrende}}}
Trinn 8:. Kjør Buttonize JSFL Script
if (. fl.getDocumentDOM () selection.length == 1) {if (fl.getDocumentDOM utvalg [0] () .elementType == "tekst . ") {var textLeft = fl.getDocumentDOM () utvalg [0] .x; Var textTop = fl.getDocumentDOM () utvalg [0] .Y.; Var textRight = fl.getDocumentDOM () utvalg [0] .x + fl.getDocumentDOM () utvalg [0] .width..; Var textBottom = fl.getDocumentDOM () utvalg [0] .Y + fl.getDocumentDOM () utvalg [0] .height..; . Var textText = fl.getDocumentDOM () utvalg [0] .getTextString (); . fl.getDocumentDOM () convertToSymbol ("knappen", textText, 'top left'); . Var lib = fl.getDocumentDOM () bibliotek; if (lib.getItemProperty ('linkageImportForRS') == true) {lib.setItemProperty ('linkageImportForRS', false); } Else {lib.setItemProperty ('linkageExportForAS', false); lib.setItemProperty ('linkageExportForRS', falske); } Lib.setItemProperty ('scalingGrid', false); . fl.getDocumentDOM () enterEditMode ('INPLACE'); . fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . fl.getDocumentDOM () addNewRectangle ({venstre: textLeft, topp: textTop, høyre: textRight, bunn: textBottom}, 0); }}
hvor som helst på harddisken. Nå kan du kjøre dette skriptet ved å ringe (i AS3):
MMExecute ("fl.runScript ('(bane-to-your-script)' + '/Buttonize.jsfl')");
Trinn 9: Flytt Script
med fl.configURI + 'WindowSWF /'
. La oss prøve det ut:
pakke {import adobe.utils.MMExecute; import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer strekker MovieClip {offentlig funksjon Buttonizer () {theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); } Private funksjon onClickTheButton (a_event: MouseEvent): void {MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); }}}
Trinn 10:. Legg en "Down" State ColorPicker
Trinn 11:. Encase Script i en funksjon
fungere makeButtonFromText (downColor) {if (fl.getDocumentDOM (). selection.length == 1) {if (fl.getDocumentDOM (). utvalg [0] .elementType == "tekst") {var textLeft = fl.getDocumentDOM ( ) .selection [0] .x; Var textTop = fl.getDocumentDOM () utvalg [0] .Y.; Var textRight = fl.getDocumentDOM () utvalg [0] .x + fl.getDocumentDOM () utvalg [0] .width..; Var textBottom = fl.getDocumentDOM () utvalg [0] .Y + fl.getDocumentDOM () utvalg [0] .height..; . Var textText = fl.getDocumentDOM () utvalg [0] .getTextString (); . fl.getDocumentDOM () convertToSymbol ("knappen", textText, 'top left'); . Var lib = fl.getDocumentDOM () bibliotek; if (lib.getItemProperty ('linkageImportForRS') == true) {lib.setItemProperty ('linkageImportForRS', false); } Else {lib.setItemProperty ('linkageExportForAS', false); lib.setItemProperty ('linkageExportForRS', falske); } Lib.setItemProperty ('scalingGrid', false); . fl.getDocumentDOM () enterEditMode ('INPLACE'); . fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . fl.getDocumentDOM () addNewRectangle ({venstre: textLeft, topp: textTop, høyre: textRight, bunn: textBottom}, 0); }}}
Steg 12: Før Color til Function
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')");
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText", "+ downColorPicker.selectedColor.toString () +") ");
Funksjon makeButtonFromText (downColor) {fl.trace ("farge : "+ downColor); if (fl.getDocumentDOM (). selection.length == 1) {
farge: 0
farge. 16777215
< hr>
Trinn 13: Farge på "Down" Tekst
fl.getDocumentDOM () velger (); fl.getDocumentDOM () setFillColor ('# 009999');..
fl.getDocumentDOM().enterEditMode('inPlace');fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().selectAll(); //ny linefl.getDocumentDOM () setFillColor (downColor.); //ny linefl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().addNewRectangle({left:textLeft, top: textTop, høyre: textRight, bunn: textBottom}, 0);
Trinn 14: Gjør det samme for "Over" State
) og Label å la brukeren endre fargen på "Over" tekst:
funksjon makeButtonFromText (overColor, downColor)
fl.getDocumentDOM().enterEditMode('inPlace');fl.getDocumentDOM().getTimeline().convertToKeyframes();fl.getDocumentDOM().selectAll();fl.getDocumentDOM().setFillColor( overColor);
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl ',' makeButtonFromText "," + overColorPicker.selectedColor.toString () + "," + downColorPicker.selectedColor.toString () + ")");
Trinn 15: Takk Stevens
privat funksjons runButtonizeScript (... args): String {if (args.length > 0) {return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /" + " /Buttonize.jsfl ',' makeButtonFromText ', »+ args.join (", ") +"); "); } Else {return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); }}
privat funksjon onClickTheButton (a_event: MouseEvent): void {runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());}
Trinn 16: Gjør det samme med "opp" State
funksjon makeButtonFromText ( upColor, overColor, downColor)
fl.getDocumentDOM().enterEditMode('inPlace');fl.getDocumentDOM().selectAll();fl.getDocumentDOM().setFillColor( upColor);
privat funksjon onClickTheButton (a_event: MouseEvent): void {runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker. selectedColor.toString ());}
Trinn 17:. Få Eksisterende Color fra JSFL
I en ENTER_FRAME behandleren. Ikke en dårlig idé, men kan føre til at hele Flash app til etterslep når det gjøres i et panel
I en MOUSE_CLICK handler for hele panelet: her vi skulle holde styr på om brukeren hadde endret noen av de fargevelgere siden merke teksten, og hvis ikke, vil tilbakestille alle tre for å matche teksten. En god metode, men litt utenfor rammen av denne opplæringen
I en MOUSE_CLICK handler for en annen knapp. Enkel, unngår ulykker, lett for brukeren å forstå hva som skjer ... vi har en vinner.
Trinn 18:. Legg MOUSE_CLICK Handler
offentlig funksjon Buttonizer () { theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults);} private funksjons onClickSetDefaults (a_event: MouseEvent): void {}
Trinn 19: Sett Test Kode i Handler
private funksjons onClickSetDefaults (a_event: MouseEvent): void {var defaultColor: int = 0x000000; //svart upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;}
Trinn 20:. Få Color Fra JSFL
eiendommen er det vi trenger. Så kan vi få den fargen som så:
MMExecute ("document.getCustomFill ('valg') Color");
private funksjons onClickSetDefaults (a_event: MouseEvent): void {var cssFormatDefaultColor: String = MMExecute ("document.getCustomFill ('valg'). farge" ); cssFormatDefaultColor = cssFormatDefaultColor.replace ("#", "0x"); Var defaultColor = uint (cssFormatDefaultColor); upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;}
Wrap Up