In this tutorial we will se how to pass variable data to an animation made with Adobe Edge Animate.
INTRODUCTION
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:
- retrieving the data sent to the page;
- 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%20valueThen 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.
As 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.
could send me the final result of the tutorial?
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.
Hi Riccardo,
You can indicate me a new link to download the tutorial. The above link does not work.
Thanks for tris great tutorial.
I’ve reuploaded the source 😉
Thanks for these insights. But the download link is not working. Could you re-upload the file?
I’ve reuploaded the source 😉
How can I pass the parameter using JavaScript (no PHP)?
If you already have inside your javascript the variable you want to use, you could simply insert it in “paramValue”:
var paramValue = YOUR_VALUE;If you’re looking to get the variable in javascript using an ajax call you could have a look at
Edge Animate Tutorial: Dynamic Content using Ajax
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
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 😉
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!
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 😉