Share
In mijn laatste tut: Nieuwe functies maken voor Flash met JSFL hebben we nieuwe opdrachten voor Flash gemaakt. Nu gaan we verder gaan met het maken van geheel nieuwe panelen binnen de Flash-ontwerpomgeving.
Om het Buttonizer-paneel te proberen, download je het Bron-zipbestand en extraheer je het Buttonizer.swf-bestand naar de map die in stap 3 wordt vermeld. Start Flash opnieuw en je zult het vinden in Venster> Andere panelen.
Een Flash-venster is slechts een gewone SWF die u Flash laat uitvoeren in een paneel in plaats van een apart venster. Het enige wat u hoeft te doen is een nieuwe FLA maken. De naam van de FLA wordt weergegeven als de titel van het paneel; Ik noem mijn Buttonizer.fla. We zullen AS3 gebruiken voor deze tutorial.
Een effen wit paneel is natuurlijk erg nutteloos, dus laten we het invullen. Verklein het podium naar 250px breed en 170px hoog (niet dat het ertoe doet - ik heb deze nummers gekozen omdat ik weet dat ze groot genoeg zijn voor wat ik later heb gepland) en verander de achtergrondkleur in #EDEDED (dit komt overeen met de achtergronden van de panelen op mijn systeem, hoe dan ook).
Open het paneel Componenten (Venster> Componenten) en sleep een knop uit de map Gebruikersinterface naar het werkgebied.
Stel een SWF samen uit deze FLA. Als u Flash wilt gebruiken om dit als een paneel te gebruiken, hoeft u alleen maar de SWF naar de juiste map te slepen en vervolgens Flash opnieuw te starten.
De map wordt gebeld WindowSWF en de locatie is afhankelijk van uw besturingssysteem:
De gebruikersnaam map zal overeenkomen met de naam waarmee u zich aanmeldt, taal zal veranderen, afhankelijk van wat je hebt gekozen toen je Flash installeerde (voor Engelstaligen is dit waarschijnlijk het geval) nl-nl of gewoon nl) en als u een nieuwere versie van Flash gebruikt dan CS3, zal die map ook veranderen.
(Eerlijk gezegd is het waarschijnlijk het gemakkelijkst om op je computer te zoeken naar alle mappen met de naam Windowswf. Eén zal correct zijn.)
Sleep uw SWF naar de WindowSWF map en start Flash opnieuw. Maak je geen zorgen, je hoeft Flash niet elke keer opnieuw te starten als je een wijziging aanbrengt. Nadat u het opnieuw heeft geopend, bekijkt u de Venster> Andere panelen submenu en dat zou je moeten zien Buttonizer als een optie. Klik Het:
Geweldig.
Open het paneel en verplaats de knop in de FLA en compileer de SWF opnieuw. Het paneel verandert niet.
Verplaats de SWF naar de WindowSWF map. Het paneel verandert nog steeds niet.
Sluit het paneel en open het opnieuw vanuit het menu. Het verandert.
We kunnen dit versnellen door de SWF van het panel rechtstreeks te publiceren in de WindowSWF map. Klik Bestand> Publicatie-instellingen, klik vervolgens op het mappictogram naast het vak dat zegt Buttonizer.swf, blader naar uw WindowSWF map en klik op Opslaan.
Schakel het vinkje uit HTML checkbox, ook; je hebt het niet nodig.
Beweeg nu de knop opnieuw, compileer de SWF (je kunt Shift-F12 hiervoor gebruiken zonder Flash Player te laten verschijnen), sluit het paneel, open het opnieuw en het zal zijn bijgewerkt.
Omdat het panel een functionerende SWF is, zijn we niet beperkt tot het wijzigen van hoe het eruit ziet; we kunnen ook code toevoegen.
Maak een nieuw AS-bestand met de naam Buttonizer.as en stel het in als de documentklasse van uw FLA. Hier is de basiscode:
pakket import flash.display.MovieClip; public class Buttonizer breidt MovieClip uit openbare functie Buttonizer ()
(Raadpleeg deze snelle introductie als u niet bekend bent met het gebruik van een documentklasse.)
Om te bewijzen dat code werkt, zullen we de tekst op de knop wijzigen. Geef in de FLA de knop een instantienaam van de knop (fantasierijk), voeg dan in je constructorfunctie deze regel code toe:
theButton.label = "Knopgrootte";
Druk op Shift-F12, sluit en open het paneel en je zult zien dat de tekst is veranderd.
Zo niet, controleer dan of u de FLA aan de documentklasse hebt gekoppeld en noem de knop.
Laten we daar een functie krijgen om de knop te bedienen die wordt ingedrukt:
Accentsconagua
pakket import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer breidt MovieClip uit openbare functie Buttonizer () theButton.label = "Knopgrootte"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); private function onClickTheButton (a_event: MouseEvent): void trace ("Button clicked")); Niets ingewikkelds daar. Ik heb een trace () gebruikt om te controleren of alles goed is aangesloten. Laad het paneel opnieuw en controleer of het werkt.
Oh ... dat doet het niet?
Dat is juist; de functie AS3 trace () traceert de resultaten niet naar het deelvenster Uitvoer als dit vanuit een ander paneel wordt uitgevoerd. Ik haat het om te werken zonder sporen (), dus hier moeten we op de een of andere manier omheen.
In mijn JSFL-zelfstudie heb ik de functie JavaScript fl.trace () getoond. Het traceert tekst naar het deelvenster Uitvoer, maar wordt uitgevoerd in de Flash-ontwerpomgeving zelf en niet vanuit een Flash Player-venster. Dat is geweldig - het betekent dat we het vanuit ons panel kunnen uitvoeren!
Maar we kunnen niet gewoon typen fl.trace ("Knop geklikt"); binnen onze AS3-code, omdat het geen AS3-functie is. We moeten Flash vertellen om dit als JSFL uit te voeren en daarvoor gebruiken we de functie adobe.utils.MMExecute (), die is AS3:
pakket import adobe.utils.MMExecute; // vergeet dit niet! import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer breidt MovieClip uit openbare functie Buttonizer () theButton.label = "Knopgrootte"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); private function onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace ('Button clicked');"); // aanhalingstekens tussen aanhalingstekens raken verwarrend MMExecute () neemt een string en voert het uit als een JSFL-aanroep. Het wordt volledig genegeerd door het Flash Player-venster.
Als u dit nu uittest, wordt door op de knop te klikken doorgestuurd naar het deelvenster Uitvoer. Uitstekend.
Het zou onhandig zijn om een langer script te nemen en het door een MMExecute () -aanroep te duwen. In plaats daarvan kunnen we de JSFL opslaan in een scriptbestand en Flash vertellen om dat uit te voeren.
Als je mijn JSFL-zelfstudie hebt gevolgd, heb je al een Buttonize.jsfl-bestand; zo niet, kopieer de volgende code naar een nieuw JSFL-bestand:
if (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM (). selection [0] .elementType == "text") var textLeft = fl.getDocumentDOM (). selection [0] .X; var textTop = fl.getDocumentDOM (). selection [0] .y; var textRight = fl.getDocumentDOM (). selection [0] .x + fl.getDocumentDOM (). selection [0] .width; var textBottom = fl.getDocumentDOM (). selection [0] .y + fl.getDocumentDOM (). selection [0] .height; var textText = fl.getDocumentDOM (). selection [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('button', textText, 'linksboven'); var lib = fl.getDocumentDOM (). bibliotheek; if (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); else 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 (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Bewaar het als Buttonize.jsfl overal op uw harde schijf. Nu kunt u dat script uitvoeren door te bellen (in AS3):
MMExecute ("fl.runScript ('(path-to-your-script)' + '/Buttonize.jsfl')"); Om de zaken eenvoudig te houden, verplaatst u uw JSFL-bestand naar uw WindowSWF-directory. U kunt nu vervangen '(Path-to-your-script)' met fl.configURI + 'WindowSWF /'. Laten we het eens proberen:
pakket import adobe.utils.MMExecute; import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer breidt MovieClip uit openbare functie Buttonizer () theButton.label = "Knopgrootte"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); private function onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); Start een nieuwe FLA, maak een stukje tekst, selecteer het en druk op de knop Knopgrootte. Het zou in een knop moeten veranderen, net zoals het script dat normaal doet.
Terug in de FLA van Buttonizer sleept u een ColorPicker en een label van de componenten van de gebruikersinterface naar het werkgebied. We gebruiken de kleurkiezer om de kleur van de tekst in de knop Omlaag van de knop te wijzigen. Rangschik de componenten op de juiste manier:
Geef de kleurenkiezer een instantienaam van downColorPicker.
We moeten de kleur van de ColorPicker doorgeven aan het Buttonize-script, maar eerst zullen we het script in een functie veranderen zodat het argumenten kan accepteren.
Pas het als volgt aan:
functie makeButtonFromText (downColor) if (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM (). selection [0] .elementType == "text") var textLeft = fl.getDocumentDOM ( ) .selection [0] .x; var textTop = fl.getDocumentDOM (). selection [0] .y; var textRight = fl.getDocumentDOM (). selection [0] .x + fl.getDocumentDOM (). selection [0] .width; var textBottom = fl.getDocumentDOM (). selection [0] .y + fl.getDocumentDOM (). selection [0] .height; var textText = fl.getDocumentDOM (). selection [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('button', textText, 'linksboven'); var lib = fl.getDocumentDOM (). bibliotheek; if (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); else 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 (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Nu moeten we de MMExecute () -aanroep wijzigen om naar die specifieke functie in het script te verwijzen. Het enige dat nodig is, is de functienaam door te geven als een tweede parameter:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Voor elk argument dat we willen doorgeven aan de JSFL-functie, voegen we gewoon een andere parameter toe aan de MMExecute () -aanroep. Dus, om de geselecteerde kleur door te geven:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + downColorPicker.selectedColor.toString () + ")"); We moeten de dubbele aanhalingstekens doorbreken om dat argument op te nemen, omdat we het verkrijgen via AS3, niet via JSFL. Het is rommelig en meer dan een beetje verwarrend, ik weet het.
Laten we een eenvoudig spoor toevoegen aan de JSFL-functie om te controleren of dit werkt:
functie makeButtonFromText (downColor) fl.trace ("color:" + downColor); if (fl.getDocumentDOM (). selection.length == 1) (Aangezien het boven de selectievoorwaarde staat, kunt u de trace zien zonder dat u een bepaalde tekst hoeft te sluiten.)
Ik heb het geprobeerd met zwart en vervolgens met wit, en hier is wat in het deelvenster Uitvoer verscheen:
kleur: 0
kleur: 16777215
Het lijkt erop dat het werkt voor mij.
Om uit te vinden wat JSFL moet gebruiken om de tekstkleur te wijzigen, gebruikt u de truc van de JSFL tut; klik op "Alles selecteren", wijzig de vulkleur en bekijk de code in het deelvenster Historie:
. Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM () SetFillColor ( '# 009999.');
Oh Oh. Moeten we de uint-kleur die we van de ColorPicker hebben gekregen, converteren naar een HTML-tekenreeks? Gelukkig, nee; de document.setFillColor () helppagina vertelt ons dat we beide formaten kunnen gebruiken.
Dus alles wat we moeten doen is dat nieuwe script op de juiste plaats invoegen. Aangezien het "Omlaag" -kader het derde is, zouden we het na de tweede moeten invoegen convertToKeyframes () bellen:
. Fl.getDocumentDOM () enterEditMode ( 'INPLACE'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () selectAll (); // nieuwe regel fl.getDocumentDOM (). setFillColor (downColor); // nieuwe regel fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0);
Dit werkt:
Voeg een nieuwe ColorPicker toe (overColorPicker) en Label om de gebruiker de kleur van de "Over" -tekst te laten wijzigen:
Wijzig de handtekening van de JSFL-functie om deze andere kleur te accepteren:
functie makeButtonFromText (overColor, downColor)
Terwijl we de JSFL-functie bewerken, kunnen we net zo goed het script toevoegen om de kleur van de "Over" -status te wijzigen:
. Fl.getDocumentDOM () enterEditMode ( 'INPLACE'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM (). setFillColor (overColor);
Laten we nu de aanroep van MMExecute () in de AS3 wijzigen, zodat deze de kleur "Over" passeert:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + overColorPicker.selectedColor.toString () + "," + downColorPicker.selectedColor.toString () + " ) "); ... ugh. Dat is te rommelig en het zal erger worden. Hoe kunnen we dit oplossen?
Steven Sacks en Steven Hargrove bedachten een nette kleine functie om dit gesprek gemakkelijker te maken. Ik heb het hier aangepast:
private function 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')"); Dus nu kunnen we bellen:
persoonlijke functie onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Veel netter!
Voeg nieuwe componenten toe:
De handtekening van de JSFL-functie wijzigen:
functie makeButtonFromText (upColor, overColor, downColor)
Wijzig JSFL de kleur van tekst:
. Fl.getDocumentDOM () enterEditMode ( 'INPLACE'); . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM (). setFillColor (upColor);
Geef de kleur "Up" door aan JSFL vanaf AS3:
persoonlijke functie onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Test het:
Briljant. Nog maar één ding over.
De kans is groot dat de gebruiker wil blijven bij de kleur die ze hebben gekozen voor de tekst voor ten minste een van de drie staten. Maar we beginnen alle drie ColorPickers met zwart als de geselecteerde kleur.
Nu moeten we de bestaande opvulkleur van het tekstobject ophalen en JSFL gebruiken om het door te geven aan het paneel en vervolgens AS3 gebruiken om de kleur van de ColorPickers te wijzigen. Het is het tegenovergestelde van wat we eigenlijk hebben gedaan.
Waar moeten we in onze AS3-code de kleur van onze plukkers instellen? Ik zie drie keuzes:
Voeg dus een nieuwe Button toe aan de Buttonizer met het label "Set Defaults". Geef het een instantienaam van setDefaults.
Terug in Buttonizer.as:
publieke functie Buttonizer () theButton.label = "Knopgrootte"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); private function onClickSetDefaults (a_event: MouseEvent): void
Gewoon om te zorgen dat dit werkt als we de juiste gegevens hebben:
private function onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // black upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Zorg ervoor dat het werkt door enkele willekeurige kleuren in te stellen en klik vervolgens op de knop Standaardwaarden instellen. Het zou ze allemaal in zwart moeten resetten.
De functie MMExecute () retourneert de geretourneerde waarde van elke functie die erdoor wordt uitgevoerd. (Als meerdere functies worden uitgevoerd, wordt de geretourneerde waarde van de laatste geretourneerd.)
Om de kleur van de geselecteerde tekst te krijgen, kunnen we de JSFL document.getCustomFill ('selectie') functie gebruiken. Hiermee wordt een Fill-object geretourneerd, waarvan kleur eigendom is wat we nodig hebben. Dus we kunnen de kleur als volgt krijgen:
MMExecute ("document.getCustomFill ('selection') .color"); Dit is eigenlijk niet helemaal wat we willen, omdat het de kleur teruggeeft in het CSS String-formaat: "# AA43E2", bijvoorbeeld. Ik heb een beetje extra code geschreven om dit te converteren naar het uint-formaat dat we nodig hebben:
private function 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; Probeer dit eens uit:
Geweldig :)
Kijk eens terug naar wat je hebt geleerd. U kunt nu binnen Flash uw eigen panelen maken, JSFL-opdrachten en -scripts uitvoeren, gegevens van een paneel naar het werkvlak doorgeven en zelfs gegevens van het werkgebied in het paneel gebruiken. Proficiat!
