Edge Animate Tutorial: passing data to animation

Edge Animate Tutorial: passing data to animation

In this tutorial we will se how to pass variable data to an animation made with Adobe Edge Animate.


INTRO

Sometime you need an animation that changes its status based on specific parameters,
to do this in Edge Animate we will use javascript variables instanced by params passed to the page.

In this example a parameter param having value “variable value” is passed inside the url and it’s retrieved using PHP.

In this tutorial we will retrieve data using PHP because it’s an easy and quick language,
but it could be used also ASP.NET, javascript or other technologies.

The tutorial is divided into two parts:

  1. retrieving the data sent to the page;
  2. use the data inside the animation made with Edge Animate.

1. RETRIEVING THE DATA SENT TO THE PAGE

Preamble: when I talk about “the page” I mean the page where your Edge Animate animation is included.

Let’s pass a parameter via get inserting it in the url of our page:

page.php?param=variable%20value

Then use PHP to retrieve it and insert it inside a javascript variable:

<script charset="utf-8" type="text/javascript">
var paramValue = '<?php echo $_GET['param']; ?>';
</script>

Now the value sent to the page is the value of our javascript variable paramValue.


2. USE THE DATA INSIDE THE ANIMATION MADE WITH EDGE ANIMATE

Now we have our data inside a javascript variable, how to retrieve it from Edge Animate?

Nothing easier! We just need to call the variable inside an Edge Animate script.

Edge Animate Tutorial: passing data to animationAs example if we create a dynamic text field and we want that the content of this it’s the value of our paramValue variable, write down this line of code

sym.$("dynamicText").html(paramValue);

Now the content of the text field dynamicText will be equal to our variable paramValue set inside our page.


You can download the Edge Animate .an and the compiled version of this tutorial clicking the link below:
Tutorial package Edge Animate: passing data to animation


As you has seen, you can pass to your Edge Animate animation any kind of data using get, post, put or whatever method or language you want.

If you have any questions about this tutorial or topics directly related to it, like retrieving of post data or the use of a different programming languages, leave a comment below.

A thanks to Carla for the comment on Edge Animate Tutorial: contenuto dinamico utilizzando Ajax that has inspired this tutorial.

12 comments on Edge Animate Tutorial: passing data to animation

    1. Hello Alan, I’ve added a download link with the source at the end of the tutorial 😉
      Unluckily I have only Edge 1.5 🙁 but I hope it could be useful anyway.

  1. Hi Riccardo,
    You can indicate me a new link to download the tutorial. The above link does not work.

    Thanks for tris great tutorial.

  2. Hi, I followed your example and it work perfect when the php open offline,
    but when I uploaded your example files on my own server, it doesn’t work anymore,
    could you hint me where the mistake I make?
    tks

    1. Hello! Because it works on your development environment but not on your hosted server, have you checked that your online server has the same settings of your development server? You could use phpinfo() to check php setting 😉

    2. Sorry I’m a beginner on web code, what did you mean “development server” and “online server”?
      It has no problem when I click the php file directly, open it with web browser but I got fail when I open the php with url (I test it on localhost).

      Thanks!

    3. Obviously you must have a base of programming to write code… even if it’s a really basic one 😛
      With “development server” I’m talking about your local testing machine (usually localhost) and for “online server” I’m talking about your real hosting (yourwebsite.tld). By the way, as I said before check your server settings and also the paths for your files includes with some echoes 😉

Leave a Reply

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