Activar animación con jQuery en Edge Animate

Adobe Edge Animate es una herramienta para crear animaciones en HTML5 sin tener que escribir código. Sin embargo utilizar Edge Animate sin JavaScript, es crear animaciones "planas" o simples movieclips. Si nos apoyamos de Javascript, podemos agregarle interactividad a nuestras animaciones.

Edge Animate nos ayuda con algunas funciones predefinidas, eventos como "Onclick" "MouseOver" y entre otros básicos. En este tutorial crearemos una función que obtenga el valor escrito de un campo de texto, y si este es correcto o incorrecto, activará una animación.

Crear campo de texto editable en Edge Animate

Primero hay que crear un campo de texto editable en Edge animate. No hay una herramienta que haga esto dentro del programa, pero lo podemos conseguir mediante código.

Crearemos un texto que deberá estar en la posición en que queramos que esté el campo para introducir el texto. En mi caso, escribiré Null.

Ahora con pocas líneas lograremos que al visualizarse en el navegador este texto (Null) sea editable, es decir un campo de texto en blanco. Abrimos las acciones para "stage" y le añadimos el evento "CreationComplete". Ahora procedemos al código.

Código :

var answer = sym.$("Text2")
answer.html(" ");
inputAnswer = $('<input />').attr({'type':'text', 'value':'', 'id':'answer'});
inputAnswer .css ('font-size', 40);
inputAnswer .css ('height', 70);
inputAnswer .css ('width', 70);
inputAnswer .css ('background-color', '#ffffff');
inputAnswer .appendTo(answer);

Este es el resultado en el navegador:

Crear el botón verificador

Este botón podrá ser una imagen, un texto, un SVG, no importa. En mi caso es una imagen que dice "verificar".

Mediante unas cuantas líneas lograremos que este botón pueda validar si la respuesta fue correcta o incorrecta, si es correcta lanzará una animación de una palomita, en caso contrario una tachita.

El siguiente código también va en en "Stage" "CreationComplete".

Función para obtener el valor que se introduzca en el campo de texto:

Código :

//obteniendo el valor del campo de texto
function answerInfo(){

         var answerlInfo = inputAnswer.attr("value")
            if (answerlInfo == "25") {
            sym.getSymbol("correcto2").play();
               } else {
                  sym.getSymbol("incorrecto2").play();
}

    return true;

}

Crear la función Onclick en el botón verificador

La función Onclick que active las animaciones la haremos desde el "stage" en "CreationComplete". Sería más fácil presionar "botón derecho" sobre nuestro botón verificador y desde allí agregarle la función OnClick, pero de esta manera las condiciones de respuesta no funcionarán. Es decir, el botón llamará a las animaciones pero "ignorará" si la respuesta fue correcta o no, es por eso que esta función la creamos desde el stage. Este es el código:

Código :

var submitBtn = sym.$("verificar");
 //activar la función mediante el botón

   submitBtn.click(function(){   
            answerInfo() ;
                     
});

Veamos los resultados:

Resultado Correcto:

Resultado incorrecto:

El ejemplo es bastante sencillo, pero este mismo método se puede emplear hasta para mini juegos, este último fue mi caso. Sólo hay que usar la imaginación. A veces es un poco tedioso realizar cosas como ésta en Edge Animate, aunque fue creado para animar sin código, siempre acabamos codeando. No es para menos.

Saludos desde Mérida, Yucatán, México.

Enviar comentario

via Cristalab http://ift.tt/1ld6iDS

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: