![Introduccion a adobe flash CS6 [Tutorial]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/16/E1C739C33.png-42-9lTYtnmS.webp "Introduccion a adobe flash CS6 [Tutorial]")
¡Qué tal amigos! En este post conocerán lo básico de
Adobe
Flash CS6
Además aprenderás a crear algunas animaciones (.swf)
Introducción al contenido...
- Acerca de Adobe Flash CS6
- El entorno de Adobe Flash CS6
- Descripción del entorno
- Creación de una animación fotograma a fotograma
- Crear una animación por Interpolación de Movimiento
- Crear una animación de Forma
- Crear un botón ¡y con sonido!
¿Qué es y para qué se utiliza
Adobe
Flash CS6?
El software
Adobe
Flash Professional CS6 es un potente entorno de creación de animaciones y contenido interactivo y expresivo líder del sector. Diseña experiencias interactivas envolventes que se presenten de forma uniforme en ordenadores de sobremesa y múltiples dispositivos, incluidos tablets, smartphones y televisores.
Crea un contenido más atractivo usando extensiones nativas para acceder a las funciones específicas de los dispositivos y crear activos y animaciones que puedan usarse en HTML5.
Crea un contenido más atractivo usando extensiones nativas para acceder a las funciones específicas de los dispositivos y crear activos y animaciones que puedan usarse en HTML5.
Características y novedades de la versión CS6 de
Adobe
Flash
Ofrece nueva compatibilidad con HTML5, Generación de hojas Sprite que mejoran la experiencia lúdica, el flujo de trabajo y el rendimiento. Amplia compatibilidad con plataformas y dispositivos. Creación de aplicaciones con
Adobe
AIR preempaquetado. Simulación de dispositivos móviles de
Adobe
AIR. Orientación a Stage 3D
Requerimientos técnicos para instalar
Adobe
Flash CS6
- Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits
- Microsoft® Windows® XP con Service Pack 3 o Windows 7
- 2 GB de RAM (se recomiendan 3 GB)
- 3,5 GB de espacio disponible en el disco duro para la instalación
- Resolución de pantalla de 1024 × 768 (se recomienda 1280 × 800)
- Java™ Runtime Environment 1.6 (incluido)
- Unidad de DVD-ROM
- Software QuickTime 7.6.6 necesario para funciones multimedia
- Algunas funciones de Adobe Bridge se basan en una tarjeta gráfica compatible con DirectX 9 con al menos 64 MB de VRAM
- Microsoft® Windows® XP con Service Pack 3 o Windows 7
- 2 GB de RAM (se recomiendan 3 GB)
- 3,5 GB de espacio disponible en el disco duro para la instalación
- Resolución de pantalla de 1024 × 768 (se recomienda 1280 × 800)
- Java™ Runtime Environment 1.6 (incluido)
- Unidad de DVD-ROM
- Software QuickTime 7.6.6 necesario para funciones multimedia
- Algunas funciones de Adobe Bridge se basan en una tarjeta gráfica compatible con DirectX 9 con al menos 64 MB de VRAM
El entorno de
Adobe
Flash CS6
Barra de herramientas ....... // ....... Inspector de propiedades
...Capas
![Introduccion a adobe flash CS6 [Tutorial]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/16/refgtr-copia-copia3.jpg-T8e9bfYTf7C.webp "Introduccion a adobe flash CS6 [Tutorial]")
Descripción del entorno
Se denomina "frame" en inglés, a un fotograma o cuadro, una imagen particular dentro de una sucesión de imágenes que componen una animación.
Por ejemplo, esta imagen contiene 12 fotogramas o frames
Una animación no es más que una secuencia de fotogramas reproducidos a una velocidad tan alta que el ojo humano no es capaz de darse cuenta del cambio de una imagen a otra.
FPS (A 24 Imágenes por Segundo): La velocidad de fotogramas, es decir, la rapidez con la que se reproduce la animación se expresa en fotogramas por segundo. Si la velocidad es muy baja, la animación parece detenerse y vuelve a empezar, y si es muy rápida los detalles se ven borrosos. (Se puede modificar la velocidad del fps al gusto)
El fotograma clave vacío
![Introduccion a adobe flash CS6 [Tutorial]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/16/dgre.jpg-8UD38H3UDRu.webp "Introduccion a adobe flash CS6 [Tutorial]")
:
Esta preparado para introducir los objetos que van a estar en el escenario, es vacío por que aún no se le agrega ningún objeto. (Con F7 agregas un fotograma o frame vacío)
El fotograma clave
:
Cuando al escenario se le integra un objeto, el fotograma rellena el circulo que esta dentro de él para indicar que contiene un objeto. (Con F6 haces una copia del fotograma clave)
Información sobre las Capas
Agrega una capa nueva ,Elimina una capa , Oculta una capa
, Bloquea una capa ![Introduccion a adobe flash CS6 [Tutorial]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/16/def-copia-copia.jpg-bYCO1Zui7on.webp "Introduccion a adobe flash CS6 [Tutorial]")
CTRL + G: Agrupa objetos, por ejemplo los botones
ENTER: Reproduce la animación en el escenario de trabajo
CTRL + ENTER: Reproduce en una ventana nueva la animación
F8: Convierte los objetos en símbolos de tipo Gráfico
CTRL + L: Abre la biblioteca (allí aparecerán los elementos que hallamos exportado)
F9: Abre el editor de código (programación)
Creación de una animación fotograma a fotograma 
En el escenario de trabajo dibujaremos algo sencillo como un círculo
veremos el cambio del fotograma clave (con contenido)
veremos el cambio del fotograma clave (con contenido)
Presionamos F6 para que copie el mismo contenido del fotograma clave
hasta el fotograma numero 1O
hasta el fotograma numero 1O
Ahora nos pasamos al fotograma numero dos y modificamos el círculo, le cambiamos el tamaño, el color, etc. y así seguimos con el fotograma 3, 4, 5... modificando hasta el 1O.
Si presionamos CTRL + ENTER se creará la animación .SWF y la mostrará en pantalla. Esta se verá muy rápido por que sólo tiene 1O Fotogramas y la velocidad de reproducción del FPS es 24 por segundo. Si lo modificamos y en vez de 24 ponemos un 5 de velocidad se verá así:
Si presionamos CTRL + ENTER se creará la animación .SWF y la mostrará en pantalla. Esta se verá muy rápido por que sólo tiene 1O Fotogramas y la velocidad de reproducción del FPS es 24 por segundo. Si lo modificamos y en vez de 24 ponemos un 5 de velocidad se verá así:
![Introduccion a adobe flash CS6 [Tutorial]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/16/wdcedr.jpg-0hZQHMaVx4l.webp "Introduccion a adobe flash CS6 [Tutorial]")
Fuente
Crear una animación por interpolación de movimiento 
Agregamos un círculo a nuestro escenario de trabajo, luego seleccionamos el círculo y nos vamos al menú Insertar allí seleccionamos Interpolación de movimiento
si nos pregunta que si queremos convertirlo en símbolo le damos aceptar.
Ahora los fotogramas en automático seran 24 y cambiaran a un color azul,
esto indica que es una animación de movimiento.
Damos clic por ejemplo en el último fotograma (24) y cambiamos la posición del objeto, quedara algo así:
si nos pregunta que si queremos convertirlo en símbolo le damos aceptar.
Ahora los fotogramas en automático seran 24 y cambiaran a un color azul,
esto indica que es una animación de movimiento.
Damos clic por ejemplo en el último fotograma (24) y cambiamos la posición del objeto, quedara algo así:
La línea resultante (color verde) representa la trayectoria del objeto en la escena, cada punto representa un fotograma. Si pulsas la tecla Enter verás la animación
En mi caso la línea verde la hice curva y a la velocidad de FPS le puse 1O
Crear una animación de forma![Introduccion a adobe flash CS6 [Tutorial]](https://storage.posteamelo.com/assets-adonis/assets/2013/04/20/FC5520158-wSaVwVlRYo5.gif "Introduccion a adobe flash CS6 [Tutorial]")
En nuestro escenario de trabajo, dibujaremos nuevamente un círculo: 
luego nos vamos al fotograma 25, clic en él y presionamos F6. Estando en el fotograma 25 borramos el círculo y ahí mismo dibujamos una estrella. Nos vamos a la Herramienta rectángulo y seleccionamos Herramienta PolyStar luego en Propiedades (Panel Derecho) clic en Opciones en Configuración de herramienta, ahí seleccionas estilo estrella y pones el número de lados que desees, aceptas y dibujas 
luego nos vamos al fotograma 25, clic en él y presionamos F6. Estando en el fotograma 25 borramos el círculo y ahí mismo dibujamos una estrella. Nos vamos a la Herramienta rectángulo y seleccionamos Herramienta PolyStar luego en Propiedades (Panel Derecho) clic en Opciones en Configuración de herramienta, ahí seleccionas estilo estrella y pones el número de lados que desees, aceptas y dibujas 
Ahora nos vamos al fotograma intermedio número 13 y le damos clic. Ahora vamos al menú Insertar y le damos a Interpolación de forma. La línea del tiempo cambiara a color verde y tendrá una flecha. En mi caso la velocidad del FPS la puse en 15
Crear un botón ¡y con sonido! 
Comenzamos con un... sí, adivinaron... un círculo 
Seleccionan la herramienta óvalo y antes de dibujarlo se van a las Propiedades cambian el color del trazo y le ponen un trazo de 18, tambien cambian el color del relleno...
Seleccionan la herramienta óvalo y antes de dibujarlo se van a las Propiedades cambian el color del trazo y le ponen un trazo de 18, tambien cambian el color del relleno... Luego seleccionan TODO el botón (asegúrense de que se seleccione el relleno y contorno) Luego presionan CTRL + G esto es para agruparlo. Después damos clic derecho sobre él y seleccionamos Convertir en símbolo... Seleccionamos Tipo botón, le ponemos un nombre y aceptar.
Damos doble clic en el botón y aparecerá en la línea de tiempo los 4 estados del botón. Estado: reposo, sobre, presionado y zona activa. En el estado "reposo" presionamos F6
veces hasta la zona activa.
Nos hubicamos en el estado Sobre (clic en fotograma), ahora seleccionamos el botón y le damos clic derecho y damos en Separar (aparecerá el botón con puntos blancos) seleccionamos sólo el relleno del botón y en color de relleno cambiamos el color
Damos doble clic en el botón y aparecerá en la línea de tiempo los 4 estados del botón. Estado: reposo, sobre, presionado y zona activa. En el estado "reposo" presionamos F6
veces hasta la zona activa.
Nos hubicamos en el estado Sobre (clic en fotograma), ahora seleccionamos el botón y le damos clic derecho y damos en Separar (aparecerá el botón con puntos blancos) seleccionamos sólo el relleno del botón y en color de relleno cambiamos el color
Hacemos lo mismo para la zona de Presionado (selecc el fotograma presionado), luego nos vamos al botón, clic derecho y en separar, luego cambiamos el color de relleno. Ahora agregamos una Nueva capa en Selecc., la Capa 2 y nos vamos al fotograma de presionado, damos clic en él y luego clic derecho e insertamos un fotograma clave
Ahora le agregaremos el sonidito: Nos dirigimos al menú Archivo // Importar // Importar a la biblioteca... y buscaremos el sonidito deseado, luego...
Nos vamos al menú Archivo // Exportar // Exportar película... ponemos un nombre al botón final y guardamos nuestro archivo (.swf) o también podemos probar cómo nos queda, damos doble clic afuera del botón, en el escenario... Así saldremos de la edición del botón y damos CTRL + ENTER.
Así me quedo:
Ahora le agregaremos el sonidito:
Nos dirigimos al menú Archivo // Importar // Importar a la biblioteca... y buscaremos el sonidito deseado, luego...
Nos vamos al menú Archivo // Exportar // Exportar película... ponemos un nombre al botón final y guardamos nuestro archivo (.swf) o también podemos probar cómo nos queda, damos doble clic afuera del botón, en el escenario... Así saldremos de la edición del botón y damos CTRL + ENTER.
Así me quedo:
¡Bonus de botones!
Estos botones como ven ya estan diseñados, lo unico que hice fue convertirlos en boton (obviamente) y agregarles un sonido, mi maestro me dijo que los diseñara por mí, y bueno, como pueden ver el botón anterior que yo hice no se parece nada a estos
¡Comentar es agradecer, gracias por pasar!
Espero haber explicado detalladamente, cualquier cosa manden MP
Espero haber explicado detalladamente, cualquier cosa manden MP
Más aportes en la galería:
¡Saludos!
@izac77
Editado el 29/Ago/16
@izac77
Editado el 29/Ago/16