Share
I min sista tut: Skapa nya funktioner för Flash med JSFL skapade vi nya kommandon för Flash. Nu ska vi ta saker vidare genom att skapa helt nya paneler inom Flash-författningsmiljön.
För att prova Buttonizer-panelen hämtar du källkodsfilerna och extraherar filen Buttonizer.swf till mappen som anges i steg 3. Starta om Flash och du hittar den i Fönster> Övriga paneler.
En Flash-panel är bara en vanlig SWF som du berättar för Flash att köra i en panel snarare än ett separat fönster. Allt du behöver göra är att skapa en ny FLA. Namnet på FLA kommer att visas som panelens titel; Jag ringer min Buttonizer.fla. Vi använder AS3 för denna handledning.
En vanlig vit panel är ganska användbar, såklart, så låt oss fylla i det. Ändra storleken på scenen till 250px bred vid 170px hög (inte det betyder något - jag har valt dessa nummer eftersom jag vet att de är stora nog för det jag planerat senare) och ändra bakgrundsfärgen till #EDEDED (detta matchar bakgrunden till panelerna på mitt system, ändå).
Öppna panelen Komponenter (Fönster> Komponenter) och dra en knapp från mappen Användargränssnitt till scenen.
Kompilera en SWF från denna FLA. För att få Flash att använda detta som en panel, behöver du bara dra SWF i rätt mapp och starta om Flash.
Mappen heter WindowSWF och dess plats varierar beroende på ditt operativsystem:
De Användarnamn mappen kommer att matcha det namn du använder för att logga in med, språk kommer att ändras beroende på vad du valde när du installerade Flash (för engelska talare kommer det förmodligen vara en-us eller bara sv), och om du använder en nyare version av Flash än CS3, kommer den här mappen också att ändras.
(Uppriktigt sagt, det är nog lättast att söka på din dator för att hitta alla mappar som heter WindowSWF. Ett kommer att vara korrekt.)
Dra din SWF över till WindowSWF mappen starta sedan om Flash. Oroa dig inte, du behöver inte starta om Flash varje gång du ändrar. När du har öppnat den igen, kolla in Fönster> Övriga paneler undermenyn och du bör se Buttonizer som ett alternativ. Klicka på det:
Grymt bra.
Med panelen öppen flyttar du knappen i FLA, och gör sedan om kompilering av SWF. Panelen ändras inte.
Flytta SWF till WindowSWF mapp. Panelen ändras fortfarande inte.
Stäng panelen och öppna den igen från menyn. Det ändras.
Vi kan påskynda detta genom att panelens SWF publiceras direkt till WindowSWF mapp. Klick Arkiv> Publiceringsinställningar, klicka sedan på mappikonen bredvid rutan som säger Buttonizer.swf, bläddra till din WindowSWF mapp och tryck på Spara.
Avmarkera kryssrutan html kryssrutan också; du behöver inte det.
Flytta nu knappen igen, kompilera SWF (du kan slå Shift-F12 för att göra detta utan att göra Flash Player)), stäng panelen, öppna den igen och den kommer att uppdateras.
Eftersom panelen är en fungerande SWF, är vi inte begränsade till att ändra hur det ser ut; vi kan också lägga till kod.
Skapa en ny AS-fil som heter Buttonizer.as och ställ in den som dokumentklassen på din FLA. Här är den grundläggande koden:
paket import flash.display.MovieClip; public class Buttonizer utökar MovieClip public function Buttonizer ()
(Om du inte är bekant med att använda en dokumentklass, kolla in den här snabba introduktionen.)
För att bevisa att kod kan fungera ändrar vi texten på knappen. I FLA, ge knappen ett förekomstnamn på knappen (fantasifulla), lägg sedan till den här koden i din konstruktörsfunktion:
theButton.label = "Buttonize";
Hit Shift-F12, stäng och öppna panelen igen, så ser du texten har ändrats.
Om inte, kontrollera att du har länkat FLA till dokumentklassen och namngiven knappen.
Låt oss få en funktion där för att hantera knappen som trycks in:
Accentsconagua
paket import flash.display.MovieClip; importera flash.events.MouseEvent; public class Buttonizer utökar MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); privat funktion onClickTheButton (a_event: MouseEvent): void trace ("Button clicked"); Ingenting komplicerat där. Jag har använt ett spår () för att se till att allt är anslutet korrekt. Ladda om panelen och se till att den fungerar.
Åh ... det gör det inte?
Det är rätt; AS3-spår () -funktionen spårar inte resultat på utmatningspanelen när den körs från en annan panel. Jag hatar att arbeta utan spår (), så vi måste komma runt på något sätt.
I min JSFL-handledning visade jag dig JavaScript fl.trace () -funktionen. Den spårar text till utmatningspanelen, men körs i själva Flash-skapningsmiljön, snarare än från ett Flash Player-fönster. Det är bra - det betyder att vi kan köra det från vår panel!
Men vi kan inte bara skriva fl.trace ("Knappklickat"); inom vår AS3-kod, eftersom det inte är en AS3-funktion. Vi måste berätta för Flash att köra detta som JSFL, och för att göra det använder vi funktionen adobe.utils.MMExecute (), vilken är AS3:
paket import adobe.utils.MMExecute; // glöm inte detta! importera flash.display.MovieClip; importera flash.events.MouseEvent; public class Buttonizer utökar MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); privat funktion onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace (" Button clicked ");"); // citat i citat blir förvirrande MMExecute () tar en sträng och kör den som ett JSFL-samtal. Det ignoreras fullständigt av Flash Player-fönstret.
Om du testar detta nu, kommer det att spåra till utmatningspanelen genom att klicka på knappen. Excellent.
Det skulle vara obekvämt att ta ett längre skript och trycka det genom ett MMExecute () -samtal. Istället kan vi spara JSFL till en skriptfil och berätta för Flash att köra det.
Om du följde min JSFL-handledning har du redan en Buttonize.jsfl-fil. om inte, kopiera följande kod till en ny JSFL-fil:
om fl.getDocumentDOM (). selection.length == 1) om (fl.getDocumentDOM () .selektion [0] .elementType == "text") var textLeft = fl.getDocumentDOM () .x; var textTop = fl.getDocumentDOM (). urval [0] .y; var textRight = fl.getDocumentDOM () .val [0] .x + fl.getDocumentDOM (). urval [0] .width; var textBottom = fl.getDocumentDOM (). urval [0] .y + fl.getDocumentDOM (). urval [0] .height; var textText = fl.getDocumentDOM (). urval [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ("knapp", textText, "vänster till vänster"); var lib = fl.getDocumentDOM (). bibliotek; om (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); annars lib.setItemProperty ('linkageExportForAS', false); 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 (vänster: textLeft, topp: textTop, höger: textRight, bottom: textBottom, 0); Spara det som Buttonize.jsfl var som helst på din hårddisk. Nu kan du köra det manuset genom att ringa (i AS3):
MMExecute ("fl.runScript ('(path-to-your-script)' + '/Buttonize.jsfl')"); För att hålla det enkelt, flytta din JSFL-fil till din WindowSWF-katalog. Du kan nu ersätta "(Väg till din-script) med fl.configURI + 'WindowSWF /'. Låt oss prova det:
paket import adobe.utils.MMExecute; importera flash.display.MovieClip; importera flash.events.MouseEvent; public class Buttonizer utökar MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); privat funktion onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI +" WindowSWF / '+' /Buttonize.jsfl ') "); Starta en ny FLA, skapa lite text, välj den och tryck på knappen Knappen. Det borde bli en knapp, precis som manuset normalt gör.
Tillbaka i Buttonizer FLA, dra en ColorPicker och en etikett från användargränssnittskomponenterna till scenen. Vi använder färgplockaren för att ändra färgen på texten i knappens nedtillstånd. Ordna komponenterna på lämpligt sätt:
Ge färgplockaren ett förekomstnamn på downColorPicker.
Vi måste överföra färgen från ColorPicker till Buttonize-skriptet, men först gör vi skriptet till en funktion så att den kan acceptera argument.
Ändra det som så:
funktionen makeButtonFromText (downColor) if (fl.getDocumentDOM (). selection.length == 1) om (fl.getDocumentDOM () .selektion [0] .elementType == "text") var textLeft = fl.getDocumentDOM ) .selection [0] .x; var textTop = fl.getDocumentDOM (). urval [0] .y; var textRight = fl.getDocumentDOM () .val [0] .x + fl.getDocumentDOM (). urval [0] .width; var textBottom = fl.getDocumentDOM (). urval [0] .y + fl.getDocumentDOM (). urval [0] .height; var textText = fl.getDocumentDOM (). urval [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ("knapp", textText, "vänster till vänster"); var lib = fl.getDocumentDOM (). bibliotek; om (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); annars lib.setItemProperty ('linkageExportForAS', false); 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 (vänster: textLeft, topp: textTop, höger: textRight, bottom: textBottom, 0); Nu ska vi ändra MMExecute () -samtalet, för att hänvisa till den specifika funktionen i skriptet. Allt som krävs är att överföra funktionsnamnet som en andra parameter:
MMExecute ("fl.runScript (fl.configURI +" WindowSWF / '+' /Buttonize.jsfl ',' makeButtonFromText ') "); För varje argument vi vill överföra till JSFL-funktionen, lägger vi bara till en annan parameter till MMExecute () -samtalet. Så, för att klara den valda färgen:
MMExecute ("fl.runScript (fl.configURI +" WindowSWF / '+' /Buttonize.jsfl ',' makeButtonFromText ', "+ downColorPicker.selectedColor.toString () +") "); Vi måste bryta ut ur dubbla citat för att inkludera det argumentet, eftersom vi får det via AS3, inte via JSFL. Det är rörigt, och mer än lite förvirrande, jag vet.
Låt oss lägga till ett enkelt spår i JSFL-funktionen för att se till att det här fungerar:
funktion makeButtonFromText (downColor) fl.trace ("color:" + downColor); om (fl.getDocumentDOM (). selection.length == 1) (Eftersom det ligger ovanför urvalet, kan du se spåret utan att behöva knappa lite text.)
Jag försökte det med svart och sedan vitt, och här är det som uppstod i utmatningspanelen:
färg: 0
färg: 16777215
Det verkar som att det fungerar för mig.
För att ta reda på vad JSFL ska använda för att ändra textfärgen, använd tricket från JSFL-tut; slå "Välj alla", ändra sedan fyllfärgen och kolla koden på historikpanelen:
. Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM () setFillColor (# 009.999).
Hoppsan. Ska vi konvertera den uint färg vi fick från ColorPicker till en HTML-sträng? Lyckligtvis nej; Hjälpdokumentet document.setFillColor () berättar för oss att vi kan använda antingen format.
Så allt vi behöver göra är att infoga det nya skriptet på rätt plats. Eftersom "Down" -ramen är den tredje, bör vi infoga den efter den andra convertToKeyframes () ring upp:
. Fl.getDocumentDOM () enterEditMode ( 'inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () selectAll (); // ny linje fl.getDocumentDOM (). setFillColor (downColor); // ny linje fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (vänster: textLeft, topp: textTop, höger: textRight, bottom: textBottom, 0);
Det här fungerar:
Lägg till en ny ColorPicker (overColorPicker) och Etikett för att låta användaren ändra färgen på "Över" -texten:
Ändra signaturen för JSFL-funktionen för att acceptera denna andra färg:
funktion makeButtonFromText (overColor, downColor)
Medan vi redigerar JSFL-funktionen kan vi lika gärna lägga till skriptet för att ändra färgen på "Över" -statusen:
. Fl.getDocumentDOM () enterEditMode ( 'inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM (). setFillColor (overColor);
Låt oss nu ändra samtalet till MMExecute () i AS3 så att det passerar "Över" -färgen:
MMExecute ("fl.runScript (fl.configURI +" WindowSWF / '+' /Buttonize.jsfl ',' makeButtonFromText ',' + overColorPicker.selectedColor.toString () + "," + downColorPicker.selectedColor.toString () + " ) "); ... Ugh. Det är för rörigt, och det kommer att bli värre. Hur kan vi fixa det här?
Steven Sacks och Steven Hargrove kom med en snygg liten funktion för att göra det enklare. Jag har anpassat det här:
Private Function RunButtonizeScript (... args): String if (args.length> 0) returnera MMExecute ("fl.runScript (fl.configURI +" WindowSWF / '+' /Buttonize.jsfl ',' makeButtonFromText ', "+ args .join (",") + ");"); annars returnera MMExecute ("fl.runScript (fl.configURI +" WindowSWF / '+' /Buttonize.jsfl ',' makeButtonFromText ') "); Så nu kan vi ringa:
privat funktion onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Mycket snyggare!
Lägg till nya komponenter:
Ändra signaturen för JSFL-funktionen:
funktion makeButtonFromText (upColor, overColor, downColor)
Gör JSFL ändra färg på text:
. Fl.getDocumentDOM () enterEditMode ( 'inplace'); . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM (). setFillColor (upColor);
Pass "Up" -färgen till JSFL från AS3:
privat funktion onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Testa det:
Lysande. Bara en sak kvar.
Chansen är att användaren kommer att vilja hålla sig till den färg de valde för texten för minst en av de tre tillstånden. Men vi börjar alla tre ColorPickers med svart som den valda färgen.
Så, nu måste vi få den befintliga fyllfärgen från textobjektet, och använd JSFL för att skicka det till panelen och använd sedan AS3 för att ändra färg på ColorPickers. Det är motsatsen till vad vi har gjort, verkligen.
Vart ska vi i vår AS3-kod sätta färgen på våra plockare? Jag ser tre val:
Så lägg till en ny knapp till Buttonizer, märkt "Set Default". Ge det ett förekomstnamn på setdefaults.
Tillbaka i Buttonizer.as:
allmän funktion Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); privat funktion onClickSetDefaults (a_event: MouseEvent): void
Bara för att se till att detta kommer att fungera när vi har rätt data:
privat funktion onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // svart upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Se till att det fungerar genom att ställa in några slumpmässiga färger och klicka sedan på knappen Ange standardinställningar. Det borde återställa alla till svart.
Funktionen MMExecute () returnerar returvärdet för någon funktion som körs genom den. (Om flera funktioner körs returnerar den återvinningsvärdet för den sista.)
För att få färgen på den markerade texten kan vi använda funktionen JSFL document.getCustomFill ("selection"). Detta returnerar ett Fill-objekt, vars Färg egendom är vad vi behöver. Så vi kan få färgen som så:
MMExecute ("document.getCustomFill (" selection ") .color"); Det här är faktiskt inte riktigt vad vi vill, eftersom det returnerar färgen i CSS-strängformat: "# AA43E2", till exempel. Jag har skrivit en liten extra kod för att konvertera det till det uint-format som vi behöver:
privat funktion 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; Prova detta:
Grymt bra :)
Ta en titt tillbaka på vad du har lärt dig. Du kan nu skapa egna paneler i Flash, köra JSFL-kommandon och skript, skicka data från en panel till scenen och till och med få data från scenen som ska användas i panelen. Grattis!
