Diseña una aplicación interactiva utilizando las herramientas generales de animación y programación de Flash.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Diseña una aplicación interactiva utilizando las herramientas generales de animación y programación de Flash."

José Ramón Carrizo Miguélez
hace 8 años
Vistas:

1 COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GRADO DECIMO PLANEACION PERIÓDICA CUARTO BIMESTRE DOCENTE: MÓNICA LILIANA ARENAS VEGA Logro Diseña una aplicación interactiva utilizando las herramientas generales de animación y programación de Flash. Indicadores de logro: Reconoce procedimientos básicos de programación y las aplica a la realización de banners publicitarios. Identifica las características de un logo y lo aplica en la publicación de la aplicación interactiva. Distingue los requerimientos para subir una aplicación Flash a una página web. Diseña con creatividad logos y banners que le dan la presentación final a una aplicación interactiva. Realiza procedimientos lógicos respetando la sintaxis de la programación básica de Action Script 2.0 Aprovecha el tiempo y optimiza el uso de las herramientas de flash Cs5 Es recursivo y creativo en el diseño de una aplicación interactiva. Contenidos: PANTALLAS PARA EL USUARIO FINAL 1. Presentación Instrucciones y créditos. 2. Publicación de las aplicaciones.

2 GUIA DE APOYO PARA EL ESTUDIANTE COLEGIO AGUSTINIANO CIUDAD SALITRE OBJETIVO: Concluir los procedimientos para finalizar una presentación interactiva en Flash, que pueda ser publicada. PANTALLAS PARA EL USUARIO FINAL 1. Presentación-Instrucciones y créditos A. PUBLICIDAD DE LA APLICACIÓN INTERACTIVA: Para iniciar con la publicidad y presentación de nuestro juego empezaremos con el logo: Qué es un logo? Es un elemento gráfico que identifica a una entidad pública y privada, en este caso representara tu marca de la aplicación interactiva realizada en el tercer periodo, es decir, del juego. Para ello es importante que tengas claro las siguientes características: 1. Debes ser consciente de lo que representa un logotipo y de la importancia que tiene. 2. Un logotipo debe ser simple 3. Un logotipo debe ser memorable 4. Un logotipo debe ser atemporal 5. Un logotipo debe ser versátil 6. Un logotipo debe ser apropiado

3 Qué pasos debes seguir para crear tu logotipo? Empezamos con el proceso de diseño: Una vez que somos conscientes de la importancia que tiene el logotipo y de las reglas que debe cumplir es hora de ponernos manos a la obra, pero no podemos hacerlo de cualquier manera. Diseñar un logotipo requiere un proceso. Búsqueda, análisis y lluvia de ideas Fase de bocetos Digitalización del diseño Revisión del diseño y retoques finales Implementación en el juego y pagina web ACTIVIDAD 1. Realiza el boceto del logotipo de tu aplicación interactiva en papel y lápiz, ten en cuenta las características vistas y lo que quieres mostrar en tu aplicación. DIGITALIZACION Una vez que tenemos claro el mensaje que queremos enviar y hemos plasmado exitosamente el concepto en los bocetos podemos pasar a digitalizarlo en un programa de diseño vectorial, para este periodo haremos uso de programas online que te ayudaran a digitalizar, y del programa Fireworks para dar los retoques finales.

4 ACTIVIDAD 2. Digitalizar el logo en blanco y negro y a color. Ingresa aquí para diseñar tu logo en blanco y negro, se creativo y original, elige el programa que más te guste. Diseño de logo Diseño de logo Guárdalo en Fireworks como BLackLogoApellido y realiza el de color en el editor Fireworks y guárdalo como ColorLogoApellido. Ten en cuenta la Psycologia del Color, a la hora de pensar en el diseño a color de tu logo.

5 Qué es un Banner? Un banner, también conocido como anuncio banner, es un anuncio normalmente rectangular colocado arriba, abajo o en los lados del contenido principal de un sitio web. Al principio los banners eran anuncios con imágenes de texto y gráficos. Hoy, con tecnologías tales como flash, se consiguen banners mucho más complejos y pueden ser anuncios con texto, gráficos animados y sonido. La mayoría de los sitios web comerciales utiliza anuncios tipo banner. Para este periodo, junto al logo realizaremos el banner de la aplicación interactiva, el cual insertaremos posteriormente en el sitio web, para darle presentación a la aplicación. El diseño y animación se realizara en FLASH CS5.

6 PARA ANIMAR EL BANNER UTILIZAREMOS EL PROGRAMA FLASH CS5 RECUERDA EN FLASH SE PUEDE ANIMAR DE TRES FORMAS: Classic Tween (Movimiento lineal, cambio de propiedades) TIPS Al aplicar el Classic Tween tocamos el objeto (Personaje) y observamos la barra de propiedades. Aparece la Opción Color Effect, donde podemos aplicar efectos de degradación, cambio de color sólido, brillo, transparencia. + PARA ROTAR UN OBJETO: En lugar de tocar el objeto, al dar classic Tween, tocamos el Key Frame, es decir, nos ubicamos en el TimeLine, la barra de propiedades cambia y aparece Tweening, con la opción Rotate, el cual me dará la posibilidad de hacer rotar el objeto de un punto a otro, hacia la manecillas del reloj (cw) o en contra de Las manecillas (ccw) Shape Tween (Interpolación de forma) Este movimiento se puede utilizar para dar efectos a los fondos, transformar un texto en otro o una figura en otra

7 Motion Tween (Efecto-Guía o trayectoria) ACTIVIDAD 3-DISEÑO DEL BANNER Realiza EL BANNER publicitario de tu juego en Flash CS5, usando tu logo y escenarios coherentes con tu aplicación interactiva. Usa tu creatividad e inserta sonidos.

8 INSTRUCCIONES Y CRÉDITOS Antes de publicar el juego en el sitio web debes tener la intro con sus respectivas instrucciones y creditos en escenas distintas y con acceso directo para el usuario (botones)

9 ACTIVIDAD 4 Inserta la portada animada en la primera escena de tu juego, junto al logo y los créditos en la última escena, en donde incluirás nombre, curso, colegio y año. NOTA: Es indispensable el uso de botones para conectar las escenas y niveles.

10 2. Publicación de las aplicaciones. OJO Antes de publicar verifica que tus objetos no estén fuera del escenario (stage), si están por fuera aumenta el tamaño del stage en el panel de propiedades -size, en la publicación solo se verá lo que este dentro del stage. AJUSTA TU ANIMACIÓN Y JUEGO

11 Por lo general cuando se publica una película en Flash, se hace en una página web. Para ello se requieren 2 cosas. 1. Crear un archivo SWF 2. Para visualizar las aplicaciones se debe tener instalado el Reproductor de Flash CREAR ARCHIVOS SWF Este procedimiento es muy sencillo. Cuando se tiene lista la película o animación, realizamos: Luego se abre la ventana que permite generar el archivo SWF: Ubicación en carpeta Nombre del archivo

12 De esta manera el archivo que tenemos, es ejecutable, es decir, que no se puede modificar. Por otra parte, al visualizar la película, sólo se va a ver lo que se haya trabajado en el área del escenario. Es posible asignar una configuración a este archivo, a través de la ruta File/Publish Setting ACTIVIDAD 5 Crea el archivo SWF de tu banner y juego, guárdalo en tu carpeta correspondiente del cuarto periodo. Con la ayuda de la docente publícalo en una página web. BIMESTRAL DEL PERIODO 1. Constara de dos partes: a. Teórica: Se evaluaran conceptos vistos durante el periodo, a través de un test virtual b. Practica: Exposición del sitio web en donde se evaluaran los elementos vistos durante el periodo: Logo, Banner, Aplicación interactiva terminada con los criterios mencionados. CIBERGRAFIA informaticacacs.jimdo.com Diseño de logotipos, Slideshare Logosea.com. Creador online de logotipos Ejemplos de banner Navegación- Actionscript Entorno General y herramientas básicas EXITOS

Documentos relacionados

COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GRADO UNDECIMO PLANEACION PERIÓDICA CUARTO BIMESTRE DOCENTE : MÓNICA ARENAS VEGA

COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GRADO UNDECIMO PLANEACION PERIÓDICA CUARTO BIMESTRE DOCENTE : MÓNICA ARENAS VEGA Logro Reconoce un ambiente virtual educativo; como medio