Edge Animate Tutorial: Dynamic Content using Ajax

In this tutorial we will see how to use jQuery and Ajax to dynamically load contents inside a Adobe Edge Animate animation.

The topics discussed in this tutorial are:

• Ajax with jQuery
• Button actions
• Actions on animation start

INTRODUCTION

Edge Animate uses jQuery library as core for its API,
we will use this peculiarity to dynamically load a text inside an animation via Ajax.

If you don’t have an idea of what are Ajax or jQuery, here’s the tutorial result

Clicking on “RELOAD TEXT” a new string will be dynamically loaded from an external source.

CREATE THE OUTPUT CONTAINER

Create a text on the stage and set a dimension large enough to contain the dynamically loaded text, set the text name to “Placeholder”.
To have a better result for this tutorial I have animated the text (changing color and size), but this is not needed, so this aspect won’t be discussed in this tutorial.

If you want to have more information about animations
you should have a look at Edge Animate Tutorial: Symbol Animation.

CREATE EVENT TRIGGER BUTTON

Create a text on the stage, write “RELOAD TEXT” inside it and set the object name to “btnReload”.

RETRIEVE THE CONTENT USING AJAX

Right-click on the object “btnReload”
and choose “Open Actions for btnReload”, a new window will open.
Click on the top left button [+] and select the event “click” from the dropdown menu.

Inside the window insert these lines of code:

$.ajax({

    url: ‘ajax.php’,

    dataType: ‘json’,

    success: function(data) {

        sym.$(“Placeholder”).html(data);

    }

});

The code calls jQuery.ajax() function (shortened $.ajax()) passing three parameters to it:

• url: is the location of the script that will returns the string
• dataType: is the type returned by the script, in our case json
• success: is the function that receive the output, then elaborate and display it

The function defined in “success” receives the output inside “data” variable and insert it in our text object “Placeholder”.

The options of jQuery.ajax() are many more, to have a global view of the function and all the parameters available, you could visit the official page on jQuery website: jQuery.ajax() function.

The “ajax.php” script that returns the text is this

<?php

switch(rand(1,5))

{

    case 1:

        echo json_encode(‘This text is loaded dynamically from an external source via ajax.’);

        break;

    case 2:

        echo json_encode(‘This text is loaded externally, jQuery calls a php script that returns json.’);

        break;

    case 3:

        echo json_encode(‘This content is loaded via ajax using jQuery.ajax() function.’);

        break;

    case 4:

        echo json_encode(‘You can load every content you want from dom, xml, json and also plain text’);

        break;

    case 5:

        echo json_encode(‘Adobe Edge using jQuery can load dynamic content form every source.’);

        break;

}

?>

this file has to be accessible from the url set in the jQuery script and has to be hosted on a server that supports PHP.
The PHP script simply returns one random string over 5 available, but obviously could make any kind of action like to connect and retrieve data from an external database.

RETRIEVE CONTENT ON START

Now the retrieve is triggered by clicking on “btnReload”.
To retrieve the text on animation start select the stage (deselect the focused object) and click on top button “Open Actions”, a new window will open.
Click on [+] on top left and select “creationComplete”, copy inside the window the code used for “btnReload”.

As you can see, using this method you can load in your Edge Animate animation any kind of content coming from database, html, xml and in general from every source that could be read using jQuery.ajax().