Cómo crear prototipos en Flash CS3

Usted no tiene que ser un experto en Flash para crear prototipos. La flexibilidad del programa permite la creación de prototipos con un conocimiento limitado de ActionScript 3. El prototipado rápido ayuda a los usuarios a visualizar el producto final. Flash le permite crear prototipos de fidelidad variable (grado de seguimiento del prototipo se parece al producto final), por lo que es fácil de actualizar capas interactivas y conceptos de diseño de estructuras alámbricas, simples a los diseños detallados terminados.

Instrucciones

Preparación

1 Crear imágenes que representan las pantallas y los estados requeridos, utilizando un programa como fuegos artificiales, Photoshop o Corel. La fidelidad de las imágenes pueden verse en cualquier lugar de alambre de diseños visuales (ver referencia 2).

2 Open Flash y haga clic en "Archivo", luego haga clic en "Nuevo" y luego haga clic en "Archivo Flash (ActionScript 3.0)" en el menú que se abre. Haga clic en "Ventana" en el menú principal, luego haga clic en "Propiedades" y haga clic en "Propiedades" de nuevo en el menú desplegable. Tipo "de 1024px" en el campo "W" y "768px" en el campo "H".

3 Guarde el archivo haciendo clic en "Archivo" en el menú principal, haga clic en "Guardar como", escribiendo un nombre (como "proto") y haciendo clic en "Guardar".

4 Importe sus imágenes haciendo clic en "Archivo", luego clic en "Importar" y luego haciendo clic en "Importar a biblioteca." Vaya a donde sus imágenes se haga clic en "Abrir". Si las imágenes están en secuencia, Flash importará automáticamente como fotogramas clave sucesivos en la capa seleccionada en ese momento; de lo contrario se tendrá que añadir fotogramas clave haciendo clic derecho en el marco, a continuación, hacer clic en "Insertar fotograma clave" en el menú desplegable de salida para cada imagen (véase la referencia 3).

5 Nombre de la capa "Wire" haciendo doble clic en "Nivel 1" y presionar "Enter" en su teclado. Añadir fotogramas clave entre imágenes en la línea de tiempo haciendo clic en el primer fotograma clave y pulsando la tecla "F5" en el teclado en cuatro ocasiones (ver referencia 2).

6 Dé a sus nombres de cuadros de imagen haciendo clic en "Ventana" en el menú principal, a continuación, hacer clic en "Propiedades" y luego haciendo clic en "Propiedades" de nuevo en el menú desplegable. Con un cuadro de imagen resaltado, escriba el nombre de la imagen en el campo "Etiqueta de fotograma". Repita este proceso para el resto de imágenes (ver referencia 2).

7 Crear una nueva capa haciendo clic en "Insertar capa" en la parte inferior de la línea de tiempo y nombrarlo "AS3." Haga clic en el fotograma 1 de la capa "AS3", a continuación, haga clic en "Acción" en el menú desplegable. Escriba el siguiente código:

detener();

(Ver referencia 2.)

Botón

8 Haga doble clic en "Color de relleno" en la barra de herramientas, haga clic en "Ninguno" para el color (que será la caja con una línea roja en diagonal). "Color del trazo" en la barra de herramientas e introduzca un valor de "3" para "Stroke Altura", a continuación, haga clic en cualquier color (ver referencia 2) Haga doble clic.

9 Haga clic en la herramienta "Rectángulo" en la barra de herramientas y, mientras mantiene pulsado el ratón, arrastre a través de la etapa para dibujar un rectángulo. El rectángulo debe ser un tamaño adecuado para las zonas seleccionables. Haga clic en la herramienta "Rectángulo", a continuación, en el menú principal haga clic en "Modificar", haga clic en "Convertir en un nuevo símbolo" en el menú desplegable. Haga clic en el cuadro radial "botón" y el tipo de "Button_btn" para el nombre (ver referencia 2).

10 Haga doble clic en el botón para entrar en su línea de tiempo. Haga clic en el fotograma con la etiqueta "Hit" y elegir la opción "Insertar fotograma clave." Cambiar el color del botón. Haga lo mismo para "Over". Eliminar el color de "Up". Esto le dará un botón invisible que será resaltado cuando el usuario pasa el ratón sobre ella. Haga clic en "Escena 1" en la parte inferior de la línea de tiempo para salir de la línea de tiempo del botón. Eliminar el botón de la etapa (ver referencia 2).

11 Crear una nueva capa haciendo clic en "Insertar capa" en la parte inferior de la línea de tiempo, y el nombre de la nueva capa de "botones". Insertar fotogramas clave en la capa de "botones" en los mismos números de tramas como las imágenes de la capa de "Wire" (ver referencia 2).

12 Arrastre un "botón" de la biblioteca y colocarlo en el escenario. Haga clic en "Ventana" en el menú principal, luego haga clic en "Propiedades" y haga clic en "Propiedades" de nuevo en el menú desplegable. Con el botón aún resaltada, introduzca un nombre de instancia única, como el nombre de la página que va a navegar, por ejemplo, "page1_btn" (ver referencia 2).

13 El fotograma 1 de la capa "AS3" botón derecho del ratón, a continuación, haga clic en "Acción" en el menú desplegable. Escriba el siguiente código, sustituyendo "page1" para sus nombres de etiqueta de fotograma:

page1_btn.addEventListener(MouseEvent.CLICK, onPage1, false, 0, true);

función onPage1 (evt: MouseEvent): void {

gotoAndStop ( "page1");

}

14 Repita el proceso para otras páginas.

Consejos y advertencias

• Al crear imágenes, rejillas y guías de uso para garantizar una interacción fluida. Si las imágenes no están alineadas habrá un "nerviosismo" para la navegación. Añadir llamadas a las imágenes como "Ir a la página X."
• Añadir identificadores únicos de páginas por lo que si un número de página cambia usted será capaz de páginas de grupo correspondiente.