This week I demonstrated Edge Animate to two cities in Texas as part of the Create the Web tour. Animations are not something I typically spend a lot of time thinking about, but I was grateful for an opportunity to show off what I think is a pretty cool program. At my first presentation, an attendee asked if Edge Animate supported data-driven animations. Hear is what I told him, and a look at a simple proof of concept.
First - I told him that - in my mind - Edge Animate would be fine for data-driven projects, but only those that involved at least some timeline based animation. That distinction may not make sense if you've never used Edge Animate before. (I encourage you to download it via the link I shared above.) Edge Animate has a timeline that allows you to create animations over time. So for example my animation may do one thing from time 0 to time 1, and something else from time 1 to time 4. Integrating data with that should not be a problem. Imagine a simple weather animation. You may have parts to a thermometer fly in and come together like a puzzle. At the end, you display the current temperature.
The other example though would be an animation that is entirely data driven with no concept of "time". An example of this could be a simple pie chart that updates with live data, using animation to smoothly modify the pie slices.
Obviously there's a gray area here and each project is different. Edge Animate also makes it easy to add interactivity to your projects so assuming that only projects with crap flying around makes sense isn't exactly fair either. Hopefully you get my drift here.
With all that aside, let's look at a real demo. This won't be the most exciting Edge Animation you will see but it will hopefully illustrate the concept. For my demo I want to build an animation of a box that comes onto the screen and then just displays some text. The data-driven part will come from the fact that the text we display will need to come from a server-side file. You could imagine this being a ColdFusion, PHP, or some other script. For now though I just made it simple text.
I began by creating the animation and using static text. I used two seconds for the 'rectangle fly in' animation and a second for the text to fade in.
You can see this in action here: https://www.raymondcamden.com/demos/2012/nov/7/v1/Untitled-2.html. Note that I didn't bother setting up any preloader or providing accessible support. I'm trying to keep this as simple as possible.
So now we have a basic animation done. We could tweak it to make it prettier. Modify the flow of the movement. Etc. But let's focus on making this data driven. In order to do that I need to first stop the animation from running automatically. My Ajax call may be slow so I don't want anything to run until I've gotten my data back. Turning off the autostart is as simple as clicking on the Stage in Edge Animate and disabling it in properties.
That was easy. The next part was a bit more difficult. In a normal application, I'd listen for a DOM ready type event before doing whatever I need to do. But I know that Edge Animate also has its own events. I assumed - but wasn't sure - that there was an event I could listen in for and trigger my own custom logic. With the Stage still selected, I clicked the Actions icon:
I noticed the creationComplete event and assumed that was a safe bet. Going with the assumption that all my logic would go in here, I used the helpful menu of actions to guide how I'd write the code. I first selected "Set Element Text" and Animate added the following block:
My text symbol was already named Text so I left the code as is. The portion that read "NewText" would be changed to the result of my Ajax call, but for now, I just wanted to ensure this worked.
Next, I knew that I'd want to start the animation itself. This too was easy. I selected the "Play from" action and specified a value of 0.
At this point, I noticed something odd. When I tested my animation, the text in the rectangle did not update. Something told me though that it may be the event I used. I don't have proof of this (but I'll find out), but I was willing to bet that the when Edge Animate ran the animation in the tool itself, it never fired a creationComplete event. I saved my work instead, ran it in the browser, and saw everything worked as expected.
You can view this version here: https://www.raymondcamden.com/demos/2012/nov/7/v2/Untitled-2.html. You should now see it run the animation and use the new text as opposed to the word "STATIC".
Woot! So now my work was almost done. I made a copy of my work and opened it in another editor. The file Untitled-2_edgeActions.js contained the event handler and custom logic I had created. Here it is as Edge Animate exported it.
And here it is after I modified it to do an Ajax call.
Pretty simple, right? You can run the final version here: https://www.raymondcamden.com/demos/2012/nov/7/V3/Untitled-2.html
Archived Comments
Hi Raymond,
I am designer who is familiar with code but really struggle writing it myself. I loved your tutorial and I want to be able to integrate dynamic content into the design I do using Edge Animate. I was wondering, for those of us beginners, would you consider doing a tutorial that shows how you could input lets say the weather from something like the Weather.com API into an edge composition? Thanks so much for all your amazing work.
Adam
Wow, amazing timing! I actually just did a blog post on dynamically setting a style sheet based on weather. My plan was to do one for Edge Animate as well. However, it would be a bit different then what I think you mean. My plan was to blog on: "Based on X, load a Edge Animate animation." So it wouldn't change one animation per se, but decide which to load (ie, sunny versus stormy). Would that still be useful?
Hi Raymond,
Thanks for the quick response. I guess whether its in Edge or in an HTML editor it shouldnt make too much of a difference...though its nice to keep it all in one program.
What would be cool would be to see how you could dynamically state today weather in both "Degrees" and also image. For instance, the Weather.com App on iPad. It shows today temperature and if its snowing, raining, sunny, dark, etc.
They probably have an API where you could port in today weather, and based off of that number it could display an animated background that you created in Edge.
I would go further and say that any help you need on the creative front, I am happy to build for you in Edge. Like some animated clouds on a sunny day. or some raining drops on an overcast rainy day. let me know.
Adam
My initial thinking was that I'd dynamically load an individual Edge Animation to save on page load size. So instead of loading N blocks of animation for N types of weather, you would check the weather and then load 1.
But - I can see how having 1 Animation with 'branching' logic in it could be useful. Keeping in mind I'm new to Edge Animate, I seem to remember that we can use Labels in the timeline and use custom code to "play" at a custom label.
So in theory, you could design a EA script with a few weather animations and labels, and then write custom code outside of EA to handle telling it with to launch.
What do you think? If you could design that, I could do the weather logic, and it would be a kick ass blog post.
This is absolutely brilliant! It reminds me of how I used to love programming AS2 using the behaviours panel over 8 years ago in Flash MX!
(If you didn't realise, I was being sarcastic)
Actually, I didn't read it as sarcastic at all. The actions panel seem - to me - to be very well done. You have options to help you write most of the code (useful even for a coder like me as I don't know the API). I don't think it's badly done at all. Do you?
Could you make the demo files you made downloadable for us code challenged
Thanks
I linked to it. :) It is all HTML/JS/CSS. Just view source and download. ;)
I specifically was wondering how the "dynamic.html", was formated
I didn't see a way to download that
It is right here:
http://www.raymondcamden.co...
and just a HTML string. You could switch to a JSON packet of course. Even XML. And normally you would be hitting a dynamic server probably, so something like dynamic.cfm (or dynamic.php).
Hi Raymond
I'm converting my flash websites into Edge animate version and I was really glad to find your post about the dynamic data driven text. I have directly added the code sample in the Edge code editor and was able to read even a txt file !
How happy was I. Unfortunatly, when I tried the result in Chrome or Firefox, it didn't work (I'm using IE9).
How comes that your sample works either in Chrome or Firefox while mine doesn't.
Here are the edge_includes files versions, maybe yours are different:
edge.1.0.0.min.js
jquery.easing.1.3.js
jquery-1.7.1.min.js
json2_min.js
I have reproduced from scratch your sample and it is the same problem, works only in IE.
If you have an idea of what's wrong, thanks in advance for your light.
Jean-Baptiste
No idea. Can you put it online so I can see?
Cool tutorial. Can you show me how to retrieve mysql records and display under the $Text ?
See how my URL is dynamic.html? You would change it to a dynamic application file like ColdFusion or PHP. That code would do the query and output the data.
Great tut - but what if I wanted to load different lines from a text file and display them one at a time...so a truly dynamic list for example. So the text file is the only thing that needs to be updated for the content to change. Any suggestions?
When you say one at a time, do you mean in the same animation? Like maybe it loads two lines and shows line 1 for 10 seconds, then fades out to line 2?
Hi Raymond, Yes that's precisely what I would like to do! - the idea is that the text file can be updated by the end user and that just gets reflected in the animation. So if the text file had 10 lines, each line would be shown as part of the animation
for i := 0 to text.length do
begin
load.text[i]
Show.text[i]
fade.text[i]
repeat until eof
end;
I can now load text from the text file but have yet to find away of loading each line individually.
Thanks
Pete
In theory, it is easy. JavaScript has a string function to split data into an array (https://developer.mozilla.o.... If you use that on your result from the AJAX call, you would have an array of strings. You then simply modify my code to use each item of the array.
Assume you did this into an array called parts and you expect 2 of them. Assume you made two text symbols. You could then do:
sym.$("Text").html(parts[0]);
sym.$("Text").html(parts[1]);
You could get fancier. You could have one text symbol that looked like this:
Hello, {name}. Happy {foo} day.
You could then use JS string functions to replace {name} with line 1 and {foo} with line 2.
Thanks Raymond - I saw the split command but could not get it to work. I mainly use Delphi to code (and could easily do this using it) but am new to JS - what if the amount of lines was unknown? is there a way of reading the content of the file into an Array until the file is finished? ie EOF? - I have read a little on JS Arrays and they seem to be similar....I will work on it later tonight (I am in the UK) if you do have any other suggestions/pointers though, it would be appreciated. Thanks Pete
"what if the amount of lines was unknown"
Why would it be? If your intent is to make two items (or 3, etc) in your animation dynamic based on some server-side resource, you have to make _some_ assumption, right? Now if you are tying your EA code to some other service - like - a remote weather service, that's something else entirely.
"s there a way of reading the content of the file into an Array until the file is finished? ie EOF? - "
Don't worry about that - your code (well mine above) is run when the network request is _done_, so you've gotten all the result at that point.
Ok, I think I understand - so even if there is a "unknown" number of lines (ie one day it could be 5, the next 10, the next 15) - each line will load and display. I am not sure what you mean by "animation dynamic" - all I want to do is load in a text file and display the contents one at a time. in a very simple animation..based on the idea that this will need to be dynamic as there will be changes in the file content.
"Ok, I think I understand - so even if there is a "unknown" number of lines (ie one day it could be 5, the next 10, the next 15) - each line will load and display. "
But why would the lines be unknown? Aren't you creating the data yourself?
Ok, there is slight confusion here - I personally am not creating the data, otherwise I would just add it all manually- my client/customer will be editing the file - therefore this has to be dynamically loaded from that file - and therefore I (personally) as the developer do not know what that number could be...which is why I would look at Arrays and then manipulating the array.....anyway I think I am going to go down the Json route now - allowing the data to be added to a database, and then creating the json file using php and displaying that within the animation seems to be the best way to do this. Thanks for the suggestions though Pete
It sounds like you are ok now, but, this is intriguing me. :)
So you say your client will control the file, but that does not mean it is going to be a random amount of lines.
If I build an animation that has two dynamic parts to it, I'd tell the client to make a file with two lines.
Yes, the client can ignore me, but the *expectation* is that you will have two lines.
So you don't necessarily have to handle N lines of input. Your animation is going to be built to assume a certain number. You *can*, howver, check to ensure that at least two lines were found, and if not, use some default values instead.
I do understand what you mean and yes in this instance there will always be at least 1 line so that is the default if you like. As it happens I have managed to generate a Json file using a MYSQL database and php - so I will now load this in using Edge Animate and a few "tutorials" that I already know about. The best part of this, is now I know how to do this easily - I will be able to make other areas of the site even easier!! - thanks for the tips though, it did help.
If you don't mind, when you go live, can you post the URL? (As a comment here I mean.)
The site is not live yet as I have a lot more work to do - but the link is http://quoling.com/LoadText... - the data is coming from a JSon file that is generated from a database using php - I have also changed the code so that this is truly dynamically loaded, so no matter how many "records" are added or deleted the site will always reflect what is available.
Cool, thanks for sharing it!
Interesting tutorial :). Is it possible to combine this with PHP and grab data from a MySQL table? I would be keen to try this out - I'm thinking that if I combine this idea with Ajax, I could get graphs (via Google Chart Tools) to "animate" when data is updated. Had I come across this sooner, I would have had a good starting solution for a project...
Absolutely. Just point to a PHP script.
Hello Raymond. Firstly, I appreciate your blog and insights. Adobe Edge Animate support is very minimal which means its hard to find comprehensive explanations to create intermediate projects. To let you have an idea of my skill set I have a background in animation and design and have been taking classes in web development. My question is about how to create an interactive website that loads various animation depending on the user's choice and current place within the Adobe Edge Animate timeline. The website I developed for a client @ www.goshowpro.com works but loads slower than I want and doesn't format properly on my client's Macbook (I believe he needs to update his browsers but that is something else.)
So as you can see from looking at my website I used a multitude of HTML files to create my vision of an interactive website based off of a theatrical stage. I know this is not an ideal method. I would prefer to have it all on one page but I am having trouble with my javascript coding. I was wondering if there would be away to expedite my current site's load time and if not if you could look at my NEW coding.
Below is a snippet of my coding for the portfolio link that I would like to implement on the site. This IS NOT the current coding on the site. Obviously I am using labels for my trigger. Additionally, my new project file is having issues with visual formating (things popping or doubling up when they shouldn't). Thank you in advance
--------------------------------------------------------------------------------------
if = "hstop" "chomstop" "shomstop" "phomstop"
{sym.play("hporstart")};
else = "hconstop" "sconstop" "pconstop"
{sym.play("cporstart")};
else = "hserstop" "cserstop" "pserstop"
{sym.play("sporstart")};
----------------------------------------------
It looks crappy but I'm trying to learn so don't laugh too much. Thanks again.
Michael
"Adobe Edge Animate support is very minimal " - just curious - but what avenues did you try? Did you try the forums? ( http://adobe.com/go/learn_a... Let me know. Just want to make sure you are using all the available resources you can.
In terms of performance, I'm not sure I'm the best person to help you with Edge Animate and performance. I'm still learning myself. But I'll try.
First - I notice you have some rather large images. I'm not expert in image compression, but maybe you can lower the quality a bit or consider a lossy version. The largest asset is one I can't even see, BlackBackground.gif.
I'm a bit unsure about the last part of your comment. Are you saying you want to try that code or you did and you want to try it on the home page too? I'd definitely suggest something like that as the complete page reload is slow.
I want to use a <?php get_sidebar(); ?> code to pull in a wordpress sidebar inside an element in edge. What would be the best way to go about this?
If the element is defined by html, you would just add it there - and rename your .html to .php.
Thanks for the post. I came across it while searching for the dynamic aspects of EA.
when I started my project I incorrectly assumed the 'stop at' command would stop when it reaches that point on the timeline. However once I realized it jumps directly there I couldn't find an easy way to play a section of the timeline ie play from point A to B where A is the current position and B is unknown.
So is there an easy way you know of to create a stop point on the fly that doesn't jump directly to it?
So basically you want to dynamically stop at X, not go there and stop. Right?
Also - what "stop at" command? The docs mention stop and say stop(x) means to stop at that time, not jump there and stop.
the 'Stop At' is what its referred to in the snippet side panel, but yeah its the stop( [label or milliseconds]) command i was talking about.
Unless something is wrong with my program, i made a simple example by drawing a circle at 0 seconds (to make sure i knew the timeline was playing) and a square that wouldn't become visible until the ten second mark. Then I added a trigger on the timeline at 1 second: sym.stop(10000);
The circle appears, and then 1 second later the square appears meaning it skips to that point. While what I'd like to happen is to have it continue playing the other 9 seconds but once it reaches that point to stop.
I have a very crude way of doing it now by setting triggers at over a 100 points and getting the position of each one, then an if statement to stop playing if it matches a dynamic variable. It works, but it takes forever to load the code window as I have 600 of these triggers so far, and would need about a thousand more for the other features I'm adding.
Any help or easier workaround would be much appreciated.
Thanks.
Btw, good luck at the conference tomorrow!
Let me check. My reading of the docs says it should NOT go to X and stop but stop at X. Most likely it is a doc bug and you will need a work around. I'll also ask my contact about this feature in general.
I've spoken with the PM (product manager) and yes - stop(n) is meant to go to N and stop. I made it clear that I thought the docs were a bit unclear on this.
What about this alternative. If you know where you may want to stop, lets say positions A, B, and C, you add triggers for each.
Then your code does something like this:
if(somecondition) stopBFlag = true;
In your triggers for A, B, and C, you simply check these flags, and if true, you stop.
Thanks for this good guide...I have tried to do it but the text don't change..it not display the content of dynamic.html.. can you upload the project please..thanks in advance
The project is uploaded. I linked to it at the end of the article.
at the end of article i only see it "Pretty simple, right? You can run the final version here: http://www.raymondcamden.co..."
Right, and all the code is there. If you need the .an file, it is here: http://www.raymondcamden.co...
i have follow the guide step to step but it don't function.is there a zip file please?
Here is a dropbox link: https://dl.dropboxuserconte...
thanks, i think it not work because i play it on local and not on server...thanks ..now it work perfectly
Its very nice way , but how can i loading JSON file instead of HTML file ?
You would just change the JS code to point to the JSON file. If the file ends in .json, jQuery will automatically recognize it as JSON and parse it. Otherwise you use the 3rd (I believe) argument to $.get to tell it the type is JSON.
Hi Raymond, are your demo link is offline?
Try now please.