Adobe Edge animation

Sep 27, 2012

Hi all,

Just discussed forllowing topic with another SL user and think it is a good idea to post it.

Sometimes the annimation possiblity is limted and Flash is no longer an option I think. The new Adobe Edge allows you to make annimations in HTML5. Does anyone know if you can import these animations into SL? And afterwards publish to for iPad?

I think it could be an interesting development. (or perhaps net issue SL could incorporate this feature)

Thanks for sharing,

John 

31 Replies
Randall Smith

I've been testing inserting Edge web objects into a SL project and then viewing them on an iPad (3). If I store the SL output files on a public area of the server I am able to view the project, with its functioning Edge content, using Articulate Mobile player on my iPad. When I choose to download the content to view offline it all seems to download ok but the Edge content does not play in offline (airplane) mode. When I tun off airplane mode it again all plays fine. It seems that an Internet connection is required to play the Edge content.

This makes me think that the web object resources are not downloaded to the iPad. Here is a link to a one-screen SL project into which I've inserted a sample Edge web object: https://www.conservationtraining.org/sftp_uploads/testing/edge_ipad_test/story.html. It tests out fine when I'm online but does not offline.

Jonathan Arias

i think that since i am placing a link  to where the animation and its files are located in the server as a "web object" the player will always pull from that link to load the content.  I think maybe i should try to place a .aom file exported from edge. that way articulate takes everything along when it publishes and it will be all available to download for offline reading.... i will need to try that next. 

Mike Enders

Ahh!

Yes.  Sorry, I thought you were pulling the files in from a local source. Storyline won't pull those server files in as they're not residing on your local machine.  

Typically, you have to have the output in a folder on your local machine. Within that folder, you should name the primary file "index.html."  Then, when you add a web object, navigate and point Storyline to that folder.  

When Storyline publishes, it should pull in the index.html and all supporting files.  

Mike

 

Jonathan Arias

i took screenshots to show you my work..lol

step 1: i have both my storyline project and adobe edge files next to each other in my local drive.

step2: i labeled my html file "indexx.html" from edge ( i exported to web from edge and this is the folder with the published files ready for web , i test the html file, the animation plays)

step 3: from storyline i selected the web object option and i see my two folders on my desktop.

step 4: i opened my edge animation folder, but "index.html" is not an option for me to select from.

hope this helps :)

 

Jerson  Campos

Just did a quick scan of the discussion.  Had a quick thought. Does any of the code in the animate edge file point to code that is on the internet?  Some of the core javascript code may not be included in the file and instead point to other sites where it may be stored at like jquery code.  This could prevent the animation from playing.

Jonathan Arias

yes, that is what i did wrong, i will need to check my setting at publishing.  i think i had the "host runtime files on adobe cdn checked, i think that is the default setting, i should have selected " plublish preload DOM as a separate file". you are right!!!

 

I will republish the files replace in my articulate project and republish..  i think that will fix things, Thanks Jerson. I did not think to look at that ...

The "index.html"  has the code that goes in between the head tags of the page, that code tells the browser that there is an animation made on edge in the body of the page, this is the code:

<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/5.0.1/edge.5.0.1.min.js"></script>
<style>
.edgeLoad-EDGE-5300075 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('springer_web_banner_1', 'EDGE-5300075', {
scaleToFit: "none",
centerStage: "none",
minW: "0",
maxW: "undefined",
width: "600px",
height: "200px"
}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","600px","200px"],"fill":["rgba(255,255,255,1)"]}},"dom":{}}, {"dom":{}});
</script>
<!--Adobe Edge Runtime End-->

 

This discussion is closed. You can start a new discussion or contact Articulate Support.