1. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
COLEGIO HISPANOINGLES
AREA DE TECNOLOGIA E INFORMATICA
TECNOLOGIA E INFORMATICA
GUIA PERIODO No. 03 GRADO: SEXTO BASICO
INTENSIDAD HORARIA SEMANAL: 2 Horas TIEMPO DE DESARROLLO: 10 SEMANAS
DOCENTE: CARLOS ALBERTO SOTO CELIS
Desempeño 1. Reconoce el entorno de trabajo de la aplicación Adobe Flash CS4 (La Interfaz de Flash CS4, La Barra de
Menús, La Línea de Tiempo, Las Capas, El Escenario, Las Vistas o Zooms, Los Paneles Zooms, así funcionan, Escenas,
fotogramas, Tipos y usos), la utilización del sistema de ayuda y cómo reproducir animaciones de este tipo con el
reproductor independiente Flash Player.
REFRESCANDO LA MEMORIA… (PRECONCEPTOS)
¿Qué es la animación?
¿Tipos de animación?
¿Cuáles fueron los principales hitos de la historia de animación?
Consultar: Tex Avery, Joseph Barbera, Walt Disney, Walter Lantz, Chuck Jones, Branden Bird, Borge Ring, Jan Svankmajer,
Henry Selick, Osamu Tezuka, Akira Toriyama, Hayao Miyazaki, Steven M. Lisberger, Andy y Lana Wachowski Brothers,
James Cameron, Steven Spielberg, Tim Burton, Matt Groening, Trey Parker y Matt Stone.
Consultar: Walt Disney, DreamWorks Pictures (SKG), Warner Bros Animation, Pixar Animation Studios, Studio Ghibli, Laika
Inc., Kyoto Animation, Sunrise.
¿Qué es una animación 3D?
¿Cuáles son las fases para la creación de elementos/gráficos 3D?
¿Cuáles son las aplicaciones de software para gráficos en 3D?
¿Qué es Macromedia?
¿Qué es Adobe System Incorporated?
¿Qué es Adobe Flash?
¿Cuáles son las ventajas de Flash?
¿Cuáles son las desventajas de Flash?
¿Qué es ActionScript?
Apple vs. Adobe
Flash vs. HTML 5.0
AMPLIANDO LA PERSPECTIVA Y AFIANZANDO LOS CONOCIMIENTOS
1.- INTRODUCCION A ADOBE FLAHS CS4
¿Qué es Adobe?
Flujo de trabajo general de Flash
Para crear una aplicación Flash, se realizan normalmente los pasos básicos siguientes:
Planificar la aplicación.
Decida las tareas básicas que realizará la aplicación.
Añadir elementos multimedia.
Cree e importe elementos multimedia como imágenes, vídeo, sonido, texto.
Organizar los elementos.
Organice los elementos multimedia en el escenario y en la línea de tiempo para definir cuándo y cómo
aparecerán en la aplicación.
Aplicar efectos especiales.
Aplique filtros gráficos (como desenfoques, iluminados y biseles), mezclas, además de otros efectos especiales
que considere oportunos.
Utilizar ActionScript para controlar el comportamiento.
Escriba código ActionScript para controlar cómo se comportarán los elementos multimedia, incluido cómo
corresponderán los elementos a las interacciones del usuario.
Probar y publicar la aplicación.
Realice pruebas para verificar que la aplicación funciona del modo deseado; asimismo, busque y solucione los
errores que encuentre. La aplicación se debe probar durante todo el proceso de creación. Publique el archivo FLA
como archivo SWF para que pueda mostrarse en una página Web y reproducirse con Flash Player.
2.- ENTORNO DE ADOBE FLASH CS4
2.1.- PANTALLA INICIAL O DE BIENVENIDA
2. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Cuando se ejecuta Flash sin documentos abiertos, aparece la pantalla de bienvenida. Esta pantalla presenta las cuatro
áreas siguientes:
Abrir un elemento reciente. Permite abrir los últimos documentos que se han abierto (haga clic en el icono Abrir).
Crear nuevo. Muestra los tipos de archivo de Flash, como documentos de Flash y archivos ActionScript.
Crear a partir de plantilla. Muestra las plantillas que más se utilizan para crear documentos de Flash.
Extender. Incluye vínculos con el sitio Web de Flash Exchange, desde donde puede descargar aplicaciones auxiliares,
extensiones e información relacionada.
2.2.- PANTALLA PRINCIPAL
2.3.- LINEA DE TIEMPO
La línea de tiempo organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas. Al igual
que en las películas, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de
película apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los
componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora.
Las capas de un documento aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas
contenidos en cada capa aparecen en una fila a la derecha del nombre de la capa. El encabezado de la línea de tiempo
situado en la parte superior de la línea de tiempo indica los números de fotograma. La cabeza lectora indica el fotograma
actual que se muestra en el escenario. Mientras se reproduce el documento, la cabeza lectora se desplaza de izquierda a
derecha de la línea de tiempo.
La información de estado de la línea de tiempo situada en la parte inferior de la misma indica el número del fotograma
seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.
La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.
Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)
3. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo
aparecerá en la película. Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información
sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempo
de película transcurrido (0.0s en la imagen). A nivel conceptual, la Línea de Tiempo representa la sucesión de
Fotogramas en el tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de
tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo.
2.4.- CAPA(S)
El concepto de Capa es fundamental para manejar Flash de forma eficiente. Una Capa se puede definir como una película
independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).
Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es
interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello,
crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de
fácil manejo (es conveniente colocar los el código ActionScript en una capa independiente llamada "acciones", por
ejemplo).
Existen cinco tipos de capas que se pueden utilizar en Flash:
Las capas normales contienen la mayor parte de las ilustraciones en un archivo FLA.
Las capas de máscara incluyen objetos utilizados como máscaras para ocultar partes seleccionadas de capas bajo las
mismas. Para obtener más información, consulte Uso de capas de máscara.
Las capas enmascaradas son las que se encuentran bajo una capa de máscara que se asocia a la capa de máscara.
Únicamente se encuentra visible la parte de la capa de máscara que no cubre la máscara. Para obtener más
información, consulte Uso de capas de máscara.
Las capas de guía contienen trazos que se pueden utilizar para guiar la disposición de los objetos en las demás capas o
el movimiento de las animaciones de interpolaciones clásicas en otras capas. Para obtener más información, consulte
Capas de guía y Creación de interpolación clásica de movimiento a lo largo de un trazado.
Las capas de guía se asocian a una capa de guía. Los objetos de la capa guiada se pueden organizar o animar a lo largo
de trazos en la capa de guía. Las capas guiadas pueden incluir ilustraciones estáticas e interpolaciones clásicas, pero
no interpolaciones de movimiento.
2.5.- EL ESCENARIO
El escenario es un área rectangular en la que se coloca el contenido gráfico al crear documentos de Flash. El escenario del
entorno de edición representa el espacio rectangular de Flash Player o del navegador Web donde se muestra el
documento durante la reproducción. Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la
película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las
Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario
en la que no haya ningún objeto y después sobre Propiedades del documento:
Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de búsqueda rellenando los campos de
Título y Descripción.
Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880
px.
Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora,
Contenidos existentes o los elegidos como Predeterminados).
Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.
Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película.
Unidades de Regla: Unidad que se empleará para medir las cantidades.
Transformar en predeterminado: Este botón, propio de la nueva versión de Flash, permite almacenar las propiedades del
documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas
propiedades por supuesto podrán ser alteradas desde este panel cuando se desee.
4. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
2.6.- BARRA DE HERRAMIENTAS
2.7.- BARRA DE HERRAMIENTAS PRINCIPAL
Desempeño 2. Describe el método de la interpolación de movimiento para crear animaciones en el programa Adobe
Flash, viendo cómo modificar la posición, tamaño, transparencia y otras propiedades en una animación.
AMPLIANDO LA PERSPECTIVA Y AFIANZANDO LOS CONOCIMIENTOS
INTERPOLACION CLASICA
Taller 1. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento…
Modifique la anchura con un valor de 200.
Seleccione la herramienta ovalo. Dibuje una pelota.
5. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Señale el fotograma 1, con los comandos copiar y pegar genere dos fotogramas más.
Haz clic en el fotograma 2. Señale la pelota con la herramienta selección y la mueve hacia abajo.
Haz clic en el fotograma 1. Haz clic con el botón derecho del mouse, en el comando Insertar fotogramas. Lo repite diez
(10) veces.
Haz clic en el fotograma 11. Haz clic con el botón derecho del mouse, en el comando Insertar fotogramas. Lo repite diez
(10) veces.
Haz clic en el fotograma 1, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
Haz clic en el fotograma 11, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
Así debe quedar, las dos interpolaciones.
Presionamos la tecla Enter, para ver la animación.
Taller 11. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones 350x500 px.
Seleccione la herramienta ovalo. Dibuje una pelota.
Convierta el objeto (la pelota) en un Símbolo.
Ubíquese en el fotograma 40 y presione la tecla F6.
Seleccione el objeto y lo baja.
Seleccione el fotograma 1, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
6. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Presionamos la tecla Enter, para ver la animación.
Taller 12. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones 350x500 px.
Seleccione la herramienta ovalo. Dibuje una pelota.
Convierta el objeto (la pelota) en un Símbolo.
Ubíquese en el fotograma 40 y presione la tecla F6.
Seleccione el objeto y lo baja.
Seleccione el fotograma 1, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
Ubíquese en el fotograma 60 y presione la tecla F6.
Seleccione el objeto y lo lleva a la mitad.
Seleccione el fotograma 40, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
Ubíquese en el fotograma 70 y presione la tecla F6.
Seleccione el objeto y lo baja.
Seleccione el fotograma 60, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
Ubíquese en el fotograma 75 y presione la tecla F6.
Seleccione el objeto y lo baja poco.
7. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Seleccione el fotograma 70, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
Ubíquese en el fotograma 80 y presione la tecla F6.
Seleccione el objeto y lo baja.
Seleccione el fotograma 75, haz clic con el botón derecho del mouse, inserte el comando Crear Interpolación Clásica.
Presionamos la tecla Enter, para ver la animación.
Taller 13. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Dibujar una línea. Con un valor de 15 el trazo. Color negro.
Insertar un Fotograma Clave (F6), en el fotograma 38.
Crea una nueva capa (Capa 2).
Dibujar un círculo. Sin color de trazo. Color azul degradado.
Ir Modificar, Convertir en símbolos, nombre: circulo, tipo: clip de película.
En la capa 2, insertar un Fotograma Clave (F6), en el fotograma 30.
Ir fotograma 1, selecciona el circulo y lo sube.
Haga clic con el botón derecho en los fotogramas centrales que hay entre el fotograma 1 al fotograma clave y seleccione
Crear Interpolación Clásica.
En la capa 2, insertar un Fotograma Clave (F6), en el fotograma 32.
Selecciona la herramienta Transformación Libre, clic en el círculo y lo achica del borde superior.
En la capa 2, insertar un Fotograma Clave (F6), en el fotograma 35.
Selecciona la herramienta Transformación Libre, clic en el círculo y lo deja como estaba antes.
Ubique a mitad de camino el círculo.
En la capa 2, insertar un Fotograma Clave (F6), en el fotograma 38.
Baje el círculo contra la línea.
8. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
INTERPOLACION FOTOGRAMA A FOTOGRAMA
Taller 3. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 200x700, Color de fondo: #6699CC, Velocidad de los fotogramas
24.
Ir Archivo, Importar, Importar a escenario…
Haz clic en el fotograma 1, copie el fotograma. Pase al fotograma 2 y pegue, en el fotograma 2 mueva el dragón, y así
sucesivamente.
Presionamos la tecla Enter, para ver la animación.
INTERPOLACION DE MOVIMIENTO
Taller 4. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 200x700, Velocidad de los fotogramas 10.
Seleccione la herramienta ovalo. Dibuje un círculo.
Con la herramienta selección escoja el círculo. Presione el botón derecho del mouse y seleccione Crear interpolación de
movimiento.
Se abre una ventana de dialogo “Convertir selección en un símbolo para la interpolación”, presione Enter.
Haz clic sostenido sobre el círculo y arrastre a una posición nueva el círculo.
Presionamos la tecla Enter, para ver la animación.
INTERPOLACION DE FORMA
Taller 5. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 800x150, Velocidad de los fotogramas 10.
Seleccione la herramienta ovalo. Dibuje un círculo.
Ubíquese en el fotograma 40 y presione la tecla F6.
Ubíquese el fotograma 1,
Pulse la tecla SHIFT en el fotograma 1 hasta el fotograma 40.
Selecciona un fotograma y con el botón derecho del mouse, activamos el menú contextual y seleccionamos “Crear
interpolación de forma”.
Ubíquese en el fotograma 40 y elimine el círculo. Seleccione la herramienta rectángulo. Dibuje un cuadrado.
Presionamos la tecla Enter, para ver la animación.
Taller 51. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 800x150, Velocidad de los fotogramas 10.
Seleccione la herramienta ovalo. Dibuje un círculo de 230x230.
Ubíquese en el fotograma 40 y presione la tecla F6.
Ubíquese el fotograma 1,
Pulse la tecla SHIFT en el fotograma 1 hasta el fotograma 40.
9. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Selecciona un fotograma y con el botón derecho del mouse, activamos el menú contextual y seleccionamos “Crear
interpolación de forma”.
Ubíquese en el fotograma 40 y elimine el círculo. Seleccione la herramienta ovalo. Dibuje un círculo de 100x100.
Presionamos la tecla Enter, para ver la animación.
INTERPOLACION GUIADA
Taller 7. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 800x200, Velocidad de los fotogramas 10, color verde #00FF00.
Ir Barra de menú, Archivo, Importar, Importar a escenario,… saltamontes.gif.
En el fotograma 60 haz clic en el botón derecho del mouse, se abre el menú contextual, seleccione “Crear interpolación
clásica”.
Nos ubicamos en la capa 1, haz clic en el botón derecho del mouse, se abre el menú contextual, seleccione “Añadir guía de
movimiento clásico”.
Seleccione la capa Guía. De la caja de herramientas, señalamos el lápiz y movimiento suave. Realice un trazado para el
saltamontes.
Seleccione la capa 1 y se ubica en el fotograma 60. Señala y arrastra el saltamontes, hasta el final del trazo.
Ocultamos la capa guía.
Presionamos la tecla Enter, para ver la animación.
Taller 71. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 550x400, Velocidad de los fotogramas 24, color verde #00FF00.
Ir Barra de menú, Archivo, Importar, Importar a escenario,… mariposa.gif.
Ubíquese en el fotograma 40 y presione la tecla F6.
Ubíquese en el fotograma 1, haz clic sostenido en la tecla SHIFT y lleva hasta el fotograma 40 y lo suelta. Ubíquese en el
fotograma 1, haz clic en el botón derecho del mouse, se abre el menú contextual, seleccione “Crear interpolación clásica”.
Nos ubicamos en la capa 1, haz clic en el botón derecho del mouse, se abre el menú contextual, seleccione “Añadir guía de
movimiento clásico”.
Seleccione la capa Guía. De la caja de herramientas, señalamos el lápiz y movimiento suave. Realice un trazado para la
mariposa.
Seleccione la capa 1 y se ubica en el fotograma 40. Señala y arrastra la mariposa, hasta el final del trazo.
Ocultamos la capa guía.
Presionamos la tecla Enter, para ver la animación.
10. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
ANIMACION DE TEXTO
Taller 6. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 750x300, Velocidad de los fotogramas 24.
Inserte texto:“HISPANO INGLÉS”, fuente ravie, tamaño 68 pt, color #0033FF.
Ir Barra de menú, modificar, separar.
Ir Barra de menú, modificar, agrupar.
Seleccionar cada grupo y lo convierte en símbolo, Ir Barra de menú, modificar, Convertir en símbolo… tipo gráfico.
Duplicar cinco (5) veces la capa 1.
Renombrar las capas.
11. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Trasladar los fotogramas.
Aplicar F6 en el fotograma 60, e insertar la Interpolación Clásica para cada capa.
Taller 61. Pantalla de Bienvenida, seleccione Archivo de Flash(AS 3.0).
Ir Barra de menú, Modificar, Documento… Dimensiones: 600x400, Velocidad de los fotogramas 25, fondo negro.
Crear tres (3) capas, a cada capa asignarle el nombre: capa 1 bienvenido, capa 2 a, y capa 3 hispano inglés. La capa 4 es de
color negro.
En la capa bienvenido insertar el texto “Bienvenidos!!!”.
En la capa a insertar el texto “a”.
En la capa hispano inglés insertar el texto “Hispano Inglés”.
Bienvenido a Hispano Inglés
Situa (arrastrando) el fotograma de cada capa a los siguientes frames: "bienvenidos": fotograma 10, "a": fotograma 20,
"Hispano Inglés": fotograma 30.
Seleccione el fotograma que ocupa nueve posiciones después del fotograma de cada capa y pulsamos F6 cada vez. En la
capa " hispano inglés " selecciona el fotograma 40 y pulsa también F6.
Haga clic con el botón derecho en los fotogramas centrales que hay entre los fotogramas clave y seleccione cada vez Crear
Interpolación Clásica.
Presionamos la tecla Enter, para ver la animación.
12. INFORMATICA Y TECNOLOGIA
http://SOTOCARLOS.BLOGSPOT.COM CARLOSSOTO@2015
Taller.- SUDOKU.
Las reglas básicas para jugar al SUDOKU son muy sencillas. Tienes que completar todas las casillas existentes, teniendo en cuenta que no
pueden coincidir 2 números iguales en la misma fila o en la misma columna. O sea, que no puedes tener 2 números idénticos en
horizontal y/o vertical. Tan solo puedes rellenar números del 1 al 6.
4 3 2 4 2
4 1 2 5 1 6
1 6 6 4 1 6
3 1 3 1 6 4
4 1 2 3 4 6
2 4 2 3 1
Taller.- MATH.
Trate de llenar los números que faltan. Utilice los números del 1 al 9 para completar las ecuaciones. Cada número sólo se
utiliza una vez. Cada fila es una ecuación matemática. Cada columna es una ecuación matemática. Recuerde que la
multiplicación y división se realizan antes de la suma y resta.
+ * = 12 / * = 28 - * = -47
/ - - + + + - + -
- - = -14 - / = -1 + + = 8
+ * * + * -
* + = 21 * + = 41 - / = 2
= = = = = = = = =
-1 -37 0 18 26 22 10 13 3
Taller.-Puzzle.