Guía Segundo Periodo - colegio agustiniano ciudad salitre

COLEGIO AGUSTINIANO CIUDAD SALITRE
AREA DE TECNOLOGÍA E INFORMATICA – GRADO OCTAVO
PLANEACION PERIÓDICA – SEGUNDO BIMESTRE 2016
Logro
Realiza procedimientos lógicos para programar objetos básicos en Flash, utilizando
Action Script 2.0.
Indicadores de logro:
 Reconocer el entorno de animación de Flash y la ventana de programación de
Action Script.
 Define los elementos básicos de programación básica en Flash: Objetos,
Propiedades Acciones y Operadores.
 Utiliza las herramientas de la ventana de Action Script, estableciendo diferencias
entre los objetos, propiedades, acciones y operadores, al programar Botones y
Movie Clips sencillos.
 Sigue los parámetros establecidos en clase para aprovechar al máximo los
recursos brindados
 Es recursivo en la creación de una animación básica
Contenidos:
PROGRAMACIÓN BÁSICA DE OBJETOS
1. Entorno, definición y creación de Botones y Movie Clips
a. Ventanas de Flash CS5
b. Creación de Botones
c. Creación de Movie Clips
d. Ventana de Action Script
2.
Relación entre Botones y Movie Clips: Propiedades
3.
Cambio de color y apariencia en los objetos
4.
Efectos con el Mouse: Arrastrar - Soltar y Encajar Objetos
EVALUACION BIMESTRAL:
Se programa de acuerdo con el cronograma propuesto por la coordinación académica, en
la hora de clase de Informática.
COLEGIO AGUSTINIANO CIUDAD SALITRE
AREA DE TECNOLOGÍA E INFORMATICA – GRADO OCTAVO
GUIA DE APOYO PARA EL ESTUDIANTE SEGUNDO PERIODO 2016
DOCENTES: ALCIRA CASAS P. – JOSE LUIS SOLANO O.
OBJETIVO: Brindar al estudiante pautas para aplicar procedimientos lógicos de
programación básica, estableciendo interactividad en objetos de Flash de una manera
sencilla
1. Entorno, definición y creación de Botones y Movie Clips
a. Ventana de Flash Cs5
b. Creación de Botones en Flash Cs5
¿QUE ES UN BOTON?
En Flash, es un objeto que tienen 4 estados, y reaccionan ante métodos especiales
Estados
del Botón
Existen diferentes formas de diseñar un botón. Mencionaremos tres básicas:
1. Insertar en la película los botones que el programa trae prediseñados.
Para ellos seguimos los pasos:
a) Nos ubicamos en la capa donde queremos insertar el botón
b) Por el menú Window, buscamos la opción Common Lybraries o Librerías
comunes, donde se encuentra la opción Botones. Al elegirla, se activan
diferentes grupos de carpetas con diversos diseños, donde puedes elegir el de
tu gusto o necesidad.
c) Se arrastra el botón elegido al escenario y al hacer doble clic se abre su propia
línea de tiempo para ser modificada.
2. Crear el botón con las herramientas de dibujo flash.
a)
Primero dibujas el objeto que representará el aspecto por defecto de nuestro
botón con las herramientas que nos ofrece FlashCs5. Por ejemplo:
b)
Dibujas un óvalo
c)
Sobre él escribes un texto
d)
Marcas los dos elementos
e)
Agrupas los objetos del tal forma que quede uno solo. Utiliza (Ctrl+G)
f)
Seleccionaremos el objeto y accederemos al menú Insertar-> Convertir en
Símbolo, ó presionamos la tecla de funciones F8, asignándole el
comportamiento de Botón
VOLVER
Ubica el punto central
3. Convertir una imagen en Botón.
Se importa la imagen a la librería
Se trae a la escena, en un leyer individual
Al igual que en el literal f) del caso anterior: Seleccionaremos el objeto y accederemos al
menú Insertar-> Convertir en Símbolo, ó presionamos la tecla de funciones F8,
asignándole la opción Button.
ACTIVIDAD PROPUESTA
 Crea seis botones (2 de cada procedimiento) que tengan distinta apariencia
en sus estados y guárdalos en tu carpeta.
c. Creación de un Movie Clip en Flash Cs5
¿QUE ES UN MOVIE CLIP?
Es un objeto de Flash que contiene una línea de tiempo interna propia que permite animaciones
independientes.de movimiento.
Cada instancia de un Movie Clip o Clip de película, tiene un nombre único, de modo que es
posible controlarlas a través de acciones.
Para dar las propiedades a un Movie Clip:
a) Primero: Podemos crear un objeto con las herramientas que nos ofrece Flash o puedes
importar una imagen gif o jpj. .
b) Seleccionaremos el objeto y accederemos al menú Insert-> Conver to Symbolo, ó
presionamos la tecla de funciones F8, asignándole el comportamiento de Movie Clip.
De esta forma ya tenemos transformado el objeto para que se comporte como un Movie
Clip.
OJO: El nombre que se pide en esta ventana es el NOMBRE DEL SIMBOLO, pero no el
del objeto que será identificado en la programación.
De igual forma, JAMAS SE DEBE DAR EL MISMO NOMBRE A DOS OBJETOS
Para ambos casos, es muy importante identificar los Botones o MovieClips, ya que
así nos damos cuenta si se están programando correctamente o podemos asignarles
comandos de programación. Esta identificación se da en la ventana de las
propiedades, luego de definir el objeto; en la casilla de “Instance Name”
Nombre del objeto, con el que
se identifica en la programación.
Para los Movie Clip agrega un guión
bajo o “raya al piso” (_) seguida de
las letras mc. Por ejemplo:
cuadro_mc.
Esto es necesario para que se
habiliten las propiedades en la
ventana de programación.
ACTIVIDAD PROPUESTA
 Crea cinco Movie Clips que tengan distintos movimientos internamente y
guárdalos en tu carpeta
d. Ventana de Action Script 2.0
¿PARA QUE SIRVE?
Esta ventana permite que a partir de distintas instrucciones, podamos
controlar y asignar funciones a los objetos, ya sean Botones o Movie Clips.
Barra de Título
Panel de Ayuda
Área de Escritura de Código
El panel de acciones
La Barra de Título de esta ventana, indica en qué objeto estamos programando.
El panel de acciones presenta un listado de todos los código que se pueden ocupar en
Actionscript. Al hacer clic en las carpetas, éstas se abre (tipo explorador de Windows) y al hacer
doble clic en cada código, éste se inserta en él área de programación, con la estructura sintáctica
que le corresponde. Es importante leer y darse cuenta el tipo de datos que debemos agregar.
Área de Escritura de Código:
Aquí se escribe el código de programación para cada objeto.
Es muy importante tener en cuenta la “sintaxis”, para que los objetos realicen las acciones que
queremos.
Panel de Ayuda
De izquierda a Derecha:
Añadidor de nuevos elementos al script (parecido a la zona de la izquierda);
Buscar palabras dentro del Panel;
Buscar y Reemplazar palabras dentro del Panel;
Buscar rutas de destino;
Revisar sintaxis (Muy recomendado para verificar si tenemos mal los códigos)
Organizador de Código
Mostrar consejos sobre códigos (da pistas del código siguiente al cual se está
escribiendo y que pueda ser elegido de forma rápida)
3. Relación entre Botones y Movie Clips: Propiedades.
¿QUE SON LAS PROPIEDADES?
Son las características de los objetos. Existen unas particulares y otras generales:
• alpha: Hace referencia a la opacidad del objeto al que afecte. La opacidad se puede definir
como la no-transparencia. De modo que un 100% de transparencia equivale a un 0 de opacidad,
o a un 0 de alpha.
• height: Devuelve o establece la altura del objeto en píxeles. Por ejemplo, si tenemos un clip de
película llamado "Clip1" y escribimos "Clip1.height" obtendremos la altura de Clip1. Del mismo
modo, podemos cambiarla sin más que hacer: Clip1.height = 100; (la altura del Clip1 pasaría a
ser de 100 píxeles)
• width:Propiedad idéntica a la anterior, pero devuelve o establece la anchura.
• visible: Determina si el objeto está o no visible en nuestra película. Cuando vale 1 o True, lo
está, cuando vale 0 o False, pasa a ser invisible. Es muy útil para hacer desaparecer partes de
una película en un momento determinado. Por ejemplo, si queremos que al pulsar un botón
desaparezca el clip de película llamado "Clip2", haremos esto: .... ... Clip2.visible = 0; ... ....
• x : Con esta propiedad obtenemos o establecemos las coordenadas del objeto respecto del eje
de las X (horizontal). Sirve para averiguar la posición o para asignarla de forma dinámica
(durante la ejecución de nuestra película Flash)
• y: Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las Y
(vertical). Sirve para averiguar la posición o para asignarla de forma dinámica (durante la
ejecución de nuestra película Flash).
• rotation: Con esta propiedad obtenemos o establecemos el giro del objeto, su rotación,
expresado en grados.
• name: Con esta propiedad obtenemos o establecemos el nombre de la instancia.
Para relacionar los Botones con un MovieClip utilizaremos una PROGRAMACION
BASICA CON ACTION SCRIPT 2.0
Veamos un jemplos básico:
CAMBIO DE UN MOVIE CLIP DESDE UN BOTON:
1.
2.
3.
4.
Crea un objeto y lo conviertes en Movie Clip
Asígnale un nombre en su instancia: Por ejemplo cuadro
Crea un objeto y lo conviertes en Botón.
Asígnale un nombre en su instancia: Por ejemplo boton1
Programa en la ventana del Botón: (Activa la ventana de Action Script, utilizando
la Tecla F9)
5. Allí realizas los siguientes pasos
a). Signo +/Global Functions/MovieClip Control/On/ y eliges la opción
(press) o puedes hacerlo con el panel de ayuda así
b). Dentro de los corchetes se escribe la programación, de acuerdo a la siguiente sintaxis:
objeto. _propiedad += “valor”; de tal forma que la programación quedará:
Cambia la posición en x
Cambia la posición en y
Aumenta la transparencia del objeto
Aumenta el ancho del objeto
Aumenta el alto del objeto
Desaparece el objeto
Aparece el objeto
Para depurar los errores solo basta con dar clic en :
Revisar sintaxis: comprobara errores en la sintaxis, normalmente que hayamos olvidado
cerrar paréntesis o corchetes. si encuentra alguno nos mostrara un mensaje como el
siguiente:
ACTIVIDAD PROPUESTA
 Realizar un objeto (carita feliz – carro – casa) que esté compuesta por varios Movie Clips,
y cada parte sea afectada por un botón: Por ejemplo si es la carita feliz
a.) El cabello crezca
b.) Los ojos se reduzcan
c.) La boca desaparezca gradualmente
d.) La nariz gire.
3.
Cambio de color y apariencia en los objetos
a. Cambiar el color a un objeto
Esta es la programación para un objeto que cambia de color cuando se hace clic en un
botón.
Pasos:
1. En el escenario se crean tres elementos y se les
asigna nombres en la instancia :
2. Un Movie Clip llamado cuadro_mc
Dos botones b1 y b2
3. Se crea un layer vacío y se hace clic en el escenario
4. Se activa F9 Ventana de Action Script
5. En él se asigna una variable: En este caso la
llamamos cambio = y activas la opción:
Signo +/Objects/Movie/Color/newColor ()
6. Dentro del paréntesis escribes el nombre del Movie
Clip´, en este caso cuadro_mc. (Esto significa que la
variable “cambio” dará un nuevo color al objeto
cuadro)
.
Ahora en los botones
Se hace clic en el botón b1, se activala ventana (F9) y se verifica que la programación se haga en
Botón (Actions for b1)
Signo +/Actions/MovieClip/On y eliges la opción (press)
En el procedimiento se llama la variable, en este caso cambio. Y se le asigna:
Signo +/Objects/Movie/Color/Methods/ setRGB y se active un paréntesis donde se
cambia el color, escribiendo un cero, por el código (øxNumero del color), (cero-equis
minúscula y numero RGB del color). en este caso (øxFF00cc); es decir cambia el color que tenía el
objeto cuadro por el color magenta.
De la misma forma se programa B2, pero se cambia el código del color magenta por el código del
color verde, es decir (O x 43DB91);
En seguida se ejecuta la película. Y la programación queda así.
ACTIVIDAD PROPUESTA
Diseña un paisaje sencillo y agrega
botones para rellenarlo de color.
b. Efecto Arrastrar Soltar
1.
Crea un objeto y lo conviertes en Movie Clip
2.
Asígnale un nombre en su instancia: Por ejemplo ficha1_mc
3.
Como el Movie Clip tiene una línea de tiempo interna, ingresas a ella y en su
interior conviertes el mismo objeto en Botón.
4.
Asígnale un nombre en su instancia: Por ejemplo bin1
5.
Estando dentro del Botón Activa la ventana de Action Script, utilizando la Tecla F9
6.
Allí realizas los siguientes pasos
a). Signo +/Global Funtion/MovieClipControl/On y eliges la opción (press)
b). Dentro de los corchetes harás la programación:
c). (Se escribe) this. automáticamente se despliega un menú y se escoge
startDrag(); sigues la ruta Signo+/Actions/MovieCliplControl/startDrag();
Se crea una nueva línea de programación, en el mismo botón, luego de cerrarse el
corchete }
d) Creas un nuevo evento Signo +/MovieClipl/On y eliges la opción (release)
e). Dentro de los corchetes harás la programación:
f.) Se escribe this. automáticamente se despliega un menú y se escoge
stopDrag(); sigues la ruta Signo+/Actions/MovieCliplControl/ stopDrag();
para lograr algo como esto:
La programación en
el botón quedará así:
Observa que programes
en el objeto correcto
ACTIVIDAD PROPUESTA
Dibuja las partes de un objeto (ej. una casa) y permite armarla con el efecto Arrastrar
Soltar.
WEBGRAFIA
Curso de Flash Cs5
http://www.aulaclic.es/flash-cs5/index.htm/
Manual Programación Básica. Action 2.0
http://www.tutoriales-flash.com/tutoriales-flashAS2-0.php
C ó d i g o s F l a s h y Ac t i o n S c t r i p t
http://www.flash.astalaweb.net .
Manual: Uso de ADOBE FLASH PROFESSIONAL CS5 & CS5.5
http://help.adobe.com/es_ES/flash/cs/using/flash_cs5_help.pdf