13 de marzo de 2010

GarageFlash: Nueva conferencia onLine

Con motivo de celebrar nuestro paso a ser Adobe Community Champions, Adobe User Group Perú - GarageFlash, está organizando 8 conferencias onLine este lunes 15 de marzo, que será vía Adobe Connect, con lo cual sólo tienes que acceder a este link el día y hora de la charla que quieras escuchar. En esta conferencia relámpago, están participando personalidades de la comunidad de Guatemala, España, México, Argentina, República Dominicana y Perú. Como siempre los temas están muy diversos y realmente interesantes. Además que hay varios clabers que participan.



Aquí está la relación de conferencias y los temas. El horario está en GMT - 5

Conferencias onLine


1pm Repositorios y buenas practicas de control de versiones
cvander, Christian Van der Henst S. (Guatemala - Maestros del web)

2pm El nuevo Flash Player 10.1
Alberto Gonzalez (México - Riactive)

3pm Desarrollo para móviles
Maximiliano Firtman (Argentina - ARFUG)

4pm Novedades Adobe AIR 2.0
eldervaz (Perú - GarageFlash)

5pm Canales alpha para AE y Flash
lsosa22, Luis Sosa (Rep. Dominicana - DRAUG)

6pm Microsoft Silverligth
Jorge Oblitas (Perú - Microsoft)

7pm Jquery UNO
eporroa (Perú - GarageFlash)

8pm Indexación de sitios full flash
Zguillez (España - CodigoActionScript)

Muchos se quedaron con ganas de participar en este día, pero por un tema de espacio no se pudo. Pronto haremos más charlas onLine.


11 de marzo de 2010

Kinemática Inversa en Flash

Inverse Kinematic es una técnica para generar movimientos realistas a partir de uno o varios elementos enlazados que se mueven de manera relacionada. En éste tutorial veremos cómo usar IK en Flash CS4 o posterior:


ik


Uno de los usos de Flash es la animación, cuyo proceso de realización normalmente significa mover elementos en cada fotograma (animación frame to frame). Esta tarea demanda mucho tiempo pues es necesario mover de manera independiente cada uno de los elementos que hacen parte de un personaje. Flash CS4 integra herramientas que permiten trabajar Inverse Kinematic (IK) lo cual como veremos en éste tutorial ahorra tiempo y genera animaciones con movimientos más realistas.


La herramienta base para trabajar IK se llama Bone (Hueso) y su ícono no puede ser más descriptivo tal como puedes observar en la siguiente figura. Esta herramienta permite crear estructuras llamadas Armatures (Esqueletos) basándonos en formas básicas o en grupos de símbolos.


boneTool


Heramienta hueso (Bone Tool)


Para conocer el funcionamiento de la herramienta Bone con una forma básica (shape) seguiremos estos pasos:


Paso 1: Crea un documento nuevo con el tamaño por defecto (550px x 400px).


Paso 2: Selecciona la herramienta Rectangle (Rectángulo) y dibuja un rectángulo de aproximadamente 50px x 300 px.


Paso 3: Selecciona la herramienta Bone (Hueso) y haciendo clic y arrastrando creas el primer Bone, posteriormente creas los siguientes hasta obtener un resultado similar al que ves en la siguiente figura:


armature


Armature creada a partir de una forma o shape


Paso 4: Para ver el resultado simplemente tomas la herramienta Selection (Selección) y arrastras el extremo superior de la estructura que acabas de crear; como puedes ver se genera un movimiento natural y orgánico.


La estructura creada anteriormente se llama una Armature la cual se compone de Bones, éstos a su vez se unen mediante Joints (Uniones). La importancia de los Joints radica en que es el lugar donde se genera el movimiento. Cuando creas una armadura automáticamente Flash crea una capa llamada Armature_1 (el número o índice aumenta en las siguientes capas si creas varias Armatures).


Ahora conoceremos el funcionamiento de la herramienta Bone con símbolos siguiendo estos pasos:


Paso 1: Crea un documento nuevo con el tamaño por defecto (550px x 400px).


Paso 2: Selecciona la herramienta Rectangle (Rectángulo) y dibuja un rectángulo de aproximadamente 80px x 30px y lo conviertes en un símbolo.


Paso 3: Duplicas el símbolo del rectángulo 3 veces.


Paso 4: Con la herramienta Bone creas una estructura similar a la que ves en la siguiente figura:


armature2


Armature creada a partir de varios símbolos


Paso 5: Para ver el resultado simplemente tomas la herramienta Selection (Selección) y arrastras el extremo derecho de la estructura que acabas de crear; como puedes ver se genera un movimiento natural y orgánico igual que en el ejemplo anterior sólo que ésta vez está basado en varios símbolos.


Cualquier Armature (ya sea creada con base a una forma o a un grupo de símbolos) se puede animar. El equivalente a los Keyframes en las interpolaciones se llaman Poses en la animación de Armatures.


Para animar la Armature creada anteriormente seguimos éstos pasos:


Paso 1: Siguiendo el ejemplo anterior, nos ubicamos en el Frame 25 y haciendo clic derecho seleccionamos la opción Insert Pose (Insertar Pose) lo cual genera un Keyframe similar a los generado por el nuevo Motion Tween.


Paso 2: Con la herramienta Selection modificas la posición de la Armature.


Paso 3: Haces clic derecho sobre el Frame 50 y seleccionas Insert Frame (Insertar Fotograma).


Paso 4: Presionando la tecla Cmd/Ctrl haces clic sobre el Frame 1 (que es el Keyframe inicial) lo cual permite seleccionarlo, posteriormente haces clic derecho sobre el mismo Frame y seleccionas Copy Pose (Copiar Pose).


Paso 5: Presionando la tecla Cmd/Ctrl haces clic sobre el último Frame 1 para seleccionarlo, posteriormente haces clic derecho sobre el mismo Frame y seleccionas Paste Pose (Pegar Pose), esto permite que el inicio y final de la animación tengan la misma posición.


Paso 6: Presionas Enter para reproducir la línea de tiempo y ya puedes ver la animación.


También es posible permitir que el usuario interactúe con la Armature en la película publicada para lo cual no puedes tener una animación aplicada a la misma:


Paso 1: Seleccionas la capa donde se encuentra la Armature (esta Armature no puede estar animada) y en panel Propierties (Propiedades), bajo el área Options (Opciones) seleccionas Runtime (Tiempo de ejecución) en la opción Type (Tipo) tal como ves en la siguiente figura:


ikProperties2


Paso 2: Haces un test de la película con el shortcut Cmd/Ctrl + Enter y en el archivo swf resultante puedes usar el mouse para interactuar con el Armature.


Como puedes ver, el uso de IK en Flash abre muchas posibilidades para agilizar el trabajo en animaciones o juegos. En un próximo tutorial hablaremos de la manipulación de las Armatures con ActionScript 3.

10 de marzo de 2010

Adobe InDesign: 10 años como líder del diseño de publicaciones

A propósito de aniversarios, Adobe InDesign, la aplicación estándar para el diseño editorial cumplió 10 años.



La historia


Erase una vez una aplicación de diseño editorial llamada PageMaker la cual había quedado en manos de Adobe después de una negociación con la empresa Aldus. El problema es que QuarkXpress, el software competidor directo, llevaba más ventaja tecnológica y de mercado de la que podía superar Adobe con PageMaker, un producto nacido en 1995.

Naturalmente Adobe no se quedaría con los brazos cruzados, de manera que su acertado movimiento fué desarrollar una aplicación de ceros sin heredar tecnología de PageMaker y el resultado fué el lanzamiento de InDesign en 1999 con lo cual cambió la historia del diseño de publicaciones.

Cómo logró ser el líder?

Cómo pudo InDesign cambiar la preferencia de los usuarios después de 12 años de hegemonía de Quark? En realidad Adobe tenía todas las de ganar con ésta nueva aplicación:


  • Es un producto con gran compabilidad con los dispositivos postscript que se usaban en la época para la interpretación de archivos digitales (actualmente se usa tecnología PDF Print Engine).

  • A la fecha de su lanzamiento, la tecnología PDF se convertía en un estándar de la industria gráfica e InDesign incorporó caracterísisticas de importación y exportación a este formato con unos resultados muy confiables al momento de imprimir.

  • InDesign contó desde su inicio con una gran compatibilidad con Photoshop e Illustrator lo cual creó un trio contra el cual a QuarkXpress le quedó muy difícil de competir.

  • Las herrramientas, paneles y menús de InDesign fueron desde su inicio mucho más intuitivas y fáciles de usar que las herramientas de QuarkXpress.

La celebración

Adobe ha publicado el sitio web www.indesign10anniversary.com donde existen algunos recursos tales como videos con tips, descargas directas de triales y, especialmente, un magazine de 78 páginas en formato PDF con la historia de InDesign:

El resumen

InDesign es la aplicación que revolucionó la industria de las publicaciones impresas y actualmente está haciendo lo mismo con las publicaciones digitales gracias a sus nuevas herramientas y formatos de exportación como ePub, pdf, swf, y xfl, por ese motivo actualmente la filosofía de InDesign es: diseña una vez y publica en cualquier medio.


Quieres saber más de InDesign y su historia?

Air & JasperReports

Este es un ejemplo para lanzar un reporte JasperReports con una aplicación Air utilizando el proyecto Merapi (AIR’s Java Bridge).

Encontrareis el ejemplo en este link, en el .zip encontrareis los dos proyectos, para probar-lo solo hay que ejecutar el airReports.java y el aiReports.mxml.

26 de febrero de 2010

Fx4 VIII: Soporte CSS ampliado

En esta cuarta versión de Flex se han producido cambios considerables en la arquitectura de componentes así como en el lenguaje MXML. Esto se ha hecho para potenciar varios aspectos como son la productividad, facilitar el workflow designer / developer o la integración con herramientas externas.

En esta entrada se verá en profundidad las novedades referentes al soporte CSS en Flex 4.




Espacios de nombre


A partir de Flex 4 todos los selectores CSS requieren de un espacio de nombres para evitar la ambiguedad entre nombres de clase definidos en halo y spark.

Un ejemplo de esta situación la podemos encontrar en la clase Button.

Para spark la clase Button se define en spark.components.Button, en cambio para halo se define en mx.controls.Button. Lo que se puede apreciar es que en ambos casos las clases se llaman igual. Si se hubiera mantenido el modelo CSS de Flex <= 3 tendríamos un problema de ambiguedad al querer redefinir los estilos de la clase Button como se puede ver.

El código que necesitamos para definir los estilos de Button para spark y halo a la vez sería el siguiente:



MXML:




  1. <?xml version='1.0' encoding='utf-8'?>



  2. <s:Application xmlns:fx='http://ns.adobe.com/mxml/2009'



  3. xmlns:s='library://ns.adobe.com/flex/spark'



  4. xmlns:mx='library://ns.adobe.com/flex/mx'>



  5. <fx:Style>



  6. @namespace s "library://ns.adobe.com/flex/spark";



  7. @namespace mx "library://ns.adobe.com/flex/mx";



  8. s|Button{ lineThrough: true; }



  9. mx|Button{ icon: Embed('favorite.png'); }



  10. .botonRedondeado{ cornerRadius: 10; }



  11. </fx:Style>






  12. <s:layout><s:VerticalLayout paddingLeft='50' paddingTop='50' /></s:layout>






  13. <s:Button label='Spark Button 1' />



  14. <s:Button label='Spark Button 2' styleName='botonRedondeado' />



  15. <mx:Button label='Halo Button 1' />



  16. <mx:Button label='Halo Button 2' styleName='botonRedondeado' />






  17. </s:Application>







Obtenemos esto:

namespaces

Podemos observar dos peculiaridades con respecto a Flex3. La primera las declaraciones de espcios de nombre @namespace alias 'URI'; y la segunda la forma de contextualizar las declaraciones con alias|ClassName.

Por otra parte vemos que podemos seguir utilizando los selectores de clase de siempre de la misma forma que antes y que son aplicables a componentes halo y spark indistintamente.


Selector de clase múltiple


Una forma muy potente de modularizar los estilos es definirlos de la forma más atómica posible. Cuanto más se especialice la declaración de un estilo más versatil será.

A partir de Flex 4 se pueden asignar múltiples selectores de clase a un mismo componente separados por un espacio:



MXML:




  1. <?xml version='1.0' encoding='utf-8'?>



  2. <s:Application xmlns:fx='http://ns.adobe.com/mxml/2009'



  3. xmlns:s='library://ns.adobe.com/flex/spark'



  4. xmlns:mx='library://ns.adobe.com/flex/mx'>



  5. <fx:Style>



  6. .iconoFavoritos{ icon: Embed('favorite.png'); }



  7. .botonRedondeado{ cornerRadius: 10; }



  8. .textoRojo{ color: #FF0000; }



  9. .texto25{ fontSize: 25; }



  10. </fx:Style>






  11. <s:layout><s:VerticalLayout paddingLeft='50' paddingTop='50' /></s:layout>






  12. <s:Button label='Spark Button 2' styleName='texto25 botonRedondeado textoRojo' />



  13. <mx:Button label='Halo Button 2' styleName='iconoFavoritos textoRojo' />






  14. </s:Application>







Obtenemos esto:

multiple_selectors


Selector por #id


Otra característica añadida es el soporte para selectores por identificador, al más puro estilo HTML:



MXML:




  1. <?xml version='1.0' encoding='utf-8'?>



  2. <s:Application xmlns:fx='http://ns.adobe.com/mxml/2009'



  3. xmlns:s='library://ns.adobe.com/flex/spark'



  4. xmlns:mx='library://ns.adobe.com/flex/mx'>






  5. <fx:Style>



  6. #favoritos{



  7. icon: Embed('favorite.png');



  8. cornerRadius: 10;



  9. fontSize: 25;



  10. }



  11. </fx:Style>






  12. <s:layout>



  13. <s:VerticalLayout paddingLeft='50' paddingTop='50' />



  14. </s:layout>






  15. <mx:Button id='favoritos' label='Favoritos' />






  16. </s:Application>







Obtenemos esto:

id_selector


Selectores descendientes


Los selectores descendientes nos ofrecen la posibilidad de contextualizar las declaraciones de nuestros estilos dentro del ámbito de una clase determinada.

Por ejemplo, si queremos declarar un estilo que afecte a todos los campos de texto que estén dentro de un formulario lo haríamos de la siguiente forma:



MXML:




  1. <?xml version='1.0' encoding='utf-8'?>



  2. <s:Application xmlns:fx='http://ns.adobe.com/mxml/2009'



  3. xmlns:s='library://ns.adobe.com/flex/spark'



  4. xmlns:mx='library://ns.adobe.com/flex/mx'>






  5. <fx:Style>



  6. @namespace s "library://ns.adobe.com/flex/spark";



  7. @namespace mx "library://ns.adobe.com/flex/mx";






  8. mx|FormItem s|TextInput{ color: #FF0000; }



  9. mx|FormItem mx|TextInput{ color: #00FF00; }



  10. </fx:Style>






  11. <s:layout>



  12. <s:VerticalLayout paddingLeft='50' paddingTop='50' />



  13. </s:layout>






  14. <s:TextInput text='TextInput fuera de Form'/>



  15. <mx:Form>



  16. <mx:FormItem label='Dentro FormItem'>



  17. <s:TextInput text='Spark TextInput'/>



  18. <mx:TextInput text='Halo TextInput'/>



  19. </mx:FormItem>



  20. </mx:Form>






  21. </s:Application>







Obtenemos esto:

descendant_selector


Pseudo selectores


Los pseudo selectores permiten aplicar estilos sobre un componente teniendo en cuenta el skin state en el que está. Para ello se debe tener conocimiento de los estados de skin disponibles para el componente en cuestión.

Por ejemplo, la clase spark.components.Button dispone de los estados up, over, down y disabled (cada componente tiene especificados sus skin states en la documentación ASDoc), por lo tanto podemos sacar partido de los pseudo selectores CSS del siguiente modo:



MXML:




  1. <?xml version='1.0' encoding='utf-8'?>



  2. <s:Application xmlns:fx='http://ns.adobe.com/mxml/2009'



  3. xmlns:s='library://ns.adobe.com/flex/spark'



  4. xmlns:mx='library://ns.adobe.com/flex/mx'>






  5. <fx:Style>



  6. @namespace s "library://ns.adobe.com/flex/spark";



  7. @namespace mx "library://ns.adobe.com/flex/mx";






  8. s|Button:up{ fontSize: 10; }



  9. s|Button:over{ fontSize: 20; }



  10. s|Button:down{ fontSize: 30; }



  11. </fx:Style>






  12. <s:layout>



  13. <s:VerticalLayout paddingLeft='50' paddingTop='50' />



  14. </s:layout>






  15. <s:Button label='Spark Button'/>






  16. </s:Application>







Obtenemos esto:

Up:

button_up

Over:

button_over

Down:

button_down


Combinando


Por supuesto lo más interesante de todo es que todas estas funcionalidades las podemos combinar:



MXML:




  1. <?xml version='1.0' encoding='utf-8'?>



  2. <s:Application xmlns:fx='http://ns.adobe.com/mxml/2009'



  3. xmlns:s='library://ns.adobe.com/flex/spark'



  4. xmlns:mx='library://ns.adobe.com/flex/mx'>






  5. <fx:Style>



  6. @namespace s "library://ns.adobe.com/flex/spark";



  7. @namespace mx "library://ns.adobe.com/flex/mx";






  8. mx|Panel mx|ControlBar s|Button:up{ color: #FF0000; fontSize: 6; }



  9. mx|Panel mx|ControlBar s|Button:over{ color: #00FF00; fontSize: 30; }






  10. mx|Panel mx|Form #formItem2 s|TextInput{ color: #0000FF; }






  11. </fx:Style>






  12. <s:layout>



  13. <s:VerticalLayout paddingLeft='50' paddingTop='50' />



  14. </s:layout>






  15. <mx:Panel title='Ejemplo'>



  16. <mx:Form width='100%' height='100%'>



  17. <mx:FormItem label='Label'>



  18. <s:TextInput text='Lorem Ipsum'/>



  19. </mx:FormItem>



  20. <mx:FormItem id='formItem2' label='Label'>



  21. <s:TextInput text='Lorem Ipsum'/>



  22. </mx:FormItem>



  23. </mx:Form>



  24. <mx:ControlBar horizontalAlign='right'>



  25. <s:Button label='Spark Button'/>



  26. </mx:ControlBar>



  27. </mx:Panel>






  28. </s:Application>







Obtenemos esto:

Up:

combinando_up

Over:

combinando_over


Conclusión


Con Flex4 se dispone de una mayor versatilidad y control en lo que a declaración de estilos se refiere. La implementación CSS de Flex <= 3 dejaba bastante que desear y este paso sin duda está apuntando hacia el buen camino.

Cabe destacar que se dipone de una API AS3 para asignar todos estos estilos de forma programática y que no dudo se cubrirá en una futura entrada así que, manteneos atentos!


Notas


• Los selectores de clase son los que llevan punto '.' antes del identificador. Por ejemplo .botonRedondeado{}, los selectores de tipo son los que se asocian con una clase. Por ejemplo s|Button