MagazineXpert 02

Magazine para la comunidad Adobe en Latinoamérica Multimedia - Impresos - RIAs - Video - Sonido - Fotografía Digital - Web

magazine

USER GROUP

Publicación del Grupo de Usuarios Adobe en Colombia - http://aug.xpert.com.co Enero - Marzo de 2010

Contenido magazine

www.magazinexper t.com

Vista panorámica del evento Adobe en Vivo realizado en Lima - Perú por el grupo de usuarios de éste país.

Full Screen / Normal

www.magazinexpert.com

USER GROUP

Editorial

Contenido

Volvemos con más entusiasmo...

Noticias Noticias y actualidad Adobe. . . . . . . . . . . . . . . . . . . . . Página

Artículo

Después de varios meses de haber publicado el primer número del Magazine Xpert hemos regresado y esta vez para quedarnos y seguir trabajando con más continuidad.

“En éste número del Magazine han participado varios líderes y miembros de diferentes comunidades de usuarios Adobe de habla hispana y estamos seguros que seguiremos recibiendo este tipo de apoyo para las futuras publicaciones.”

Una mirada al potencial de los juegos en Flash. . . Página

3

Tutorial Flex

Este número del Magazine es muy especial pues en él han participado varios líderes y miembros de diferentes comunidades de usuarios Adobe de habla hispana y estamos seguros que seguiremos recibiendo este tipo de apoyo para las futuras publicaciones.

Qué es Flex?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Página

Como siempre, esperamos que éste sea un medio informativo, educativo y una plataforma para que puedas publicar tus trabajos más representativos y los des a conocer a toda la comunidad.

Inverse Kinematic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Página

En este número tenemos un artículo sobre el potencial de los juegos en Flash, diferentes tutoriales y un directorio de AUGs. Esperamos que lo disfrutes.

Directorio

4

Tutorial Flex Actionscript Framework downloader. . . . . . . . . . . . Página

5

Tutorial Flash 7

Tutorial Móviles Creando webs para iPhone. . . . . . . . . . . . . . . . . . . . . . Página

9

Grupos de Usuarios Adobe hispanos. . . . . . . . . . . . . Página 12

Te invitamos a hacer parte del Grupo de Usuarios Adobe - Xpert registrándose en la página web: http:// aug.xpert.com.co, haciéndote seguidor de nuestro sitio facebook: http://www.facebook.com/adobexpert/ o siguiéndonos via Twitter: http://www.twiter. com/adobexpert/ Marlon Ceballos - Editor

Deseas pautar en nuestro magazine? Comunícate con nosotros a los teléfonos 3016640110 - 8136456 (Bogotá) o al email: aug@xpert.com.co

Página 1 magazine

2

Contenido

Acerca de la imagen usada en la portada. Una vez más, de la mano de Elder Vasquez se realizó en Perú el evento Adobe en Vivo, un excelente ejemplo de la unión y trabajo conjunto entre diferentes comunidades hispanas. Puedes ver un resumen de éste evento en el siguiente link: http://bit.ly/6ESuyK

Full Screen / Normal

www.magazinexpert.com

USER GROUP

Noticias

Noticias

Flash Player para móbiles

nalmente, se ha anunciado Flash Player para teléfonos Blackberry .

Photoshop.com en el iPhone

Nuevas Betas disponibles

Flash y el iPhone

Adobe ha anunciado el Flash Player 10.1 el cual se convierte en el primer fruto del Open Screen Project con el cual será posible desarrollar aplicaciones que se ejecuten en cualquier dispositivo como PCs de escritorio, telefónos móbiles, PCs ultramóbiles (UMPCs), dispositivos móbiles de internet (MIDs) y dispositivos basados en la arquitectura ARM (televisores, reproductores mp3, etc). El Flash Player 10.1 también permitirá tener en los dispositivos móbiles una experiencia de navegación web igual a la de disfrutamos en los computadores de escritorio lo cual incluye videos en HD. En los próximos meses se espera que esté disponible una versión beta de Flash Player 10.1 para Windows Mobile, Palm webOS, Windows, Macintosh y Linux. La versión final se espera para la primera mitad del 2010. Betas públicas para Google Android and Symbian OS se esperan para los primeros meses del 2010. Adicio-

Flash CS5 pemitirá crear aplicaciones para el iPhone y para el iPod touch desarrolladas con ActionScript 3 las cuales se podrán publicar en el App Store. Se trata de un movimiento muy inteligente que beneficia tanto a Adobe como a Apple dado el creciente mercado del iPhone y de los juegos para este dispositivo..

Flash CS5 compila las aplicaciones en ejecutables nativos para el software iPhone 3.0 y posterior. Aún no habrá Flash Player para iPhone, esto quiere decir por ejemplo que no es posible ver contenido flash en el navegador del iPhone ni reproducir archivos .swf aunque éstos podrán ser cargados dinámicamente por las aplicaciones creadas con Flash CS5 pero no se podrá ejecutar su código AS3 por que el iPhone no tiene una máquina virtual para interpretarlo.

Con ésta aplicaciones es posible: • Recortar, rotar y cambiar de color.

• Aplicación de un efecto de desenfoque artístico con Soft Focus.

• Convertir las fotos a dibujos con Sketch.

• Aplicar efectos tales como Warm Vintage y Vignette.

Como dato curioso, en la primera semana de estar disponible, ésta aplicación superó un millón de descargas convirtiéndose en la aplicación gratuita más descargada del App Store.

Más información: http://bit.ly/ojVJ0

Página 2 magazine

Puedes descargar de forma gratuita gratuita en la App Store el software Photoshop.com Mobile para iPhone con el cual es posible hacer una serie de ediciones en tus imágenes (mediante arrastre de los dedos en la pantalla) y posteriormente ser publicadas en el servicio web www.photoshop.com.

Contenido

Full Screen / Normal

• Flash Catalyst y Flash Builder: Ya puedes descargar la segunda beta pública de Adobe Flash Catalyst y Adobe Flash Builder 4 los cuales son productos que entraron a formar parte de la plataforma Flash. Estas betas están disponibles tanto para mac como para windows. No olvides ver la serie de 3 videotutoriales “Crear un buscador de Twitter con Flash Catalyst y Flash Builder 4” publicados en http://www.tutorialesadobe.com.

• Lightroom 3: Si trabajas con éste software de gestión fotográfica te interesará descargar esta beta que incluye interesantes mejoras en el proceso de importación, las herramientas de enfoque y reducción de ruido, slideshows y publicación de fotos en servicios tales como Flickr.

• Adobe AIR 2: Adobe AIR es el runtime o entorno de ejecución que permite llevar al escritorio nuestras aplicaciones dinámicas desarrolladas en Flash, Flex, Dreamweaver, etc permitiendo tener acceso a recursos del sistema y especialmente prescindir del navegador para ser ejecutadas. Puedes leer más sobre ésta beta en ésta link: http://bit. ly/1B5he3 Estas y otras betas pueden ser descargados en http://labs.adobe.com

www.magazinexpert.com

USER GROUP

Artículo

Artículo

Una mirada al potencial de los juegos en Flash

Es evidente la evolución que han tenido los juegos, pasando por los tipo “arcade” hasta los actuales juegos multi-jugador, multi-nivel, de roles y otras tantas variedades que existen y que se pueden agrupar en los juegos “hard-core” y los juegos tipo “casuales”.

El primer grupo es muy especializado, está orientado a un público específico al que no le teme gastar en consolas y diversos títulos y además hace parte de una industria que genera tanto dinero que ha sobrepasado el nivel de ganancias que genera la industria del cine convirtiéndose en un negocio muy rentable pero que está reservado para las grandes compañías de desarrollo y para aquellos pequeños desarrolladores que han tenido una excelente idea y un oportuno golpe de suerte. Estos juegos hacen uso de las últimas tecnologias en 3D, inteligencia artificial y realidad aumentada por lo cual requieren computadores con una capacidad de procesamiento más alta que el promedio o consolas tales como Xbox (Microsoft) o PlayStation (Sony).

Página 3 magazine

Por otra parte tenemos los juegos tipo “casuales” los cuales si bien tienen un público objetivo menos fiel y constante, corresponden a una inmensa comunidad la cual es imposible pasar inadvertida para cualquier desarrollador que desee monetizar sus juegos. Además de lo numeroso de su público objetivo, éste tipo de juegos se caracteriza por que tienen un bajo nivel de complejidad y duración que permite que sean reproducidos (o jugados) en un amplio rango de computadores los no necesariamente deben tener las más altas prestaciones ni el último sistema operativo; por otra parte su desarrollo requiere poco tiempo pero pueden ser altamente rentables al combinar con prácticas como “advergames”. Dadas éstas características, la Plataforma Flash se convierte en un entorno de desarrollo ideal donde Flash Professional ha tenido un importante protagonismo hasta convertirse en la herramienta para desarrollo de juegos más intuitiva y fácil de usar; no en vano una vasta mayoría de juegos online están desarrollados con ésta aplicación.

Tecnologías que apoyan el desarrollo de juegos con la Plataforma Flash: Flash Player 10.1: Los juegos tipo “casuales” son ejecutados principalmente en el navegador mediante un pc, sin embargo gracias a la popularización de los smartphones, la participación de los teléfonos móbiles como dispositivos de reproducción de juegos es cada vez mayor lo cual abre un nuevo mercado que dejaba por fuera a los desarrolladores de ActionScript 3 que no deseaban aprender Flash Lite. El recientente lanzado Flash Player 10.1 deja a ActionScript 3 como única plataforma de desarrollo para cualquier tipo de dispositivo incluyendo móbiles lo cual acerca a éste nicho los desarrolladores de juegos para computadores de escritorio.

Contenido

Full Screen / Normal

Adobe AIR: La tecnología AIR permite desarrollar juegos que se pueden ejecutar fuera del navegador y que además pueden acceder a recursos del sistema operativo.

Slider o Flex Mobile Framework: Aunque aún se encuentra en estado beta, éste framework permite desarrollar desde Flash Builder para dispositivos móbiles incluyendo el iPhone.

Flash Platform Game Technology Center: Esta no es una tecnología si no un repositorio de información en el sitio web de Adobe sobre desarrollo de juegos con Flash.

En resumen, si eres diseñador o programador, tienes un interesante campo de acción con una alta probabilidad de rentabilidad. Si tienes experiencia en ActionScript 2 te recomendamos hacer la migración a ActionScript 3 y si ya dominas ActionScript 3 tienes buena parte del camino adelantado.

Más información en el magazine Edge de Octobre /2009 (en inglés): http://bit.ly/6KVkZc Acerca del autor: Marlon Ceballos es Adobe Certified Instructor - Design Master, conferencista y consultor Adobe con 15 años de experiencia en diferentes aplicaciones y tecnologías. Dirige el centro de capacitación oficial Adobe (AATC) - Xpert y es manager del Colombia Adobe User Group - AdobeXpert.

www.magazinexpert.com

USER GROUP

Tutoriales

Tutoriales

Qué es Flex Nivel: Básico

Hablar de Flex hoy en día es hablar de todo un movimiento a nivel mundial generado por la web 2.0, sin embargo ese es un término que ya a muchos nos suena del siglo pasado, así que usaré más bien el término RIA (Rich Internet Application), que tiene que ver con aplicaciones que generan una gran experiencia de usuario y que fue acuñado por primera vez por Macromedia hace pocos años.

¿

Qué es Flex? La pregunta correcta es, ¿qué es Flex SDK? y ¿qué es Flex Builder? Cuando la página oficial dice “Flex es un marco de trabajo de código abierto gratuito altamente productivo para la creación y el mantenimiento de aplicaciones web expresivas”, se está refiriendo específicamente al Flex SDK, así que comencemos por ahí.

Seguramente algunos de ustedes no les suene mucho el término “Framework” o “Marco de Trabajo”, la explicación larga la pueden buscar en la Wikipedia, la explicación

Página 4 magazine

corta: un Framework es un conjunto de estructuras básicas que ahorran tiempo cuando se programa, pueden seguir o no patrones de desarrollo y pueden llegar a ser tan buenos o tan malos como sus programadores lo definan. Un caso en la vida real sería tener una orden específico dentro de un equipo de trabajo para realizar determinada labor, por ejemplo, dentro del equipo de trabajo se establece que la orden “crear espacio de trabajo de arquitectura” significa: Abrir el programa X y configurar todos los parámetros básicos que aplican para cualquier proyecto de este tipo y de esta manera empezar a trabajar en un nuevo proyecto específico para un cliente de arquitectura. Con esto conseguimos estandarizar nuestro flujo de trabajo, ahorrarnos mucho tiempo para hacernos entender (esto funciona tanto para los humanos como para las máquinas) y de alguna manera automatizar tareas que son repetitivas y concentrarnos en lo que realmente es importante, el diseño de estas aplicaciones (en todas las áreas).

Flex genera por defecto archivos con extensión .mxml los cuales son compilados (interpretados) por el SDK generando código en ActionScript obteniendo como resultado archivos .swf que como muchos de ustedes saben se reproducen con el Flash Player. En palabras simples, tengo un archivo .mxml, lo compilo con el SDK y el resultante es una película de Flash que puedo reproducir en cualquier escenario donde el Player exista, una página web, un reproductor de escritorio (Adobe AIR), etc.

Luego entra en escena Flex Builder. Esta herramienta propietaria, es decir de licencia comercial, nos facilita enormemente el trabajo con el SDK, nos genera un entorno gráfico que es su mayor utilidad donde se previsualiza la Aplicación 100% de cómo quedaría una vez compilada (esto es magnífico), además de adelantarnos la tarea en

Contenido

Full Screen / Normal

partes de la implementación y al estar creada sobre Eclipse, nos abre la posibilidad a una infinidad de recursos en su mayoría OpenSource para trabajar con otros lenguajes desde el mismo IDE, Java, Php, JavaScript, Html, entre muchos otros.

Es una inversión que definitivamente vale la pena, el costo de la licencia es la tercera parte de la de Flash Professional, se comporta mucho mejor que éste del lado del código ActionScript, actualmente no tiene una buena competencia pero existen y tienden a mejorar. La calidad del SDK (es Open Source) hace que el costo de licencia no pueda ser más alto y le abra las puertas a más desarrolladores que se le midan a hacerle competencia.

De una manera muy sencilla, esto es Flex, una tecnología nueva, innovadora, adaptada a los requerimientos de los desarrolladores Web 2.0, que aprovecha plenamente el poder de ActionScript 3, la ubicuidad del Flash Player y que ha generado un gran movimiento a nivel mundial de desarrolladores y diseñadores de todo tipo, que se duplica cada año y que gana atención e importancia de parte del mismo Adobe y de toda la comunidad de desarrollo de RIA’s a nivel mundial.

Les dejo varios links para que vean a Flex en Acción: Flex.org: Comunidad oficial de Flex, encontrarán entre otros recursos, un directorio de empresas consultoras, componentes, eventos, trabajos y más. flex.org Tour de Flex: Aplicación AIR hecha en flex que permite explorar todos los componentes de Flex junto con otros componentes generados por empresas y miembros de la comunidad. Tour de Flex Flex Showcase: Directorio hecho en Flex de las principales aplicaciones. showcase

www.magazinexpert.com

USER GROUP

Tutoriales

Tutoriales

Finalizo este artículo invitándolos a que prueben esta tecnología, en realidad si han trabajado con otros programas de Adobe podrán quedar cautivados, la versión de prueba es de 60 días, algo importante que no debe pasarse por alto es que la licencia es gratuita para centros educativos y para estudiantes de esos centros educativos (es en serio), bueno, hay mil razones por las que probar Flex y saber por su propia cuenta, ¿qué es Flex?

Todos los frameworks con “Actionscript Framework downloader” Nivel: Avanzado

Acerca del autor: Andrés Rodriguez trabaja desde el año 2001 con la tecnología Flash. Actualmente es desarrollador Flex, director del equipo de trabajo de Sinergy Networks, consultor de empresas y proyectos, blogger e instructor.

El uso de frameworks y librerías de código externas cada vez es más común a la hora de crear aplicaciones web con Flash y sobre todo con Flex. /*AS*/

Estas librerías las debemos descargar (o buscar en nuestro archivo) y colocar dentro de la carpeta de cada uno de nuestros proyectos en los que queramos utilizar dicha librería y esto puede ser un proceso bastante monótono cada vez que empezamos un proyecto nuevo.

“Actionscript Framework downloader” es un plugin para Eclipse creado por Dennis Ippel, que nos permite tener acceso a todos los frameworks y librerías más comunes (el autor actualiza el listado a petición de los usuarios) agilizando el proceso de inclusión de las librerías en nuestros proyectos.

www.xpert.com.co Capacitación certificada Adobe 8136456 - 3016640110 adobe@xpert.com.co

Página 5 magazine

Contenido

La instalación de este plugin dentro de Flash Builder 4 es realmente fácil y rápida (esta instalación sirve de igual manera para Flex Builder 3 o Eclipse). Únicamente deberemos descargaremos el archivo .jar desde éste link: http://www.rozengain.com/files/com.rozengain.eclipse. asframework.jar

Full Screen / Normal

Figura 1. Después de descargar este fichero lo colocaremos dentro de la carpeta de plugins de Flash Builder.

www.magazinexpert.com

USER GROUP

Tutoriales

Tutoriales

Si detectamos que la descarga de ficheros no se realiza es posible que sea por que no tenemos instalado ningún agente de Subversion. Si ese es el caso únicamente deberemos instalarlo. Para ello iremos a la página web de descargas de Subversion y descargaremos el instalador más actual desde éste link:

Después de descargar este fichero lo colocaremos dentro de la carpeta de plugins de Flash Builder (de igual manera lo haríamos para Flex Builder o Eclipse) tal como se ve en la Figura 1.

Una vez instalado el plugin podremos añadir la librería que queramos utilizar en nuestro proyecto haciendo un simple click derecho en la carpeta de destino.

http://subversion.tigris.org/servlets/ProjectDocumentList?fo lderID=8100

Para hacer la prueba crearemos un proyecto nuevo dentro de Flash Builder 4 al que llamaremos “Demo” (el nombre es opcional ).

Una vez creado el proyecto haremos click derecho sobre la carpeta “libs” que es donde colocaremos las librerías y frameworks que pretendemos utilizar (Figura 2). En el menú desplegable veremos que ahora nos parece una nueva opción que nos ha agregado el plugin, la opción “Download Actionscript Framework here” (Figura 3). Como su propio nombre indica, esta opción nos añadirá todos los archivos necesarios para el uso del framework.

Seleccionando esta opción nos aparecerá una ventana emergente donde podemos ver el listado de todos los frameworks y librerías disponibles para agregar (Figura 3).

Podemos ver que la lista es bastante completa y dispone de los principales frameworks, pero si detectamos que no dispone de alguna librería que conocemos, el autor nos permite que le contactemos para indicarle la nueva librería a incluir, y de esta manera tener el plugin lo más actualizado posible.

Seleccionaremos, por ejemplo, el framework Cairngorm y la librería de Adobe AS3Corelib. Dándole al botón de finalizar comenzarán a descargarse los archivos de las librerías y añadiéndose a nuestro proyecto. Podemos ver el proceso desde la consola de Eclipse (Figura 4).

Una vez instalado, repetiremos el proceso y veremos como ahora sí se descargan los ficheros de las librerías en la carpeta seleccionada (Figura 5).

Figura 2. Una vez creado el proyecto haremos click derecho sobre la carpeta “libs”.

Para continuar con el proyecto y utilizar estas librerías, indicaremos desde el menú de propiedades del proyecto que la carpeta “libs” contiene los paquetes de clases que queremos utilizar.

Hecho esto ya tenemos las librerías listas para ser utilizadas (Figura 6).

Figura 3. Listado de todos los frameworks y librerías disponibles para agregar.

Figura 5. Ficheros de las librerías descargados.

En este caso hemos instalado la última versión de Cairngorm en apenas unos minutos sin necesidad de ir a la web original del framework, descargarlo e incluirlo al proyecto manualmente, agilizando así el inicio de nuestros proyectos. Realmente un plugin muy útil y práctico para tener instalado en nuestro programa de desarrollo ya sea Flash Builder 4, Flex Builder 3 o Eclipse.

Para más información puede ir a la web del desarrollador: http://www.rozengain.com/blog/ Acerca del autor: Guillermo de la Iglesia (Zguillez) es diseñador gráfico y desarrollador multimedia. Autor de libros, docente y manager del grupo de usuarios código.

AS el cual se enfoca en la tecnología AIR.

Figura 4. Proceso de descarga de archivos.

Figura 6. Librerías listas para ser utilizadas.

Página 6 magazine

Contenido

Full Screen / Normal

www.magazinexpert.com

USER GROUP

Tutoriales

Tutoriales

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

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 Figura 3.

Inverse Kinematic (IK) Nivel: Intermedio

4. Para ver el resultado simplemente tomas la herramienta Selection (Selección) y arrastras el extremo superior de la estructura que acabas de crear.

Inverse Kinematic es una técnica para generar movimientos realistas a partir de uno o varios elementos enlazados que se mueven de manera relacionada.

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.

U

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).

no 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.

Ahora conoceremos el funcionamiento de la herramienta Bone con símbolos siguiendo estos pasos: 1. Crea un documento nuevo con el tamaño por defecto (550px x 400px).

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

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

Para conocer el funcionamiento de la herramienta Bone con una forma básica seguiremos estos pasos: 1. Crea un documento nuevo con el tamaño por defecto (550px x 400px).

Página 7 magazine

Figura 2. La herramienta Bone (Hueso) permite crear Armatures.

Figura 3. Es posible crear Armatures con base a una forma básica.

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

4. Con la herramienta Bone creas una estructura similar a la que ves en la Figura 4.

Figura 1. Flash CS4 permite trabajar IK mediante Armatures creados con las herramienta Bone (Hueso).

Contenido

5. Para ver el resultado simplemente tomas la herramienta Selection (Selección) y arrastras el extremo derecho de la estructura que acabas de crear.

Full Screen / Normal

Figura 4. Es posible crear Armatures con base a un grupo de símbolos.

www.magazinexpert.com

USER GROUP

Tutoriales

nes) seleccionas Runtime (Tiempo de ejecución) en la opción Type (Tipo) (Figura 5).

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: 1. 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.

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

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

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).

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.

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:

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 Diseño, el trabajoPreprensa, en animaciones o juegos.Impresión, Web, Diseño, Preprensa, F Fotografía, En el próximo número del MagazineXpertDiseño, hablaremos de Preprensa, Fotografía, Impresión, Web, la manipulación de lasDiseño, Armatures con ActionScript 3.

Preprensa, Fotografía, Impresión, Web, Diseño, Preprensa, F Diseño, Preprensa, Fotografía, Impre Si tienes dudas sobre este tutorial te invitamos a publicar Diseño, Preprensa, Fotografía, Impresión, Web, Diseño, Prepre tus preguntas en los foros Xpert: www.xpert.com.co/foros/ Diseño, Preprensa, Fotografía, Impresión, We Diseño, Preprensa, Fotografía, Acerca del autor: Marlon Ceballos es Adobe Certified Figura 5. Al seleccionar RunInstructor - Design Master, conferencista y consultor Diseño, Preprensa, Fotografía, Impresión, Web, time en el panel Propierties, Diseño, Fotografía, Impresión, Web, Diseño, Prepr Adobe con 15 años de experiencia en Preprensa, diferentes aplicaes posible interactuar con el Armature en la película publiciones y tecnologías. Dirige el centro de capacitación Diseño, Preprensa, Fotografía, Impresión, We cada. oficial Adobe (AATC) Diseño, - Xpert y es manager del Colombia Impresión, Web, Diseño, Preprensa, F Preprensa, Fotografía, Adobe User Group - AdobeXpert.

Diseño, Preprensa, Fotografía, Impresión, Web, Diseño, Preprensa, Fotografía, Impresión, Web, Diseño, Preprensa, F Diseño, Preprensa, Fotografía, Impre Diseño, Preprensa, Fotografía, Impresión, Web, Diseño, Prepre Diseño, Preprensa, Fotografía, Impresión, We Diseño, Preprensa, Fotografía, Capacitación Adobe Certificada Online Preprensa, Fotografía, Impresión, Web, Adobe User Diseño, Group Diseño, Preprensa, Fotografía, Impresión, Web, Diseño, Prepr Grupo de usuarios Adobe en Colombia Diseño, Preprensa, Fotografía, Impresión, We http://aug.xpert.com.co

CursoAdobe.com AUTHORIZED

Training Center

CERTIFIED INSTRUCTOR

www.cursoadobe.com

http://www.facebook.com/adobecolombia http://www.twitter.com/adobexpert

magazine

USER GROUP

magazine

1. Seleccionas la capa donde se encuentra la Armature (esta Armature no puede estar animada) y en panel Propierties (Propiedades), bajo el área Options (Opcio-

Página 8

SU EMPRESA DEBE ESTAR PAUTANDO AQUI!

3016640110 - 8136456 email: aug@xpert.com.co www.magazinexpert.com

Contenido

Full Screen / Normal

www.magazinexpert.com

USER GROUP

Tutoriales

Tutoriales

Creando webs para iPhone Nivel: Intermedio

Apple revolucionó el mercado de telefonía, contenido y negocios móviles desde el lanzamiento del primer iPhone allá por el año 2007. Hoy, en su tercera generación del sistema operativo, el navegador web es uno de los productos estrella incluidos con la plataforma y la posibilidad de crear experiencias web para este tipo de dispositivos debe haber pasado por la mente de cada uno de nosotros. Hablemos de algunos mitos que viven en nuestro ambiente y analizaremos su veracidad: Mito 1: Si el iPhone puede leer cualquier página web, ¿para qué molestarnos?

Navegar por la web en un iPhone es realmente un placer comparado con otros equipos móviles. Podemos navegar

Página 9 magazine

sitios web pensados para escritorio, desplazarnos con una hermosa animación, podremos utilizar el zoom inteligente (acercándonos a cualquier párrafo de texto) o directamente el clásico zoom con el gesto de dos dedos acercándose o alejándose.

Entonces, vale la pena hacer un diseño especial para estos dispositivos? Para responder esta pregunta, pensemos un poco en usabilidad. Por más buena experiencia que sea navegar un sitio web de escritorio en un iPhone, un usuario móvil es conceptualmente distinto a un usuario de escritorio. El dónde, el qué, el para qué y el cómo, son distintos y como diseñadores de interfaces tenemos que tenerlo en cuenta.

Normalmente el usuario está en una situación relativamente incómoda, sentado o parado con su equipo en la mano, en movimiento, con una pantalla de 3.5 pulgadas, sin teclas, el cual se está utilizando con una mano (esperemos que no esté conduciendo con la otra!).

Además, es probable que lo que busque el usuario ingresando a nuestra web desde el móvil es información o un servicio específico y rápido.

Por otro lado, ¿qué sucede con el consumo de batería cuando tenemos mucha ejecución de JavaScript y qué sucede con la transferencia de datos y su demora?

Y lo último de este mito… ¿recordamos con qué dispositivo de entrada navegamos en un iPhone? Sí, exacto… ¡con los dedos! ¿Están los tamaños de nuestra interfaz de usuario pensados para ser utilizados con los dedos?

Mito 2: Los usuarios móviles no usan Internet Primero, esta frase es muy genérica. Dejaremos la discusión sobre el tema en cualquier móvil para una futura

Contenido

Full Screen / Normal

nota. Pero si hablamos específicamente del iPhone, veremos que mundialmente estos equipos se venden con planes de navegación casi ilimitados, así como también disponen de conexión inalámbrica WiFi. El usuario de iPhone es extremadamente consumidor de servicios multimedia y todos ellos han navegado por lo menos alguna vez desde sus equipos. Un usuario de iPhone definitivamente sí navega por Internet.

Mito 3: Poca gente tiene un iPhone Es verdad, la penetración del iPhone en el mercado es baja en proporción al mercado total. Peor es la situación si tenemos en cuenta sólo el mercado latinoamericano.

Podemos afirmar que hay varias veces más Nokia N95, por ejemplo, que iPhones en Latinoamérica. No obstante, como vimos en el mito anterior, los usuarios de iPhone son mucho más proclives a navegar por Internet, por lo que si sumamos todos los que navegan con equipos noiPhone es probable que estemos cerca de aquellos que sí usan este sistema operativo.

Recordemos también que exactamente el mismo sistema operativo está también disponible en el iPod Touch donde con conexión WiFi también el usuario podrá navegar por nuestro sitio web.

Mito 4: Los usuarios prefieren las versiones de escritorio a las versiones móviles En algunas estadísticas de navegación web se ha encontrado ese dato. Pero muchas veces se llega a una conclusión errónea acerca del por qué. Pensemos… ¿por qué será? ¿No será que la experiencia de los sitios móviles que estábamos ofreciendo eran muy malas, simples y sin referencia visual con nuestro sitio de escritorio? ¿No será que la gente no está recibiendo la experiencia correcta? ¿No

www.magazinexpert.com

USER GROUP

Tutoriales

Tutoriales

Mito 6: Mis visitantes no usan iPhone

será que siente que la versión móvil, además de móvil es reducida en servicios?

Miremos el sitio de Facebook, cuando navegamos con un iPhone y con el escritorio y notaremos mucha similitud en diseño, colores, y usabilidad respecto a la web de escritorio. Eso es lo que necesitamos crear: mantener la identidad, que los usuarios se sientan en nuestro sitio y no en una versión del siglo pasado en sólo texto como muchas versiones móviles de hoy en día.

En la Figura 1 podemos notar las similitudes de identidad entre la versión escritorio y la versión web para iPhone de Facebook. Esa marcada identidad permite que los usuarios se sientan cómodos con la versión móvil.

Mito 5: Es preferible hacer un sitio para todos los móviles y uno para escritorio.

Error, grave error. Los dispositivos móviles son muy diversos. El iPhone está en una de las categorías más altas en cuanto a experiencia multimedia, compartiendo el podio quizás con equipos Android, Palm Pre o un Nokia N97. Un usuario de iPhone pretende y espera de un sitio web tener una experiencia iPhone, donde tenga una muy buena gráfica sin tener que hacer demasiado desplazamiento, con buenas animaciones y que sea simple de navegar con los dedos. Por ello es muy importante que si vamos a crear una versión para móviles, el iPhone tenga una particular o, en caso contrario, que el iPhone vea la versión de escritorio. Mostrar un sitio básico y sin experiencia iPhone traerá la desilusión de nuestros visitantes.

En la Figura 2 vemos un claro ejemplo de una mala experiencia iPhone. En lugar de esto, es preferible dejar la versión de escritorio.

Página 10 magazine

Figura 1. Notemos las similitudes de identidad entre la versión escritorio y la versión web para iPhone de Facebook. Esa marcada identidad permite que los usuarios se sientan cómodos con la versión móvil.

Si revisamos los logs de nuestro sitio web o si usamos alguna herramienta de seguimiento estadístico, como Google Analytics, seguramente notaremos que poca gente ingresó con iPhone a nuestro sitio web. La cuestión aquí es que estamos en el clásico problema del huevo y la gallina, y quién salió primero. Tal vez no tengamos usuarios móviles en nuestro sitio dado que no tenemos una experiencia móvil preparada ni publicitada. Y nosotros no diseñamos la versión móvil porque no hay usuarios que parezcan usarla. Por ventaja y desventaja, los responsables de romper ese bucle somos nosotros, así que tendremos que diseñar la versión móvil de nuestros sitios aunque al principio no tenga muchos usuarios. Con el tiempo, cuando los usuarios se vuelvan usuarios de Internet móvil, será mejor que ya tengan en mente que nuestro sitio web tiene experiencia móvil a que busquen a la competencia.

Tipos de Webs para iPhone

Figura 2. Este es un ejemplo claro de una mala experiencia iPhone. En lugar de esto, es preferible dejar la versión de escritorio.

Los sitios web, desde el punto de vista del iPhone, se pueden dividir en los siguientes tipos: Sitio web no preparado

VIDEO2BRAIN ofrece a los lectores del MagazineXpert un descuento del 10% en sus productos.

CODIGO: Xpert www.video2brain.com

Contenido

Estos son los sitios web que no han hecho nada por compatibilizarse con el iPhone, pueden ser sitios realizados en Flash parcial o totalmente y tienen funcionalidades importantes no compatibles con este dispositivo.

Sitio web de escritorio compatible Es un sitio web no pensado para móvil, pero sí compatible con el iPhone, ya sea no utilizando Flash o algunas situaciones AJAX, como una organización en DIVs bien manejada que ayuda al trabajo del zoom inteligente.

Full Screen / Normal

Deseas que sigamos publicando este magazine?

Déjanos saberlo publicando un comentario en este post: http:// bit.ly/6Zun9S

www.magazinexpert.com

USER GROUP

Tutoriales

Tutoriales

Sitio web para iPhone Es un sitio web pensado para ser utilizado por el iPhone (y en algunas situaciones por otro smartphone también).

No utiliza zoom, posee ícono preparado para iPhone y está pensado para un usuario móvil.

Figuras 3-6. Aquí vemos un sitio no preparado para iPhone, uno compatible, uno pensado para iPhone y una webapp.

Tú puedes colaborar con el grupo de usuarios Adobe de muchas maneras, por ejemplo puedes proponer y realizar una conferencia de un tema que domines para realizarla en nuestras reuniones presenciales o virtuales, enviar tutoriales para ser publicados en el blog o en el magazine o simplemente ayudándonos a dar a conocer el grupo en tu universidad, empresa, etc.

Webapp o aplicación web A veces difícil de diferenciar con la anterior, una webapp es una aplicación web generalmente sólo compatible con el iPhone por utilizar extensiones propias de Mobile Safari y que emula el comportamiento, visualización y experiencia de las aplicaciones nativas que se instalan en el sistema operativo. También pueden ser agregadas al menú de aplicaciones e incluso pueden trabajar sin conexión a Internet.

En las Figuras 3-6 vemos un sitio no preparado para iPhone, uno compatible, uno pensado para iPhone y una webapp.

Comunícate con nosotros al correo: aug@xpert.com.co

Preguntas de los lectores Figura 3

Figura 4

En próximos números analizaremos cómo crear entonces un sitio web optimizado para iPhone (y tal vez otros dispositivos) desde Adobe Dreamweaver, cómo testearlo y qué librerías existen en el mercado para ayudarnos en este trabajo.

Acerca del autor: Maximiliano Firtman es un destacado desarrollador de dispositivos móviles, hace parte del programa Forum Nokia Champion, conferencista y autor de varios libros. Es director, profesor y fundador de ITMaster Professional Training y Adobe User Group Manager.

magazine

Pregunta: Cómo puedo pasar muestras de degradado desde Illustrator a InDesign para ser reutilizadas?

Respuesta: Actualmente es muy fácil intercambiar muestras de color (Swatches) entre diferentes programas gracias al formato ASE (Adobe Swatch Exchange), sin embargo este formato no incluye las muestras de degradados que pudiéramos necesitar pasar de Illustrator a InDesign. La solución resulta ser mucho más fácil de los que uno se puede imaginar ya que con copiar en Illustrator un elemento que contenga un esfumado y pegarlo en InDesign, la muestra de esfumado aparecerá en el panel Swatches (Muestras).

Envíanos tus preguntas al email: magazine@xpert.com.co

Figura 5

Página 11

Participa con la comunidad Adobe

Contenido

Figura 6

Full Screen / Normal

www.magazinexpert.com

USER GROUP

Comunidades

Comunidades

ADOBE GROUPS Los grupos de usuarios oficiales Adobe son comunidades que reúnen entusiastas de cualquier aplicación o tecnología Adobe para intercambiar ideas y conocimientos. De manera regular éstos grupos ofrecen reuniones y eventos con diferentes temas que enriquecerán tus conocimientos actuales.

Encuentra tu grupo de usuarios más cercano, regístrate en su sitio web y participa de los eventos programados ya sea como asistente o como conferencista donde podrás compartir tus habilidades y conocimientos.

Nombre

Pais

Manager

Sitio web

email

Twitter

AdobeXpert - Colombia AUG

Colombia

Marlon Ceballos

http://aug.xpert.com.co

aug@xpert.com.co

@adobexpert

RIA Ecuador

Ecuador

Michael Borbor

http://www.adobeecuador.com

admin@adobeecuador.com

@mab_bond

BlocketPC - SMAUG

España

Raúl Jimenez

http://www.blocketpc.com

rjimenez@blocketpc.com

@elecash

RIActive

México

Edgar Parada

http://www.riactive.com

info@riactive.com

@riactive

vGroup

Costa Rica

Paul Marcel Salazar

http://groups.adobe.com/groups/803d48d1e5/summary

pmsj@vichitex.com

@vGroupCR

Dreamwever User Group Spain

España

Adrés Cayón

http://www.dwug.es

andres@dwug.es

@ tecnorama

Código.AS

España

Guillermo de la Iglesia http://www.codigoactionscript.org

zguillez@cristalab.com

@ zguillez

ARFUG

Argentina

Maximiliano Firtman

http://www.arfug.com

info@arfug.com

@firt

Girona AUG

España

David López

http://www.davidlopezgamero.com

david@davidlopezgamero.com

@davidlopezg

Si deseas inscribir tu Adobe User Group hispano en éste listado, mándanos la información al email aug@xpert.com.co y nostoros lo publicaremos en el siguiente número.

Página 12 magazine

Contenido

Full Screen / Normal

www.magazinexpert.com

USER GROUP