Ejemplos de diseño web y multimedia > Diseño de una agenda de enlaces

Diseño de una agenda de enlaces: "Portales educativos"

En este ejercicio vamos a crear una película Flash que contenga varios botones. En el navegador se mostrará una URL distinta al hacer clic en cada uno.

1

Clic en Modificar > Documento para definir como tamaño del escenario: 550 px de Anchura por 400 px de Altura. Configura el color negro como fondo del escenario. Clic en el botón Aceptar.
2

Selecciona la herramienta Texto.  En el Inspector de propiedades define previamente el tipo de fuente: Arial, tamaño: 18 y color de la fuente: blanco o amarillo/anaranjado. Escribe en el centro superior del escenario un encabezado con el texto “PORTALES EDUCATIVOS”.
3

Con la herramienta Flecha selecciona este bloque para situarlo en el centro.
4

Archivo> Importar > Importar a escenario . Localiza el archivo mundo.wmf en la carpeta Curso Flash/images . Pulsa el botón Abrir.
5

Para agrupar los elementos editables que forman la imagen: Modificar > Agrupar. Ahora puedes arrastrar el conjunto para situarlo en el centro.
6

Elige Ventana > Otros paneles > Bibliotecas Comunes > Curso. Desde la carpeta Botones> Ovals pincha y arrastra al escenario del documento actual los 5 botones ovalados. Cada uno muestra un color diferente. Cierra la ventana de la Biblioteca común.
7

Ventana > Biblioteca. Ahora sólo aparece la Biblioteca del documento actual. Clic derecho, por ejemplo, sobre el botón Oval buttons-yellow y elige Edición. Entrarás en el modo edición de ese botón.
8

Insertar > Línea de tiempo > Capa para añadir una nueva capa al diseño del botón. Clic derecho en el fotograma Sobre de esa nueva capa y selecciona Insertar fotograma clave.
9

Selecciona la herramienta Texto. En el Inspector de propiedades define las características del texto: Arial, 12 puntos, negrita y color amarillo. A continuación haz clic sobre el escenario, inmediatamente debajo del botón y teclea “EDUCASTUR”. Elige la herramienta Flecha y sitúa este cuadro de texto en una adecuada posición. Edición > Editar documento para abandonar el modo de edición de símbolo.
10

Reitera los pasos 7-9 para el resto de botones ovalados de la Biblioteca: blue (azul) con el texto “CNICE”, green (verde) con el texto “PNTE”, orange (naranja) con el texto “XTEC” y red (rojo) con el texto “EDUCALIA”.
11

Activa la herramienta Flecha.
12

Para alinear los botones, selecciona los cinco a la vez y en Ventana > Paneles de diseño > Alinear haz clic en los botones Alinear verticalmente respecto al centro y Distribuir horizontalmente respecto al centro.

Aspecto final del ejercicio Portales educativos

 
13

Clic sobre el botón amarillo del escenario para seleccionarlo y pulsa la tecla <F9>. Se despliega el panel Acciones - Botón.

14

Introduce el código:

on(release) {
getURL("http://www.educastur.princast.es");
}
15

Repite los pasos 13-14 e introduce una URL según el color del botón:

 Portal  Color  URL
 Educastur      Amarillo  http://www.educastur.princast.es   
 XTEC    Naranja  http://www.xtec.es  
 Educalia    Rojo   http://www.educalia.org  
 PNTE    Verde   http://www.pnte.cfnavarra.es/pnte/  
 CNICE  Azul    http://www.cnice.mecd.es
16

Graba el documento en la carpeta Mis Documentos, por ejemplo, con el nombre portales.fla.
17

Elige Archivo > Publicar para generar los archivos de publicación de Flash.
18 Desde el Explorador de Windows, busca la carpeta Mis Documentos y haz doble clic sobre el documento web portales.html. Se abrirá el navegador y mostrará esta publicación Flash. Prueba que los enlaces funcionan correctamente.
 
Ejercicio resuelto
   

Ejemplos de diseño web y multimedia > Diseño de una agenda de enlaces