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
You should be able to bring them in as web objects, I have had some success using hype with this way of animating in html5
Thanks Phil,
But bringing them in as webobject would mean that my clients have to view online. Most of them are in remote areas without internet access and therefore prefer a downloaded version on their iPad. Or am I getting a wrong idea?
If you add a web object from a local machine, Storyline will incorparate the webpage and reqiured files in the storyline package. In theory then when this is downloaded to the ipad the web object will be on the ipad as well
This is the only way I know to add objects like this to Storyline
Correct I agree Phil and this does work with a browser I found out. Up to sofar I was not succesful in doing so via the Articulate App. A bit of the same story as when you try to link to a PDF, OK in browser but not (yet) via the App.
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.
i tried placing the adobe edge animation in articulate storyline 2, i got everything to work in the ipad. however, the edge animation did not play when trying to view the storyline project offline on the ipad.
Hi Jonathan,
Quick question...did you download the course for offline viewing in the Articulate Mobile Player?
Mike
i did yes, and it does download. However , once i turned off the wifi on the ipad and relauched the course, the edge animation did not play.
Odd.
Could you submit a case and attach your file? And also link to this thread. I'd love for our team to take a look. I'm not sure if it's something that we officially support, but I think it would be nice to see why it works with wifi but not without.
http://www.articulate.com/support/contact/submit.php
Thanks,
Mike
done, i will pm you with a link to where i am hosting the files so you can see for yourself. :)
This post was removed by the author
resubmited my ticket:
Case Number: 00461691
Reference ID: ref:_00D30Txo._50040kIHxf:ref
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.
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
hmmm i did rename it. go to storyline 2, select web object, go to the folder in my local drive where the published files from edge are and i see the images folder, but i do not see the html or .js files in that folder.
i think this would all go faster if i could share the files with you so you can test it yourself i do have the ability to see the index.html file from the file section window within the web object file selection window.
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 :)
Jonathan,
You don't need to dive into the folder form SL. Just point SL to the folder itself. I sent you a message offline.
Mike
ahhh.. let me try that and export.. stay tune :)
same result, plays with the wifi on, not off.
I'm seeing the same thing. Hopefully our team can decipher.
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.
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-->
@Jonathan,
After you test, can you report back and let us know if it's working? It's a good observation and nugget of info to be able to spread if your theory is correct.
Thanks!
Mike
sure i will let you know. working on other stuff. stay tune :)
This discussion is closed. You can start a new discussion or contact Articulate Support.