Introducción
Este tutorial mostrara la forma de hacer por medio de ActionScript una animación de precarga funcional, mostrando porcentaje de carga, barra de avance de carga y calculo de otros datos utiles como cantidad de bytes cargados y cantidad completa de bytes que componene la pelicula.
Requerimientos
Conocimientos previos de programación
Manejo basico de Flash MX o MX 2004
Como nota adicional, este tutorial fue hecho con "Macromedia Flash MX 2004 Professional" y en ese formato se incluyen los ejemplos y demas archivos.
Por ultimo, seria bueno que subieras a tu hosting en internet (Si no tienes, hay muchos lugares donde puedes abrirlo gratuitamente) el ejemplo para probarlo descargando realmente de la web
Programando la precarga . . .
Actualmente existen muchos componentes que hacen automaticamente una animación de precarga de este estilo, pero que adicionalmente solo exigen como conocimiento previo saber arrastrar y soltar el componente en el escenario; sin embargo, cuando nosotros queremos tener el control de la animación de la precarga, o cuando queremos cambiar la tipica "barra de carga" por un reloj, un velocimentro o lo que nos imaginemos, vamos a querer el control de nuestro codigo.
Por otro lado, el uso de un componente de precarga conlleva mas peso a la pelicula que si la optimizaramos nosotros mismos, ya que la idea es que la precarga sea lo primero que cargue y que lo haga rapido, podemos optimizar cuanto queramos nuestro propio codigo
Creando la animación
En este caso vamos a crear una animación de barra de precarga dentro de un movie clip que dure exactamente 100 frames, asi cada frame sera puesto en pantalla de acuerdo al porcentaje de carga, en nuestro caso nos ha quedado asi:
He creado entonces una animación dentro de un movie clip cuyo largo seran 100 frames; en mi caso es una barrita que se va llenando hasta llegar a 100, como el ejemplo tradicional
La pongo dentro de un movie clip para dejar lo mas despejada la linea de tiempo principal, ademas, asi sera mas facil controlar sus cambios; para terminar le pongo a ese movie clip el nombre barra_mc.
Porcentaje de carga y detalles
Es de presumir que tambien queremos presentarle al usuario el porcentaje de carga de nuestra pelicula, para esto, en la linea de tiempo principal creamos un campo de texto de tipo "Dynamic Text", con la fuente que ustedes elijan para presentar el porcentaje de carga.
Es importante que sea "Dynamic Text" ya que ese tipo de campo de texto nos permite cambiar su contenido por medio de ActionScript, por otro lado se hace innecesario usar un "Input Text", ya que estos estan destinados a permitirle al usuario introducir datos; "Static Text" no permite la manipulación de su contenido por codigo.
Ahora solo falta ponerle un nombre a nuestro Campo de Texto, lo llamaremos porcentaje_txt, este nombre lo colocan en la barra de propiedades seleccionando el campo de texto, en un area que dice <Instance Name>.
Nota: Mucha gente, en tiempos de Flash MX 2004, aun usa la propiedad de los campos de texto "var", la cual esta oficialmente desechada porque no ofrece la versatilidad que ofrece el nombre de instancia.
Para el caso de estos tutoriales, siempre se usara el nombre de instancia sobre cualquier opción "desechada oficialmente por Macromedia"
En estos momentos, la apariencia de la pelicula sera esta:
ActionScript de precarga
Por ultimo, lo mas importante sera el ActionScript que realize la precarga de la animación, este debe ir en un KeyFrame, recomiendo crear un nuevo layer vacio, nombrarle ActionScript y ahi colocar este codig, eso hara nuestras peliculas mas ordenadas y faciles de depurar y reutilizar en el futuro.
/* Declaro la función de precarga
"cargando", esta función se ejecutara
todo el tiempo hasta que haya cargado
totalmente la pelicula */
function cargando() {
// Declaración de variables
var total, cargados, porcentaje;
// A la variable "total" se le asigna el
// tamaño de la pelicula en bytes
total = _root.getBytesTotal();
// A la variable "cargados" se le asignan el
// total de bytes hasta el
//momento descargados de la web
cargados = _root.getBytesLoaded();
//Por medio de una regla de tres obtiene el porcentaje
// cargado y redondea el valor con la función
//"Math.floor"
porcentaje = Math.floor((cargados*100)/total);
//Asigna al campo de texto porcentaje_txt
// el porcentaje cargado
porcentaje_txt.text = porcentaje + " %";
//Mueve la barra de carga al frame
// correspondiente al porcentaje
barra_mc.gotoAndStop(porcentaje);
//Si la cantidad de bytes cargados es igual
// a la cantidad total de bytes
if (cargados == total) {
//Hacer que se deje de ejeuctar esta función
clearInterval(hiloPrecarga);
//Iniciar la pelicula
play();
}
}
// setInterval nos servira para que la
// función "cargando" se ejecute cada 1 milisegundo
// Asi, nuestra función revisara constantemente
// la cantidad de bytes descargados
// y solo iniciara la pelicula hasta
// que la descarga termine
// la variable "hiloPrecarga" nos servira para
// saber que esta corriendo nuestra función
// y frenar su ejecución cada milisegundo
// por medio de "clearInterval"
var hiloPrecarga = setInterval(cargando, 1);
//Evita que inicie la pelicula
stop();
Implementación
Ahora simplemente debemos copiar el Keyframe uno (Ambos layers) en las peliculas que hagamos; solo tenemos que insertarlos tal cual en el primer KeyFrame de cada pelicula y el precargador funcionara, tambien podriamos insertarlo, para mayor orden en una escena aparte que sea la primera. solamente recuerden conservar los nombres e instancias tanto del movielcip como del campo de texto
Conclusión
Cuando queremos tener el control total sobre nuestras animaciones de precarga o simplemente queremos reusar este codigo para cosas mas avanzadas (como precargas de JPGs dinamicas por ejemplo) siempre es mejor programar nuestro propio codigo fuente, de manera que sea mas sencillo luego cambiar cosas como la animación de precarga o sus estilos.
Detección de colisiones y movimiento en ActionScript |
|
|
El juego consiste en que con las flechas del teclado uno debe evitar que le haga contacto con el misil, si hay contacto ocurre una explosión. Solo falta que al juego se le agregue que el mismo helicóptero pueda arrojar torpedos para sortear mejor los misiles enemigos
NOTA: lo que aparece en // son líneas de documentación:
fscommand("fullscreen", true);
fscommand("allowscale", true);
fscommand("showmenu", true);
//con las líneas anteriores se maximizan la
//ventana de juego y se quita el menú
set(helix, helicoptero._x);
set(heliy, helicoptero._y);
set(rockety, rocket._y);
set(valor, random(6));
set(rocketx, rocket._x);
setProperty(explocion, _visible, false);
setProperty(explocion, _x, helix);
setProperty(explocion, _y, heliy);
//1 volver transparente helicoptero y rotando
// con las flechas 2 colocar fondo primera
//capa y ultima
//el helicoptero se vuelve visible
_root.helicoptero.play();
_root.helicoptero._visible = true;
//estos condicionales evalúan lo que se ha tecleado y
//seguidamente se incrementa una
//variable asociada a cada tecla de las flechas,
//estas variables a su vez se adjudican a las
//posiciones del helicoptero
if (Key.isDown(Key.RIGHT)) {
helix = helix+5;
}
if (Key.isDown(Key.LEFT)) {
helix = helix-5;
}
if (Key.isDown(Key.UP)) {
heliy = heliy-5;
}
if (Key.isDown(Key.DOWN)) {
if (heliy<=280) {
heliy = heliy+5;
} else {
heliy = 5;
}
}
helicoptero._y = heliy;
helicoptero._x = helix;
//esta es la parte mas importante del juego
//la función hitTest evalua si dos objetos
// estan en contacto
// lo que se hace es asignar a una variable
// un valor true o false dependiendo
// de si los dos objetos están en contacto, para
// el caso helicóptero y rocket
status = _root.helicoptero.hitTest(_root.rocket);
//helicoptero.play();
// SI NO HAY IMPACTO Y SI ROCKET SALIO
// DE LA PANTALLA, EMPIECE //ROCKET
if ((status == false) and (rocket._y<=0)) {
rocket._y = 380;
rocketx = random(500);
}
// SI NO HAY IMPACTO Y SI ROCKET_.Y ES MAYOR
//O IGUAL (SI ESTA MAS ABAJO) A HELICOPETO._y ENTONCES
if (status == false) {
setProperty(helicoptero, _visible, true);
helicoptero.play();
rocket._y = rocket._y-5;
//vida=vida+1;
}
rocket._y = rockety;
rocket._x = rocketx;
//OCURRIO U IMPACTO Y SE DUPLICARA UN ROCKET
if (status == true) {
/// a ocurrido explociòn
stopAllSounds();
_root.helicoptero.stop();
_root.helicoptero._visible = false;
var i;
for (i=0; i<=valor; i++) {
_root.attachMovie("rocket", "rocket"+i, i);
}
duplicateMovieClip("explocion", "ex1", 0);
setProperty(ex1, _visible, true);
setProperty(ex1, _x, helix);
setProperty(ex1, _y, heliy);
ex1._y = heliy-20;
ex1._x = helix+20;
ex1.play();
rocket._y = 380;
rocketx = random(500);
//en las líneas anteriores lo que se hace
//es darle vida al símbolo explocion y este es
//visible si estatus es igual a true, es decir
// si hay impacto entre los dos objetos
//las coordenadas donde aparece la explosión
// pueden ser las del mismo helicóptero o mejor
//dicho de las variables asignadas a tal objeto
//la función random ubica la aparición del
// misil en una coordenada x aleatoria del monitor.
}
gotoAndPlay(1);
//regresando al fotograma 1, se vuelve a testear todo el programa
//este codigoe sta insertado en el segundo programa
//gotoAndPlay (1);
Carlos Casadiego
Creación de un efecto de lupa (zoom) en Flash |
|
|
Introducción
Una petición muy comun en los foros de Flash es el efecto de una lupa sobre una imagen, una forma vectorial o en general sobre cualquier objeto de Flash; este tutorial, aporte de nuestro amigo cusiri nos mostrara en sencillos pasos las tecnicas para crear el solicitado efecto.
Por favor, refierete primero al ejemplo descargable de este tutorial ante una duda y luego al foro
Efecto de Lupa
El archivo fla consta de una capa donde coloco la imagen de tamaño normal, que es la que se ve en el escenario. El punto de registro lo he puesto en la esquina superior izquierda.
Otra capa (encima) con un movie clip, creado de la siguiente manera.
- Creo un círculo y le quito el contorno, queda sólo el relleno. Lo convierto a movieclip y le doy un nombre de instancia. Yo le puse casagrande_mc.
- Edito el MC. El relleno está en la capa 1. Agrego otra capa (Capa 2) y en ella coloco la misma imagen de la escena principal y le aumento su escala X y Y en 200%. Debe estar en el centro del MC. Convierto también esta imagen en Mc y le doy un nombre de instancia. Yo le puse lacasota_mc.
- En la línea de tiempo cambio el orden de las capas, colocando la Capa 1 encima de la Capa2. Ahora puedes ver el relleno del círculo en la Capa 1.
- La Capa 1 donde está el relleno, la convierto en Máscara.
- Agrego una tercera capa encima de la máscara. La Capa 3 debe estar encima de las otras dos.
Dibujo el aspecto que tendrá la mira. En mi caso, solo dibuje dos líneas dentro del círculo que lo dividen en cuatro sectores y le hice unos lados redondeados. En esta capa (y si quieres en otras más arriba) dibujas la forma que quieres para tu mira o lupa. Puedes hacer otro MC, etc.
- Ahora escribimos las acciones.
Selecciona el MC que creaste en el punto 2 (lacasota_mc) y abre el panel de acciones, ahí escribes lo siguiente:
onClipEvent (enterFrame) {
/*casagrande_mc es el nombre de instancia
del clip que creaste en el punto 1.*/
xmove = _root.casagrande_mc._x;
ymove = _root.casagrande_mc._y;
_x = (250 - xmove) * 2;
_y = (225 - ymove) * 2;
}
Otra forma es escribiendo el código en una capa del nivel principal y hacer referencia de puntos en vez de colocar simplemente _x y _y. Este código podrías escribirlo debajo y después de la llave de cierre del código del Punto 7.
Quedaría así:
_root.onEnterFrame = function () {
xmove = _root.casagrande_mc._x;
ymove = _root.casagrande_mc._y;
/*para indicarle a lacasota_mc que cambie su
posición X Y según se mueva el ratón en la escena
principal */
this.casagrande_mc.lacasota_mc._x = (250 - xmove) * 2;
this.casagrande_mc.lacasota_mc._y = (225 - ymove) * 2;
}
El valor 250 y 225 depende del tamaño del gráfico de tamaño normal que utilices.
Según el dibujo que tengas, va a ser más o menos la mitad del ancho de tu imagen. En mi ejemplo la casa
de tamaño normal mide 499.9 (500) de ancho por 302.7 (300) de alto. Lo que hay que tomar en cuenta, es que que el valor, permita que la imagen grande a través de la lupa, se vea cerca de la imagen
normal.
Regresa a la escena principal (primer nivel)
Si quieres agrega otra capa para escribir el siguiente código
_root.onLoad = function () {
casagrande_mc.startDrag(true);
// repito que casagrande_mc es el MC creado en Punto 1
Mouse.hide();
}
Eso es todo. Este es un efecto bastante sencillo pero te dará las pautas para crear diseños donde necesites un efecto lupa, que según tu conveniencia pueden ser más sofisticados y llamativos que este simple ejemplito.
Recalco que existen formas más optimizadas y mejores de crear esto