15. Flash - Animación, video y sonido

10
79 En esta lección podrás: Y serás competente en: Introducción Flash Animación, video y sonido Lección 7 El diseño de películas y animaciones por computadora empleando parte del desarrollo y secuencia de imágenes o fotografías. A dobe Flash cuenta con recursos muy sencillos y avanzados que forman parte esencial del diseño web. Ello permite desarrollar aplicaciones interactivas tipo multimedia de gran calidad como es el caso de secuencias de fotografías o imágenes. La lección tiene como propósito contar con la experiencia necesaria para desarrollar proyectos tipo WEB más profesionales. Crear y distribuir imágenes en tipo secuencia para utilizarlas en un diseño web.

Transcript of 15. Flash - Animación, video y sonido

79

En esta lección podrás:

Y serás competente en:

Introducción

Flash Animación, video y sonido

Lección

7

• El diseño depelículas yanimaciones por computadora empleandopartedeldesarrolloysecuenciadeimágenesofotografías.

Adobe Flash cuenta con recursos muy sencillos y avanzados queforman parte esencial del diseño web. Ello permite desarrollar

aplicaciones interactivas tipo multimedia de gran calidad como es elcasodesecuencias de fotografías o imágenes.LaleccióntienecomopropósitocontarconlaexperiencianecesariaparadesarrollarproyectostipoWEBmásprofesionales.

Crear y distribuir imágenes en tipo secuencia para utilizarlas en un diseño web.

Pro

ceso

s fu

ndam

enta

les

7Flash

®

80

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

Desarrollo

Desarrollemosunasecuenciadeimágenesde forma básica, para ello te pedimos

seguirlospasos:

Ubica la carpeta llamadaPAISAJES de la carpetade Materiales de tudisco. Abre la carpeta yseleccionalas5imágenes.Después oprime el botón Abrir.

Presentará la ventana Preparando importación,sóloespera2segundos.

Ejecuta el programa deAdobe Flash.

Haz clic en el menúArchivo, seleccionala opción Importar/Importar a biblioteca.

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

7Flash

®

81

Una biblioteca de imágenes es una carpeta que contiene las imágenes que utilizarás para tu proyecto.

EsnecesariocontarconunagaleríaoBibliotecadeimágenes.

Las5imágenesseimportaránalaBibliotecadeFlash.

Para observar la Biblioteca, debes hacer clic en lapestaña de Biblioteca que se encuentra a la derechadelaventanadeFlashenlaseccióndelospaneles de trabajo.

Dirígete a las imágenes alojadas en el paneldeBiblioteca. Con el ratón haz clic sobre laprimeraimagenyarrástralaaláreadeEscena.

Ahoraesnecesarioreajustareltamañodelaimagenaloslímitesdelazonadetrabajo.Paraello:

HazclicenelíconodeHerramienta Transformación libre (Q) delabarradeherramientas.

Pro

ceso

s fu

ndam

enta

les

7Flash

®

82

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

Terminados los pasos anteriores, selecciona el área detrabajo de la Escena. Para hacerlo, primero haz clicen el ícono Herramienta selección (V) de la barra deherramientas.Después dirígete a la imagen en una de sus esquinas yoprimeelbotónizquierdodelratón,nolosueltes,ydeslízaloalrededordelaimagen.

Al terminaresteproceso,notarásunfino recuadroazulalrededordelEscenariocomosemuestraacontinuación:

Oprimelateclade[Alt]y,sinsoltarla,ajustaeltamañodelaimagendandoclicsobrelosnodosdelcontornoyarrastrándoloshastadejarlaimagenaltamañodeseado.

Ahora,coloca la siguiente imagen encimade la anterior yrepitelospasosanteriores.Hazlomismocontodaslasdemásimágenes.

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

7Flash

®

83

Ahora, con el botón derechodel ratón haz clic sobre laimagen, se presentará unmenú y deberás elegir laopción Distribuir en capas.

EliminalaCapa1quenousaremos.Para hacerlo, haz clic con el botónderecho encima de la capa queeliminarás, se presentará un menúdonde deberás eligir la opciónEliminar capas.

Enlalíneadeltiemposeanexarán 5 capas condistintocolor.

Ahorareacomodaremoslascapasparaquequedendelasiguienteforma:

Pro

ceso

s fu

ndam

enta

les

7Flash

®

84

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

Parahacerlo:

Cadacuadroqueformapartedelalíneasepondrádecolorazul.

Comencemoselprocesodesecuencia:

Observa la imagen, y notarás que el cuadro seleccionado es el que está justo después del punto negro.

Oprime el botón izquierdo del ratón, mantenlooprimido y arrastra la capa seleccionada a lanueva posición al final. Aparecerá una líneanegra que te indica en dónde vas a colocar lacapa.Sueltaelbotóndelratón.

Realiza lomismocon todas lacapashastaquequeden como se mostró en la imagen de lapáginaanterior.

ColocaelpunterodelratónenelsegundocuadrodelaregladelaLínea del tiempodelaprimeracapallamadaPhoto1.

Haz clic sobre el cuadro que acabas demarcar y no lo sueltes,arrastra el ratón hacia la derecha de laLínea del tiempo hastallegaralnúmero25delareglaysueltaelbotón.

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

7Flash

®

85

Coloca el ratón en el últimocuadritoazulmarcadoyoprimeelbotónderecho;sepresentaráun menú y deberás elegirConvertir en fotogramas clave.

Terminados los pasos anteriores, sepresentaráenlalíneadeltiempopuntitosnegros en los cuadritos; estos indicanel tiempo de duración del fotograma enproceso,queseráde25milisegundos.

Terminado el proceso, con la barra dedesplazamiento recorre la Línea del tiempohastasuinicio.

Estandoenelprincipiohazclicenelnúmero1dela regla de medición de tiempo;severáunalíneaverticalenrojollamada indicador de secuencia de tiempo mostrandoeliniciodelaescena.

Ahora haremos lo mismo conlas siguientes capas, sóloque el tiempo de cada una seincrementará de 25 en 25; esdecir:-lasegundacapallegaráa50,-laterceraa75-lacuartaa100-laúltimaquintacapaa125.

Pro

ceso

s fu

ndam

enta

les

7Flash

®

86

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

GuardatuproyectoentumemoriaUSBconelnombreAnimación yextensión.SWF

Ejecutael ícono Reproduciryobserva lasecuenciade imágenes.Alfinalizar, lalíneaencolorrojo(indicador de secuencia de tiempo)quedaráenelnúmero125,comofindelasecuenciadefotogramas.

Llegóelmomentodecrearnuestrapelícula.En los temasanterioreshablamossobre losarchivoscuyaextensiónson (.SWF) yqueseutilizanparavisualizargráficosvectorialesyanimacionesmultimediaenlaweb.Paracrearlapelícula:

Cuando termine de Exportar la Película, guarda la película en tumemoriaUSBconelnombreAnimaciónyextensión .FLA

Cierra Flash.

Finalmente,paracorroborarelfuncionamientodetupelícula,buscaelarchivoAnimacion.SWFyejecútalo.

Recuerda que para crear la película debes dirigirte a Exportar Película en la barra de menú y elegir la extensión que necesites.

Es necesario instalar Adobe Flash Player en losnavegadores de Internet para poder visualizar la granmayoríadevideosmultimedia.

Modificalavelocidaddereproduccióna10 fps.

Hazquesereproduzca indefinidamente. Recuerdaquedeberásmarcarconelratónelrangodefotogramasqueabarcalaanimaciónapartirdedondeinicianhastadondeterminan.

Ani

mac

ión,

vid

eo y

son

ido

Sec

unda

ria 3

7Flash

®

87

ResumenResumen

Una biblioteca es un espacio donde se alojan las imágenes que en un futuro puedan utilizarse.

Las secuencias de imágenes son simplemente una forma ordenada y consecutiva de presentarlas.

La línea del tiempo permite ubicar la posición exacta del fotograma, así como asignarle el tiempo correspondiente a la animación.

Las capas permiten elaborar cualquier tipo de animación o película correspondiente.

Las animaciones pueden convertirse en diferentes formatos para ser vistos o escuchados.

La extensión SWF permite visualizar gráficos vectoriales y animaciones multimedia.

Cuestionario

1.-¿Quéesunasecuenciadeimágenes?

2.-¿Unapelículapuedereproducirseindefinidamente?

3.-¿Paraquéseajustalavelocidaddeunaanimación?

4.-¿QuéextensionespuedecrearFlash?

88

Práctica

Desarrollemosunálbumfamiliar.

•CreaunabibliotecacarpetallamadaFamilia.•Dichabibliotecadeberátenermáximo10fotografíasfamiliares.•EnFlashelaboraunasecuenciadefotografías,recuerdaquetúdeterminaseltiempo.•ExpórtalaenformatoSWF.•PresúmelaatufamiliaysitienesunBlog,súbelotambién,paraquetusfamiliaresyamigoslavean.

Tareas

Investiga sobre otros tipos de formato para grabar secuencias fotográficas.