Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

ActionScript Flash Introducción 2

Tutorial Photoshop

 

Tutorial por Solo Photoshop

SoloPhotoshop

TUTORIALES MACROMEDIA FLASH

ActionScript, Introducción al lenguaje - Parte 2

Por Kitsch, http://www.javiernavarro.be/

En todos los lenguajes de programación, un parte vital para el funcionamiento de nuestros programas, es sin duda alguna los condicionales y los bucles. Por medio de estos es posible controlar los eventos de interacción con el usuario y permite planificar que reacción tendrá el programa a determinada acción del usuario.

En Flash como en casi todos los lenguajes basados o derivados de C; los condicionales, sentencias y bucles trabajan por un comportamiento booleano, es decir, por un proceso lógico basado en "VERDADERO" Y "FALSO".

Cuando una condición se cumple el programa interpreta la acción como verdadero y de igual forma falso si no se cumple la condición especificada.

En ActionScript 2.0 son 4 los condicionales básicos y son:

  • if
  • if.. else
  • if... else.. if ; y
  • switch

Además de estos existe otro que es "try..catch..finally", pero por ahora no entraremos en detalle con este pues un tanto mas complejo que los antes enlistados y que a continuación explicare como funcionan.

La estructura general de las condicionales es muy simple y basta con decirle al programa, que es lo que debe de hacer en caso de que suceda "x" evento.

if (condición) {
sentencia
};

Sentencia if

La sentencia if es la mas "básica" de las condicionales y se basa en el simple hecho de "si pasa esto, reacciona con esto". La sintaxis es simple, se declara la sentencia y entre paréntesis y entre llaves la acción a realizar si es que se cumple la condición.

Para comprender mejor su funcionamiento, anexo una ligera practica en la cual le diremos al programa que cuente los clics que hagamos a un botón.

Practica 1

  • 1.- Creamos un nuevo documento de 200x150 píxeles
  • 2.- Creamos un botón y lo nombramos "botón"
  • 3.- Creamos un cuadro de texto dinámico vació y le asignamos el nombre de instancia de: "texto"
  • 4.- Presionamos F9 para entrar al panel de ActionScript
  • 5.- En el fotograma 1 insertamos el siguiente script:
var clics:Number = 0;
  • 6.- Ahora seleccionamos el botón y le agregamos el siguiente script:
on (press) {
clics += 1; //Incrementamos en 1 al presionar
_root.texto.text = "1 click";
if (clics >> 1) { //iniciamos la sentencia
_root.texto.text = clics+" clics.";
}
}

Ejemplo:

Descarga el archivo de la práctica

En la anterior práctica lo que hicimos fue hacer un rápido conteo de clics del ratón, para hacerlo creamos en el nivel 0 de la película la variable "clics" la cual tiene propiedad de "Number" y un valor inicial de 0.

Un detalle de la clase botón, es que los botones también son condicionales, reaccionan por el controlador "on" y la condición es el suceso del ratón, (release, prees, rolloOut, rollOver, etc.) y la acción se define entre llaves.

Bien en el código de nuestro botón, llamamos a la variable global "clics" y utilización un operador de incremento, con esto le decimos al flash que cada que se presione el botón, incremente el valor de la variable "clics" en uno.

Después utilizamos una sentencia if en la cual le decimos al programa que si "clics" es mayor a uno; en la variable "texto" (el cuadro de texto dinámico que creamos) escriba el valor actual de "clics" más el texto " clics."

If.. else

Este condicional en realidad solo es un complemento del básico if; la función principal de este condicional es al igual que if, si se cumple una condición ejecute cierta acción, pero además si no se cumple que realice otra.

La estructura seria la siguiente:

if (condición) {
acción
} else {
acción
}

Como se puede apreciar la sintaxis es exactamente la misma de la condición if, salvo el detalle que agregamos un condición "else", esta determinara que acción se producirá si el resultado de la condición es "FALSE" o bien si resulta "TRUE" ejecutara la primera opción.

Ejemplo:

Descargar Archivo

En este ejemplo al igual que el anterior, hicimos un contador de clics, solo que en este caso, en vez de mostrarnos cuantos clics se han dado, al llegar al click 6 la barra negra, cambiara su opacidad.

Al igual que ejemplo anterior cree una variable global

var clics:Number = 0;

Le agregue el siguiente código:

on (press) {
clics += 1;
if (clics<=5) {
_root.barra._alpha = 100;
}else {
_root.barra._alpha = 20;
}
}

En este script escribimos la siguiente condicional, si se presiona el botón que incremente en uno el valor de la variable "clics", después especificación con la condición if que si el valor de "clics" es menor a 5, entonces la propiedad del movieclip barra se mantenga en 100; ahora que si esta condición de clics es menor a 5 no se cumple, entonces "else" define que el movieclip barra tenga una opacidad de 20.

if.. else.. if

Además de agregar una condición "else", podemos también en flash con este condicional, agregar varias condiciones a evaluar y todas se evaluaran de forma separada, si devuelven "TRUE" se ejecuta la acción especificada, mientras devuelva "FALSE" se ejecutara el resultado de else.

La estructura sería así:

if (condición){
sentencia
} else if (condicion2){
sentencia
} else {
sentencia
}

Para entender mejor este modo condicional, utilizaremos nuestro archivo "clics3.fla" y lo modificaremos un poco, agregando otro cuadro de texto dinámico y asignándole el nombre de instancia de "num" y modificando un poco el código del botón, quedando de la siguiente manera:

on (press) {
clics += 1;
_root.num.text = clics;
//escribe el numero de clics
if (clics==5) {
_root.barra._alpha = 100;
}else if (clics==6){
_root.barra._alpha = 60;
}else if (clics==10){
_root.barra._alpha = 20;
}else {
_root.barra._alpha = 0;
}
}

En el anterior script le decimos al programa que cuando se presione el botón, incremente en uno la variable "clics", en la segunda instrucción le decimos que nos escriba el valor de "clics" en el cuadro de texto "num".

En la tercera instrucción es donde colocamos nuestro condicional, el cual dice que si "clics" tiene un valor de 5 entonces al MC "barra" le asigne una opacidad de 100; si no es igual a 5 pero es igual 6, entonces el MC "barra" tendrá una opacidad de 60; si esto no se cumple pero "clics" tiene un valor de 10, entonces en la segunda condición asignamos que MC barra tenga una opacidad de 20; si ninguna de las condiciones se cumple, entonces el MC "barra" tendrá una opacidad de 0.

Ejemplo:

Descargar Archivo

switch

El condicional switch funciona de forma muy similar a "if… else… if…" solo que este permite crear tantas condiciones necesitemos de manera ramificada y con un mayor control en la estructura, personalmente yo recomiendo mas el uso de switch en lugar "if… else… if…" simplemente por la organización y simplificación del código, aunque no lo haría para evaluar datos específicos pues no devuelve acción si se recibe "FALSE".

Al igual que con las sentencias "if" switch evalúa una condición y ejecuta una acción determinada, si esta condición devuelve "TRUE".

switch además requiere de algunos operadores más para funcionar correctamente, los cuales son: "case". "break" y "default", y son estos los que permiten crear una estructura organizada.

Una estructura switch sería así:

switch (condición) {
case 1:
sentencia;
break;
case 2:
sentencia
break;
default:
sentencia:
}

La sintaxis siempre comienza con un "switch" y la condición a evaluar; después el operador "case" evaluara un valor determinado como condición; "break" le dice al flash que corte o rompa la sentencia ejecutada si es que la siguiente condición se cumple.

Nota: Si se omite "break" se ejecutaran por ejemplo las sentencias 1 y 2 simultáneamente.

Otro operador a tener en cuenta es "default", que es la sentencia predeterminada a ejecutarse. El caso default siempre debe ser el último caso de una sentencia switch y también debe incluir una sentencia break para evitar un error de paso al siguiente caso si se añade otro caso.

Practica 2

  • 1.- Creamos una película nueva de 400x300 píxeles.
  • 2.- En el fotograma 1, creamos una variable para ser originales, "clics"
var clics:Number = 0;
  • 3.- Creamos un cuadro de texto dinámico vació y le agregamos el nombre de instancia "texto".
  • 4.- Creamos un MC vació y le agregamos el nombre de instancia de "logos".
  • 5.- Creamos un botón y le agregamos el siguiente script:
on (press) {
_root.clics += 1;
//definición de la variable y que en cada click
//se incremente en uno.
switch (_root.clics) {
//iniciamos el bucle
case 1 :
texto.text = "Enviando a ForoCreativo.net";
//Escribe el texto al presionar el botón
getURL("http://www.forocreativo.net", "_blank");
//Envía a la direccion del sitio
_root.logos.loadMovie("fc.png");
//carga una imagen del sitio
break;
//termina con la condición
case 2 :
texto.text = "Enviando a SoloPhotoshop.com";
getURL("http://www.solophotoshop.com", "_blank");
_root.logos.loadMovie("ps.png");
break;
case 3 :
texto.text = "Enviando a Taller Webmaster";
_root.createEmptyMovieClip("logos");
_root.logos.loadMovie("tw.png");
break;
}
//terminamos el bucle
}
//termina la acción al presionar.

Ejemplo:

Descargar Archivo

En el ejemplo anterior, lo que acabamos de crear es una función bastante simple, la cual nos enviara a tres sitios web de los cuates de Creativa In. (Quique a lo mejor los conoce).

La función comienza evaluando el valor de la variable global "clics"; en el primer bloque de código case, evalúa si "clics" es igual a 1 entonces que escriba en el cuadro de texto "Enviando a ForoCreativo.net" como primera instrucción, después que nos envié a la URL "http://www.forocreativo.net" definida en el comando getURL y por ultimo en la tercera instrucción de este caso, que nos cargue una imagen en el MC "logos" y por ultimo con el operador "break" que nos termine en este caso la ejecución de instrucciones.

Funciona igual para los casos 2 y 3.

Parte 1

Comentarios de ActionScript Flash Introducción 2

↑ Tutorial

  • Steven Florez

    Steven Florez

    2006-09-27 17:51

    Tu informe es de mucha ayuda, se ve que eres todo un experto, muchas gracias por el tutorial amigo.
  • marleyeya

    marleyeya

    2006-10-13 22:32

    muy bueno estoy aprendiendo mucho de estos tutoriales .Sigan asi ok.Una amiga
  • marleyeya

    marleyeya

    2006-10-13 22:41

    el unico problema es que no puedo abrir descarga de archivos por favor expliquenme esto o sera que mi maquina posee el programa.Gracias
  • rodr1go4

    rodr1go4

    2007-07-16 19:20

    soy principiante pero me han servido demasiadp este tutorial "muchas gracias" pero no se que es MC que elguien me expilque
  • borwman

    borwman

    2009-10-22 23:51

    gracias poir el tuturial igual espero que pronto continuen con la parte 3, y tengo una duda en el ultimo ejercicio no comprendo la funcion del mc vacio y la funcion de la a siguientes variables,_root.createEmptyMovieClip("logos");
    _root.logos.loadMovie("tw.png");me pregunto que sera lo que esta sentencia manda carga , gracias