Using Javascript JSON data within Edge Animate

I have a javascript file that outputs data onto a html page, It basically GET's the information from a JSON file
I would like to use the output within Edge Animate instead (basically re-building the HTML page using Edge Animate).
I understand that i must include my script & jquery scripts within my composition, below is some code from my script. How can i use the output of this in adobe edge.
function playlistupdate (list)
for (var i = 0 ; i != list.dbdata.length ; i++)
        var song = list.dbdata[i];
    $("#list0artist").html(list.dbdata[0].artist);
    $("#list0title").html(list.dbdata[0].title);
    $("#list0label").html(list.dbdata[0].label);
    $("#list0albumyear").html(list.dbdata[0].albumyear);
    $("#list0picture").html('<img src="/testsite/covers/' + list.dbdata[0].picture + '" width="170" height="170"/>');
for instance, how can i display the "artist", "title", "label" and "album_year" within Edge Animate. And also how can i display the "picture" (which is an actual JPEG file.)
I am hoping that i do not need to completly intergrate the script within Edge animate.
many thanks
Justin.

Hi Justin,
You will find 2 demo files here: json Demos upgraded.zip - Box
Note: You can post your working file.

Similar Messages

Adding custom css classes from within edge animate

is it possible to add CSS classes from within Edge Animate, im not talking about adding your own stylesheet by ex. manually editing the .html document, but rather adding classes via ex. the code window ?, it would be immensely helpful to have everything in one place.
any suggestions on this one ?

Yes - you can use addclass() and you can use UI.
1- UI
Select elements in elements panel. Click the C button in the property panel.
Use this for example
sym.$('.classname').css({'color':'red'});
2- addclaas()
sym.$("name').addclass('classname');
Use same as above.
On Sat, Apr 25, 2015 at 8:56 AM mads18950258 <[email protected]>

How do I use Typekit fonts within Edge Animate

I have applied a 'Pragmatica' Typekit font to a website. I'm using Edge animate to construct some pages and within these pages want to add Type; however, Edge Fonts does not include the Typekit font 'Pragmatica' and the instruction for the page to use Typekit seems not to filter through into the Edge animate section .... is there a way round this?

Hi, Trimmertop-
When you open up the Web Fonts viewer, you will see Edge Web Fonts by default. However, there is a tab next to it that says "Custom." You can stick in your kit code in that location.
-Elaine

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

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>

     <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

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>

     <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

C# Parsing JSON data within Mobile project OR via Controller Issue

When I invoke the following to a custom controller to return data to my client (Windows Phone 8.1 app):
var _lines = await App.MobileService.InvokeApiAsync<List<Tfl.Api.Presentation.Entities.Line>>("lines", System.Net.Http.HttpMethod.Get, new Dictionary<string, string>
{"url", "http://api.tfl.gov.uk/Line"}
I received the following Exception:-
FileNotFoundException was caught
Could not load file or assembly 'System.Runtime.Serialization,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' or one
of its dependencies. The system cannot find the file specified.
However, I successfully parse the JSON data via the controller [I did have an image here displaying the data, but not enough rep to post!] and I also have no references to the above dll in my Windows Phone application.
Any ideas?
Note: Occurs using either local parsing within the mobile app or via controllers in a service app; also running VS Ultimate 2013 with Update 4

Hi James,
The data is deserializing using System.Runtime.Serialization 4.0.0.0 on the client side (which is targeting .NET 4.5). I am using a third party DLL found here (api.tfl.gov.uk) which contains all of the data transfer objects required to map the data from
the JSON into an object structure.
I have tested this DLL also within a console application and runs as expected, deserializing and mapping data etc; could the issue be that the DLL I'm using containing DataContract and DataMember annotations cannot be used as a reference within the Windows
Phone 8.1 app?
I say this because I have a solution whereby I 'copy' the DTO modes in the DLL into plain models using the same code (minus Serialization annotations) and the JSON then is able to deserialize and map to those in the phone.
So the solution are present is to create my own models, however if you've any other ideas/workarounds that would be great to know in the future where I can just reference the third party DLL.
Thanks for the response!
--David

I'm confused about using local fonts in my Edge Animate designs...

http://blogs.adobe.com/edge/2012/01/27/web-fonts-and-edge-together-at-last/
According to the above blog, it should be possible to have Edge Animate recognize local fonts, but a few moderators are saying it's not yet possible... (I did try the method above and it did not work, but it seems like a reputable blog...) this is a screenshot of what I tried to do with the code from above:
The "Welcome" "Portfolio" etc is styled using @font-face in my original html document that I imported into Edge, but the "Test" div I want to have the same style - I want to be able to create new divs within Edge and keep the same fonts...
So.... is there a way to use local fonts in Edge, or no?
Thanks all,
Aza

Yes it is possible, apologies if my other answer mislead you.
In your case it appears to be a case of incorrect reference.
In your Asset > Font dialog creation process you reference your font family with underscores separating the title
example: 'waukegan_ldo_extended', Tahoma, sans-serif
BUT, in your .css files, your fontface reference does not.
example: font-family: 'waukegan ldo extended'; << notice no underscores
These two references should match exactly. As a tip, I would recommend to use a single word like WaukeganLdoExtended.
hth
Darrell

Wordpress dynamic data into Edge Animate

Hello. I want to know hoy to create a "recent posts" in a Edge animate slider, out of a wordpress blog. Thank you.

Try the following updated code in the sample: (I've also uploaded the updated sample @ https://www.dropbox.com/s/fqip7qbm3wkvu60/widgets1.zip). Hope this is what you are looking for.
fbCode += '<div class="fb-like-box" data-href="www.facebook.com/EBcoffeeandpub" \
data-width="300" data-height="400" \
data-colorscheme="light" \
data-show-faces="false" \
data-header="true" \
data-stream="true" \
data-show-border="true"></div>';
I have never used an activity widget, but as per the documentation it displays the most interesting, recent activity taking place on your site, using actions (such as likes) by your friends and other people. You may need to set the following attributes for your case:
    class="fb-activity"
    data-site="developers.facebook.com"
    data-filter="EBCofeeandpub"
    data-action="likes, recommends"
-Dharmendra

Can we capture the video and audio using cam and microphone in Edge Animate?

Hi Everyone,
I got a new requirement from the client to create a HTML5 based functionality through which one can capture the video and audio using his web-cam/camcorder and microphone. I have researched on internet and found that there is api available (not reliable) http://www.html5rocks.com/en/tutorials/getusermedia/intro/ . I am not a coder by profession and use Edge animate to create HTML 5 based animations and stuff like that. Another problem which i have found that the api only works well with Chrome and Opera and not with Mozilla, IE..
Can anybody help me out in this, please...
Thanks & Warm Regards
Vikas

Hi, Vikas-
After a brief bit of research, you're definitely hitting upon the limitation of the browsers. Not all of the browsers have implemented this part of the HTML5 standard, so you're going to either have to use Flash or be limited to these specific browsers.
Thanks,
-Elaine

Using background-size: cover causes Edge Animate to crash

Bug report:
If I select an element which has background-size tag specified for the element I get "An error occurred. Please save your work and restart Edge Animate."
This happens background-size: cover, background-size: contain, etc.

Hi, Alan-
Great find! I was able to reproduce this bug on our side and have filed it with our team.
Thanks,
-Elaine

How to use scrollInToView method in Adobe edge animate

I would like to use scrollInToView method in one my long pages, but I can't seem to invoke this code, any help would be greatly appreciated.

Hi, Krutneam.
We can get the DOM element by using jQuery().get() method.
If you want to scroll window to pos of "Rectangle" on the main timeline. like this.
sym.$('Rectangle').get(0).scrollIntoView();
thanks.
Ume.

'Jump to' a particular slide in adobe captivate using edge animate.

I would like to 'jump to' a particular slide in adobe captivate using interactions created in an edge animate file. Is anyone able to help me with the javascript needed to do this?

Hi Leith,
From what I know, such functionality is currently not available.
Found something related, but this does not answer your question, I think
Using Edge Animate with Captivate
Thanks,
Preran

How can I maintain the font used in Adobe Edge Animate for Adobe Muse website?

I used a png file which is working perfect and then used the font Montez in Edge Animate for 2 titles, however once I published the file(live) to muse it a totally different font. Is there something in particular I need to do in Animate to avoid alteration of font. Help!

The original photo gallery is:
http://www.bethanyjanedavies.com/portfolio.html
You can see that the right side is chopped off
But I may have to compromise and use:
http://www.bethanyjanedavies.com/portfolio2.html
This is a much wider page than the rest of the website, but I suppose you have to find a compromise that works!!
Cheers
Helen

Business catalyst blog sumarry to JSON file for adobe animate

We are trying to map blog post list details to an adobe animate file. Like the module blogsite summary command for muse, we want to pass data to adobe animate. A json file could be loaded but can we pass a json file dynamically from business catalyst?
This video from edge commons Using Templates to render Dynamic Data (Adobe Edge Animate Online Week, Episode 6) - YouTube
Talks a bit about what we want to do however we want to export data from business catalyst's blog summary.
Anyone have any ideas?

Not at the moment no, you can not have a json file like that automatically updated based on the blog.

Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?

Hi All,
I am creating an interactive site through Edge Animate and am in the process of trying to create a HTML 5 Video Playlist to function within Edge Animate.
Current Process - Example:
I have 3 videos that need to be played on a certain page.
I created a symbol and dragged the videos to the stage and hidden them within that symbol's timeline.
I then use thumbnail images in a side playlist to either .remove(); .hide(); a video and .show(); the next.
However when I do a hide / show option, the video continue to plays in the background if I don't also create an if/else statement to pause it.
My concern with pausing it is that it will continue to load and dramatically slow down the load time of the site.
References:
I found this which looks very helpful but don't know how to add this to edge composition.
http://demosthenes.info/blog/909/Create-An-Automatic-HTML5-Video-Playlist
Please help or put me in the right direction to create a playlist would be hugely... AMAZINGLY.. helpful.
Thanks,
Jason

Hi Joe,
Thank you so much for your help on this one. It is hugely appreciated!!
I have been working frantically to implement your solution to get this working. I used the 'change src' method.
I have added all my code below in case anyone wants the solution in the future.
Could you please help below as I am now totally stuck with the <track> and 'event listener issues' !!
Issue #1:
I am having major problems with loading the 'closed captions' track element.
Everything I click for the video to change source / to the next video, the closed caption track adds to the video and doesn't 'unload' the previous one. You then end up with multiple different subtitle tracks on the video screen
- The closed captions / subtitles are not showing up in Google Chrome either?
Issue #2:
I can't get the event listener in edge animate to work for 'playing' and 'ended'. Can you please help and point me in the correct direction??
Screenshot (showing what happens after the 3rd video is loaded)
This is the Code I am currently using in the "Creation Complete" of this Symbol.
SET UP OF VIDEO PLAYER AND FIRST VIDEO
var vid = sym.$("video_Chapter5");
vid.html('<video id="ch5video" width="100%" height="auto" margin= "0 auto" \
position ="relative" poster="video/video1_poster.jpg" controls="controls" </video> \
<source id ="videomp4src" src="video/Video_mp4_1.mp4" type="video/mp4" </source> \
<source id ="videoogvsrc" src="video/Video_ogv_1.ogg" type="video/ogv" </source> \
<source id ="videowebmsrc" src="video/Video_webm_1.ogg" type="video/webm" </source> \
<track id ="trackvtt" kind="subtitles" src="video/Video_1_Script.vtt" srclang="en" label="English" hidden </track>');
VARIABLE IDS
$(document).ready(function() {
var videoID = 'ch5video';
var sourceID1 = 'videomp4src';
var sourceID2 = 'videoogvsrc';
var sourceID3 = 'videowebmsrc';
var trackID = 'trackvtt';
var vid1mp4 = 'video/Video_mp4_1.mp4';
var vid2mp4 = 'video/Video_mp4_2.mp4';
var vid3mp4 = 'video/Video_mp4_3.mp4';
var vid4mp4 = 'video/Video_mp4_4.mp4';
var vid1ogv = 'video/Video_ogv_1.ogv';
var vid2ogv = 'video/Video_ogv_2.ogv';
var vid3ogv = 'video/Video_ogv_3.ogv';
var vid4ogv = 'video/Video_ogv_4.ogv';
var vid1webm = 'video/Video_webm_1.webm';
var vid2webm = 'video/Video_webm_2.webm';
var vid3webm = 'video/Video_webm_3.webm';
var vid4webm = 'video/Video_webm_4.webm';
var script1vtt = 'video/Video_1_Script.vtt';
var script2vtt = 'video/Video_2_Script.vtt';
var script3srt = 'video/Video_3_Script.vtt';
var script4vtt = 'video/Video_4_Script.vtt';
var newposter1 = 'video/video1_poster.jpg';
var newposter2 = 'video/video2_poster.jpg';
var newposter3 = 'video/video3_poster.jpg';
var newposter4 = 'video/video4_poster.jpg';
VIDEO PLAYLIST THUMBNAIL BUTTONS - TO CHANGE VIDEO IN PLAYER
sym.$('btn1').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid1mp4);
sym.$('#'+sourceID2).attr('src', vid1ogv);
sym.$('#'+sourceID3).attr('src', vid1webm);
sym.$('#'+trackID).attr('src', script1vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter1);
sym.$('#'+videoID).get(0).play();
sym.$('btn2').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid2mp4);
sym.$('#'+sourceID2).attr('src', vid2ogv);
sym.$('#'+sourceID3).attr('src', vid2webm);
sym.$('#'+trackID).attr('src', script2vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+trackID).load();
sym.$('#'+videoID).attr('poster', newposter2);
sym.$('#'+videoID).get(0).play();
sym.$('btn3').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid3mp4);
sym.$('#'+sourceID2).attr('src', vid3ogv);
sym.$('#'+sourceID3).attr('src', vid3webm);
sym.$('#'+trackID).attr('src', script3srt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter3);
sym.$('#'+videoID).get(0).play();
sym.$('btn4').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid4mp4);
sym.$('#'+sourceID2).attr('src', vid4ogv);
sym.$('#'+sourceID3).attr('src', vid4webm);
sym.$('#'+trackID).attr('src', script4vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter4);
sym.$('#'+videoID).get(0).play();
EVENT LISTENER FOR PLAYING - TO CREAT BACKGROUND /LIGHT BOX SCREEN
sym.$('#'+videoID).get(0).addEventListener('playing', function () {
sym.getSymbol("backscreen_Ch5").$("backscreen").show();
sym.getSymbol("backscreen_Ch5").play("play");
EVENT LISTENER FOR ENDED - TO PLAY NEXT VIDEO IN SERIES
sym.$('#'+videoID).get(0).addEventListener('ended', function () {
//code to play next video

How do I link a google drive edge animate project to an iframe?

I have a simple edge animate project as a test. It has the following files in the root:
edge_includes folder containing 3 images and edge.5.0.1.min.js
project.html
project_edge.js
I want to be able to have these files stored on google drive (or dropbox or alternative) and link to them through an iframe on my website. I've tried doing this by keeping the file structure the same on google drive and just referencing the shared link of the html file, but the project will not work.
I've also tried replacing the src links of the edge.5.0.1.min.js file and the image files to their shared links on the google drive. This didn't work either.
Is there any way to host the files externally and have them still reference each other properly so the html file can be linked into an iframe on a different site?
Many thanks in advance
Barry

Just to add the relevant requested information:
I am using the latest version of Edge animate (2014.1)
Google chrome (and IE desktop not metro as backup)
If anyone wants to see the file then I'm happy to link to it, but I don't think the question really warrants it.
Thanks again.

Using Javascript JSON data within Edge Animate

Similar Messages

Maybe you are looking for