Reading JSON Atlas into Animate (branched from: Assigning XML content to dynamic text fields)

[Chris_Lhaut]

Hello

I try to load json atas into animate cc but didn't succeed to do it right now. I read you've got a working example.. Can you provide it to me please?

Thanks a lot !!

[Colin Holgate]

There is a big difference between importing XML to go into textfields, and reading JSON as part of a texture atlas. So I made your question be its own post. Hopefully you'll get some answers.

You could describe in more detail what you're trying to do.

[Chris_Lhaut]

Ok thanks.

[mehmetk89082497]

what do you want for as3 or canvas or like component for what air

before load main content you can import everything to insite after canvas created  limited but you can change atlas depending situation

what do you want to do and why you want to do explain please very simple what is your target if i unerstand i can help you

[Chris_Lhaut]

All with HTML5. In fact I had a great working example of what I want to do but it's made in Edge animate not animate cc.. If you want I can send you the Edge animate example so you will be able to see if it's possible to do that in Animate CC ?

[GC_Laurent]

I'm looking for the same thing I think Chris.. if ever you get an answer, tell me

Thanks !

[ClayUUID]

Google is your friend: Working with JSON - Learn web development | MDN

[Chris_Lhaut]

Thank you for the link but it doesn' explain how to do it in Animate CC

[ClayUUID]

https://forums.adobe.com/people/Chris+Lhaut  wrote

Thank you for the link but it doesn' explain how to do it in Animate CC

Yes, it does. It explains how to do it in JavaScript. The scripting language in HTML5 Canvas documents is JavaScript. The code in Animate to load and parse a JSON file would be literally identical.

[JoãoCésar · Accepted solution]

Hi.

Do you want to simply load a JSON file using Animate CC and HTML5 (Canvas)?

[Chris_Lhaut]

Yes I want to load all the informations from the json file and display it in Animate CC

[Colin Holgate]

Anything JavaScript can do can be done in Animate too. Here's an article on parsing JSON text into a object variable:

JSON.parse()

Here's a quick test that works in Animate:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

alert(obj.age);

Message 4 in this discussion shows how the text file itself can be read in. It is using an xml file as an example, but it could be any text file:

Assigning XML content to dynamic text fields

[Chris_Lhaut]

Thanks for the informations! And what about displaying an image ? if for example there is a field like "test.jpg" in my json file to display in Animate CC ?

[Colin Holgate]

See kglad's 'Correct' answer in this discussion:

HTML5 Canvas - import images at runtime

[ClayUUID]

https://forums.adobe.com/people/Colin+Holgate  wrote

See kglad's 'Correct' answer in this discussion:

HTML5 Canvas - import images at runtime 

Err, that thread explains how to load and display bitmaps. Not how to load and parse JSON files.

[Chris_Lhaut]

Thanks !

[Colin Holgate]

I was answering message number 12.

[Chris_Lhaut]

There's an error in my original post guys, sorry. What I'm looking for is to connect JSON datas to Animate CC like we did in the past with Flash and XML.

So I mean I have different fields in a json file and in Animate CC I need a loop that displays all the informations in my json file (for example a date, a text or something else.

Do you understand ?

Thank you for your help guys !!

[JoãoCésar]

Here is a sample of how to load an external JSON file:

var that = this;
this.json = {};
this.loadJson = function(url)
{
    var queue = new createjs.LoadQueue(true);
    queue.on("fileload", that.onJsonLoaded, that);
    queue.on("error", that.onJsonLoadError, that);
    queue.loadFile({id:"json", src:url});
}
this.onJsonLoaded = function(e)
{
    that.json = e.target.getResult("json");
    that.setText();
}
this.onJsonLoadError = function(e)
{
    console.log(e);
}
this.setText = function()
{
    var songs = that.json.songs;
    for (var i = 0, total = songs.length; i < total; i++)
        that.txt.text = that.txt.text + "\n" + songs.name + ", " + songs.artist + ", " + songs.length + ", " + songs.track + ", " + songs.extension;        
}
this.loadJson("data.json");

FLA download:

animate_cc_html5_load_json.zip - Google Drive

I hope it helps.

Regards,

JC

[Chris_Lhaut]

Thank you a lot ! I will try to understand how it works ! thanks for the file too !!

[GC_Laurent]

Hey !

Thanks for the example but what I'm looking to do is a bit different.. In fact I try to load different fields in a movieclip. I understand you load everything into a single textfield but I have different textfields and each has its own value. Please check my code below to understand.

The movieclip contains 3 fields. One for the "titre" field, one for the "date" and one for the "description" field all in my "main_mc" movieclip. I have a movieclip into "main_mc" called "img_container" where want to load the image.

I would like Animate to display a list with all my elements.

Here is my code :

var root = this;

var proj = [];

$.ajax({

    type: 'GET',

    url: 'data_img.json',

    dataType: 'json',

    success: function (json) {

        proj = json;

        console.log(proj);

        renderImg();

    },

    error: function() {

        console.log("error");

    }

});

function renderImg() {

    for(var i=0; i<proj.length; i++){

        root.main_mc.txt.text = proj.titre;

        root.main_mc.txt2.text = proj.date;

        root.main_mc.description.text = proj.description;

        var bitmap = new createjs.Bitmap('images/' + proj.image);

        proj.bitmap = bitmap;

    }

    root.main_mc.txt.text = proj.titre;

    root.main_mc.txt2.text = proj.date;

    root.main_mc.description.text = proj.description;

    root.main_mc.img_container.addChild(proj.bitmap);

}

Here is my json file content:

Can you explain me why it doesn't work ?

I join a link with my Animate file: https://wetransfer.com/downloads/0911e08b3cb2c6f1061724064104ed1920180418083800/254ec09307c850d69d76...

Thanks a lot !!

[JoãoCésar]

Hi again!

- You need to include the jQuery library in your HTML (if you use any component from the Components panel, Animate will include for you automatically);

- These four lines:

root.main_mc.txt.text = proj.titre;
root.main_mc.txt2.text = proj.date;
root.main_mc.description.text = proj.description;
root.main_mc.img_container.addChild(proj.bitmap);

need to be inside the loop.

Please don't hesitate to ask if you have any further questions.

Regards,

JC

[GC_Laurent]

Can't believe it was so simple to fix.. thank you for your help, all datas appear now !

Thanks a lot !

[JoãoCésar]

You're welcome!

[GC_Laurent]

Hmm.. it's working now but it only displays the last info (third title etc.)

I included Jquery and here is my code:

var root = this;

var proj = [];

$.ajax({

    type: 'GET',

    url: 'data_img.json',

    dataType: 'json',

    success: function (json) {

        proj = json;

        console.log(proj);

        renderImg();

    },

    error: function() {

        console.log("error");

    }

});

function renderImg() {

    for(var i=0; i<proj.length; i++) {

        root.main_mc.txt.text = proj.titre;

        root.main_mc.txt2.text = proj.date;

        root.main_mc.description.text = proj.description;

        var bitmap = new createjs.Bitmap('images/' + proj.image);

        proj.bitmap = bitmap;

        root.main_mc.img_container.addChild(proj.bitmap);

    }

}

Any idea..?