Share
Nel mio ultimo tut: Crea nuove funzionalità per Flash con JSFL abbiamo creato nuovi comandi per Flash. Ora faremo ulteriori cose creando nuovi pannelli interamente all'interno dell'ambiente di creazione di Flash.
Per provare il pannello di Buttonizer, scarica il file zip di origine ed estrai il file Buttonizer.swf nella cartella elencata nel passaggio 3. Riavvia Flash e lo troverai in Finestra> Altri pannelli.
Un pannello Flash è solo un normale file SWF a cui si dice di eseguire Flash in un pannello piuttosto che in una finestra separata. Tutto ciò che devi fare è creare un nuovo FLA. Il nome del FLA verrà visualizzato come titolo del pannello; Sto chiamando il mio Buttonizer.fla. Useremo AS3 per questo tutorial.
Ovviamente un semplice pannello bianco è inutile, quindi cerchiamo di riempirlo. Ridimensiona il palco a 250 px di larghezza per 170 px di altezza (non è importante - ho scelto questi numeri perché so che sono abbastanza grandi per quello che ho pianificato in seguito) e cambia il colore di sfondo in #EDEDED (corrisponde agli sfondi di i pannelli sul mio sistema, comunque).
Apri il pannello Componenti (Finestra> Componenti) e trascinare un pulsante dalla cartella dell'interfaccia utente sul palco.
Compilare un SWF da questo FLA. Per fare in modo che Flash utilizzi questo come pannello, tutto ciò che devi fare è trascinare il file SWF nella cartella corretta, quindi riavviare Flash.
La cartella è chiamata WindowSWF e la sua posizione varia a seconda del tuo sistema operativo:
Il nome utente cartella corrisponderà al nome utilizzato per accedere, linguaggio cambierà a seconda di ciò che hai scelto quando hai installato Flash (per gli anglofoni probabilmente lo sarà it-it o semplicemente it), e se stai utilizzando una versione più recente di Flash rispetto a CS3, anche quella cartella cambierà.
(Sinceramente, probabilmente è più facile cercare nel computer tutte le cartelle denominate WindowSWF. Una sarà corretta).
Trascina il tuo SWF verso il WindowSWF cartella quindi riavviare Flash. Non preoccuparti, non dovrai riavviare Flash ogni volta che apporti una modifica. Dopo averlo aperto di nuovo, controlla il Finestra> Altri pannelli sottomenu e dovresti vedere Buttonizer come opzione Cliccalo:
Eccezionale.
Con il pannello aperto, sposta il pulsante nel FLA, quindi ricompila il SWF. Il pannello non cambia.
Sposta il file SWF in WindowSWF cartella. Il pannello continua a non cambiare.
Chiudi il pannello e riaprilo dal menu. Cambia.
Possiamo accelerare questo facendo pubblicare il SWF del pannello direttamente su WindowSWF cartella. Clic File> Impostazioni pubblicazione, quindi fare clic sull'icona della cartella accanto alla casella che dice Buttonizer.swf, sfoglia il tuo WindowSWF cartella e premi Salva.
Deseleziona il HTML casella di controllo, anche; non ne hai bisogno.
Ora sposta nuovamente il pulsante, ricompila il file SWF (puoi premere Maiusc-F12 per farlo senza far comparire Flash Player), chiudi il pannello, lo riapri e si aggiornerà.
Dato che il pannello è un SWF funzionante, non ci limitiamo a cambiare il suo aspetto; possiamo aggiungere anche il codice.
Crea un nuovo file AS chiamato Buttonizer.as e impostalo come classe del documento del tuo FLA. Ecco il codice di base:
package import flash.display.MovieClip; Buttonizer di classe pubblica estende MovieClip Buttonizer funzione pubblica ()
(Se non hai familiarità con l'utilizzo di una classe di documenti, consulta questa breve introduzione.)
Per provare che il codice può funzionare, cambieremo il testo sul pulsante. Nel FLA, assegnare al pulsante un nome di istanza di il tasto (fantasioso), quindi nella funzione di costruzione, aggiungi questa riga di codice:
theButton.label = "Buttonize";
Premi Shift-F12, chiudi e riapri il pannello e vedrai che il testo è cambiato.
In caso contrario, verificare di aver collegato il FLA alla classe del documento e denominato il pulsante.
Prendiamo una funzione in là per gestire il pulsante che viene premuto:
Accentsconagua
package import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer estende MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); funzione privata onClickTheButton (a_event: MouseEvent): void trace ("Pulsante su cui è stato fatto clic"); Niente di complicato lì. Ho usato un trace () per assicurarmi che sia tutto collegato correttamente. Ricarica il pannello e assicurati che funzioni.
Oh ... non è così?
Giusto; la funzione trace () AS3 non traccia i risultati sul pannello Output quando viene eseguita da un altro pannello. Odio lavorare senza lasciare traccia (), quindi dovremo aggirare questo in qualche modo.
Nella mia esercitazione JSFL, ti ho mostrato la funzione JavaScript fl.trace (). Traccia il testo nel pannello Output, ma viene eseguito all'interno dell'ambiente di creazione Flash stesso, anziché da una finestra di Flash Player. È fantastico - significa che possiamo eseguirlo dal nostro pannello!
Ma non possiamo semplicemente digitare fl.trace ("Pulsante cliccato"); all'interno del nostro codice AS3, perché non è una funzione AS3. Dobbiamo dire a Flash di eseguirlo come JSFL, e per farlo usiamo la funzione adobe.utils.MMExecute (), che è AS3:
package import adobe.utils.MMExecute; // non dimenticarlo! import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer estende MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); funzione privata onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace ('Button clicked');"); // le virgolette tra virgolette diventano confuse MMExecute () prende una stringa e la esegue come una chiamata JSFL. È completamente ignorato dalla finestra di Flash Player.
Se lo provi ora, facendo clic sul pulsante verrà tracciato sul pannello Output. Eccellente.
Sarebbe scomodo prendere uno script più lungo e inviarlo tramite una chiamata MMExecute (). Invece, possiamo salvare il JSFL in un file di script e dire a Flash di eseguirlo.
Se hai seguito il mio tutorial JSFL, avrai già un file Buttonize.jsfl; in caso contrario, copia il seguente codice in un nuovo file JSFL:
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, 'in alto a sinistra'); var lib = fl.getDocumentDOM (). library; 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); Salva come Buttonize.jsfl ovunque sul tuo disco rigido. Ora puoi eseguire quello script chiamando (in AS3):
MMExecute ("fl.runScript ('(percorso-al-tuo-script)' + '/Buttonize.jsfl')"); Per semplificare le cose, sposta il file JSFL nella directory WindowSWF. Ora puoi sostituire '(Path-to-your-script)' con fl.configURI + 'WindowSWF /'. Proviamolo:
package import adobe.utils.MMExecute; import flash.display.MovieClip; import flash.events.MouseEvent; public class Buttonizer estende MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); funzione privata onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); Avvia un nuovo FLA, crea del testo, selezionalo e premi il pulsante Buttonize. Dovrebbe trasformarsi in un pulsante, proprio come fa normalmente lo script.
Di nuovo nel FLA Buttonizer, trascina un ColorPicker e un'etichetta dai componenti dell'interfaccia utente allo stage. Useremo il selettore dei colori per cambiare il colore del testo nello stato Giù del pulsante. Disporre i componenti in modo appropriato:
Assegna al selettore colori il nome di un'istanza downColorPicker.
Dovremo passare il colore da ColorPicker allo script Buttonize, ma prima trasformeremo lo script in una funzione in modo che possa accettare argomenti.
Modificalo in questo modo:
function 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, 'in alto a sinistra'); var lib = fl.getDocumentDOM (). library; 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); Ora dovremmo modificare la chiamata MMExecute (), per fare riferimento a quella specifica funzione nello script. Tutto ciò che serve è passare il nome della funzione come secondo parametro:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Per ogni argomento che vogliamo passare alla funzione JSFL, aggiungiamo semplicemente un altro parametro alla chiamata MMExecute (). Quindi, per passare il colore selezionato:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + downColorPicker.selectedColor.toString () + ")"); Dobbiamo rompere le virgolette per includere questo argomento, poiché lo otteniamo tramite AS3, non tramite JSFL. È complicato, e più che un po 'confuso, lo so.
Aggiungiamo una semplice traccia alla funzione JSFL per assicurarci che funzioni:
function makeButtonFromText (downColor) fl.trace ("color:" + downColor); if (fl.getDocumentDOM (). selection.length == 1) (Poiché è al di sopra della condizione di selezione, puoi vedere la traccia senza dover effettivamente abbottonare del testo.)
L'ho provato con il nero e poi il bianco, ed ecco cosa è apparso nel pannello Output:
colore: 0
colore: 16777215
Sembra che funzioni per me.
Per scoprire quale JSFL usare per cambiare il colore del testo, usa il trucco del tut JSFL; premi "Seleziona tutto", quindi cambia il colore di riempimento e dai un'occhiata al codice nel pannello Cronologia:
. Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM () SetFillColor ( '# 009999').;
Uh Oh. Dovremo convertire il colore uint ottenuto da ColorPicker in una stringa HTML? Fortunatamente no; la pagina di aiuto document.setFillColor () ci dice che possiamo usare entrambi i formati.
Quindi, tutto ciò che dobbiamo fare è inserire quel nuovo script nel posto giusto. Poiché il frame "Giù" è il terzo, dovremmo inserirlo dopo il secondo convertToKeyframes () chiamata:
. Fl.getDocumentDOM () enterEditMode ( 'inPlace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () selectAll (); // new line fl.getDocumentDOM (). setFillColor (downColor); // new line fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0);
Questo funziona:
Aggiungi un nuovo ColorPicker (overColorPicker) e Etichetta per consentire all'utente di modificare il colore del testo "Sopra":
Modificare la firma della funzione JSFL per accettare questo altro colore:
function makeButtonFromText (overColor, downColor)
Mentre stiamo modificando la funzione JSFL, potremmo anche aggiungere lo script per cambiare il colore dello stato "Sopra":
. Fl.getDocumentDOM () enterEditMode ( 'inPlace'); . Fl.getDocumentDOM () getTimeline () convertToKeyframes ().; . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM (). setFillColor (overColor);
Ora cambiamo la chiamata a MMExecute () in AS3 in modo che passi lungo il colore "Over":
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + overColorPicker.selectedColor.toString () + "," + downColorPicker.selectedColor.toString () + " ) "); ... Ugh. È troppo complicato e andrà a peggiorare. Come possiamo fissare questo?
Steven Sacks e Steven Hargrove hanno trovato una piccola e semplice funzione per rendere più semplice questa chiamata. L'ho adattato qui:
funzione privata 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')"); Quindi ora possiamo chiamare:
funzione privata onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Molto più ordinato!
Aggiungi nuovi componenti:
Cambia firma della funzione JSFL:
function makeButtonFromText (upColor, overColor, downColor)
Fai cambiare il colore del testo a JSFL:
. Fl.getDocumentDOM () enterEditMode ( 'inPlace'); . Fl.getDocumentDOM () selectAll (); fl.getDocumentDOM (). setFillColor (upColor);
Passa il colore "Su" a JSFL da AS3:
funzione privata onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Provalo:
Brillante. Rimane solo una cosa.
È probabile che l'utente vorrà attenersi al colore scelto per il testo per almeno uno dei tre stati. Ma iniziamo tutti e tre i ColorPicker con il nero come colore selezionato.
Quindi, ora dobbiamo ottenere il colore di riempimento esistente dall'oggetto di testo e utilizzare JSFL per passarlo al pannello, quindi utilizzare AS3 per cambiare il colore di ColorPickers. È l'opposto di quello che stiamo facendo, davvero.
Dove nel nostro codice AS3 dovremmo impostare il colore dei nostri raccoglitori, però? Vedo tre scelte:
Quindi, aggiungi un nuovo Button al Buttonizer, etichettato "Set Defaults". Dagli un nome di istanza di setDefaults.
Torna in Buttonizer.as:
public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); funzione privata onClickSetDefaults (a_event: MouseEvent): void
Solo per assicurarci che funzioni quando abbiamo i dati corretti:
funzione privata onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // black upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Assicurati che funzioni impostando alcuni colori casuali, quindi facendo clic sul pulsante Imposta valori predefiniti. Dovrebbe resettarli tutti in nero.
La funzione MMExecute () restituisce il valore restituito da qualsiasi funzione eseguita attraverso di essa. (Se vengono eseguite più funzioni, restituisce il valore di ritorno dell'ultima.)
Per ottenere il colore del testo selezionato, possiamo utilizzare la funzione document.getCustomFill ('selection') di JSFL. Questo restituisce un oggetto Fill, di cui colore la proprietà è ciò di cui abbiamo bisogno. Quindi, possiamo ottenere il colore in questo modo:
MMExecute ("document.getCustomFill ('selection') .color"); Questo in realtà non è esattamente ciò che vogliamo, poiché restituisce il colore in formato CSS String: "# AA43E2", ad esempio. Ho scritto un piccolo codice in più per convertirlo nel formato uint di cui abbiamo bisogno:
funzione privata 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 questo:
Eccezionale :)
Dai un'occhiata a ciò che hai imparato. Ora puoi creare i tuoi pannelli all'interno di Flash, eseguire comandi e script JSFL, passare i dati da un pannello allo stage e persino ottenere dati dallo stage da utilizzare nel pannello. congratulazioni!
