☰
Inicio > programar > Introducción al desarrollo de extensiones de Fireworks (¡son solo JavaScript!)

Introducción al desarrollo de extensiones de Fireworks (¡son solo JavaScript!)

📅 14/01/2025 👤 Julio Fuente 📂 programar
  • Implemente rápidamente. Implementar inteligentemente
  • SmashingConf Nueva York 2024

    • Índice
    1. ¿Hablas JavaScript? ¡Los fuegos artificiales sí!
      1. Comandos
      2. Paneles de comando
    2. Una nota sobre las ubicaciones
      1. Mac OS X
      2. ventanas
    3. Cómo elegir entre comandos y paneles de comandos
    4. Panel de Historia
    5. Consola de fuegos artificiales
    6. Depuración de consola
      1. miCódigo.jsf
      2. miCódigo.jsf
    7. fuegos artificiales
      1. fw Objeto
      2. Ver el DOM
      3. Documento DOM
      4. Sesgo de selección
    8. Amplíe sus horizontes (y el lienzo)
      1. Tamaño del lienzo
      2. Establecer el tamaño del lienzo
      3. Aumentar el tamaño del lienzo: un comando simple
    9. Conclusión
      1. Otros recursos
      2. Otras lecturas

    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:

    ¡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

    ventanas

    Windows 8.1, 8, 7, Vista y 64 bits (para 32 bits, simplemente elimine (x86)):

    Windows XP:

    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:

    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:

    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 = 200

    Aquí, 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:

    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:

    (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

    Otras lecturas

    (al, mb, ml, mrn)Explora más en






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código