Data-driven Edge Animate projects
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: http://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: http://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: http://www.raymondcamden.com/demos/2012/nov/7/v3/Untitled-2.html
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
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
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.
(If you didn't realise, I was being sarcastic)
Thanks
I didn't see a way to download that
http://www.raymondcamden.com/demos/2012/nov/7/v3/d...
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).
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
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
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.
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.
But why would the lines be unknown? Aren't you creating the data yourself?
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.