As3 unidad 3 animación de flash

11
Crear animación Crear animación con ActionScript con ActionScript Unidad 3 Unidad 3

description

 

Transcript of As3 unidad 3 animación de flash

Page 1: As3 unidad 3 animación de flash

Crear animación con Crear animación con ActionScriptActionScript

Unidad 3Unidad 3

Page 2: As3 unidad 3 animación de flash

ObjetivosObjetivos Cambiar las propiedades de un movie clip usando Cambiar las propiedades de un movie clip usando

ActionScriptActionScript El uso del evento ENTER_FRAME para animar las El uso del evento ENTER_FRAME para animar las

propiedades de un Movie Clippropiedades de un Movie Clip El uso de una sentencia condicional para detectar El uso de una sentencia condicional para detectar

los límites del escenariolos límites del escenario Uso de una variable para almacenar la referencia Uso de una variable para almacenar la referencia

de un Movie Clipde un Movie Clip Uso de botones para controlar el cambio de las Uso de botones para controlar el cambio de las

propiedadespropiedades Uso de la clase Tween para animar un MovieClipUso de la clase Tween para animar un MovieClip Uso de la aceleración o suavidad para crear Uso de la aceleración o suavidad para crear

efectos de animaciónefectos de animación

Page 3: As3 unidad 3 animación de flash

Controlar las propiedades con Controlar las propiedades con ActrionScriptActrionScript

Podemos animar un MovieClip Podemos animar un MovieClip modificando sus propiedades modificando sus propiedades numéricas.numéricas.

Las principales propiedades Las principales propiedades numéricas son: x, y, alpha, rotation, numéricas son: x, y, alpha, rotation, scaleX y scaleY.scaleX y scaleY.

También se pueden modificar las También se pueden modificar las variables booleanas como: visible, variables booleanas como: visible, enabledenabled

Page 4: As3 unidad 3 animación de flash

Cambiando el valor de una Cambiando el valor de una propiedadpropiedad

El punto 0,0 del escenario se El punto 0,0 del escenario se encuentra en la esquina superior encuentra en la esquina superior izquierda. Las equis se incrementan izquierda. Las equis se incrementan de izquierda a derecha y las yes se de izquierda a derecha y las yes se incrementan de arriba hacia abajo.incrementan de arriba hacia abajo.

Una posición negativa significa que Una posición negativa significa que el objeto se encuentra fuera del el objeto se encuentra fuera del escenario, así como un valor mayor escenario, así como un valor mayor al ancho (para las exis) o mayor a la al ancho (para las exis) o mayor a la altura (para las yes)altura (para las yes)

Page 5: As3 unidad 3 animación de flash

Cambiando el valor de una Cambiando el valor de una propiedadpropiedad

Los valores de porcentaje de las Los valores de porcentaje de las proiedades numéricas, como alpha, proiedades numéricas, como alpha, scaleX y scaleY se miden del 0 al 1, scaleX y scaleY se miden del 0 al 1, en lugar del 0 al 100 como AS 2.0.en lugar del 0 al 100 como AS 2.0.

Una escala de 2 significa un 200% Una escala de 2 significa un 200% y .5 equivale a 50%y .5 equivale a 50%

Page 6: As3 unidad 3 animación de flash

Incrementar o decrementar el Incrementar o decrementar el valor de una propiedadvalor de una propiedad

El uso de la notación corta += es El uso de la notación corta += es equivalente a incrementar el valor de equivalente a incrementar el valor de una propiedad. Un ejemplo del mismo una propiedad. Un ejemplo del mismo es:es:

variable += 5;variable += 5;

variable = variable + 5;variable = variable + 5;

También existe la notación corta para:También existe la notación corta para:-=-=

*=*=

/=/=

%=%=

Page 7: As3 unidad 3 animación de flash

Uso del evento ENTER_FRAME Uso del evento ENTER_FRAME para animar un MovieClippara animar un MovieClip

Podemos utilizar el evento Podemos utilizar el evento ENTER_FRAME para simular un motor ENTER_FRAME para simular un motor que ejecuta una función. Con él que ejecuta una función. Con él podemos simular una animación.podemos simular una animación.

Se encuentra en la clase Event.Se encuentra en la clase Event. Depende de la velocidad de Depende de la velocidad de

fotogramas por segundo (fps)fotogramas por segundo (fps)

Page 8: As3 unidad 3 animación de flash

Crear una variable que Crear una variable que almacene la “referencia” de un almacene la “referencia” de un

MovieClipMovieClip Almacenar la referencia de un Almacenar la referencia de un

MovieClip en una variable, nos MovieClip en una variable, nos permitirá simplificar el código y permitirá simplificar el código y hacer script más cortos.hacer script más cortos.

var instrument:MovieClip = banjo;var instrument:MovieClip = banjo;

Page 9: As3 unidad 3 animación de flash

Cambiando las propiedades de Cambiando las propiedades de un MovieClip por medio de un MovieClip por medio de

botonesbotones Para modificar las propiedades de un Para modificar las propiedades de un

MoviClip por medio de un botón, es MoviClip por medio de un botón, es necesario crear un listener.necesario crear un listener.

Page 10: As3 unidad 3 animación de flash

Crear una animación con la Crear una animación con la clase Tweenclase Tween

Con la palabra reservada Con la palabra reservada newnew, , creamos nuevas instancias de una creamos nuevas instancias de una clase.clase.

La sintaxis de la clase Tween es:La sintaxis de la clase Tween es:var tweenName:Tween = new Tween(objectToBeTweened,var tweenName:Tween = new Tween(objectToBeTweened,

➥➥"propertyToBeAnimated", EasingType, startingValue,"propertyToBeAnimated", EasingType, startingValue,

➥➥endingValue, time, trueForSeconds);endingValue, time, trueForSeconds);

Por ejemplo:Por ejemplo:var rocketTween:Tween = new Tween(rocket, "y", None.easeOut, var rocketTween:Tween = new Tween(rocket, "y", None.easeOut,

0,0,

➥➥400, 5, true)400, 5, true)

Page 11: As3 unidad 3 animación de flash

Importar las clases Tween y Importar las clases Tween y EasingEasing

Como se encuentran en el paquete fl, Como se encuentran en el paquete fl, hay que importarlas para utilizarlas hay que importarlas para utilizarlas en la lìnea de tiempo:en la lìnea de tiempo:import fl.transitions.Tween;import fl.transitions.Tween;

import fl.transitions.easing.*;import fl.transitions.easing.*; Entra a la ayuda de Flash y observa Entra a la ayuda de Flash y observa

los tipos de aceleración que existelos tipos de aceleración que existe