Reflection, un comando para Fireworks

Admitámoslo. El efecto “reflejo en hielo/agua/cristal” es el “bevel & emboss” de esta década.

Si alguna vez te ha tocado crear uno, sabrás que es un pelín coñazo. Si además tienes que añadir un reflejo a 50 imágenes, habrás estado al borde del suicidio.

Sobre todo si después de la paliza alguien te dice cosas como:

  • “Hmm… ¿por qué los reflejos no tienen todos la misma altura?”
  • “¿Sabes qué? Creo que habría que hacer los reflejos un poco más pequeños”
  • “Mira… mejor vamos a cambiarlo todo por un ‘drop shadow’, que vuelve a estar de moda”

(situaciones estas totalmente hipotéticas)

La cuestión es que, si eres un vago profesional, esta es una de esas veces en las que piensas… “hmmm… automatización…”

Así que, con ayuda de la terrible documentación de Fireworks CS3, me puse a programar un comando para hacer reflejos.

El resultado es que, con un sólo click, tienes un bonito efecto como este:

Reflection, baby

Bonito, ¿verdad? :)

Para conseguir este glamouroso comando, guarda el siguiente código en un fichero Reflection.jsf en la carpeta ~/Library/Application Support/Adobe/Fireworks CS3/Commands/ (o su equivalente en Windows que debería ser algo como C:/Documents and Settings/usuario/Application Data/Adobe/Fireworks CS3/Commands/), y luego selecciona un objeto en Fireworks y en el menú “Commands” elige la opción “Reflection”.

// Reflection Command 1.0
// Ale Muñoz <http://bomberstudios.com>

// Ask for shadow height:
shadow_height = prompt("Reflection Height","50");

// Get the original object
original = fw.selection[0];
original.name = "original";

// Clone, reflect and move original
fw.getDocumentDOM().cloneSelection();
fw.getDocumentDOM().reflectSelection(false, true, "autoTrimImages transformAttributes");
fw.getDocumentDOM().moveSelectionBy({x:0, y:original.height + 5}, false, false);

// Get the cloned object
copy = fw.selection[0]; // Current selection is now the copy
copy.name = "copy";

// Create the mask
fw.getDocumentDOM().addNewRectanglePrimitive({left:copy.left - 2, top:copy.top - 2, right:copy.width + copy.left + 2, bottom:copy.height + copy.top + 2}, 0);
// White to black gradient
fw.getDocumentDOM().setFill({ category:"fc_Linear", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:0, gradient:{ name:"cn_Custom", nodes:[ { color:"#ffffff", isOpacityNode:false, position:0 }, { color:"#000000", isOpacityNode:false, position:1 } ], opacityNodes:[ { color:"#000000", isOpacityNode:true, position:0 }, { color:"#000000", isOpacityNode:true, position:1 } ] }, name:"Linear Smooth", pattern:null, shape:"linear", stampingMode:"blend", textureBlend:0, webDitherTransparent:false });
// Reposition gradient
fw.getDocumentDOM().moveFillVectorHandleBy({x:0, y:shadow_height}, "end1", true, false);

// Get the mask
mask = fw.selection[0];
mask.name = "mask";

// Remove mask's stroke
fw.getDocumentDOM().removeBrush();

// Apply the mask to the cloned object
fw.selection = [copy, mask];
fw.getDocumentDOM().group("mask to image");

// Finally, set opacity to 30 so it looks like a reflection
fw.getDocumentDOM().setOpacity(30);

Para usarlo, selecciona un objeto y elige la opción “Reflection” del menú “Commands”.

Te pedirá que introduzcas la altura del reflejo en píxels (por defecto, 50)

Y ya está! :D

Reflection Code Reflection

Si encuentras algún fallo o se te ocurre alguna mejora, deja un comentario…

Y recuerda el lema de los vagos profesionales: “lo importante no es trabajar más, sino trabajar mejor” ;)

36 thoughts on “Reflection, un comando para Fireworks”

  1. Peasso comando!! Qué bueno! Nos vendrá bien mientras dure esta moda de los reflejos 2.0. Gracias por el curro, y por compartirlo.

    Salú.

  2. Muchas gracias, Ale! Después de tu clase de retículas del viernes y haber usado reticulator este finde, lo que me faltaba era esto para empezar el lunes…el efecto es muy bonito. :)

  3. De verdad eres un genio Dios te bendiga, y este mismo efecto no se puede hacer en GIMP??? Digo por Linux!…

  4. En serio que eres de lo mejor eh!! en mi antigua version de fireworks mx me daba un error pero aun asi cumplia el objetivo de hacer el efecto y es genial. gracias

  5. Hola, lo he probado en fireworks 8 y funciona perfectamente!

    Genial, gracias por la aportación.

  6. he tenido problemas para ejecutar el comando en fireworks8, sale el siguiente aviso “imposible ejecutar el archivo de comandos. se ha producido un error”. por favor ayudenme a resolverlo mi version es 8.0.0.777 gracias

  7. muy bueno, mis felicitaciones! me has aydado mucho con esto, me has resuelto el 80 por ciento de mi problema

  8. hola, tengo problemas con el script, ya lo habia usado antes sin problemas en Win Xp con FW cs3 pero ahora que lo corro desde un imac con leopard me sale un aviso que se ha generado un error, agradezco me colabores!!!!!!

    igual antes cuando lo usaba me parecia super!!!!!!

    gracias

  9. A mi tambien me da problema “imposible ejecutar el archivo de comandos. se ha producido un error”, el mismo que le sale a Juan Manuel Valderrama . Tengo una version portatil (v9.0.0.1188)

  10. El problema de “imposible ejecutar el archivo de comandos. se ha producido un error” es posible que se deba a que al copiar el codigo directamente desde esta pagina a un editor de texto, las comillas no se interpreten correctamente. Asegurate de que antes de guardar el archivo JSF las comillas estan escritas correctamente.

  11. XCELENTE!!!! es exactamente lo que estaba buscando, gracias por tu tiempo y por compartirlo con nosotros, si en algo podemos ayudarte, solo avisanos, gracias!

  12. Hola que tal… probe el comando reflections y funciona muy bien..

    Gracias por el aporte y por compartir tus conocimientos…

  13. Excelente, lo probé en fireworks mx (un poco antiguo) y funciono de maravillas. Muchas gracias.

  14. Excelente, los diseños que he realizado quedan perfectos, sin duda alguna es la mejor opción que existe par realizar los refloejos de una forma sencilla y rápida.

  15. Hasta ahora lo he probado en Fireworks CS4 en Windows XP, Vista y Seven, funciona perfecto. Para quienes usen Windows Vista/Seven, la carpeta donde se debe copiar el archivo es… C:\\Program Files\\Adobe\\Adobe Fireworks CS4\\Configuration\\Commands. Saludos.

  16. BUEEEEEEENISIMO!!! eh! Muchas gracias, me ahorraras mucho tiempo!! Lo probe en Fireworks 8 y de MARAVILLA!!

    gracias por kompartirlo;) ke estes bien, saludos!

  17. Tremendo aporte, muchas gracias por compartir tus conocimientos…

    (probado en FW CS4)

    Eso!

  18. Muy fuerte, funciona perfectamente, no tenia ni idea que se pudiesen programar estas cosas.

    Gracias.

  19. Muchas, muchas gracias!!! Me has facilitado la chamba que no tienes ni idea Gracias de nuevo :D

  20. CS5, confirmado. Lo guardáis en Adobe/Fireworks CS5/Configuracion/Commnds y ya te digo si funciona.

nos encantaría oir tu opinión...