Share
En mi último tut: Crear nuevas funciones para Flash con JSFL creamos nuevos comandos para Flash. Ahora vamos a ir más lejos al crear paneles completamente nuevos dentro del entorno de edición de Flash.
Para probar el panel Buttonizer, descargue el archivo zip de Source y extraiga el archivo Buttonizer.swf a la carpeta que se muestra en el Paso 3. Reinicie Flash y lo encontrará en Ventana> Otros paneles.
Un panel Flash es solo un SWF regular que le indica a Flash que se ejecute en un panel en lugar de una ventana separada. Todo lo que necesitas hacer es crear una nueva FLA. El nombre de la FLA se mostrará como el título del panel; Estoy llamando al mío Buttonizer.fla. Usaremos AS3 para este tutorial..
Un panel blanco liso es bastante inútil, por supuesto, así que vamos a llenarlo. Cambia el tamaño del escenario a 250px de ancho por 170px de alto (no es que importe; elegí estos números porque sé que son lo suficientemente grandes para lo que he planeado más adelante) y cambia el color de fondo a #EDEDED (esto coincide con los fondos de los paneles en mi sistema, de todos modos).
Abra el panel Componentes (Ventana> Componentes) y arrastre un botón desde la carpeta de interfaz de usuario al escenario.
Compila un SWF de este FLA. Para que Flash use esto como un panel, todo lo que tiene que hacer es arrastrar el SWF a la carpeta correcta, luego reiniciar Flash.
La carpeta se llama WindowSWF y su ubicación varía dependiendo de su sistema operativo:
los nombre de usuario La carpeta coincidirá con el nombre que usa para iniciar sesión con, idioma cambiará dependiendo de lo que eligió cuando instaló Flash (para los hablantes de inglés probablemente será en-us o solo en), y si está utilizando una versión más nueva de Flash que CS3, esa carpeta también cambiará.
(Francamente, probablemente sea más fácil buscar en su computadora para encontrar todas las carpetas llamadas WindowSWF. Una será correcta).
Arrastre su SWF a la WindowSWF carpeta luego reinicie Flash. No se preocupe, no tendrá que reiniciar Flash cada vez que realice un cambio. Una vez que lo hayas abierto de nuevo, echa un vistazo a la Ventana> Otros paneles submenú y deberías ver Buttonizer como una opción. Pinchalo:
Increíble.
Con el panel abierto, mueva el botón en el FLA, luego vuelva a compilar el SWF. El panel no cambia.
Mueva el SWF a la WindowSWF carpeta. El panel todavía no cambia..
Cierre el panel y vuelva a abrirlo desde el menú. Cambia.
Podemos acelerar esto haciendo que el SWF del panel se publique directamente en el WindowSWF carpeta. Hacer clic Archivo> Configuración de publicación, A continuación, haga clic en el icono de carpeta junto al cuadro que dice Buttonizer.swf, navega a tu WindowSWF carpeta y pulsa guardar.
Desmarque la HTML casilla de verificación, también; no lo necesitas.
Ahora mueva el botón nuevamente, vuelva a compilar el SWF (puede presionar Shift-F12 para hacer esto sin hacer que aparezca Flash Player), cierre el panel, vuelva a abrirlo y se actualizará..
Como el panel es un SWF en funcionamiento, no estamos limitados a cambiar su apariencia; también podemos agregar código.
Cree un nuevo archivo AS llamado Buttonizer.as y configúrelo como la clase de documento de su FLA. Aquí está el código básico:
paquete import flash.display.MovieClip; La clase pública Buttonizer extiende MovieClip public function Buttonizer ()
(Si no está familiarizado con el uso de una clase de documentos, consulte esta breve introducción).
Para probar que el código puede funcionar, cambiaremos el texto del botón. En la FLA, dé al botón un nombre de instancia de el botón (imaginativo), luego en su función de constructor, agregue esta línea de código:
theButton.label = "Buttonize";
Presiona Shift-F12, cierra y vuelve a abrir el panel, y verás que el texto ha cambiado.
Si no es así, compruebe que ha vinculado la FLA a la clase de documento y ha llamado al botón.
Consigamos una función allí para manejar el botón que se está presionando:
Accentsconagua
paquete import flash.display.MovieClip; import flash.events.MouseEvent; La clase pública Buttonizer extiende MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); función privada onClickTheButton (a_event: MouseEvent): void trace ("Button clicked"); Nada complicado allí. He utilizado una traza () para asegurarme de que todo está conectado correctamente. Vuelve a cargar el panel y asegúrate de que funcione..
Oh ... no lo hace?
Está bien; La función trace () de AS3 no rastrea los resultados al panel de salida cuando se ejecuta desde otro panel. Odio trabajar sin dejar rastro (), así que tendremos que solucionar esto de alguna manera.
En mi tutorial JSFL, te mostré la función fl.trace () de JavaScript. Rastrea el texto al panel Salida, pero se ejecuta dentro del propio entorno de edición de Flash, en lugar de hacerlo desde una ventana de Flash Player. Eso es genial, significa que podemos ejecutarlo desde nuestro panel!
Pero no podemos simplemente escribir fl.trace ("Botón pulsado"); dentro de nuestro código AS3, porque no es una función AS3. Tenemos que decirle a Flash que ejecute esto como JSFL, y para hacerlo usamos la función adobe.utils.MMExecute (), que es AS3:
package import adobe.utils.MMExecute; // ¡No olvides esto! importar flash.display.MovieClip; import flash.events.MouseEvent; La clase pública Buttonizer extiende MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); función privada onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace ('Button clicked');"); // las citas entre comillas se vuelven confusas MMExecute () toma una cadena y la ejecuta como una llamada JSFL. Es completamente ignorado por la ventana de Flash Player.
Si prueba esto ahora, al hacer clic en el botón se irá al panel Salida. Excelente.
Sería un inconveniente tomar un script más largo y pasarlo a través de una llamada MMExecute (). En cambio, podemos guardar el JSFL en un archivo de script y decirle a Flash que ejecute ese.
Si siguió mi tutorial JSFL, ya tendrá un archivo Buttonize.jsfl; si no, copia el siguiente código a un nuevo archivo 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, 'top left'); 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); Guardalo como Buttonize.jsfl En cualquier parte de tu disco duro. Ahora puedes ejecutar ese script llamando (en AS3):
MMExecute ("fl.runScript ('(path-to-your-script)' + '/Buttonize.jsfl')"); Para mantener las cosas simples, mueva su archivo JSFL a su directorio WindowSWF. Ahora puedes reemplazar '(ruta a su guión)' con fl.configURI + 'WindowSWF /'. Vamos a probarlo:
package import adobe.utils.MMExecute; importar flash.display.MovieClip; import flash.events.MouseEvent; La clase pública Buttonizer extiende MovieClip public function Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); función privada onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); Comience un nuevo FLA, cree un texto, selecciónelo y presione el botón Buttonize. Debería convertirse en un botón, como lo hace normalmente el script..
De vuelta en el Buttonizer FLA, arrastre un ColorPicker y una Etiqueta de los componentes de la interfaz de usuario al escenario. Usaremos el selector de color para cambiar el color del texto en el estado Abajo del botón. Arregle los componentes apropiadamente:
Dale al selector de color un nombre de instancia de downColorPicker.
Tendremos que pasar el color del ColorPicker al script Buttonize, pero primero, convertiremos el script en una función para que pueda aceptar argumentos..
Modifíquelo así:
función 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, 'top left'); 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); Ahora deberíamos modificar la llamada MMExecute () para referirnos a esa función específica en el script. Todo lo que se requiere es pasar el nombre de la función como un segundo parámetro:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Para cada argumento que queremos pasar a la función JSFL, simplemente agregamos otro parámetro a la llamada MMExecute (). Así, para pasar el color seleccionado:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + downColorPicker.selectedColor.toString () + ")"); Tenemos que romper las comillas dobles para incluir ese argumento, ya que lo obtenemos a través de AS3, no a través de JSFL. Es complicado, y más que un poco confuso, lo sé..
Agreguemos una traza simple a la función JSFL para asegurarnos de que esto funciona:
function makeButtonFromText (downColor) fl.trace ("color:" + downColor); if (fl.getDocumentDOM (). selection.length == 1) (Ya que está por encima de la condición de selección, puede ver la traza sin tener que abotonar un poco de texto).
Lo probé con negro y luego con blanco, y esto es lo que apareció en el panel de Salida:
color: 0
color: 16777215
Parece que me está funcionando.
Para averiguar qué JSFL usar para cambiar el color del texto, usa el truco de JSFL tut; presione "Seleccionar todo", luego cambie el color de relleno y observe el código en el panel Historial:
fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor ('# 009999'); UH oh. ¿Tendremos que convertir el color uint que obtuvimos del ColorPicker en una cadena HTML? Afortunadamente, no; La página de ayuda document.setFillColor () nos dice que podemos usar cualquiera de los dos formatos..
Entonces, todo lo que tenemos que hacer es insertar ese nuevo script en el lugar correcto. Dado que el marco "Abajo" es el tercero, debemos insertarlo después del segundo convertToKeyframes () llamada:
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). selectAll (); // nueva línea fl.getDocumentDOM (). setFillColor (downColor); // nueva línea fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Esto funciona:
Añadir un nuevo ColorPicker (overColorPicker) y Etiqueta para permitir al usuario cambiar el color del texto "Sobre":
Cambie la firma de la función JSFL para aceptar este otro color:
función makeButtonFromText (overColor, downColor)
Mientras estamos editando la función JSFL, también podemos agregar el script para cambiar el color del estado "Sobre":
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor (overColor); Ahora cambiemos la llamada a MMExecute () en el AS3 para que pase el color "Over":
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + overColorPicker.selectedColor.toString () + "," + downColorPicker.selectedColor.) ) "); ... Ugh. Eso es demasiado desordenado, y se va a poner peor. Como podemos arreglar esto?
A Steven Sacks y Steven Hargrove se les ocurrió una pequeña función para facilitar esta llamada. Lo he adaptado aquí:
función privada 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')"); Así que ahora podemos llamar:
función privada onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Mucho más ordenado!
Añadir nuevos componentes:
Cambiar la firma de la función JSFL:
función makeButtonFromText (upColor, overColor, downColor)
Haz que JSFL cambie el color del texto:
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor (upColor); Pase el color "Up" a JSFL desde AS3:
función privada onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Pruébalo:
Brillante. Solo queda una cosa.
Es probable que el usuario quiera mantener el color que eligió para el texto en al menos uno de los tres estados. Pero comenzamos los tres ColorPickers con negro como el color seleccionado.
Entonces, ahora necesitamos obtener el color de relleno existente del objeto de texto y usar JSFL para pasarlo al panel, luego usar AS3 para cambiar el color de los ColorPickers. Es lo contrario de lo que hemos estado haciendo, realmente.
Sin embargo, ¿en qué lugar de nuestro código AS3 debemos establecer el color de nuestros selectores? Veo tres opciones:
Entonces, agregue un nuevo botón al Buttonizer, etiquetado como "Establecer valores predeterminados". Dale un nombre de instancia de Configurar valores predeterminados.
De vuelta en Buttonizer.as:
Función pública Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); función privada onClickSetDefaults (a_event: MouseEvent): void
Solo para asegurarnos de que esto funcione cuando tengamos los datos correctos:
función privada onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // negro upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Asegúrese de que funcione configurando algunos colores aleatorios, luego haga clic en el botón Establecer valores predeterminados. Debería restablecerlos todos a negro..
La función MMExecute () devuelve el valor de retorno de cualquier función ejecutada a través de ella. (Si se ejecutan varias funciones, devuelve el valor de retorno de la última).
Para obtener el color del texto seleccionado, podemos usar la función JSFL document.getCustomFill ('selección'). Esto devuelve un objeto Fill, cuyo color La propiedad es lo que necesitamos. Así, podemos obtener el color así:
MMExecute ("document.getCustomFill ('selection') .color"); Esto no es realmente lo que queremos, ya que devuelve el color en formato de cadena CSS: "# AA43E2", por ejemplo. He escrito un pequeño código adicional para convertir esto al formato uint que necesitamos:
función privada 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; Probar esto:
Increíble :)
Echa un vistazo a lo que has aprendido. Ahora puede crear sus propios paneles dentro de Flash, ejecutar comandos y secuencias de comandos JSFL, pasar datos de un panel al escenario e incluso obtener datos del escenario para usar en el panel. Felicidades!
