How to pass javascript variables into an Edge Animate project from HTML

Question

I have just about got the basics nailed for Edge Animate now - coming from a Flash background it's been fairly straight forward, nice work so far (but more on that later)
I have had to build a "promoted items" slider for the homepage on one of our sites....previously this would have been a flash animation but, hey ho .
I originally built it as a jQuery extension/plugin but found it too time consuming to make minor alterations - that's where Edge came in and SEEMED to fill the job pretty well.
Now for the moment i'll put on hold the whole issue about how we NEED to be able to work with dom-level elements directly on the page (eg, animating divs and images within a ul-li structure which is how these things usually work) and concentrate on the Edge specific issue...
I've seen a few people asking this same question, but none of the answers either a) work at all for me , or b) are good enough for what I need to do.
see previous solutions here http://support.muse.adobe.com/message/4658175 and here : http://forums.adobe.com/thread/1065343
My project uses an internal array of data, and while in "preview" mode it works reasonably well.
in the Stage creationComplete event i have Edge code like, for example :
   var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
   var headlinesArray = ["product 1", "product 2", "product 3"];
   var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
   var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
   //variables set to full internal scope, used immediately after this and called from sub-elements afterwards
   sym.getComposition().getStage().setVariable("imagesArrayData", imagesArray);
this code obviously needs to be changed via the HTML page that is calling it.
IDEALLY i would have these elements already on the page ( <div><h1>Product 1</h1><img src="....  etc ) and then jquery it to hell to make it look funky. This is how we NEED to be doing it in the future...that way our content is still searchable and findable by search bots etc. Edge will output a "static" version of the page, i tried that, but it won't work for dynamically built objects. There's no way i've found of building an array of Symbols based on the existing DOM structure like you can do in jQuery itself.
however, in the meantime i'll settle for being able to set a javascript call up somewhere - like the old flashvars solution (which was horrible fudge, but worked as a way to get data into a project )
i'd REALLY rather not use an internal jSon call .... it's adding uneccessary bandwidth and additional server processing when the data it needs has already been retrieved from the database when the HTML page is drawn - AND it means i need to make sure that the json producing web service gets ported accross to any other projects that use this same "slider"
i've tried removing the internal declaration and changing my HTML to :
<script>
var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
   var headlinesArray = ["product 1", "product 2", "product 3"];
   var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
   var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
</script>
<!--Adobe Edge Runtime-->
     <script type="text/javascript" charset="utf-8" src="index_edgePreload.js"></script>
etc
but this hasn't worked.
i'm going to attempt the solution using
AdobeEdge.bootstrapCallback(function(compId) { ....
as found on http://forums.adobe.com/thread/1065343
but this doesnt explain how to set up Stage level variables, rather than targeting a specific Edge property
Anyone got any ideas? Or do I just scrap the project?
IMHO : Adobe need to be careful of falling into the same mindset that most of the anti-flash brigade have.
Please remember that Flash is used for WAY more than just adverts.
At the moment, Edge will work great as a way to put a simple animation onto the page with REALLY basic interactivity - suitable for a basic advert - but we need our HTML5 animations and scripts to be fully dynamic, data-driven, and portable, and preferably using existing DOM elements.
One last thing, any chance of a feature to say "my page already uses jQuery, don't import Edge's own outdated version"
Message was edited by: j1mp

Answer 1

I have just about got the basics nailed for Edge Animate now - coming from a Flash background it's been fairly straight forward, nice work so far (but more on that later)
I have had to build a "promoted items" slider for the homepage on one of our sites....previously this would have been a flash animation but, hey ho .
I originally built it as a jQuery extension/plugin but found it too time consuming to make minor alterations - that's where Edge came in and SEEMED to fill the job pretty well.
Now for the moment i'll put on hold the whole issue about how we NEED to be able to work with dom-level elements directly on the page (eg, animating divs and images within a ul-li structure which is how these things usually work) and concentrate on the Edge specific issue...
I've seen a few people asking this same question, but none of the answers either a) work at all for me , or b) are good enough for what I need to do.
see previous solutions here http://support.muse.adobe.com/message/4658175 and here : http://forums.adobe.com/thread/1065343
My project uses an internal array of data, and while in "preview" mode it works reasonably well.
in the Stage creationComplete event i have Edge code like, for example :
   var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
   var headlinesArray = ["product 1", "product 2", "product 3"];
   var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
   var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
   //variables set to full internal scope, used immediately after this and called from sub-elements afterwards
   sym.getComposition().getStage().setVariable("imagesArrayData", imagesArray);
this code obviously needs to be changed via the HTML page that is calling it.
IDEALLY i would have these elements already on the page ( <div><h1>Product 1</h1><img src="....  etc ) and then jquery it to hell to make it look funky. This is how we NEED to be doing it in the future...that way our content is still searchable and findable by search bots etc. Edge will output a "static" version of the page, i tried that, but it won't work for dynamically built objects. There's no way i've found of building an array of Symbols based on the existing DOM structure like you can do in jQuery itself.
however, in the meantime i'll settle for being able to set a javascript call up somewhere - like the old flashvars solution (which was horrible fudge, but worked as a way to get data into a project )
i'd REALLY rather not use an internal jSon call .... it's adding uneccessary bandwidth and additional server processing when the data it needs has already been retrieved from the database when the HTML page is drawn - AND it means i need to make sure that the json producing web service gets ported accross to any other projects that use this same "slider"
i've tried removing the internal declaration and changing my HTML to :
<script>
var imagesArray = ["images/img1.jpg", "images/img2.jpg", "images/img3.jpg"];
   var headlinesArray = ["product 1", "product 2", "product 3"];
   var subTxtArray = ["lovely widgets", "smelly doo-dads", "purple whatchamacallits"];
   var linksArray = ["http://www.adobe.com", "http://www.adobe.co.uk", "http://www.adobe.net"];
</script>
<!--Adobe Edge Runtime-->
     <script type="text/javascript" charset="utf-8" src="index_edgePreload.js"></script>
etc
but this hasn't worked.
i'm going to attempt the solution using
AdobeEdge.bootstrapCallback(function(compId) { ....
as found on http://forums.adobe.com/thread/1065343
but this doesnt explain how to set up Stage level variables, rather than targeting a specific Edge property
Anyone got any ideas? Or do I just scrap the project?
IMHO : Adobe need to be careful of falling into the same mindset that most of the anti-flash brigade have.
Please remember that Flash is used for WAY more than just adverts.
At the moment, Edge will work great as a way to put a simple animation onto the page with REALLY basic interactivity - suitable for a basic advert - but we need our HTML5 animations and scripts to be fully dynamic, data-driven, and portable, and preferably using existing DOM elements.
One last thing, any chance of a feature to say "my page already uses jQuery, don't import Edge's own outdated version"
Message was edited by: j1mp