Edge Animate Tutorial: Dynamic Content using Ajax

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

Adobe Edge Tutorial: dynamic content using Ajax #1Create 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

Adobe Edge Tutorial: dynamic content using Ajax #2Create a text on the stage, write “RELOAD TEXT” inside it and set the object name to “btnReload”.


RETRIEVE THE CONTENT USING AJAX

Adobe Edge Tutorial: dynamic content using Ajax #3Right-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

Adobe Edge Tutorial: dynamic content using Ajax #4Now 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().

4 comments on Edge Animate Tutorial: Dynamic Content using Ajax

  1. I am using edge to create a timeline project and want to load external content into a section so that every time the user clicks on the arrow button, new content shows up. I have followed the process step by step and when I test my edge html page, it still doesn’t load anything. I am working from a local server, so my path for the php page containing the switch code is http://localhost/50th_timeline/ajax.php. All of my files, including the edge file and html file are in 50th_timeline folder on the localhost. I’m not sure why it’s still not working. Do you have any idea what i may be doing wrong? Thanks!

    1. Have you tried it on a web server with a “real” url?
      Maybe it could be a problem with your dev enviroment and “localhost”.
      PS: because Adobe Edge creates js, you could have a look for errors using Firebug, Chrome Developer Console or a equivalent tool 😉

  2. I am having the same issue as Melissa. If the dataType is set to text, it returns the entire php code. It does not work with dataType:’json’

Leave a Reply

Your email address will not be published. Required fields are marked *