Comunidad de diseño web y desarrollo en internet online

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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate