Noticias FG: Nueva sección sobre animación y multimedia

Inauguramos sección sobre Diseño y Programación Multimedia

A partir del día de hoy 23 de julio, la sección anterior destinada a los tuturiales sobre Adobe Flash, llamada "Flash y AS3" ha cambiado de nombre, adecuándose a los nuevos contenidos y funciones que tendrá la misma, pasándose a llamar "Animación y Multimedia" y en la que se publicarán tutoriales y ayudas sobre softwares, plataformas, lenguajes y otros recursos orientados a la creación de aplicaciones multimedia.

Estaremos trabajando entonces sobre temas tales como Flash y Animate (sobre los cuales ya veníamos involucrándonos), JavaScript, Java o Processing, además de otras técnicas y prácticas generales sobre programación, normalmente aplicables a la programación multimedia (creación, manipulación y/o interacción sobre imágenes, sonidos, color y animaciones); la nueva sección ya está disponible bajo la opción "Tutoriales" del menú principal de nuestro sitio, o puedes acceder directamente desde este enlace, donde próximamente comenzarás a encontrar los nuevos contenidos.

Saludos para todos y buen fin de semana!
Plácido Luna.

Publicado en Blog

Animaciones Compuestas en Animate (tutorai básico, parte 2)

Animate: 3 modos de animación anidando clips de película (ii)

Segunda parte del tutorial básico (ver primera parte haciendo click aquí) donde se muestran los modos de animar anidando clips de película usando animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento:

Animaciones Compuestas en Animate (tutorai básico, parte 1)

Animate: 3 modos de animación anidando clips de película (i)

Este tutorial tiene por finalidad orientar al estudiante que se inicia en el uso de Adobe Animate para crear animaciones compuestas básicas usando las líneas de tiempo de clips de película anidadas, donde se crearán, a modo de ejemplo, dos animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento para mostrar dos ejemplos de uso de cada una de éstas formas de animar; debido al caracter introductorio de este tutorial, no nos centraremos en aspectos estéticos, más allá de los mínimos necesarios, ni se utilizarán acciones (sentencias) de AcionScript, para no distraernos de los objetivos finales planteados.

Comencemos entonces:

Cabezal tutorial órbitas en Flash

Interpolación Clasica en Adobe Flash (ii) - Líneas Guía

Este tutorial es la segunda parte de "Interpolaciones Básicas En Flash (I) - Símbolos Y Filtros", por lo que es necesario su previa lectura.

1. Partiendo de ejercicioOrbitas02.fla editaremos la línea de tiempo principal, en la que generamos una nueva capa, llamada Tierra y Luna, sobre la cual construiremos los símbolos y animaciones necesarias para representar de forma muy sintetizada, como decíamos antes, al "Planeta Tierra":

Cabezal Órbitas (i)

Interpolación Clasica en Adobe Flash (i) - Creación de símbolos, efectos de color y filtros.

Esta es la primera parte de una serie de mini-tutoriales de dificulta baja, o media, orientados a explicar una posible forma de crear y anidar símbolos y líneas de tiempos para generar una animación final que permita, de forma muy esquematizada, simular la traslación de la tierra alrededor del sol, mientras la luna orbita alrededor de ella.

En ningún momento se pretende con este ejercicio representar la realidad en forma científica, ni mucho menos, dado que las proporciones y medidas reales agregarían análisis y condiciones adicionales para las cuales este tutorial está pensado. Teniendo en cuenta entonces que, ni las escalas, ni los tiempos usados, ni la forma de las órbitas, ni ningún otro componente pretende tal fin, pongámonos a trabajar en Flash, para lo cual es requerido tener conocimiento previo de velocidad de fotogramas (FPS), tamaño y color del escenario, conceptos de línea de tiempo, fotogramas claves, entre otros conceptos básicos previos.

1. Creamos un nuevo documento en Flash, de 960x400px, con una velocidad de 20 fps (fotogramas por segundo), fondo #000011 (la versión de ActionScript en nuestro caso no importa demasiado ya que no usaremos códigos en este tutorial):

 Cabezal Artículo: Flash: ¿Escenas o Carga de clips externos?

Son muchos los alumnos que cursan materias relacionadas con Flash a los que se les presenta la duda de si utilizar escenas múltiples o carga de clips externos, la respuesta suele variar, de acuerdo a la complejidad, peso total de las animaciones, etc. Por lo general, para clips de películas más o menos complejos, la mejor solución viene de la mano del uso de clips externos, los cuales cargaremos de acuerdo a la necesidad del usuario mientras realiza la navegación por nuestro sitio (los cuales son cada vez menos los realizados con esta aplicación) o aplicación multimedia (ver http://www.formaciongrafica.net/tutoriales-sobre/flash-y-as3/addchild-removechild-cargando-y-descargando-clips-con-actionscript-3). 

Respecto al uso de escenas, Adobe publica en este enlace donde se mencionan varias de las desventajas del uso de este recurso, entre las que se destacan las siguientes:

Tutorial AS3: Aplicar removeChild desde y sobre un clip cargado externamente

AS3: Invocando removeChild desde y sobre un clip cargado en un clip principal

La propuesta en este caso es ofrecer una solución para invocar la sentencia removeChild desde un clip externo, cargado desde las acciones de un clip principal, permitiendo a su vez la carga de un tercer clip a través de addChild sobre el mismo contenedor, usando algunas propiedades de la clase Loader [ver "Carga dinámica de contenido de visualización" en la ayuda oficial de Adobe].

Para esto, usaremos un clip principal, llamado en nuestro caso "navegacionCargasClipsExternos.swf", desde el que, automáticamente, cargaremos al clip externo "cargarJpgExterno01.swf"; luego, a partir de acciones dispuestas tanto en "navegacionCargasClipsExternos.swf" como en "cargarJpgExterno01.swf", descargaremos "cargarJpgExterno01.swf", para inmediatamente cargar otro clip externo llamado "cargarJpgExterno02.swf".

A través de las acciones generadas en los tres clips podremos "navegar", alternando entre "cargarJpgExterno01.swf" y "cargarJpgExterno02.swf". Un uso adecuado de este método nos permitirá generar estructuras lógicas complejas para navegar entre distintos escenarios de información (niveles de un juego, presentaciones multimedia, etc.).


Veamos como se comporta la aplicación, y cuáles son los códigos utilizados:

Precargador usando Flash y ActionScript 3

Tutorial: Precargador sencillo usando Flash y ActionScript 3

Desde la llegada, hace tiempo ya, de AS3, además de todas las ventajas que este lenguaje tiene respecto a su antecesor (AS2) también trajo aparejado cambios importantes al momento de codificar (programar) con él; por lo tanto, los códigos para los indicadores de avances de descargad de datos (ésto es lo que hace en realidad un "precargador"), así que veamos una forma de generar las acciones necesarias para crear un precargador sencillo en Flash, usando ActionScript 3.

Veamos en primer lugar, en la práctica, el funcionamiento de nuestro "precargador":

 

 Abriendo y analizando el .fla del ejemplo, encontramos los siguientes detalles:

En primer lugar, vemos una aplicación que contiene dos capas y dos fotogramas, cada uno de los cuales tiene el código necesario para indicar el porcentaje de descarga, y al propia escena de la animación (en nuestro caso únicamente una fotografía y un texto); las capas están dispuestas para contener los códigos y los objetos del clip:

Capas y fotogramas de la aplicación

Carga de imágenes y clips externos

Tutorial básico Flash: Carga de imágenes y clips externos usando ActionScript 3.

La imagen que vemos a continuación se está mostrando desde un clip realizado en Flash, cuya única función es la de cargar un jpg externo para mostar como realizar este proceso de forma básica (no se incluyen indicadores de descarga ni otros recursos):

Obtener Adobe Flash Player