SlideShare una empresa de Scribd logo
1 de 15
Diseño de animaciones frame a frame, de forma y de movimiento
Pantalla inicial Al Abrir Adobe Flash CS3, escogemos Flash File(ActionScript 3) en la primera pantalla
Interfaz Despúes de haber seleccionado la opción indicada, nos encontramos con la interfaz básica de flash
Guardar el archivo Ahora procedemos a guardar el nuevo documento de Flash, Lo guardamos con el nombre de Animación1, dentro de una carpeta llamade de igual forma. Cabe anotar que este nombre es una sugerencia, no es de obligatoriedad dar el nombre igual.
Capas y fondo Siempre es recomendable darle nombres al as capas, dependiendo de que va a contener. Esto se logra dando doble click sobre el nombre por defecto de la capa y colocando el nuevo nombre. Despúes de haber dado un nombre a la capa, creamos un fondo parecido al que se puede ver a continuación.
Animación de formas 1 Para iniciar la animación de forma, creamos una nueva capa llamada Forma y bloqueamos la capa Fondo. Luego, dibujamos un circulo en dicha capa al cual le cambiamos el relleno.
Animación de formas 2 Ahora creamos un frame clave y un frame en el frame 20 de las capas Forma y Fondo respectivamente. Para lograr esto, damos click en el frame 20 de la capa Fondo y presionamos F5 y lo mismo para la capa Forma pero con F6. Borramos el círculo de la capa Forma y dibujamos un cuadrado.
Animación de formas 3 Para hacer la animación, damos click en primer frame de la capa forma, y en las propiedades del frame, de la opción Tween(Animación) escogemos Shape(forma). Si hemos hecho todo correctamente, tendrémos algo parecido a la imágen anterior.
Animación de movimiento 1 Para crear la animación de movimiento, insertamos una nueva capa, a la cual llamaremos Movimiento; en ella, insertamos una estrella y la agrupamos, ya que si no está agrupada no se podrá realizar la animación
Animación de movimiento 2 Ahora insertamos un frame clave en el frame 20 de la capa Movimiento y cambiamos la estrella de lugar.
Animación de movimiento 3 Para hacer la animación, damos click en primer frame de la capa Moviemiento, y en las propiedades del frame, de la opción Tween(Animación) escogemos Motion(Movimiento). Si hemos hecho todo correctamente, tendrémos algo parecido a la imágen anterior.
Animación frame a frame 1 Para realizar la animación frame a frame, insertamos una nueva capa y le damos de nombre Frame. En el primer frame colocamos un texto solo con la letra P.
Animación frame a frame 2 Luego, a distancias que se estime, insertamos frames claves y vamos agragando letras al texto, hasta completar PROGRAMACIÓN MULTIMEDIA
Ejecutamos Finalmente ejecutamos la aplicación dando Ctrl+Enter
GRACIAS

Más contenido relacionado

La actualidad más candente (18)

Practica 8
Practica 8Practica 8
Practica 8
 
Tutorial de flash
Tutorial de flashTutorial de flash
Tutorial de flash
 
Fotogramas y animacion
Fotogramas y animacionFotogramas y animacion
Fotogramas y animacion
 
5 2
5 25 2
5 2
 
Máscaras con fireworks
Máscaras con fireworksMáscaras con fireworks
Máscaras con fireworks
 
Tutorial Basico 3 Gfx
Tutorial Basico 3 GfxTutorial Basico 3 Gfx
Tutorial Basico 3 Gfx
 
Practica 16
Practica 16Practica 16
Practica 16
 
Practica 8 macromedia
Practica 8  macromediaPractica 8  macromedia
Practica 8 macromedia
 
Tipos de Animación
Tipos de AnimaciónTipos de Animación
Tipos de Animación
 
Practica 8 "Animar texto por bloques"
Practica 8 "Animar texto por bloques"Practica 8 "Animar texto por bloques"
Practica 8 "Animar texto por bloques"
 
Flash Duban
Flash DubanFlash Duban
Flash Duban
 
Texto en movimiento.dj 8
Texto en movimiento.dj 8Texto en movimiento.dj 8
Texto en movimiento.dj 8
 
Michael
MichaelMichael
Michael
 
Michael
MichaelMichael
Michael
 
Practica 8
Practica 8Practica 8
Practica 8
 
Practica 8
Practica 8Practica 8
Practica 8
 
Relleno autocar
Relleno  autocarRelleno  autocar
Relleno autocar
 
Practica 16
Practica 16 Practica 16
Practica 16
 

Destacado

Elementos de adobe flash
Elementos de adobe flashElementos de adobe flash
Elementos de adobe flash
Joaquin Pecina
 
Animaciones Básicas en flash
Animaciones Básicas en flashAnimaciones Básicas en flash
Animaciones Básicas en flash
blogdevon
 
Software de animación
Software de animaciónSoftware de animación
Software de animación
Anderson Gomez
 
Elementos del programa de diseño flash 5
Elementos del programa de diseño flash 5Elementos del programa de diseño flash 5
Elementos del programa de diseño flash 5
LiZz Gaytán
 

Destacado (18)

Pasos para interpolacion de movimiento
Pasos para interpolacion de movimientoPasos para interpolacion de movimiento
Pasos para interpolacion de movimiento
 
Animacion Basica
Animacion BasicaAnimacion Basica
Animacion Basica
 
Elementos de adobe flash
Elementos de adobe flashElementos de adobe flash
Elementos de adobe flash
 
Animaciones Básicas en flash
Animaciones Básicas en flashAnimaciones Básicas en flash
Animaciones Básicas en flash
 
Adobe dreamweaver Cs3
Adobe dreamweaver Cs3Adobe dreamweaver Cs3
Adobe dreamweaver Cs3
 
Historia de flash
Historia de flashHistoria de flash
Historia de flash
 
Gráficos en Flash CS3
Gráficos en Flash CS3Gráficos en Flash CS3
Gráficos en Flash CS3
 
Historia de flash
Historia de flashHistoria de flash
Historia de flash
 
Adobe Dreamweaver CS3
Adobe Dreamweaver CS3Adobe Dreamweaver CS3
Adobe Dreamweaver CS3
 
El Radiodrama
El RadiodramaEl Radiodrama
El Radiodrama
 
Principios de animación
Principios de animaciónPrincipios de animación
Principios de animación
 
Tecnicas de animación flash
Tecnicas  de animación flashTecnicas  de animación flash
Tecnicas de animación flash
 
Conceptos básicos de arte
Conceptos básicos de arteConceptos básicos de arte
Conceptos básicos de arte
 
Animacion con Flash
Animacion con FlashAnimacion con Flash
Animacion con Flash
 
Software de animación
Software de animaciónSoftware de animación
Software de animación
 
Elementos del programa de diseño flash 5
Elementos del programa de diseño flash 5Elementos del programa de diseño flash 5
Elementos del programa de diseño flash 5
 
PLANEACION Politicas y reglas
PLANEACION Politicas y reglas PLANEACION Politicas y reglas
PLANEACION Politicas y reglas
 
INTERFAZ DE USUARIO DE FLASH
INTERFAZ DE USUARIO DE FLASHINTERFAZ DE USUARIO DE FLASH
INTERFAZ DE USUARIO DE FLASH
 

Similar a Animación básica en Flash (20)

Flashmacro
FlashmacroFlashmacro
Flashmacro
 
Flash 8
Flash 8Flash 8
Flash 8
 
Flash 8
Flash 8Flash 8
Flash 8
 
Manual de Flash Cs6
Manual de Flash Cs6Manual de Flash Cs6
Manual de Flash Cs6
 
Practica 5 de photoshop
Practica 5 de photoshopPractica 5 de photoshop
Practica 5 de photoshop
 
09 Dibujo Vectorial Con Draw. Capas
09 Dibujo Vectorial Con Draw. Capas09 Dibujo Vectorial Con Draw. Capas
09 Dibujo Vectorial Con Draw. Capas
 
Presentación 5
Presentación 5Presentación 5
Presentación 5
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
Presentación practica # 5
Presentación practica # 5Presentación practica # 5
Presentación practica # 5
 
Presentación practica # 5
Presentación practica # 5Presentación practica # 5
Presentación practica # 5
 
Practica 12
Practica 12Practica 12
Practica 12
 
Capas, fotogramas, linea de tiempo
Capas, fotogramas, linea de tiempoCapas, fotogramas, linea de tiempo
Capas, fotogramas, linea de tiempo
 
Guia 3 flash _11_1
Guia 3 flash _11_1Guia 3 flash _11_1
Guia 3 flash _11_1
 
Guia 3 flash _11_2
Guia 3 flash _11_2Guia 3 flash _11_2
Guia 3 flash _11_2
 
Guia 3 flash _11_3
Guia 3 flash _11_3Guia 3 flash _11_3
Guia 3 flash _11_3
 
Iv bimestre a3
Iv bimestre a3Iv bimestre a3
Iv bimestre a3
 
Práctica 8
Práctica 8Práctica 8
Práctica 8
 
Técnicas avanzadas y capas de ajustes
Técnicas avanzadas y capas de ajustesTécnicas avanzadas y capas de ajustes
Técnicas avanzadas y capas de ajustes
 
Tecnicasavanzadasycapasdeajustes
TecnicasavanzadasycapasdeajustesTecnicasavanzadasycapasdeajustes
Tecnicasavanzadasycapasdeajustes
 

Más de Jaime Hernández (8)

Diseño de videojuegos basado en mda
Diseño de videojuegos basado en mdaDiseño de videojuegos basado en mda
Diseño de videojuegos basado en mda
 
Tipos de videojuegos
Tipos de videojuegosTipos de videojuegos
Tipos de videojuegos
 
El sonido en flash con action script 3
El sonido en flash con action script 3El sonido en flash con action script 3
El sonido en flash con action script 3
 
POO y AS3
POO y AS3POO y AS3
POO y AS3
 
Mover Con Click
Mover Con ClickMover Con Click
Mover Con Click
 
Lineas Aleatorias
Lineas AleatoriasLineas Aleatorias
Lineas Aleatorias
 
Crear circulos II
Crear circulos IICrear circulos II
Crear circulos II
 
Navegando por contenidos
Navegando por contenidosNavegando por contenidos
Navegando por contenidos
 

Último

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 

Animación básica en Flash

  • 1. Diseño de animaciones frame a frame, de forma y de movimiento
  • 2. Pantalla inicial Al Abrir Adobe Flash CS3, escogemos Flash File(ActionScript 3) en la primera pantalla
  • 3. Interfaz Despúes de haber seleccionado la opción indicada, nos encontramos con la interfaz básica de flash
  • 4. Guardar el archivo Ahora procedemos a guardar el nuevo documento de Flash, Lo guardamos con el nombre de Animación1, dentro de una carpeta llamade de igual forma. Cabe anotar que este nombre es una sugerencia, no es de obligatoriedad dar el nombre igual.
  • 5. Capas y fondo Siempre es recomendable darle nombres al as capas, dependiendo de que va a contener. Esto se logra dando doble click sobre el nombre por defecto de la capa y colocando el nuevo nombre. Despúes de haber dado un nombre a la capa, creamos un fondo parecido al que se puede ver a continuación.
  • 6. Animación de formas 1 Para iniciar la animación de forma, creamos una nueva capa llamada Forma y bloqueamos la capa Fondo. Luego, dibujamos un circulo en dicha capa al cual le cambiamos el relleno.
  • 7. Animación de formas 2 Ahora creamos un frame clave y un frame en el frame 20 de las capas Forma y Fondo respectivamente. Para lograr esto, damos click en el frame 20 de la capa Fondo y presionamos F5 y lo mismo para la capa Forma pero con F6. Borramos el círculo de la capa Forma y dibujamos un cuadrado.
  • 8. Animación de formas 3 Para hacer la animación, damos click en primer frame de la capa forma, y en las propiedades del frame, de la opción Tween(Animación) escogemos Shape(forma). Si hemos hecho todo correctamente, tendrémos algo parecido a la imágen anterior.
  • 9. Animación de movimiento 1 Para crear la animación de movimiento, insertamos una nueva capa, a la cual llamaremos Movimiento; en ella, insertamos una estrella y la agrupamos, ya que si no está agrupada no se podrá realizar la animación
  • 10. Animación de movimiento 2 Ahora insertamos un frame clave en el frame 20 de la capa Movimiento y cambiamos la estrella de lugar.
  • 11. Animación de movimiento 3 Para hacer la animación, damos click en primer frame de la capa Moviemiento, y en las propiedades del frame, de la opción Tween(Animación) escogemos Motion(Movimiento). Si hemos hecho todo correctamente, tendrémos algo parecido a la imágen anterior.
  • 12. Animación frame a frame 1 Para realizar la animación frame a frame, insertamos una nueva capa y le damos de nombre Frame. En el primer frame colocamos un texto solo con la letra P.
  • 13. Animación frame a frame 2 Luego, a distancias que se estime, insertamos frames claves y vamos agragando letras al texto, hasta completar PROGRAMACIÓN MULTIMEDIA
  • 14. Ejecutamos Finalmente ejecutamos la aplicación dando Ctrl+Enter