Consultoria y Formacion Adobe

De todos los programas que har�n parte de la Creative Suite 5, Flash CS5 es quiz�s del que m�s se hablado al p�blico y del cual se mostraron m�s caracter�sticas durante el Adobe MAX. Precisamente entre todas grabaciones de las sesiones se encuentra una llamada “Secret Session: Flash Professional” donde Richard Galvan (Technical Product Manager for Flash) hace un interesante recorrido por esta aplicaci�n explicando caracter�sticas como las siguientes:

Perfil de exportacion a iPhone

En la ventana “Publish Settings” encontraremos la opci�n “iPhone” para publicar a este dispositivo con lo cual el archivo es compilado en un ejecutable nativo para el software iPhone 3.0 y posterior con extensi�n .ipa.

Soporte para texto TFL (Text Layout Framework)

Flash CS5 tendr� soporte nativo para texto TFL el cual hereda muchas caracter�sticas del motor de texto que maneja InDesign con lo cual se le agrega un poder enorme a las tareas de formato texto en Flash con caracter�sticas como texto bidireccional (perfecto para textos en idiomas como Hebreo, Chino, Japon�s, entre muchos otros), m�ltiples columnas enlazadas y controles tipogr�ficos avanzados (kerning, ligaduras, discretionary hyphens, etc). Puedes ver m�s informaci�n sobre TFL en el sito labs de Adobe, adem�s, si deseas empezar a usarlo puedes descargar el framework para ser instalado en Flash CS4 o simplemente interactuar con el demo online.

Code Snippets

: Los “snippets” son ejemplos de c�digo que pueden ser aplicados a un s�mbolo seleccionado con lo cual es posible agregar interactividad sin tener conocimientos de programaci�n. Tambi�n es una forma interesante de reutilizar nuestro propio c�digo.

Editor de c�digo mejorado

Al muy criticado editor de Flash se la ha agregado la capacidad de reconocer las clases personalizadas as� como sus propiedades, m�todos y eventos, por lo tanto obendremos el code hinting al instanciar una clase personalizada o al usar instancias de las mismas.

Integraci�n con Flash Builder (FB)

Para quienes el punto anterior les parece una mejora m�nima, desde Flash CS5 ser� posible crear clases en Flash Builder lo cual genera un proyecto de Flash, es decir que aunque se est� codificando en FB se compila en Flash; en pocas palabra es una forma de trabajar con Flash pero codificando en un editor externo que ser� FB. Desde FB es posible tambi�n crear un proyecto de Flash con lo cual tambi�n se sigue compilando desde Flash pero editando en FB.

Guardar como xfl

Flash CS5 tendr� un nuevo formato para guardar archivos llamado “Flash CS5 Uncompressed Document (*.xfl)” el cual genera una carpeta con un archivo .xfl y una seria de archivos xml que describen todo el contenido del archivo .xfl tales como s�mbolos, fuentes, etc. Este formato permite crear flujos de trabajo donde otras aplicaciones pueden acceder al archivo de flash para hacer ediciones como filtros, etfectos y dem�s.

Mejoras en la herramienta Decco

Esta herramienta tiene un comportamiento mucho m�s “inteligente” y cuenta con muchas m�s opciones de las que se encuentran en Flash CS4.

Mejoras en el trabajo con video

Flash CS5 permtir� reproducir el video en la l�nea de tiempo lo cual har� posible ubicarlo de manera precisa mientras se previsualiza. Tambi�n es posible agregar y editar Cue Points en la l�nea de tiempo lo cual evita tener que reimportar el video para hacer este proceso.

Simulaci�n de efectos f�sicos

Flash CS5 permitir� simular f�cilmente efectos f�sicos dentro de una interpolaci�n tales como “elasticidad de rebote”, para que me entiendan tendr�n que ver el video pues es muy complicado explicarlo. Tambi�n se incluye un panel llamado “Physics” con cuyas opciones se podr�n lograr efectos f�sicos incre�bles como los mostrados en �ste video presentado por Chewbacca (en serio…).

Como pueden ver, hay cosas muy interesantes en la nueva versi�n de Flash. Cabe anotar que Flash CS5 se encuentra a�n en estado beta de desarrollo por lo cual algunas de las caracter�sticas podr�an funcionar diferente en la versi�n final. Seg�n Adobe, la beta p�blica de �ste software estar� disponible a finales de este a�o.

Si dispones de casi dos horas libres puedes ver el v�deo completo de la presentaci�n. Vale la pena.

En este videotutorial de Adobe Flash, veremos una t�cnica para sombrear personajes utilizando la herramienta de la brocha y la opci�n de pintar selecci�n.

Descargar Archivo Flash

En éste videotutorial de Flash crearemos un fondo con un estilo de estrella y duplicaremos rectángulos con degradados para lograr el efecto deseado.

Link de tutorial en HD

En éste videotutorial veremos las nuevas herramientas para manipular y animar objetos en 3D utilizando Flash CS4

Si hay algo que siempre mola es ver nuestro nombre con el logo de algún videojuego, película o serie. Pues como dice el título haremos nuestro nombre o el de quien quieras con el logo de la serie Bleach

Este tip es para principiantes por lo tanto si eres un diseñador PRO, ten por seguro que este tip no te otorgará nuevo conocimiento y no vale la pena que lo leas.

Empezaremos creando un documento de cualquier tamaño y crearemos 4 capas las cuales llamaremos: Texto, Flamas, Base texto y Base logo. Acomodamos las capas como se muestra en la siguiente imagen.

Nos vamos a la capa Texto y elegimos una fuente que sea gorda, por ejemplo Arial Black o Tahoma Bold, escribimos nuestro texto principal en color rojo sin contorno y en itálica, recuerda que nuestra palabra no debe ser muy larga o se verá poco estética. El texto pequeño debe ir en color blanco con un contorno negro al 35%. deberá verse mas o menos así.

Copiamos solamente el texto rojo, bloqueamos la capa Texto y la ocultamos, Ahora nos vamos a la capa Base Texto damos click derecho y elegimos la opción Paste in Pleace.

Convertimos nuestro texto a forma presionando Ctrl+B dos veces seguidas. Ahora nos vamos a Modify / Shape / Expand Fill.

Lo que debemos lograr es que nuestro texto engorde un poco mas de lo que es.

Pintamos de blanco el texto y le damos un contorno en color negro al 35%, debe quedar así.

Hacemos visible la capa Texto:

Ahora seleccionamos nuestra Herramienta Rectángulo, sin contorno y las esquinas superior izquierda e inferior derecha con una redondes de 100. Dibuja un rectángulo delgado.

Elejimos la Herramienta Transformación Libre y le damos un pequeño Skew.

Escalamos y acomodamos nuestro rectángulo. Lo copiamos 3 veces y lo acomodamos de tal forma que no salga de nuestro texto principal.

Bloqueamos ambas capas de texto y nos vamos a la capa Flamas y con la Herramienta Pluma dibujamos una forma parecida a esta, Si se te dificulta dibujar el Shape lee esto que te servirá de base para poder dibujar la Flama.

Una vez dibujada nuestra flama, la duplicamos y la pegamos al otro extremo de nuestro texto. Copiamos todos los elementos que hemos dibujado hasta ahora y nos vamos a la capa Base Logo, damos click derecho y elegimos la opción Paste in Pleace y pintamos todo de azul.

Seleccionamos la Herramienta Rectángulo y cubrimos la area definida en la imagen.

Seleccionamos y abrimos nuestro Panel de Color, elegimos un Degradado Lineal, tomamos un color azul marino para el tono obscuro / oscuro.

Un azul turquesa para el tono claro.

Seleccionamos nuestra Herramienta de Transformación de Relleno y lo acomodamos de tal forma que el tono oscuro quede en la parte baja y el tono claro arriba.

Hacemos visibles todas las capas ocultas y nuestro resultado final debería haber quedado así.

¿Apoco no quedó bien PIMP ?, la parte difícil desde mi punto de vista es el trazo de la flama, aparte de eso todo lo demás es fácil.

En este tip pretendo mostrar a fondo la nueva característica de Flash CS4, la animación basada en objetos.

Retomando, en mi Tip anterior mostré el proceso para agregar las animaciones predeterminadas de Flash CS4, aprovechando el nuevo modelo basado en los objetos que ofrece.

Bien, se me hizo un par de días semanas tarde pero al fin está listo! Aunque quedó algo extenso…

//- OOT <– Object Oriented Tweening !

Conociendo el espacio de trabajo

Antes que nada, considero que es vital conocer el espacio sobre el cual estaremos desarrollando todo. Este es el conjunto de paneles que viene por defecto en Flash CS4, en la parte superior de la ventana:

• Linea de Tiempo/Time Line
• Editor de Movimiento/Motion Editor
• Acciones/Actions
• Compiler Errors
• Output

Quizá, como ya te podrás imaginar, solamente serán utilizados los dos primeros paneles; la Linea de Tiempo y el Editor de Movimiento.

Aquí dejo estos screenShots para que puedan empezar a conocer los paneles. Solo da click para cambiar a la siguiente imagen:

Como podrás ver, los paneles facilitarán mucho el trabajo fluido entre ellos, por su proximidad.

Explorando a fondo

Para los siguientes ejemplos utilizaré la misma imagen del Tip anterior:

Crear una simple Interpolación de Movimiento

En Flash CS4 crear una Interpolación de Movimiento se puede hacer por dos vías diferentes;

1. La primera es la manera clásica; la misma de cualquier otra versión de Flash. Solo se debe de crear en la linea de tiempo, un fotograma del tamaño deseado en base a su duración. Damos click derecho, y elegimos Crear Interpolación de Movimiento/Create Motion Tween.
2. La segunda es menos conocida ya que es nueva, donde debes dar click derecho sobre el Clip de Película en el escenario y seleccionar la opción Interpolación de Movimiento/Create Motion Tween.
   • NOTA: Aquí se agregaran automáticamente varios fotogramas como parte del objeto, en base a la Velocidad de Reproducción/Frame Rate.

   (Ej. frameRate:30 = 30 Fotogramas Clave = 1 seg de duración)

Listo, ahora tenemos nuestro nuevo objeto de Animación.

Modificando la Interpolación

Aquí un aspecto crucial: TODOS podemos hacer una Interpolación de Movimiento, lo difícil es saber modificarla para adecuarla a nuestras necesidades.

Por ello daremos click al final de nuestra Interpolación de Movimiento dentro de la Linea de Tiempo, y abriremos el panel Editor de Movimiento/Motion Editor.

Una vez ahi encontraremos varios subPaneles bajo la siguiente estructura:

• Movimiento Basico/Basic Motion
  • X
  • Y
  • Rotación en eje Z/Rotation Z
• Transformación/Transformation
  • Sesgar/Skew X
  • Sesgar/Skew Y
  • Escala/Scale X
  • Escala/Scale Y
  • Efectos de Color/Color Effect
  • Filtros/Filters
• Ease
  • Simple Slow

Movimiento Básico / Basic Motion:

Aquí podremos modificar la localización de nuestro Clip de Película en el escenario a lo largo de la Interpolación de Movimiento, basados en sus coordenadas X, Y, o Z. Bastara con arrastrar el Clip en el escenario y ver como los valores cambian automáticamente, o modificarlos desde aquí directamente.

Aunque la siguiente imagen está modificada para que quepa dentro de los limites del foro, no ha perdido su enfoque.
Se puede apreciar así siempre la misma estructura base, incluso en los demás subpaneles, de izquierda a derecha: Propiedad (Ej: Y), Variable (Ej: 205px), Ease, Gráfica.


Vista previa general de los elementos dentro de cada subPanel. En este caso Basic Motion
• NOTA: La propiedad "Ease" es un poco compleja como para poder mostrarlo aquí mismo, ya que además de que aparecerá en todos los demás subpaneles será necesario entender primero cómo funcionan los mismos sin intervención de este. Planeo profundizar en el tema un poco mas adelante.

Modificando manualmente el Clip de Película: Posición y Rotación

Transformación / Transformation:

Aquí podremos (como su nombre deja claro), modificar la apariencia de nuestro Clip de Película, ya sea sesgándolo (Skew), o escalándolo (Scale), tal y como si lo hiciéramos manualmente en las versiones de Flash anteriores. Para ello podremos, al igual que en el caso anterior, hacerlo manualmente con la herramienta Transformación Libre/Free Transform, o cambiando los valores aquí, directamente.


Vista previa general del subPanel Transform

Herramienta Transformación Libre, y su vecina; Transformación de Gradiente

Modificando manualmente el Clip de Película: Escala y Sesgado

Suavizado / Ease:

Este en lo personal, me parece que es uno de los aspectos mas innovadores y mejor implementados de todos los anteriormente mencionados, ya que te permite "importar" el tipo de Movimiento que se podrá efectuar durante alguna de las Interpolaciónes de Movimiento previamente especificadas.

Para dejar una idea mas clara sobre su funcionamiento imagina que estas usando de manera gráfica la clase Tween.


Vista previa del Subpanel Ease. Fíjense en la propiedad que tiene como default: Simple (Slow)

Habrás notado que en todos los subpaneles se repite la presencia de Simple (Slow), el cual representa la manera en la que se reproduce la Interpolación de Movimiento, es decir suavemente de atrás hacia adelante sin ningún tipo de rebote o singular efecto.

Prueba cambiando esto por cualquier otra propiedad y observa las diferencias.

Como podrás notar, se pueden dar cambios muy sutiles e impactantes, de saber manejar esta nueva característica en Flash CS4. Es por ello que en breve planeo postear mi otro Tip que esta arrumbado por ahí para profundizar aun mas en el subpanel Transform y cómo puede trabajar en conjunto con el subpanel Ease.

Quizá este video sobre la animación en flash te pueda ser de utilidad.

Video tutorial acerca de las nuevas interpolaciones de movimiento en Flash CS4.

En este vídeo tutorial mostraré como realizar un dibujo de una calabaza de Halloween en Flash:

Descargar Archivo para Flash CS3.

En este segundo video tutorial realizare mostraré como realizar una animación de bruja volando.

Descargar Archivo para Flash CS3.

Este es un sencillo script de PHP que nos permite generar un archivo XML con el listado de todos los archivos y carpetas que esten contenidos dentro del directorio en el que hemos situado el archivo PHP.

Esto nos puede resultar útil para realizar galerías fotográficas en las que queremos acceder a todas las imágenes de un directorio y queremos poder subir o borrar archivos. El archivo XML siempre estará actualizado a los ficheros del servidor.

El archivo PHP es el siguiente. Lo llamaremos list.php y lo subiremos al servidor dentro de la carpeta que nos interese listar.

Código :

<?php
   $dir = "./";
   
   echo "<XML encoding='UTF-8' standalone='yes' version='1.0'>n";
   echo "  <folder>n";
   
   if (is_dir($dir))
   {
       if ($gd = opendir($dir))
      {
           while (($archivo = readdir($gd)) !== false)
         {
            if ($archivo != "." & $archivo != ".." & $archivo != "list.php")
            {
               if (is_dir($archivo))
               {
                     echo "    <folder>$archivo</folder>n";
               }
               else
               {
                     echo "    <file>$archivo</file>n";
               }
            }
           }
           closedir($gd);
       }
   }
   
   echo "  </folder>n";
   echo "</XML>n";
?>

El script lo único que hace es recorrer todos los elementos de la carpeta en la que está situado y a base de "echos" formatea el XML.

Si visualizamos este archivo desde el navegador y miramos el código resultante este sería un archivo XML de este estilo:

Código :

<XML encoding='UTF-8' standalone='yes' version='1.0'>
  <folder>
    <file>img_001.jpg</file>
    <file>img_002.jpg</file>
    <file>img_003.jpg</file>
    <file>img_004.jpg</file>
    <file>img_005.jpg</file>
    <folder>thumbs</folder>
    <folder>hires</folder>
  </folder>
</XML>

De esta manera si quisiésemos, por ejemplo, listar el contenido de imágenes disponibles de este directorio dentro de un componente List de Flash haríamos lo siguiente:

Código :

import fl.data.DataProvider;

var _URLLoader = new URLLoader();
var _URLRequest = new URLRequest();

_URLRequest.url = "/img/list.php";
_URLLoader.load(_URLRequest);
_URLLoader.addEventListener(Event.COMPLETE, onListComplete);

function onListComplete(e:Event):void
{
   var xml:XML = new XML(e.target.data);
   var xmlList:XMLList = xml.folder.file;
   var dataProvider = new DataProvider();
   for each (var item in xmlList)
   {
      dataProvider.addItem({label:item});
   }
   listado.dataProvider = dataProvider;
}

Cargamos el archivo PHP como si de un XML se tratase, y de ahí lo convertimos en el dataProvider del componente.

He podido disfrutar, desde ya un tiempo de la versión CS4 de Flash. A mi parecer, la principal característica que presenta, es la de poder manejar las animaciones en la linea de tiempo, orientándose a ellas como objetos. En esta ocasión no voy a profundizar mucho en el tema, aunque ya tengo algo grande preparado.

Volviendo al tema, esto sin duda es un gran avance ya que nos permite crear animaciones realmente complejas. Y no los simples movimientos con easing a los que ya nos tenían acostumbrados, gracias a las bibliotecas que ya vienen incorporadas. En este pequeño Tip, mostraré cómo crear animaciones un tanto complejas de manera rápida y sencilla en Flash CS4.

• NOTA: Puede ser muy útil que comiences a familiarizarte con el entorno que ofrece esta nueva versión en cuanto a interpolaciones se refiere. Es un aspecto que cambió drásticamente.

//- OOT ! <– Object Oriented Tweening !

Procedimiento

1. Primero creamos un documento nuevo de Flash AS3. Las medidas son poco relevantes.
2. Ahora, simplemente creamos un Clip de Película en el escenario, que contenga un icono sencillo, con el que vamos a practicar. En este ejemplo utilizare este:
   

3. Ahora, todo es cuestión de seleccionar el clip, y dirigirnos hacia el panel Plantillas de Movimiento/Motion Presets.
   • NOTA: Normalmente parece estar oculto, pero lo puedes encontrar anexado al panel de Biblioteca/Library por medio de CTRL+L
   

4. Una vez ahí, encontrarás dos carpetas, una vacía y otra llena; Custom Presets y Default Presets respectivamente. Esto es por que aun no hemos creado una animación para guardarla dentro de Flash.
   

5. Abrimos la carpeta de Default Presets y ahora solo queda buscar una animación de tu preferencia a través de la ventana de vista previa que aparece arriba, una ves seleccionado uno damos click en Apply.
   

6. ¡Listo! Ahora tenemos nuestro objeto de animación en el escenario completamente editable, por lo que será muy fácil e intuitivo mezclar dos o mas efectos de la libreria, hasta llegar al deseado.