Índice
- ¿Hablas JavaScript? ¡Los fuegos artificiales sí!
- Una nota sobre las ubicaciones
- Cómo elegir entre comandos y paneles de comandos
- Panel de Historia
- Consola de fuegos artificiales
- Depuración de consola
- fuegos artificiales
- Amplíe sus horizontes (y el lienzo)
- Conclusión
Casi cualquier cosa que pueda hacer a través de la interfaz de Fireworks también se puede lograr escribiendo una simple extensión de JavaScript. Dmitriy Fabrikant aprendió a desarrollar extensiones de Fireworks escribiendo el complemento Specctr. Mientras trabajaba en Specctr, había sido testigo de cómo la apasionada comunidad de Fireworks apoyaba activamente la aplicación (lamentablemente, Fireworks CS6 es la última versión importante de Adobe). Ahora que no podemos esperar que Adobe agregue más funciones a Fireworks, la capacidad de ampliar la aplicación se vuelve aún más importante, porque muchos diseñadores todavía confían en ella y, a través de extensiones, se pueden agregar nuevas funciones y paneles. Este artículo está dirigido a aquellos interesados en desarrollar extensiones para Fireworks.
Una de las características más potentes de Adobe Fireworks es que puede ampliar su funcionalidad. Casi todo lo que puede hacer a través de la interfaz de Fireworks (e incluso algunas cosas que no puede hacer) también se puede lograr escribiendo una extensión de JavaScript simple.
Las extensiones de Fireworks son de dos tipos principales: comandos y paneles de comando . Si se encuentra realizando repetidamente una tarea tediosa, puede escribir un comando para automatizar el proceso y ahorrar mucho tiempo. Alternativamente, si le falta una característica particular que mejoraría su flujo de trabajo, puede escribir una extensión más compleja (un panel de comandos) para implementarla.
Aprendí a desarrollar extensiones de Fireworks escribiendo el complemento Specctr . Mientras trabajaba en Specctr, fui testigo de cómo la apasionada comunidad de Fireworks apoyaba activamente la aplicación, una aplicación que Adobe ha pasado por alto en gran medida. (Lamentablemente, Fireworks CS6 es la última versión importante de Adobe, pero todavía está disponible como aplicación independiente y a través de Creative Cloud. Adobe planea admitir Fireworks al menos durante las próximas versiones principales de Mac OS X y Windows OS y publicar errores correcciones y parches para ello.)
Aunque Fireworks es una excelente herramienta de diseño de pantalla lista para usar, se ha beneficiado enormemente de las contribuciones de la comunidad de Fireworks, es decir, desarrolladores como John Dunning , Aaron Beall y Matt Stow , entre otros, que han escrito muchas extensiones indispensables, como Importación de SVG y Exportación de SVG (que agregan compatibilidad con SVG con todas las funciones a Fireworks), Generar recursos web , CSS Professionalzr (que extiende las funciones del panel Propiedades de CSS a Fireworks CS6) y muchos más.
Ahora que no podemos esperar que Adobe agregue más funciones a Fireworks, la capacidad de ampliar la aplicación se vuelve aún más importante, porque muchos diseñadores todavía confían en ella (mientras buscan alternativas, por supuesto, como Sketch 3.0 ), y A través de extensiones, se pueden agregar nuevas funciones y paneles . Este artículo está dirigido a aquellos interesados en desarrollar extensiones para Fireworks. Presentaremos los fundamentos de JavaScript de Fireworks y, en el proceso, escribiremos algunos ejemplos de JavaScript para ayudarlo a comenzar.
Este artículo cubrirá lo siguiente:
- usar el panel Historial para ver cómo las acciones del usuario se asignan al código JavaScript;
- explorar el código JavaScript que mueve un elemento en el lienzo, para obtener información sobre el modelo de objetos de documento (DOM) de Fireworks;
- usar la extensión de consola de Fireworks para ejecutar y depurar extensiones;
- usar la extensión DOM Inspector para depurar y desarrollar extensiones;
- escribir una extensión simple para aumentar el tamaño del lienzo de un documento automáticamente.
¡Empecemos!
¿Hablas JavaScript? ¡Los fuegos artificiales sí!
Los fuegos artificiales hablan JavaScript. Expone una interfaz de programación de aplicaciones (API) JavaScript a través del modelo de objetos de documento (DOM) de Fireworks , que representa sus partes y funciones constituyentes. Esa es una manera larga de decir que puedes escribir JavaScript para decirle a Fireworks qué hacer.
Fireworks le permite ejecutar JavaScript de dos formas básicas: comandos y paneles de comandos.
Comandos
La primera opción es ejecutar JavaScript como comandos. Los comandos son archivos de texto simples que contienen JavaScript y que se guardan con una .jsfextensión. Para que estén disponibles desde el menú "Comandos" de Fireworks, debe guardarlos en el Fireworks/Configuration/Commands/directorio (donde Fireworksse encuentra un sustituto del directorio de instalación de Adobe Fireworks en su computadora; consulte "Una nota sobre las ubicaciones" a continuación).
Paneles de comando
La segunda opción es construir un panel de comando. Los paneles de comando son paneles Flash impulsados por ActionScript , que a su vez pueden llamar al código JavaScript para controlar Fireworks. Fireworks tiene un reproductor Flash incorporado y puede ejecutar estos paneles. Los paneles están en formato SWF y deben guardarse en el Fireworks/Configuration/Command Panels/directorio para poder acceder a ellos desde el menú "Ventana" de Fireworks.
Una nota sobre las ubicaciones
A continuación se muestran las ubicaciones exactas de las carpetas Commandsy Command Panelstanto en Mac como en Windows.
Mac OS X
/Applications/Adobe Fireworks CS6/Configuration/Commands/- `/Usuarios/
/Biblioteca/Soporte de aplicaciones/Adobe/Fireworks CS6/Comandos/` /Applications/Adobe Fireworks CS6/Configuration/Command Panels/- `/Usuarios/
/Biblioteca/Soporte de aplicaciones/Adobe/Fireworks CS6/Paneles de comando/`
ventanas
Windows 8.1, 8, 7, Vista y 64 bits (para 32 bits, simplemente elimine (x86)):
C:Program Files (x86)AdobeAdobe Fireworks CS6ConfigurationCommands- `C:Usuarios
AppDataRoamingAdobeFireworks CS6Commands` C:Program Files (x86)AdobeAdobe Fireworks CS6ConfigurationCommand Panels- `C:Usuarios
AppDataRoamingAdobeFireworks CS6Command Panels`
Windows XP:
C:Program FilesAdobeAdobe Fireworks CS6ConfigurationCommands- `C:Documentos y configuraciones
Datos de aplicaciónAdobeFireworks CS6Commands` C:Program FilesAdobeAdobe Fireworks CS6ConfigurationCommand Panels- `C:Documentos y configuraciones
Datos de aplicaciónAdobeFireworks CS6Paneles de comando`
Cómo elegir entre comandos y paneles de comandos
¿Cuándo debería escribir un comando y cuándo debería escribir un panel de comando?
Generalmente, un comando es útil para automatizar alguna acción que requiere muy poca o ninguna intervención del usuario, como pegar elementos en un grupo existente o contraer rápidamente todas las capas . Un comando también es más fácil de crear y probar.
Pero si la acción que desea automatizar requiere mucha interacción del usuario o si desea organizar un grupo de comandos en un solo lugar para un acceso rápido, es posible que desee crear un panel de comandos. Por ejemplo, el panel Specctr que hice agrupa una serie de comandos de JavaScript y el usuario puede configurarlo (como al establecer el color de una especificación o al establecer la cantidad en la que aumentar los márgenes alrededor del lienzo para dejar espacio para un especificación generada). Entonces, optar por un panel de mando era obvio en este caso. Los paneles de comandos son más complejos y requieren más tiempo para desarrollarse y probarse.
La funcionalidad "Expandir lienzo" en Specctr fue la inspiración para algunas de las funciones que aprenderemos a implementar en este artículo.
Independientemente de si escribe un comando o crea un panel de comandos, interactuará con Fireworks a través de JavaScript. ¡Ahora echemos un vistazo al interior del corazón de JavaScript de Fireworks!
Nota: Cómo crear un panel de comando está fuera del alcance de este artículo. En cambio, nos centraremos en los conceptos básicos del desarrollo de una extensión de Fireworks y en cómo escribir su primera extensión.
Panel de Historia
El panel Historial de Fireworks proporciona una forma sencilla de examinar el JavaScript que se ejecuta detrás de escena.
Como ejemplo rápido, abra el panel Historial ( Window → History), seleccione un elemento de texto y luego muévalo a cualquier parte del lienzo.
Se agregará un elemento "Mover" a la lista de acciones en el panel Historial.
Esta entrada del panel Historial representa el código JavaScript correspondiente a la acción que ha realizado.
A continuación, haga clic en el botón "Copiar pasos al portapapeles" en la esquina inferior derecha del panel Historial y péguelo en el elemento de texto que acaba de mover (es decir, reemplazando el texto "¡Muéveme!").
En¡Voilá, el código! Esta es una forma rápida de ver el JavaScript que representa las acciones que realiza a través de la interfaz de usuario en Fireworks.
Si moviera un objeto 2 píxeles hacia la derecha (a lo largo del eje x) y 46 píxeles hacia abajo (a lo largo del eje y), así es como se vería el código JavaScript: Comprar freidoras baratas para casa e industriales
fw.getDocumentDOM().moveSelectionBy({x:2, y:46}, false, false);Podemos guardar este código en el menú "Comandos" de Fireworks haciendo clic en el botón "Guardar pasos como comando" en la esquina inferior derecha del panel Historial.
Una vez que este simple comando se haya guardado en la Commandscarpeta, podrá ejecutarlo desde el menú "Comandos", usarlo en secuencias de comandos de procesamiento por lotes de Fireworks más complejas y más. Siempre que se ejecute, el comando moverá cualquier objeto seleccionado en el lienzo 2 píxeles hacia la derecha a lo largo del eje x y 46 píxeles hacia abajo a lo largo del eje y. También puede personalizar fácilmente este comando editando los valores xy yen el .jsfarchivo que Fireworks guardó en la ubicación descrita anteriormente en este artículo.
Este fue un ejemplo muy simple, pero demuestra que desarrollar una extensión de Fireworks no es tan difícil, ¡al menos no al principio!
Consola de fuegos artificiales
Profundicemos un poco más. Cuando estás desarrollando una extensión, sería útil poder ejecutar un comando JavaScript único sin tener que guardarlo en el menú "Comandos" cada vez. Para ejecutar el comando "Mover" sin tener que agregarlo primero al menú "Comandos", instalemos la extensión Fireworks Console de John Dunning . Este panel de comando tiene una entrada de texto que le permite escribir código JavaScript arbitrario y ejecutarlo haciendo clic en el botón "Evaluar".
Asegúrese de seleccionar el elemento de texto ( después de todo, el método se llama) y pegue el código "Mover" en la Consola. Luego, presione "Eval" para ejecutarlo.moveSelectionBy
Debería ver el texto seleccionado en el lienzo moverse 10 píxeles hacia la derecha y 10 píxeles hacia abajo mientras Fireworks ejecuta JavaScript en el panel Consola.
Esta es una excelente manera de probar rápidamente diferentes comandos y asegurarse de que el código en el que está trabajando realmente haga lo que se supone que debe hacer.
Depuración de consola
Mientras construía el panel Specctr, utilicé la alertfunción JavaScript para verificar la salida de mi código en varios lugares de su ejecución.
miCódigo.jsf
…// Check the value of myVariable:alert("my variable:", myVariable);…Al igual que en el desarrollo web, las alertas de JavaScript en Fireworks pausan la ejecución del código hasta que usted hace clic para continuar. Esto significa que si tuviera varios valores que deseara alertar en el código, tendría que presionar repetidamente el botón "Aceptar" en la ventana emergente de alerta para continuar ejecutando el código.
En su lugar, podemos usar el panel para registrar la salida de nuestra extensión en la consola.
Cuando el panel Consola se inicia por primera vez, introduce un objeto con nombre consoleen el espacio de nombres global de Fireworks. Esto significa que podemos usar la función consoledel objeto logpara registrar mensajes en el panel de salida del panel de la Consola, como veremos ahora.
miCódigo.jsf
…console.log("myProgramVariable", myVariable);…Esto no interrumpe la ejecución del código. Dado que Fireworks no proporciona ninguna forma de establecer puntos de interrupción en el código, iniciar sesión en la consola es el método que recomendaría al depurar extensiones.
fuegos artificiales
Así como el consoleobjeto es una representación JavaScript del panel Consola de Fireworks, los diferentes conceptos y funcionalidades que componen Fireworks tienen representaciones JavaScript. Esta organización de objetos JavaScript que modela el comportamiento de Fireworks se denomina DOM de Fireworks.
fw Objeto
Podemos ver que se accede al DOM mediante nuestro código JavaScript "Mover" de antes:
fw.getDocumentDOM().moveSelectionBy({x:2, y:46}, false, false);El fwobjeto es un objeto JavaScript que modela o representa al propio Fireworks. Contiene propiedades que describen el estado actual de Fireworks. Por ejemplo fw.selection, es una matriz que representa todos los elementos actualmente seleccionados en el lienzo.
Podemos ver esto seleccionando el elemento de texto con el que hemos estado trabajando y, en el panel de la Consola, escribiendo fw.selectiony luego haciendo clic en el botón "Evaluar". Aquí está el resultado del panel de la Consola:
[{…alignment: "justify",face: "GillSans",fontsize: "34pt",…}]En la ventana de salida, debería ver una representación JSON de la fw.selectionmatriz que contiene objetos que simbolizan cada uno de los elementos de diseño seleccionados en el lienzo. (JSON es solo una representación legible por humanos de objetos JavaScript; en nuestro caso, el elemento de texto que seleccionamos).
Ver el DOM
Cuando el formato de la salida de la Consola es demasiado largo, deja mucho que desear. Entonces, para ver las propiedades y valores de los objetos (los métodos de los objetos no se muestran) en Fireworks DOM, uso el panel DOM Inspector de Aaron Beall , otro compañero indispensable en mi viaje de desarrollo de extensiones.
Instale el panel DOM Inspector y luego seleccione el objeto de texto que representa el código "Mover" (o cualquier objeto de texto). Asegúrese de que el menú desplegable en la parte superior del panel DOM Inspector esté configurado en fw.selection. Deberías ver un expandido [object Text]en el Inspector, junto con todas sus propiedades y valores.
Desde el menú desplegable, puedo seleccionar entre ver el contenido de cuatro objetos:
fw.selectionUna serie de elementos actualmente seleccionados en el lienzo.fwEl objeto de fuegos artificialesdomEl DOM del documento actualmente activo (que discutiremos a continuación)dom.pngTextUna propiedad del documento actualmente activo (disponible para que escribamos y podamos guardar datos en el documento actual y recuperarlos incluso después de reiniciar Fireworks)
Documento DOM
En el panel DOM Inspector, podemos cambiar a documentDOMy explorar su estado. También podemos acceder documentDOMvía JavaScript con el getDocumentDOM()método, como hicimos con el comando “Mover”:
fw.getDocumentDOM().moveSelectionBy({x:10, y:10}, false, false);La getDocumentDOM()invocación del método devuelve sólo el objeto DOM del documento actualmente activo, en lugar de todo el DOM de Fireworks, y nos permite manipular ese documento a través de sus propiedades y métodos. Por ejemplo, el moveSelectionBy()método (que nos enseñó el panel Historial) realiza el trabajo de mover elementos por el lienzo del documento.
Sesgo de selección
Actuar sobre la selección actual es un patrón común al desarrollar extensiones de Fireworks. Refleja la forma en que el usuario selecciona elementos en el lienzo con el mouse, antes de realizar alguna acción en esa selección.
fw.getDocumentDOM().moveSelectionBy({x:10, y:10}, false, false);La función moveSelectionBy() del DOM del documento toma un objeto JavaScript como parámetro:
{x:10, y:10}Dado un origen en la esquina superior izquierda, esto le indica a Fireworks que mueva el objeto seleccionado xpíxeles hacia la derecha y ypíxeles hacia abajo.
Los otros dos parámetros booleanos ( false, false) indican move(a diferencia de copy) la selección y mover entire element(a diferencia de a sub-selection, si existe alguno).
Al igual que el método, muchos otros métodosmoveSelectionBy() de Document DOM actúan sobre la selección actual ( y , por nombrar dos).cloneSelection()flattenSelection()
Amplíe sus horizontes (y el lienzo)
Usando lo que hemos aprendido hasta ahora, escribamos un comando simple que ampliará el tamaño de nuestro lienzo.
Tamaño del lienzo
Para aumentar el tamaño del lienzo, necesitamos saber el tamaño actual. Nuestro panel puede llamar al JavaScript a continuación para acceder a las dimensiones actuales del lienzo:
var = canvasWidth = fw.getDocumentDOM().width; var = canvasHeight = fw.getDocumentDOM().height;Ahora, veamos cómo cambiar estas dimensiones.
Establecer el tamaño del lienzo
Para establecer el tamaño del lienzo, llamamos al setDocumentCanvasSize()método del Documento DOM.
fw.getDocumentDOM().setDocumentCanvasSize({left:0, top:0, right:200, bottom:200});El método toma un “rectángulo delimitador” como parámetro:
{left:0, top:0, right:200, bottom:200}El tamaño del rectángulo determinará el nuevo tamaño del lienzo:
right - left = 200bottom - top = 200Aquí, el rectángulo está delimitado por el objeto; por tanto, el lienzo mide 200 × 200 píxeles.
Aumentar el tamaño del lienzo: un comando simple
Creemos un comando simple que duplicará el tamaño del lienzo automáticamente.
En lugar de recorrer el Modify → Canvas → Canvas Sizemenú y luego determinar el ancho y el alto para ingresar y luego presionar "Aceptar" cada vez que queramos aumentar el tamaño del lienzo, podemos combinar los dos ejemplos de código anteriores para crear un atajo rápido para duplicar el lienzo. ' tamaño.
El código podría verse así:
// Double Canvas Size command, v.0.1 :)var newWidth = fw.getDocumentDOM().width * 2;var newHeight = fw.getDocumentDOM().height * 2;fw.getDocumentDOM().setDocumentCanvasSize({left:0, top:0, right: newWidth, bottom: newHeight});Estoy trabajando en una Mac, así que para que este comando esté disponible desde el menú "Comandos" en Fireworks, podría guardar el código anterior double_size.jsfen la siguiente ubicación:
/Users/MYUSERNAME/Library/Application Support/Adobe/Fireworks CS6/Commands/double_size.jsf(Consulte el comienzo del artículo para ver dónde guardar sus .jsfcomandos si tiene un sistema operativo diferente).
Te lo dejo como ejercicio para que escribas y guardes un comando sencillo que corta el tamaño del lienzo a la mitad.
Conclusión
Hemos cubierto bastantes cosas en este artículo:
- Con la ayuda del panel Historial, hemos visto el JavaScript que hace que se ejecute Fireworks.
- Hemos desglosado el código JavaScript necesario para mover un elemento de texto en el lienzo, hemos aprendido sobre Fireworks DOM y hemos visto cómo manipularlo.
- Hemos repasado cómo el panel de la Consola ejecuta y prueba nuestro código JavaScript. Hemos aprendido cómo depurar una extensión iniciando sesión en el
consoleobjeto JavaScript que el panel introduce en el espacio de nombres global de Fireworks. - Hemos cubierto el panel DOM Inspector y cómo usarlo para verificar las propiedades y valores de varias partes de Fireworks DOM.
- Hemos escrito un comando simple para cambiar el tamaño del lienzo automáticamente.
Por supuesto, sólo hemos arañado la superficie. Estos son sólo los conceptos básicos que le ayudarán a empezar a desarrollar extensiones de Fireworks. Utilice las técnicas y recursos de este artículo como trampolín para crear extensiones más sofisticadas que le ayudarán en su trabajo de diseño diario.
Otra excelente manera de aprender más sobre las extensiones de Fireworks es deconstruyendo otras extensiones. Dado que los comandos de Fireworks son archivos JavaScript simples, se puede aprender mucho estudiando el código de otros desarrolladores. Recomiendo especialmente las extensiones creadas por las siguientes personas:
- Juan Dunning
- Matt Stow
- Aarón Beall
- Trevor McCauley
- Ale Muñoz
(También vale la pena mencionar las extensiones de Project Phoenix , recientemente reiniciadas por Linus Lim . Incluyen Font List, Super Nudge, Auto Save, Rename, Transform, Alignment Guides, Perspective Mockups, Retina Scaler, Layer Commands, Used Fonts y muchas otras. )
Finalmente, a continuación encontrará una lista incompleta de recursos que le ayudarán en el camino. Si crees que me he perdido algo importante (o si tienes alguna pregunta), házmelo saber en los comentarios. Estaré feliz de poder ayudar.
Otros recursos
- “ Extendiendo los fuegos artificiales ”, Adobe. Esta es la guía oficial para desarrollar extensiones para Fireworks CS5 y CS6 (incluida la documentación del “ Modelo de objetos de Fireworks ”).
- “ Erratas del motor JavaScript de Adobe Fireworks ”, John Dunning. Dunning analiza las peculiaridades del intérprete de JavaScript que se incluye con Fireworks. ¿Algo no funciona como debería? Compruébalo aquí. ¡La lista es bastante extensa!
- Consola de fuegos artificiales , John Dunning. ¡Esto es imprescindible si escribes extensiones de Fireworks!
- Inspector DOM (panel), Aaron Beall.
Otras lecturas
- Desarrollo de un flujo de trabajo de diseño en Adobe Fireworks
- Pasar de Adobe Fireworks a Sketch: diez consejos y trucos
- El presente y el futuro de Adobe Fireworks
- El poder de Adobe Fireworks: ¿qué se puede lograr con él?
(al, mb, ml, mrn)Explora más en
- Fuegos artificiales
- javascript
- Tutoriales
- Extensiones
Tal vez te puede interesar:
- ¿Deberían abrirse los enlaces en ventanas nuevas?
- 24 excelentes tutoriales de AJAX
- 70 técnicas nuevas y útiles de AJAX y JavaScript
- Más de 45 excelentes recursos y repositorios de fragmentos de código
Introducción al desarrollo de extensiones de Fireworks (¡son solo JavaScript!)
¿Hablas JavaScript? ¡Los fuegos artificiales sí!Una nota sobre las ubicacionesCómo elegir entre comandos y paneles de comandosPanel de HistoriaConsola de f
programar
es
https://aprendeprogramando.es/static/images/programar-introduccion-al-desarrollo-de-extensiones-de-fireworks-son-solo-javascript-845-0.jpg
2024-12-03
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente