Using Adobe Edge for HTML 5 Animations and vBulletin CMS

[alaska_av8r]

I have been exploring Adobe Edge to produce animations that are html 5 compatible within my articles on the CMS.

It was a bit tough for me at first to figure out the code but with Adobe's help we were able to get it to work.

After you save the animation in adobe edge it outputs several files and folders, these will need to be uploaded to your server.

Here is the file structure as I have it uploaded to my server. The html5 folder is a root folder like this www.mywebsite.com/html5



My project is located in the boat_wind folder.

1. Do not edit the code in the yourfilename.html file, copy the code in it and place it in your CMS article like shown below, however you will have to add a bit more to the path so it can find the preloader javascript file, in my case I had to add html5/boat_wind



2. Open the yourfilename_edgePreload.js file and add the same to the path for the resources that are loaded, it is near the bottom.


3. Now open the yourfilename_edge.js file and in every instance you see a path like this:

,'images/topview.gif']

you will need to add to the path like this

 ,'html5/boat_wind/images/topview.gif']

Now you are done. If you are adding more than one animation, then you will need to read the edge api for multiple stages and animations in a single document.