Share
În ultimul meu tut: Crearea de noi funcții pentru Flash cu JSFL am creat noi comenzi pentru Flash. Acum vom continua să facem lucrurile prin crearea de panouri noi în mediul de creație Flash.
Pentru a încerca panoul Buttonizer, descărcați fișierul Source zip și extrageți fișierul Buttonizer.swf în folderul enumerat în Pasul 3. Reporniți Flash și îl veți găsi Fereastră> Alte panouri.
Un panou Flash este doar un SWF obișnuit pe care-l spuneți Flash să ruleze într-un panou, mai degrabă decât o fereastră separată. Tot ce trebuie să faceți este să creați un FLA nou. Numele FLA va fi afișat ca titlu al panoului; Îi sun pe Buttonizer.fla mea. Vom folosi AS3 pentru acest tutorial.
Un panou alb simplu este inutil, bineînțeles, așa că să-l umplem. Redimensionați scena la o lățime de 250 de pixeli la o înălțime de 170 de pixeli (nu este importantă - am ales aceste numere deoarece știu că sunt destul de mari pentru ceea ce am planificat mai târziu) și modifică culoarea de fundal la #EDEDED (aceasta se potrivește cu fundalul panourile de pe sistemul meu, oricum).
Deschideți panoul Components (Fereastră> Componente) și trageți un buton din dosarul Interfață utilizator pe scenă.
Compilați un SWF din acest FLA. Pentru a obține Flash pentru a utiliza acest lucru ca panou, tot ce trebuie să faceți este să glisați SWF în dosarul corect, apoi reporniți Flash.
Se apela dosarul WindowSWF iar locația sa variază în funcție de sistemul dvs. de operare:
nume de utilizator dosarul se va potrivi cu numele pe care îl utilizați pentru a vă conecta, limba se va schimba în funcție de ceea ce ați ales atunci când ați instalat Flash (pentru vorbitorii de engleză vor fi probabil en-ne sau doar ro) și dacă utilizați o versiune mai recentă de Flash decât CS3, acel director se va schimba prea.
(Sincer, este probabil cel mai ușor să căutați în computerul dvs. pentru a găsi toate folderele numite WindowSWF. Una va fi corectă.)
Trageți SWF peste la WindowSWF apoi reporniți Flash. Nu vă faceți griji, nu veți mai trebui să reporniți Flash de fiecare dată când faceți o schimbare. Odată ce l-ați deschis din nou, verificați Fereastră> Alte panouri sub-meniu și ar trebui să vedeți Buttonizer ca opțiune. Apasă-l:
Minunat.
Cu panoul deschis, mutați butonul în FLA, apoi re-compilați SWF-ul. Panoul nu se schimbă.
Mutați SWF la WindowSWF pliant. Panoul încă nu se schimbă.
Închideți panoul și re-deschideți-l din meniu. Se schimba.
Putem accelera acest lucru prin faptul că SWF-ul panoului este publicat direct în WindowSWF pliant. Clic Fișier> Publicați setările, apoi faceți clic pe pictograma dosarului de lângă caseta care spune Buttonizer.swf, navigați la dvs. WindowSWF și salvați.
Debifați HTML și caseta de selectare; nu aveți nevoie de ea.
Acum mutați butonul din nou, recompilați SWF-ul (puteți lovi Shift-F12 pentru a face acest lucru fără a apărea Flash Player), închideți panoul, deschideți-l din nou și acesta va fi actualizat.
Deoarece panoul este un SWF funcțional, nu ne limităm la schimbarea aspectului; putem adăuga și codul.
Creați un nou fișier AS numit Buttonizer.as și configurați-l ca clasă de documente a FLA. Iată codul de bază:
pachet import flash.display.MovieClip; clasa publica Buttonizer extinde MovieClip functie publica Buttonizer ()
(Dacă nu sunteți familiarizat cu utilizarea unei clase de documente, consultați această introducere rapidă.)
Pentru a demonstra că codul poate funcționa, vom schimba textul de pe buton. În FLA, dați butonul un nume de instanță pentru butonul (imaginativ), apoi în funcția constructor, adăugați această linie de cod:
theButton.label = "Buttonize";
Apăsați Shift-F12, închideți și deschideți din nou panoul și veți vedea că textul sa schimbat.
Dacă nu, verificați dacă ați conectat FLA la clasa de documente și ați numit butonul.
Să luăm o funcție acolo pentru a face față butonului care este împins:
Accentsconagua
pachet import flash.display.MovieClip; importul flash.events.MouseEvent; clasa publica Buttonizer extinde MovieClip functie publica Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); funcția privată onClickTheButton (a_event: MouseEvent): void trace ("Butonul apăsat"); Nimic nu era complicat acolo. Am folosit o urmă () pentru a vă asigura că totul este conectat corect. Reîncărcați panoul și asigurați-vă că funcționează.
Nu ... nu?
Asta e corect; funcția AS3 trace () nu urmărește rezultatele panoului de ieșire când este rulat dintr-un alt panou. Urăsc să lucrez fără urmă (), așa că va trebui să ne împrăștiem cumva.
În tutorialul meu JSFL, ți-am arătat funcția JavaScript fl.trace (). Ea urmărește textul la panoul de ieșire, dar este rulat în mediul de creație Flash în sine, mai degrabă decât dintr-o fereastră Flash Player. Asta e minunat - înseamnă că o putem conduce din panoul nostru!
Dar nu putem doar să tipăm fl.trace ("Butonul apăsat"); în cadrul codului AS3, deoarece nu este o funcție AS3. Trebuie să îi spunem lui Flash să ruleze acest lucru ca JSFL și, pentru a face acest lucru, vom folosi funcția adobe.utils.MMExecute (), care este AS3:
pachet import adobe.utils.MMExecute; // nu uita asta! import flash.display.MovieClip; importul flash.events.MouseEvent; clasa publica Buttonizer extinde MovieClip functie publica Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); funcția privată onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace");); // citate în citate devin confuze MMExecute () ia un șir și o execută ca un apel JSFL. Este complet ignorat de fereastra Flash Player.
Dacă testați acest lucru acum, faceți clic pe butonul care va urmări panoul de ieșire. Excelent.
Ar fi incomod să iei un script mai lung și să îl împingi printr-un apel MMExecute (). În schimb, putem salva JSFL într-un fișier de script și să-i spunem Flash să ruleze asta.
Dacă ați urmat tutorialul meu JSFL, veți avea deja un fișier Buttonize.jsfl; dacă nu, copiați următorul cod într-un nou fișier JSFL:
dacă (fl.getDocumentDOM () select.length == 1) if (fl.getDocumentDOM () selecție [0] .elementType == "text") var textLeft = fl.getDocumentDOM .X; var textTop = fl.getDocumentDOM () selecție [0] .y; var textRight = fl.getDocumentDOM () selecție [0] .x + fl.getDocumentDOM () selecție [0] .width; var textBottom = fl.getDocumentDOM () selecție [0] .y + fl.getDocumentDOM () selecție [0] .height; var textText = fl.getDocumentDOM () selecție [0] .getTextString (); fl.getDocumentDOM () convertToSymbol ('buton', textText, 'sus-sus'); var lib = fl.getDocumentDOM () bibliotecă; dacă (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); altfel 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 (stânga: textLeft, sus: textTop, dreapta: textRight, jos: textBottom, 0); Salvați-o ca Buttonize.jsfl oriunde pe hard disk. Acum puteți rula acest script apelând (în AS3):
MMExecute ("fl.runScript ('(path-to-script)' + '/Buttonize.jsfl')"); Pentru a păstra lucrurile simple, mutați fișierul JSFL în directorul WindowSWF. Acum puteți înlocui '(Calea de-a-ta-script)' cu fl.configURI + 'WindowSWF /'. Să încercăm:
pachet import adobe.utils.MMExecute; import flash.display.MovieClip; importul flash.events.MouseEvent; clasa publica Buttonizer extinde MovieClip functie publica Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); funcția privată onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); Porniți un nou FLA, creați un text, selectați-l și apăsați butonul Butonize. Ar trebui să se transforme într-un buton, la fel ca în mod normal scenariul.
Înapoi în Buttonizer FLA, glisați un ColorPicker și o etichetă din componentele interfeței utilizator în stadiu. Vom folosi selectorul de culori pentru a schimba culoarea textului în stânga butonului. Aranjați componentele în mod corespunzător:
Dați selectorului de culori un nume de instanță pentru downColorPicker.
Va trebui să trecem culoarea de la ColorPicker la scriptul Buttonize, dar mai întâi vom transforma scriptul într-o funcție, astfel încât să accepte argumentele.
Modificați-l astfel:
funcția makeButtonFromText (downColor) if (fl.getDocumentDOM () .select.length == 1) if (fl.getDocumentDOM () selecție [0] .elementType == "text") var textLeft = fl.getDocumentDOM ) .selection [0] .x; var textTop = fl.getDocumentDOM () selecție [0] .y; var textRight = fl.getDocumentDOM () selecție [0] .x + fl.getDocumentDOM () selecție [0] .width; var textBottom = fl.getDocumentDOM () selecție [0] .y + fl.getDocumentDOM () selecție [0] .height; var textText = fl.getDocumentDOM () selecție [0] .getTextString (); fl.getDocumentDOM () convertToSymbol ('buton', textText, 'sus-sus'); var lib = fl.getDocumentDOM () bibliotecă; dacă (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); altfel 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 (stânga: textLeft, sus: textTop, dreapta: textRight, jos: textBottom, 0); Acum ar trebui să modificăm apelul MMExecute (), pentru a se referi la acea funcție specifică din script. Tot ce este necesar este să treci numele funcției ca al doilea parametru:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Pentru fiecare argument dorim să trecem la funcția JSFL, adăugăm doar un alt parametru la apelul MMExecute (). Deci, pentru a trece culoarea selectată:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText', '+ downColorPicker.selectedColor.toString () +") "); Trebuie să ieșim din citatele duble pentru a include acest argument, deoarece îl obținem prin AS3, nu prin intermediul JSFL. Este dezordonat, și mai mult decât puțin confuz, știu.
Să adăugăm o urmă simplă la funcția JSFL pentru a vă asigura că funcționează:
funcția makeButtonFromText (downColor) fl.trace ("color:" + downColor); dacă (fl.getDocumentDOM (). select.length == 1) (De vreme ce este deasupra condiției de selecție, puteți vedea urmărirea fără a trebui să introduceți în buzunar un text.)
Am încercat-o cu negru și apoi alb, și iată ce a apărut în panoul de ieșire:
culoare: 0
culoare: 16777215
Se pare că lucrează pentru mine.
Pentru a afla ce trebuie să utilizeze JSFL pentru a schimba culoarea textului, utilizați trucul din JSFL tut; apăsați pe "Select All", apoi schimbați culoarea de umplere și vedeți codul din panoul History:
. Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM () setFillColor ( '# 009999'.);
Uh-oh. Trebuie să convertim culoarea uint obținută de la ColorPicker într-un șir HTML? Din fericire, nu; pagina de ajutor document.setFillColor () ne spune că putem utiliza fie un format.
Deci, tot ce trebuie să facem este să inserăm noul scenariu în locul corect. Din moment ce cadrul "Jos" este al treilea, ar trebui să îl inserăm după al doilea convertToKeyframes () apel:
. Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () selectAll (); // noua linie fl.getDocumentDOM () setFillColor (downColor); // noua linie fl.getDocumentDOM (). getTimeline () convertToKeyframes (); fl.getDocumentDOM () addNewRectangle (stânga: textLeft, sus: textTop, dreapta: textRight, jos: textBottom, 0);
Acest lucru funcționează:
Adăugați un nou ColorPicker (overColorPicker) și Etichetă pentru a permite utilizatorului să schimbe culoarea textului "Peste":
Modificați semnătura funcției JSFL pentru a accepta această altă culoare:
funcția makeButtonFromText (overColor, downColor)
În timp ce modificăm funcția JSFL, s-ar putea să adăugăm scriptul pentru a schimba culoarea stării "Over":
. Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes (.); . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM () setFillColor (overColor);
Acum, să schimbăm apelul către MMExecute () în AS3, astfel încât să treacă de-a lungul culorii "Over":
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + overColorPicker.selectedColor.toString () + "," downColorPicker.selectedColor.toString () ) "); ... Ugh. E prea murdar și se va înrăutăți. Cum putem rezolva asta??
Steven Sacks și Steven Hargrove au venit cu o funcție minuțioasă pentru a face acest apel mai ușor. Am adaptat-o aici:
funcția privată runButtonizeScript (... args): String if (args.length> 0) returnați MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText' .join (",") + ");"); altceva return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Deci, acum putem apela:
funcția privată onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Mult mai curat!
Adăugați componente noi:
Modificarea semnăturii funcției JSFL:
funcția makeButtonFromText (upColor, overColor, downColor)
Faceți JSFL schimbați culoarea textului:
. Fl.getDocumentDOM () enterEditMode ( 'Inplace'); . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM () setFillColor (upColor);
Treceți culoarea "Sus" la JSFL din AS3:
funcția privată onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Testați-l:
Sclipitor. Doar un singur lucru a rămas.
Există șanse, utilizatorul va dori să rămână cu culoarea pe care au ales-o pentru textul cel puțin pentru una dintre cele trei stări. Dar vom începe toate cele trei ColorPickers cu negru ca culoarea selectată.
Deci, acum trebuie să obținem culoarea de umplere existentă din obiectul text și să folosim JSFL pentru al trece prin panou, apoi să folosim AS3 pentru a schimba culoarea ColorPickers. Este opusul a ceea ce am făcut, într-adevăr.
În cazul în care în codul nostru AS3 ar trebui să setăm culoarea colectorilor noștri? Văd trei opțiuni:
Deci, adăugați un buton nou butonului, numit "Setări prestabilite". Dați-i un nume de instanță setDefaults.
Înapoi în Buttonizer.as:
funcție publică Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); funcția privată onClickSetDefaults (a_event: MouseEvent): void
Doar pentru a vă asigura că acest lucru va funcționa atunci când avem datele corecte:
funcția privată onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // negru upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Asigurați-vă că funcționează prin setarea unor culori aleatorii, apoi făcând clic pe butonul Setări prestabilite. Ar trebui să le restabilească pe toate în negru.
Funcția MMExecute () returnează valoarea returnată a oricărei funcții care trece prin ea. (Dacă sunt executate mai multe funcții, acestea returnează valoarea de retur a ultimei.)
Pentru a obține culoarea textului selectat, putem folosi funcția JSFL document.getCustomFill ("selecție"). Aceasta returnează un obiect Fill, al cărui culoare proprietatea este ceea ce avem nevoie. Deci, putem obține culoarea după cum urmează:
MMExecute ("document.getCustomFill (" selecție ") .color"); Aceasta nu este exact ceea ce dorim, deoarece returnează culoarea în format CSS String: "# AA43E2", de exemplu. Am scris un mic cod suplimentar pentru a converti acest lucru la formatul uint de care avem nevoie:
funcția privată onClickSetDefaults (a_event: MouseEvent): void var cssFormatDefaultColor: String = MMExecute ("document.getCustomFill (" selecție ") .color"); cssFormatDefaultColor = cssFormatDefaultColor.replace ("#", "0x"); var defaultColor = uint (cssFormatDefaultColor); upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor; Încercați acest lucru:
Minunat :)
Uitați-vă la ceea ce ați învățat. Acum puteți să creați propriile panouri în Flash, să executați comenzi și scripturi JSFL, să transmiteți date de la un panou la scenă și chiar să obțineți date din stadiu pentru a le utiliza în panou. felicitări!
