Share
I min siste tut: Lag nye funksjoner for Flash med JSFL opprettet vi nye kommandoer for Flash. Nå skal vi ta ting videre ved å lage helt nye paneler i Flash-forfattermiljøet.
For å prøve Buttonizer-panelet, last ned kilde-zip-filen og ekstrakluder Buttonizer.swf-filen til mappen som er oppført i trinn 3. Start på nytt Flash, og du finner det i Vindu> Andre paneler.
Et Flash-panel er bare en vanlig SWF som du forteller Flash å kjøre i et panel i stedet for et eget vindu. Alt du trenger å gjøre er å lage en ny FLA. Navnet på FLA vil bli vist som tittel på panelet; Jeg ringer min Buttonizer.fla. Vi bruker AS3 for denne opplæringen.
Et klart hvitt panel er ganske ubrukelig, selvfølgelig, så la oss fylle det ut. Endre størrelsen på scenen til 250px bred ved 170px høy (ikke at det betyr noe - jeg har plukket disse tallene fordi jeg vet at de er store nok til det jeg har planlagt senere) og endrer bakgrunnsfargen til #EDEDED (dette samsvarer med bakgrunnen til panelene på systemet mitt, uansett).
Åpne komponentpanelet (Vindu> Komponenter) og dra en knapp fra brukergrensesnittmappen til scenen.
Opprett en SWF fra denne FLA. For å få Flash til å bruke dette som et panel, er alt du trenger å gjøre, dra SWF i riktig mappe, og start deretter Flash på nytt.
Mappen heter WindowSWF og plasseringen varierer avhengig av operativsystemet ditt:
De brukernavn mappen stemmer overens med navnet du bruker til å logge inn med, Språk vil endre seg, avhengig av hva du valgte da du installerte Flash (for engelsktalende er det sannsynligvis det en-us eller bare no), og hvis du bruker en nyere versjon av Flash enn CS3, vil denne mappen endres også.
(Helt ærlig er det sannsynligvis enklest å søke på datamaskinen din for å finne alle mappene kalt WindowSWF. En vil være riktig.)
Dra din SWF over til WindowSWF mappe, og start deretter Flash. Ikke bekymre deg, du trenger ikke å starte Flash hver gang du gjør en endring. Når du har åpnet den igjen, sjekk ut Vindu> Andre paneler undermenyen, og du bør se Buttonizer som et alternativ. Trykk på det:
Rått.
Når panelet er åpent, flytter du knappen i FLA, og re-kompilerer SWF-en. Panelet endres ikke.
Flytt SWF til WindowSWF mappe. Panelet endrer seg ikke.
Lukk panelet og åpne det på nytt fra menyen. Det forandres.
Vi kan fremskynde dette ved å ha panelets SWF publisert direkte til WindowSWF mappe. Klikk Fil> Publiser innstillinger, klikk deretter på mappesymbolet ved siden av boksen som sier Buttonizer.swf, bla til din WindowSWF mappe og trykk Lagre.
Fjern merket for HTML kryssboks også; du trenger ikke det.
Nå flytte knappen igjen, kompilere SWF (du kan trykke Shift-F12 for å gjøre dette uten å gjøre Flash Player vises), lukk panelet, åpne det på nytt, og det vil ha oppdatert.
Siden panelet er en fungerende SWF, er vi ikke begrenset til å endre hvordan det ser ut; vi kan også legge til kode.
Opprett en ny AS-fil kalt Buttonizer.as, og sett den opp som dokumentklassen til FLA. Her er grunnkoden:
pakke import flash.display.MovieClip; offentlig klasse Buttonizer utvider MovieClip offentlig funksjon Buttonizer ()
(Hvis du ikke er kjent med å bruke en dokumentklasse, sjekk ut denne raske introduksjonen.)
For å bevise at kode kan fungere, endrer vi teksten på knappen. I FLA, gi knappen et forekomstnavn på knappen (fantasifull), deretter i din konstruktørfunksjon, legg til denne linjen med kode:
theButton.label = "Buttonize";
Hit Shift-F12, lukk og åpne panelet igjen, og du får se teksten har endret seg.
Hvis ikke, må du sjekke at du har koblet FLA til dokumentklassen og kalt knappen.
La oss få en funksjon der inne for å håndtere knappen som trykkes:
Accentsconagua
pakke import flash.display.MovieClip; importer flash.events.MouseEvent; offentlig klasse Buttonizer utvider MovieClip offentlig funksjon Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); privat funksjon onClickTheButton (a_event: MouseEvent): void trace ("Button clicked"); Ingenting komplisert der. Jeg har brukt et spor () for å sørge for at det er helt tilkoblet riktig. Legg på panelet igjen og kontroller at det fungerer.
Åh ... det gjør det ikke?
Det er riktig; AS3 trace () -funksjonen sporer ikke resultater til utgangspanelet når det kjøres fra et annet panel. Jeg hater å jobbe uten spor (), så vi må omgå dette på en eller annen måte.
I JSFL-opplæringen viste jeg deg JavaScript fl.trace () -funksjonen. Den sporer tekst til Utdata-panelet, men kjøres i selve Flash-forfattermiljøet, i stedet for fra et Flash Player-vindu. Det er flott - det betyr at vi kan kjøre det fra vårt panel!
Men vi kan ikke bare skrive fl.trace ("Knapp klikket"); innenfor vår AS3-kode, fordi det ikke er en AS3-funksjon. Vi må fortelle Flash for å kjøre dette som JSFL, og for å gjøre det bruker vi adobe.utils.MMExecute () -funksjonen, som er AS3:
pakke import adobe.utils.MMExecute; // ikke glem dette! importer flash.display.MovieClip; importer flash.events.MouseEvent; offentlig klasse Buttonizer utvider MovieClip offentlig funksjon Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); privat funksjon onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace ('Button clicked');"); // sitater i anførselstegn blir forvirrende MMExecute () tar en streng og kjører den som et JSFL-anrop. Det er fullstendig ignorert av Flash Player-vinduet.
Hvis du tester dette ut nå, vil klikk på knappen spore til Utdata-panelet. Utmerket.
Det ville være ubeleilig å ta et lengre skript og trykke det gjennom en MMExecute () samtale. I stedet kan vi lagre JSFL til en skriptfil og fortell Flash for å kjøre det.
Hvis du fulgte JSFL-opplæringen min, har du allerede en Buttonize.jsfl-fil; Hvis ikke, kopier følgende kode til en ny JSFL-fil:
hvis (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM () .seleksjon [0] .elementType == "tekst") var textLeft = fl.getDocumentDOM (). valg [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 () .valg [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('knapp', textText, 'øverst til venstre'); var lib = fl.getDocumentDOM (). bibliotek; hvis (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); ellers lib.setItemProperty ('linkageExportForAS', falsk); lib.setItemProperty ('linkageExportForRS', false); lib.setItemProperty ('scalingGrid', false); . Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Lagre det som Buttonize.jsfl hvor som helst på harddisken din. Nå kan du kjøre dette skriptet ved å ringe (i AS3):
MMExecute ("fl.runScript ('(path-to-your-script)' + '/Buttonize.jsfl')"); For å holde det enkelt, flytt JSFL-filen til WindowSWF-katalogen din. Du kan nå erstatte '(Bane-to-your-script)' med fl.configURI + 'WindowSWF /'. La oss prøve det ut:
pakke import adobe.utils.MMExecute; importer flash.display.MovieClip; importer flash.events.MouseEvent; offentlig klasse Buttonizer utvider MovieClip offentlig funksjon Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); privat funksjon onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); Start en ny FLA, lag litt tekst, velg den, og trykk på knappen Knappen. Det bør bli en knapp, akkurat som skriptet gjør normalt.
Tilbake i Buttonizer FLA, dra en ColorPicker og en etikett fra brukergrensesnittkomponentene til scenen. Vi bruker fargevalgeren til å endre fargen på teksten i knappens Ned-tilstand. Ordne komponentene på riktig måte:
Gi fargeplukkeren et forekomstnavn på downColorPicker.
Vi må passere fargen fra ColorPicker til Buttonize-skriptet, men først vil vi slå skriptet til en funksjon slik at den kan akseptere argumenter.
Endre det slik:
funksjon makeButtonFromText (downColor) if (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM () .seleksjon [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 () .valg [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('knapp', textText, 'øverst til venstre'); var lib = fl.getDocumentDOM (). bibliotek; hvis (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); ellers lib.setItemProperty ('linkageExportForAS', falsk); lib.setItemProperty ('linkageExportForRS', false); lib.setItemProperty ('scalingGrid', false); . Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Nå bør vi endre MMExecute () kallet, for å referere til den spesifikke funksjonen i skriptet. Alt som kreves er å sende funksjonsnavnet som en andre parameter:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); For hvert argument vi vil sende til JSFL-funksjonen, legger vi bare til en annen parameter til MMExecute () -samtalen. Så, for å passere den valgte fargen:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + downColorPicker.selectedColor.toString () + ")"); Vi må bryte ut av de dobbelte sitatene for å inkludere det argumentet, siden vi får det via AS3, ikke via JSFL. Det er rotete, og mer enn litt forvirrende, vet jeg.
La oss legge til et enkelt spor til JSFL-funksjonen for å sikre at dette fungerer:
funksjon makeButtonFromText (downColor) fl.trace ("color:" + downColor); hvis (fl.getDocumentDOM (). selection.length == 1) (Siden det er over utvalgsbetingelsen, kan du se sporet uten å faktisk knytte litt tekst.)
Jeg prøvde det med svart og så hvitt, og her er det som dukket opp i Utdata-panelet:
farge: 0
farge: 16777215
Ser ut som det virker for meg.
For å finne ut hva JSFL skal bruke for å endre tekstfargen, bruk trikset fra JSFL tut; trykk "Velg alle", og endre fyllfarge og se koden i historikkpanelet:
. Fl.getDocumentDOM (), velger (); fl.getDocumentDOM () setFillColor ( '# 009999.');
UH oh. Skal vi konvertere uint-fargen fra ColorPicker til en HTML-streng? Heldigvis nei; Document.setFillColor () hjelpesiden forteller oss at vi kan bruke enten format.
Så alt vi trenger å gjøre er å sette inn det nye skriptet på riktig sted. Siden "Down" -rammen er den tredje, bør vi sette den inn etter den andre convertToKeyframes () anrop:
. Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM (), velger (); // ny linje fl.getDocumentDOM (). setFillColor (downColor); // ny linje fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0);
Dette fungerer:
Legg til en ny ColorPicker (overColorPicker) og Etikett for å la brukeren endre fargen på "Over" -teksten:
Endre signaturen til JSFL-funksjonen for å godta denne andre fargen:
funksjon makeButtonFromText (overColor, downColor)
Mens vi redigerer JSFL-funksjonen, kan vi også legge til skriptet for å endre fargen på "Over" -statusen:
. Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM (), velger (); fl.getDocumentDOM (). setFillColor (overColor);
La oss nå bytte anropet til MMExecute () i AS3 slik at det går over "Over" -farge:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText', '+ overColorPicker.selectedColor.toString () +", "+ downColorPicker.selectedColor.toString () +" ) "); ... Ugh. Det er for rotete, og det kommer til å bli verre. Hvordan kan vi fikse dette?
Steven Sacks og Steven Hargrove kom opp med en fin liten funksjon for å gjøre denne anropen enklere. Jeg har tilpasset det her:
Private funksjon runButtonScriptScript (... args): String hvis (args.length> 0) return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + args .join (",") + ");"); ellers return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Så nå kan vi ringe:
privat funksjon onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Mye penere!
Legg til nye komponenter:
Endre signaturen til JSFL-funksjonen:
funksjon makeButtonFromText (upColor, overColor, downColor)
Gjør JSFL endre farge på tekst:
. Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM (), velger (); fl.getDocumentDOM (). setFillColor (upColor);
Pass "Up" farge til JSFL fra AS3:
privat funksjon onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Test det:
Strålende. Bare en ting igjen.
Sjansen er at brukeren vil holde fast med fargen de plukket for teksten for minst en av de tre tilstandene. Men vi starter alle tre ColorPickers med svart som den valgte fargen.
Så, nå må vi få den eksisterende fyllefargen fra tekstobjektet, og bruk JSFL til å sende den gjennom til panelet, og bruk AS3 for å endre fargen på ColorPickers. Det er motsatt av det vi har gjort, egentlig.
Hvor i vår AS3-kode skal vi sette fargen på våre plukkere, skjønt? Jeg ser tre valg:
Så legg til en ny knapp til Buttonizer, merket "Set Default". Gi det et forekomstnavn på setDefaults.
Tilbake i Buttonizer.as:
offentlig funksjon Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); privat funksjon onClickSetDefaults (a_event: MouseEvent): void
Bare for å sørge for at dette vil fungere når vi har de riktige dataene:
privat funksjon onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // svart upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Pass på at det fungerer ved å sette inn noen tilfeldige farger, og klikk deretter på Angi standardinnstillinger. Det burde tilbakestille dem alle til svart.
Funksjonen MMExecute () returnerer returverdien til en hvilken som helst funksjon som går gjennom den. (Hvis flere funksjoner kjøres, returnerer den returverdien til den siste.)
For å få fargen på den valgte teksten, kan vi bruke funksjonen JSFL document.getCustomFill ('selection'). Dette returnerer et Fill-objekt, hvis farge eiendom er det vi trenger. Så, vi kan få farge slik:
MMExecute ("document.getCustomFill ('selection') .color"); Dette er egentlig ikke helt det vi ønsker, da det returnerer fargen i CSS String format: "# AA43E2", for eksempel. Jeg har skrevet litt ekstra kode for å konvertere dette til uint-formatet som vi trenger:
privat funksjon onClickSetDefaults (a_event: MouseEvent): void var cssFormatDefaultColor: String = MMExecute ("document.getCustomFill ('selection') .color"); cssFormatDefaultColor = cssFormatDefaultColor.replace ("#", "0x"); var defaultColor = uint (cssFormatDefaultColor); upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor; Prøv dette ut:
Rått :)
Ta en titt tilbake på det du har lært. Du kan nå lage dine egne paneler i Flash, kjøre JSFL-kommandoer og skript, sende data fra et panel til scenen, og til og med få data fra scenen som skal brukes i panelet. Gratulerer!
