REDECOMPUTO Fecha:

Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 1 de 34
GUÍA DE APRENDIZAJE

DISEÑO MULTIMEDIAL – EVALUACIÓN FLASH

CONTENIDO

ESTRUCTURA DE INTERACTIVIDAD ENTRE FOTOGRAMAS

CREAR BOTONES INTERACTIVOS
IMPORTAR VIDEO

Diseño Multimedial – Evaluación final de Flash -1-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 2 de 34
GUÍA DE APRENDIZAJE
EVALUACIÓN FLASH CS4

El objetivo central de esta evaluación es descubrir, el nivel de evolución y el grado

de comprensión con las diferentes herramientas de este programa, cuyo resultado
los lleve a la autoevaluación que permita concluir la experiencia acumulada en el
transcurso de estas semanas en flash. Esto sea propicio a la reflexión de que “la
práctica es sin duda el fundamento de todo saber”

ESTRUCTURA DE INTERACIVIDAD ENTRE FOTOGRAMAS

La estructura caracteriza lo más importante en el contenido y distribución de
espacios en el diseño multimedial, agregando elementos multimedia y crear así
nuevos contenidos audiovisuales.

1. En un Documento nuevo, definir las propiedades del escenario, aplicadas en la

siguiente imagen.

Diseño Multimedial – Evaluación final de Flash -2-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 3 de 34
GUÍA DE APRENDIZAJE
2. En la línea de tiempo, insertar una Carpeta de Capas, su propósito es
almacenar y organizar un directorio de capas. Doble clic sobre la carpeta para
modificarlo por el de Contenedor Web

4. Agregar la capa1 dentro de la carpeta Contenedor Web. Arrastrando con clic

sostenido la capa dentro de la carpeta, Con las siguientes imágenes ilustramos el
procedimiento

Capa fuera de la carpeta

Capa dentro de la carpeta

5. Importar a la biblioteca las imágenes de

la carpeta imágenes interactividad que
se utilizaran. La ubicación la dará el
instructor.

Diseño Multimedial – Evaluación final de Flash -3-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 4 de 34
GUÍA DE APRENDIZAJE

6. Insertar en el escenario de la capa1 que se encuentra en la carpeta

Contenedor Web, la imagen con el nombre cabecera

6.1 En las Propiedades de la imagen, ajustar el ancho, alto y la coordenada

mostrados en la ilustración

7. Insertar una nueva capa dentro de la carpeta Contenedor Web

Diseño Multimedial – Evaluación final de Flash -4-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 5 de 34
GUÍA DE APRENDIZAJE
8. Seleccionar la capa 2 en el panel de capas, e insertar al escenario la imagen
con el nombre logoweb.

8.1 En las propiedades ajustar el ancho, alto y las coordenadas de la imagen

siguiente.

9. Crear un símbolo Clip de Película y llamarlo texto

Diseño Multimedial – Evaluación final de Flash -5-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 6 de 34
GUÍA DE APRENDIZAJE
10. En el símbolo texto, escribir el siguiente contenido: DISEÑO GRAFICO
MULTIMEDIA Y PUBLICITARIO. En tamaño 16 y estilo de fuente Arial estilo
Black.

10.1 crear 4 fotogramas claves, seguidos en este símbolo, como se muestra a

continuación.

Diseño Multimedial – Evaluación final de Flash -6-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 7 de 34
GUÍA DE APRENDIZAJE
10.1.2. Seleccionar el fotograma clave numero5 y moverlo con clic sostenido al
fotograma 15.

10.2 En los primeros 4 fotogramas creados, cambiar el color de fuete, Este es un

ejemplo de los fotogramas y el color del texto.

Fotograma1

Fotograma2

Fotograma3

Fotograma4

Diseño Multimedial – Evaluación final de Flash -7-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 8 de 34
GUÍA DE APRENDIZAJE
10.3 En el mismo símbolo texto. Seleccionar el fotograma15 y modificar el texto
por el de. EN REDECOMPUTO SU MEJOR OPCIÓN

10.3.1 Modificar en las propiedades, el color, estilo de fuente y definir en la opción

espacio entre letras cantidad 3, como se muestra en la imagen del panel
propiedades

Este debe ser el resultado

Diseño Multimedial – Evaluación final de Flash -8-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 9 de 34
GUÍA DE APRENDIZAJE
10.3.2. Crear fotograma clave en el 30, modificar el color de texto.

10.4 Crear un fotograma clave, en el fotograma 40 de la mismo símbolo texto, y

modificar el contenido por el de: MATRICULATE YA…

Diseño Multimedial – Evaluación final de Flash -9-

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 10 de
34
GUÍA DE APRENDIZAJE
10.4.1. Teniendo seleccionado el texto, modificar en las propiedades el estilo y
color de fuente, en espacio entre letras digitar 8 y aplicar cursiva.

10.4.2. Crear fotograma normal, en el número 50.

Diseño Multimedial – Evaluación final de Flash - 10 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 11 de
34
GUÍA DE APRENDIZAJE

11. Volver a Escena 1, utilizando cualquiera de las formas posibles

12. Insertar al escenario desde la biblioteca el clip de película texto y ubicarlo en

las siguientes coordenadas del eje Y, X y tamaño W Y H. Dentro de la Capa2.

Diseño Multimedial – Evaluación final de Flash - 11 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 12 de
34
GUÍA DE APRENDIZAJE
CREAR BOTONES INTERACTIVOS

1. Insertar una nueva capa dentro de la carpeta Contenedor Web, oprimir doble
clic sobre la capa para cambiarle el nombre por el de Interactividad.

2. Insertar un rectángulo. Color de relleno degradado azul – negro o el de su

gusto, con las siguientes medidas, ancho 92 y alto 26.

Nota: Solamente ampliar el ancho de este botón a 115. El resto de botones que
se crearan a continuación deben tener las propiedades de ancho (W) y alto (H)
correspondientes a la imagen anterior.

Diseño Multimedial – Evaluación final de Flash - 12 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 13 de
34
GUÍA DE APRENDIZAJE
3. Seleccionar el rectángulo, conviértalo en símbolo de botón. El nombre será
boton1. Y hacer doble clic para entrar a los estados del botón.

3.1. Cambiar el color de relleno en los estados o comportamientos del botón.

Recordemos que para cambiar desde el estado reposo a los demás
comportamientos se crean fotogramas claves.

3.2 Agregar una nueva capa dentro del símbolo boton1 y digitar el texto QUIENES
SOMOS. . Volver a la Escena 1

Diseño Multimedial – Evaluación final de Flash - 13 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 14 de
34
GUÍA DE APRENDIZAJE
5. Crear 3 símbolos más de botón con los nombres (boton2, boton3 y boton4)
con las mismas características de medidas y colores. Idéntico al creado
anteriormente. Deben quedar de la siguiente manera.

6. Acomodarlos en la parte superior cerca del clip de película texto. Cada botón
debe tener las siguientes propiedades de Posición.

Después de crear los botones y ubicarlos en el eje X y Y. Deben versen en el

escenario, como se ilustra en la siguiente imagen.

Diseño Multimedial – Evaluación final de Flash - 14 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 15 de
34
GUÍA DE APRENDIZAJE
7. Seleccionar el fotograma1 de la capa Interactividad, abrir el panel de
ActionScript, digitar stop ( );

8. Cerrar el panel de ActionScript y en el fotograma2 crear un fotograma clave en

la capa interactividad. E insertar la imagen redecomputo del panel biblioteca.
Teniendo seleccionada la imagen asignarle las siguientes propiedades

Diseño Multimedial – Evaluación final de Flash - 15 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 16 de
34
GUÍA DE APRENDIZAJE
9. con la herramienta texto activa y en el mismo fotograma 2 de la capa
interactividad, definir en las propiedades: tamaño de fuente 16, tipo de fuente
Deseado, color negro y justificar en la opción parrafo. Escribir el siguiente
texto.

Diseño Multimedial – Evaluación final de Flash - 16 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 17 de
34
GUÍA DE APRENDIZAJE
9.1 Ubicarlo debajo de la imagen Redecomputo, anteriormente insertada. Como
podemos ver en la imagen anterior.

10. Seleccionar el símbolo de boton1. Abrir el panel de acciones, y digitar el

siguiente código:

12. Crear un fotograma clave en el fotograma3 de la capa Interactividad

Diseño Multimedial – Evaluación final de Flash - 17 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 18 de
34
GUÍA DE APRENDIZAJE
13. En este fotograma eliminar la imagen y texto. Debe quedar de la siguiente
manera el escenario.

14. Insertar en el fotograma 3 de la capa interactividad, 2 imágenes

correspondientes a la Misión y ubicar cada una con las siguientes coordenadas y
tamaños. Hemos elegido unas imágenes sugerirles. Usted puede agregar las que
desee.

Diseño Multimedial – Evaluación final de Flash - 18 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 19 de
34
GUÍA DE APRENDIZAJE

De esta manera debe versa la el fotograma3 de la capa interactividad

15. Escribir el texto que mostramos en la imagen anterior, aplicando las

propiedades.

Diseño Multimedial – Evaluación final de Flash - 19 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 20 de
34
GUÍA DE APRENDIZAJE
17. Si lo desea puede insertar líneas rectas, al lado de cada imagen para adornar
el diseño. Como se muestra en la siguiente grafica.

Diseño Multimedial – Evaluación final de Flash - 20 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 21 de
34
GUÍA DE APRENDIZAJE
18. Seleccionar el fotograma2 de la capa interactividad, luego seleccionar el
boton2. Abrir el panel de acciones. Digitar el código ilustrado en la imagen
posterior. Recuerde que debe digitarlo en Símbolo de boton2

19. insertar un fotograma clave en la misma capa Interactividad. Debe quedar

fotograma4

Diseño Multimedial – Evaluación final de Flash - 21 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 22 de
34
GUÍA DE APRENDIZAJE

20. Eliminar básicamente el contenido de esta capa, sin eliminar los botones. A si
debe quedar el fotograma4

21. Insertar en el fotograma4 de la capa interactividad, las imágenes Visión

deseadas, y modificar las propiedades de cada imagen a gusto.

Diseño Multimedial – Evaluación final de Flash - 22 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 23 de
34
GUÍA DE APRENDIZAJE
22. Si lo desea puede insertar líneas de adorno en el complemento del diseño.
Insertar el texto que mostramos a continuación en la imagen:

Diseño Multimedial – Evaluación final de Flash - 23 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 24 de
34
GUÍA DE APRENDIZAJE
23. Seleccionar el fotograma 3 de la capa Interactividad, después seleccionar el
boton3. Abrir el panel de acciones. Digitar el código que mostramos a
continuación en la imagen

24. insertar un fotograma clave en la misma capa Interactividad. Debe quedar

fotograma 5

Diseño Multimedial – Evaluación final de Flash - 24 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 25 de
34
GUÍA DE APRENDIZAJE
25. Realizar el mismo procesamiento que se ha realizado anteriormente. Eliminar
el texto y las imágenes correspondientes a la visión.

26. Insertar las imágenes de programas deseadas en el escenario del fotograma 5

de la capa interactividad.

Diseño Multimedial – Evaluación final de Flash - 25 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 26 de
34
GUÍA DE APRENDIZAJE
22. Insertar en el fotograma 5 el siguiente texto. En las propiedades elegir tamaño
y estilo de fuente.

23. Si lo desea, puede agregar viñetas a cada uno de los ítems de los programas,
utilizando los botones de las bibliotecas comunes, como se ve en la imagen
anterior.

24. Los botones que utilizamos como viñetas son Oval buttons. Ubicados en la
carpeta Classic buttons > OVals.

25. Insertar el botón al escenario y disminuirle el tamaño, con la herramienta

Transformación libre, luego copiar los suficientes para cada ítem y ubicarlos al
costado izquierdo, como se muestra en la imagen siguiente:

Diseño Multimedial – Evaluación final de Flash - 26 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 27 de
34
GUÍA DE APRENDIZAJE

De esta manera debe verse los componentes del escenario en el fotograma5.

Recordemos que las líneas son opcionales.

Diseño Multimedial – Evaluación final de Flash - 27 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 28 de
34
GUÍA DE APRENDIZAJE

26. Seleccionar el fotograma 4 de la capa Interactividad, después seleccionar el

boton4. Abrir el panel de acciones. Digitar el código que mostramos a
continuación en la imagen

Interactividad Efectiva en Todos los Botones

Para que la interactividad sea efectiva en todos los botones y al pulsarlos

muestren el contenido de cada fotograma, es fundamental e importante digitar el
código de abajo en el número del fotograma donde debe ir. Este procedimiento se
debe realizar en todos los fotogramas y en cada uno de los botones.

on (release) {
gotoAndStop(“numero de fotograma donde debe ir”);
}

Diseño Multimedial – Evaluación final de Flash - 28 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 29 de
34
GUÍA DE APRENDIZAJE
Ejemplo del Fotograma1 y el código de sus diferentes botones.

Fotograma1 – boton1 Fotograma1 – boton2

Fotograma1 – boton3 Fotograma1 – boton4

Diseño Multimedial – Evaluación final de Flash - 29 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 30 de
34
GUÍA DE APRENDIZAJE
Nota: Realizar el procedimiento anterior en cada fotograma y sus respectivos
botones, luego digitar el código escribiendo el número del fotograma siguiente.

IMPORTAR VIDEO AL SITIO WEB

En este guía de evaluación y nota, agregaremos un video como complemento de
la página web, debido a que este tema no lo hemos visto, aquí se muestran todos
los pasos para importarlo.

1. En la carpeta videos de mis documentos encontrara una carpeta con el nombre

VIDEOS FLV. Importarlo al escenario el video requerido en el fotograma1 de la
capa Interactividad.

Nota: El Fotograma1 de la capa Interactividad, quedara como Pagina de inicio

del sitio web.

2. Oprimir siguiente en el asistente que se activa.

Diseño Multimedial – Evaluación final de Flash - 30 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 31 de
34
GUÍA DE APRENDIZAJE

3. Seleccionar en la opción
Aspecto: SteelExternalNoVol.swf
Oprimir siguiente.

Diseño Multimedial – Evaluación final de Flash - 31 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 32 de
34
GUÍA DE APRENDIZAJE
5. En la última ventana oprimir Finalizar. El video se insertara en el escenario.
Recuerde que debe estar en el fotograma 1 de la capa Interactividad. Ajustar las
propiedades de ejes X – Y, ancho y alto, mostrados en la imagen:

6. Después de agregar el video, digitar el texto e inserte la imagen logo rede

nuevo, en el mismo fotograma1

Diseño Multimedial – Evaluación final de Flash - 32 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 33 de
34
GUÍA DE APRENDIZAJE
CREAR BOTÓN PARA ENLACE DE PÁGINA INICIO

1. seleccionar el Fotograma5 de la capa Interactividad. Seleccione el logo de

redecomputo y conviértalo en símbolo botón con el nombre botón 5

3. Hacer doble clic en la imagen del logo redecomputo para entrar a los estados
del botón. Completar los 4 estados.

2. Oprimir en Ecena1 para retornar al escenario.

Diseño Multimedial – Evaluación final de Flash - 33 -

 REDECOMPUTO Fecha:
Versión:
INSTITUTO TÉCNICO CON ENSEÑANZA EMPRESARIAL Página 34 de
34
GUÍA DE APRENDIZAJE
3. Seleccionar el logo que ahora es el símbolo de botón 5. Entrar al panel de
acciones. Digitar el siguiente código:

5. Cerrar el panel de acciones, y en la línea de tiempo crear fotogramas normales

en la capa1 y capa2. Como se muestra en la grafica siguiente:

Con esto hemos terminando la estructura de un sitio web hecho totalmente en

flash. La nota corresponde a la evolución de esta guía considerando que la
interacción entre fotogramas debe quedar como la muestra el instructor en clase.

Diseño Multimedial – Evaluación final de Flash - 34 -