Skip to main content
Known Participant
April 14, 2018
Answered

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

  • April 14, 2018
  • 6 replies
  • 6807 views

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 !!

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi.

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

    6 replies

    Participating Frequently
    April 20, 2018

    sory but why and how do you make very easy things like that difficult

    in html

    -----------------------------------------ozresim imgage component---------------------------

    function ensari(e) {

    document.getElementById("ozresim").src = "https://www.pisev.com/ozel/<?php echo "".$ozel.""; ?>/"+e+".jpg";

        };

    function zekeriya() {

    document.getElementById("videom").src = "https://www.pisev.com/ozel/<?php echo "".$ozel.""; ?>/video.webm";

      };

    in animate cc canvas
    ------------------------------------------------------

    this.f2.addEventListener("click", f2t.bind(this));

    function f2t(){

    this.isaret.x=this.f2.x;

    this.isaret1.x=-300;

    ensari(2);

    this.ozresim.x="0";

    this.videom.x="-850";

    Yahya();

    }

    ----------------------------

    same live code working in here
    --------------------------------------

    https://www.pisev.com/OjI6ImdhIjtz/OjE6ImIiO3M/6MToibSI7czoxOiJjIjtzOjM6IkdBQyI7czox/OiJkIjtzOjM6Ijg2MCI7czoxOiJlIjtzOjI6IjY1IjtzOjE6ImYiO3M6NToiMGEwYTAiO3M6MToiZyI7czoxMzoiYWxmYSB0ZW1pemxpayI7czoxOiJoIjtzOjE6IjEiO3M6MToiaSI7czoxOiIxIjtzOjE6ImwiO3M6NToidmlsbGEiO30

    Known Participant
    April 20, 2018

    Great! thanks for your example. A few years ago, I worked a lot with Edge animate but when it ended, I switched to animate CC and even if I know the design tools of the software, I'm a bit new using CreateJs, etc. I built the previous version of my own website with Edge animate and was curious if i could do this kind of project but in Animate CC.

    This was made in end 2013 with Edge animate: http://www.graphikconcept.com/v8/

    Known Participant
    April 17, 2018

    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ésar17023019
    Community Expert
    April 17, 2018

    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

    Known Participant
    April 17, 2018

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

    JoãoCésar17023019
    JoãoCésar17023019Correct answer
    Community Expert
    April 17, 2018

    Hi.

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

    Known Participant
    April 17, 2018

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

    Colin Holgate
    Inspiring
    April 17, 2018

    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

    Brainiac
    April 17, 2018
    Known Participant
    April 17, 2018

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

    Brainiac
    April 17, 2018

    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.

    Participating Frequently
    April 15, 2018

    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

    Known Participant
    April 17, 2018

    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 ?

    Known Participant
    April 17, 2018

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

    Thanks !

    Colin Holgate
    Inspiring
    April 14, 2018

    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.

    Known Participant
    April 17, 2018

    Ok thanks.