10 de junio de 2010

Calendario Interactivo MUNDIAL DE SUDAFRICA 2010



click aqui para verlo completo

3 de junio de 2010

Adobe CS5 nos lleva al mundo de 64 bits

Con el lanzamiento de la Adobe CS5 tenemos la posibilidad de trabajar con aplicaciones a 64 bits lo cual supone una enorme ventaja a la hora de manipular grandes archivos lo cual es cada vez más común.



Adobe ya nos había dado una prueba de los 64 bits con Lightroom 2.0 y Photoshop CS4 (ésta última sólo en Windows), sin embargo en la Adobe CS5 se han reescrito a 64 bits Photoshop, After Effects y Premier. Pero qué ventajas tiene el trabajar con aplicaciones a 64 bits? Aunque el sólo hecho de aumentar el número de bits aumenta en un importante porcentaje el desempeño de las aplicaciones, la ventaja más grande es la posibilidad de poder aprovechar grandes cantidades de memoria ram.

Una aplicación a 64 bits puede aprovechar un máximo de 4 GB de ram de las cuales en realidad, por diferentes motivos, termina usando 3 GB tal como se ve en la imagen:

3 GB de ram disponible en Photoshop CS4 (panel de preferencias) para mac la cual es una aplicación a 32 bits.



Un aplicación a 64 bits puede manejar en la práctica un máximo 128 GB de memoria ram y de hecho éste límite puede ser sobrepasado a medida que se hagan avances de hardware.


Más de 7 GB de ram disponible en Photoshop CS5 (panel de preferencias) en un mac con 8 GB de ram.

128 GB de ram son demasiados? Yo trabajo muy bien con 2 GB…

Este es un punto relativo. Por ejemplo, si usamos imágenes en baja resolución para web y en general nuestros archivos son pequeños, seguramente no veremos importancia en pasar a software de 64 bits, sin embargo hay muchos usuarios que manipulan grandes archivos dentro de los cuales se encuentran quienes trabajan con archivos de video para quienes trabajar con los límites de memoria impuestos por los 32 bits es un gran problema. Estos usuarios agradecerán infinitamente las capacidades de éstas nuevas aplicaciones.

Cuáles aplicaciones CS5 son a 64 bits?

Photoshop CS5, Premier CS5 y After Effects CS5 son aplicaciones a 64 bits. Mientras Photoshop CS5 se puede instalar en un sistema a 32 bits, Premier CS5 y After Effects CS5 sólo funcionan en un sistema como Leopard (Mac OS 10.5) o posterior o Windows Vista 64 bits u otro sistema posterior a 64 bits. Windows XP Professional x64 Edition no es soportado.


En un mac, es posible arrancar Photoshop CS5 en compatibilidad a 32 bits

En definitiva el salto a los 32 bits de éstas aplicaciones supone una importante ventaja y de hecho las ubica al frente de varias aplicaciones de la competencia que aún no han realizado éste cambio.

via : xpert

29 de mayo de 2010

Grupo Oficial de Usuarios Adobe en Bolivia


Por que un grupo para Bolivia?

Por que no existe uno todavia, hay poca informacion y solo algunos usuarios que se interesan por la tecnologia de Adobe.

La idea se fue desarrollando desde hace tiempo, y ahora con el apoyo de algunos amigos que les gusta Adobe, creamos una comunidad. Esta comunidad ha sido creada para que usuarios Bolivianos puedan aprender las tecnologias que ofrece la Plataforma de Adobe, a traves de charlas, confencias, cursos, tutoriales... etc.
El grupo esta todavia en etapa beta, pero con el apoyo de uds. saldra adelante.
Actualmente estamos gestionando conferencias libres que se daran en determinada fecha.


Donde pueden unirse?

Para empezar les dejo la liga del grupo que armamos en el facebook, unanse todos los que quieran.
Grupo de Usuarios de Adobe en Bolivia, ese es el grupo oficial y esperamos que se puedan unir muchas personas y sacar adelante a este grupo.

Proximamente publicare la liga del sitio oficial para la comunidad. Esten pendientes.

28 de abril de 2010

Asiste a la Adobe Developer Week

Se acerca la Adobe Developer Week, una semana donde tendremos la oportunidad de aprender y compartir con los mejores expertos en Flash, Flex, Air y Flash Builder; como son Andrew Shorten, Paul Trani, Deepa Subramaniam y Lee Brimelow. Este evento tendrá lugar del 10 al 14 de Mayo, con sesiones online que van desde la introducción a la Plataforma Flash hasta características avanzadas en Flex, pasando por la creación de juegos para dispositivos móviles y otros temas de gran interés.
adobe

Vale mencionar que todo el evento es gratuito y se puede acceder mediante Adobe Connect. Todos los que se registren y asistan a cualquier conferencia estarán participando por una copia de Flash Builder 4 Profesional o una Creative Suite 5 Web Premium. Aquí encuentra todos los detalles sobre la rifa.

Las sesiones comienzan a las 9 de la mañana y terminan a las 5 de la tarde (hora del pacífico), lo que viene siendo de 7 am a 3 pm horario de Perú y Mexico, con una duración de 1 hora cada una.

Puedes consultar el tema de cada sesión, horarios e inscribirte para asistir aquí. Ten en cuenta que los cupos son limitados y que debes tener una Adobe ID (la cual obtienes gratis aquí) para poder registrarte.
via:garageflash.com

26 de abril de 2010

Herramientas gratis y open source para crear contenido Flash

Con todo el revuelo de la pelea entre Flash y HTML5, parece haber una creencia popular que dicta que no existen herramientas open source para crear contenido Flash. Este pensamiento no puede estar más errado, sobre todo ahora que los representantes de Adobe han manifestado su afinidad hacia las plataformas abiertas que permitan la colaboración entre desarrolladores.
Investigando un poco hemos encontrado una extensa e interesante lista de aplicaciones que no solo son open source, sino también totalmente gratis, en flashmagazine.com.


Además, el autor del post realiza una excelente reflexión sobre el hecho de que el Flash Player no sea completamente abierto:

La razón principal es que la aplicación utiliza tecnología con licencia de varias empresas. Algunos de estos softwares son abiertos y gratuitos, mientras que otros son comerciales y requieren una licencia.

Sin embargo, hay muchas empresas que desarrollan sus propios Flash Players en estos días, ya que con el Open Screen Project, Adobe ayuda a que los desarrolladores creen sus players certificados para sus propias plataformas. Dichos ingenieros tendrán que pasar por un entrenamiento especial con Adobe para poder utilizar el logotipo de Flash y tradmarks en su dispositivo.

Finalmente hace una acotación muy importante sobre la compañía, con la que estamos de acuerdo y que reafirma el por qué de nuestra simpatía hacia Adobe:

El Flash Player sí mismo no es de código abierto, aunque muchas de las tecnologías relacionadas con él si lo son. Flash no es tan abierto como otras tecnologías tampoco, pero Adobe es una compañía que realmente escucha a sus usuarios. Varias de las nuevas características de Flash Player 10 fueron consecuencia directa de las solicitudes de la comunidad y Adobe mantiene una base pública de bugs para la mayoría de su software y aceptan las sugerencias de sus usuarios. La tecnología de Adobe no puede ser completamente Open Source, pero sigue teniendo una política bastante abierta con respecto a su uso en distintas plataformas y dispositivos.
via: garageflash.com

21 de abril de 2010

Adobe abandona iPhone en Flash, se enfoca en Android

"Mike Chambers, manager de Flash Platform en Adobe, anunció hoy en su blog que Adobe dejará de invertir en herramientas para desarrollo orientado al iPhone de Apple. No es una sorpresa, pero es la posición oficial de Adobe frente a Apple y su prohibición de apps hechas en Flash dentro de la App Store.


Android, el futuro para Adobe


Además, anuncian que Android será la plataforma móvil donde se dirigirán sus esfuerzos. Hablando del Motorola Droid, el Nexus One y la tabla Android con NVIDIA Tegra, futura competidora del iPad.

Hablan de otros sistemas operativos móviles, pero el enfoque clave del artículo es en Andoid.

Adobe reitera lo cerrado de Apple, se compromete con "open"



Recuerdan además que Apple no sólo ha restringido el desarrollo de apps para iPhone con herramientas de terceros, sino también el uso de otras redes de publicidad (como AdSense) diferentes a las propias de Apple, así como su ilógico sistema de rechazo de apps por contenido.


Cierra el artículo Mike asegurando que "las plataformas abiertas le ganarán al final a aquellas cerradas y controladas que Apple quiere crear", recordando que Adobe AIR y Flash Player 10.1 permitirá crear apps nativas para Android, Palm, Windows Phone 7, Symbian y Blackberry.

Lo que me deja esperando que ponga su dinero donde sus palabras están. Que abran el Flash Player como open source, igual que Flex. Ya es hora.

14 de abril de 2010

Evento Adobe CS5 por la comunidad AdobeXpert – Grabaciones


Si te perdiste el evento en español del lanzamiento Adobe CS5 organizado por la comunidad AdobeXpert, aquí te dejamos las grabaciones.
El día de ayer, la comunidad AdobeXpert organizó un evento en español con ocasión del lanzamiento de la Adobe CS5 en el cual, como siempre, participaron varios líderes de comunidades hispanas. Agradecemos a los presentadores y asistenes al evento que tuvo una muy buena asistencia. Como pueden ver en la imagen, el pico máximo de usuarios conectados al evento de forma simultánea fué de 379.
Agradecemos a los presentadores y asistenes al evento. Si no pudiste verlo en vivo aquí te dejamos las grabaciones. Algunas pueden tener retardos de sonido:
via: xpert

12 de abril de 2010

Lanzamiento online de Adobe CS5 por la comunidad AdobeXpert

Adobe CS5 acaba de ser anunciada y la comunidad AdobeXpert realizará una presentación online especial donde conocerás las novedades de esta nueva suite. No te la pierdas.



Toda la información en el blog Xpert donde además podrás ver información sobre Adobe CS5. Además habrán tutoriales Adobe CS5 muy pronto en www.tutorialesadobe.com

Sigue la comunidad AdobeXpert vía facebook o twitter.

Si deseas programar un evento de lanzamiento CS5 en tu universidad o ciudad y quieres invitar a AdobeXpert, comunícate con ellos.

Nuevo formato de documento .XFL para Flash CS5

Hoy a sido la presentación de la nueva suite CS5 de Adobe, en la cual nos han mostrado brevemente las novedades que trae. Una de las caracteristicas de Flash Profesional CS5 que me han gustado es la integración del documento de trabajo con el formato XFL, un formato de intercambio basado en XML.

De esta manera ahora los elementos de la película no quedan empaquetados dentro del archivo .FLA sino que quedan externamente dentro de una estructura de carpetas, siendo accesibles y modificables sin necesidad de abrir Flash.



Tanto las propiedades del documento como los elementos gráficos de la librería quedan exportados en archivos XML pudiendo ser editados desde cualquier editor de texto y modificar sus propiedades. Incluso el código Actionscript de los fotogramas queda exportado. Por ejemplo, este es el XML que genera un simple MovieClip con un circulo gráfico:



Esta es una característica muy buena que nos permitirá poder editar elementos gráficos directamente editando su archivo XML desde cualquier editor, incluso podríamos crearnos nuestras propias herramientas para editar nuestras películas Flash.

7 de abril de 2010

eSeminar sobre CS5 en video2brain

eSeminar sobre CS5 en video2brain: "Como ya sabrán el próximo día 12 de abril será el lanzamiento de la nueva Suite de Adobe, la CS5.

Para el día del lanzamiento Adobe ha preparado un evento online donde se mostrarán las nuevas características que aporta esta actualización.Podemos registrarnos a este evento desde la siguiente url:



Paralelamente la gente de Video2Brain (portal de videotutoriales) está preparando un evento similar donde nos darán muestra de estas novedades en castellano por parte de los formadores Mariana Cabral, Adobe Certified Expert y Creative Suite Specialist Consultant, y Edgar Parada, Adobe Community Professional y Manager del AUG RIActive.



El evento será el dia siguiente al lanzamiento, osea el 13 de abril a las 20:00 en España (GMT+1), 13:00 en México (GMT-6), 13:00 en Colombia (GMT-5) o 15:00 en Argentina (GMT-3).

La url para acceder al connect es el siguiente:


El acceso al foro del eSeminar es limitado y sólo podrán entrar las primeras 250 personas que se registren, y el acceso se dará 5 minutos antes de iniciar el evento. Así que hay que estar atento para no perdérselo.

25 de marzo de 2010

Adobe CS5, lanzamiento oficial el 12 de abril

Después de muchos retrasos, cambios y explicaciones de su lanzamiento, hasta hace unas horas: incierto. Adobe decidió por fin anunciar la salida de la nueva versión de la suite Adobe CS5, que no será de otra forma que a nivel mundial via onLine por Adobe TV el lunes 12 de abril del 2010. Esto quiere decir que desde la comodidad de tu casa u oficina podrás ver, de manos de los expertos y creadores de esta versión, las novedades que nos ofrece la tan esperada suite.

Para eso tendrás que ingresar a este link con tu id de Adobe (que lo obtienes gratuitamente)



Uno de los grandes temas y discusiones que sobre llevo con mis amigos es ¿cómo pueden salir versiones tan seguidas?, si recordamos la suite CS4 salió el 23 de setiembre del 2008, y un año antes, el 27 de marzo del 2007 fue lanzado la suite CS3, la suite CS2 en el 2005 y la suite CS en el 2003.








En realidad si nos damos cuenta hay un promedio de dos años entre cada versión (meses más meses menos), y los que estamos acostumbrados a trabajar con tecnología entendemos que un mes ya hace diferente el mundo en la internet. Imaginen lo que es 24 meses, donde las exigencias de los diseñadores y desarrolladores va teniendo más presencia. Nosotros mismo, cuantas veces hemos dicho: Esto le falta o esto debería tener esta o aquella herramienta. Una de las cosas que me gustaron de las nuevas políticas de Adobe es que si están escuchando a la comunidad de usuarios, empresas, agencias o freelance que realmente usan a fondo y entienden las necesidades existentes. Pero seamos sinceros, querer complacer a todo el mundo es complicado, además de ser un interminable camino.

Asimismo, estoy seguro que muchos de nosotros no hemos notado cambios importantes o radicales entre una u otra versión de la herramienta que usamos, es posible, pero ¿acaso conocemos toda la herramienta para estar seguro que no se hicieron mejoras en algunas que no conoces?

Como siempre este será un largo debate, probablemente interminable... entonces mi pregunta es...

¿Qué esperas de esta nueva versión?


24 de marzo de 2010

Flash and Flex Developer’s Magazine, Edición Marzo

Ya esta disponible para descargar la edición de marzo de Flash and Flex Develope’s Magazine.

Contenido principal:


  • Delivering video for Flash Player 10.1 on mobile devices

  • Why the iPad Will Redefine Our View of RIAs

  • Flex and Air

  • Understanding Flex 4 components

  • Flex and Jabber

  • Dynamic Views and Mediators with PureMVC

  • Deeplinking your Flash and Flex applications with SWFAddress

  • What Kind of Website Should I Make?

  • Project Organization Best Practices

  • Dive into OSMF-Part One

  • A Case for Streaming Media and the Cloud

  • Readers BUG – Readers Q&A section

23 de marzo de 2010

Adobe Developer Week!

Con el lanzamiento de Flash Builder 4 y la cercanía de otros eventos relacionados con la Plataforma Flash como el Flash and the City, Adobe lanza el Adobe Developer Week que será del 10 al 14 de Mayo y lo mejor de todo es que será GRATUITO y transmitido EN LINEA por lo que podremos acceder desde cualquier parte y como serán transmitidas usando Connect podrán ser visualizadas desde cualquier móvil con la App de Connect precargada o con Flash Player =).

Adobe Developer Week



Pero... ¿qué es el Adobe Developer Week?

Como lo indica el sitio web de este evento, es la oportunidad para aprender sobre Adobe® Flash® Platform, Adobe Flex, Adobe Flash Builder, Adobe AIR, Adobe Flash Player principalmente, dichas conferencias, demos y workshops online serán impartidos por Evangelistas de Adobe y los Product Managers de las tecnologías, lo que es un valor agregado bastante bueno pues además podremos interactuar con ellos en cada presentación.

Algunos de los tópicos que se cubrirán en el evento son:

• New Features in Adobe® Flash® Builder™ 4

• Building Multi-Screen Applications with the Adobe® Flash® Platform

• Adobe® Flash® Catalyst™ for Developers

• What's New in Adobe® Flash® Builder™ 4 for Java Developers

• What's New in Adobe® Flash® Builder™ 4 for PHP Developers

• Adobe® Flash® Builder™ 4 and Adobe® ColdFusion® 9

• Creating Sexy Applications with the Adobe® Flash® Platform: Designer-Developer Workflow

• Adobe® Flash® Builder™ 4 for Adobe® Dreamweaver® Users

• Building Desktop Applications with Adobe® AIR® 2.0

• Advanced Features in Adobe® Flex®

El registro al evento no está abierto aun, pero puedes dejar tu correo electrónico en el sitio para que te notifiquen en cuanto las inscripciones estén abiertas.

Creo que esté será un muy buen evento tanto para conocer la tecnología como para aprender las nuevas características de productos nuevos.

Nos vemos en el Adobe Developer Week y... Happy Coding!!!

22 de marzo de 2010

Ya está disponible el nuevo Adobe Flash Builder 4 y Flex 4

Durante mucho tiempo los desarrolladores que trabajamos en la creación de RIA's con FlashFlex y/o AIRhemos estado esperando la salida final del Adobe Flash Builder 4 (antes Adobe Flex) y hoy por fin se dio al ver que en el Labs de Adobe ya te dirigía al sitio oficial. Aunque muchos de nosotros hemos estado jugando con esta versión, la lista de los bug reportados fueron solucionados, obviamente no todos, pero una gran parte si y eso gracias a la colaboración de los desarrolladores que han venido reportando las fallas o problemas.



¿Que tiene de nuevo esta versión?


Sin duda una de las mejores cosas que hay en esta versión es la integración a datos de una forma más simple y rápida, utilizando componentes Drag&Drop podrás enlazar tu aplicación frontEnd a servicios proporcionados por Java, PHP, ColdFusion, REST, SOAP, entre otros.


El soporte nativo para Adobe AIR es algo que ya hemos venido comentando en cristalab.

Un pedido a gritos por parte de la comunidad fue la mejora de la refactorización que es tan necesaria y muchas veces nos dio dolor de cabezas, en esta versión fue extremadamente mejorada.

Facilidad en el uso con Adobe Flash Catalyst hizo que el diseño visual de nuestras aplicaciones sean aun mejor, y ahora aumentando su capacidad con la integración de Illustrator, Fireworks o Photoshop.



Gran integración entre Flash y Flash Builder permite a los desarrolladores de componentes personalizados en Flex un flujo de trabajo eficaz.

Entre otros, tenemos el Network Monitor que permite un detallado listado de transmisión de datos que tu aplicación está transfiriendo o utilizando logrando ayudar a la optimización o depuración.



Utilización de línea de comandos para automatizar procesos así como la unidad de pruebas de Flex.

Todos sabemos el uso de webOrb o amfphp, pero realmente pocos saben el potencial existente en BlazeDS y LiveCycle que es mejorado en Flash Builder 4, eso quiere decir un mejor rendimiento, entre otras cosas.

Los estilos y el aspecto final de nuestras aplicaciones fue altamente reforzado en esta versión.

De hecho podemos encontrar más detalles al respecto o comparando con otras versiones en este link



Si quieres tener más información al respecto puedes visitar el sitio de Adobe Flash Builder 4.

18 de marzo de 2010

Grabaciones de las conferencias del 15 de Marzo

Aquí están las conferencias grabadas del 15 de marzo, estarán disponibles por un tiempo, no se las pierdan.

17 de marzo de 2010

Un poco de Flash Builder 4

Si eres un desarrollador Flash o un diseñador con conocimientos en Action Script este es un buen momento para pasarte a usar una herramienta que hace asequible el desarrollo de aplicaciones: Flash Builder 4 (antiguo Flex Builder).

Algunas novedades y ventajas:
  • Incluye un amplio set de componentes de AS3 que puedes utilizar para darle funcionalidad a tus proyectos.
  • Las aplicaciones están formadas por un conjunto de etiquetas MXML, lo que permite configurar sus propiedades para personalizar sus componentes.
  • Función de auto-completar en la vista de código (ideal para los diseñadores que no estén familiarizados)
  • Espacio de trabajo completamente acomodable.
  • El código fuente es fácilmente accesible y se puede pasar de forma cómoda y sencilla a la vista de diseño para reacomodar los elementos gráficos.
  • Contiene las herramientas de diseño que utilizan otros programas de Adobe como Photoshop e Illustrator.
El aspecto en desventaja es que la Compañía no se ha pronunciado acerca del lanzamiento de la versión final que estaba programada para principios del 2010, aunque algunos empleados han dicho, por medio del Foro de Adobe Flash Builder 4 que será dentro de muy poco. Esperamos poder traerle esa noticia muy pronto a nuestra comunidad.
Puedes descargar esta segunda versión beta totalmente gratis aquí. Es una versión trial de 30 días, sin embargo, si tienes un serial de Flex Builder 3 puedes solicitar un serial para Flash Builder 4 en éste sitio.
Luego de probarlo, si tienen tiempo libre y quieren contribuir a la mejora de este software pueden realizar esta encuesta para dejar feedback a la compañía.

via: garageflash

Trabajando con modelos 3D en Flash

Free Spin 3D es una extensión para Adobe Flash utilizado para trabajar con modelos 3D que provee un flujo de trabajo completamente visual y fácil de utilizar para principiantes y que además permite desarrollar proyectos 3D avanzados mediante su API de Action Script.
freeSpin

Es posible crear contenido 3D sencillo con mouse interactivo y comportamientos del teclado sin necesidad de utilizar código.

Las animaciones tridimensionales son altamente efectivas para atraer la atención del usuario por lo que se hacen recomendables para crear banners publicitarios, aunque su mayor uso es en la industria de los juegos. Aquí se pueden apreciar algunos ejemplos muy inspiradores.
Entre sus mayores ventajas se cuentan:
  • Utiliza la línea de tiempo de Flash, así como su set de herramientas.
  • Se instala en segundos usando el Extension Manager de Adobe.
  • No se necesita conocer Action Script para manejarlo.
  • Trabaja en tiempo real, a diferencia de otras tecnologías que requieren pre-render.
Algunos sitios que proveen modelos 3D gratis:
http://www.linefour.com

http://www.3dcafe.com

http://www.turbosquid.com/

Free Spin 3D corre en Adobe Flash CS3 y CS4 con Action Script 3. Tiene un periodo de prueba gratis por 15 días y requiere registro. Se puede descargar aquí.

via: garageflash 

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