Skip to main content
C
Chris Lhaut
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

    M
    mehmetk89082497
    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

    G
    GC_Laurent
    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/

    C
    Chris LhautAuthor
    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
    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

    C
    Chris LhautAuthor
    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)?

      C
      Chris LhautAuthor
      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
      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

      C
      ClayUUID
      Brainiac
      April 17, 2018

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

      C
      Chris LhautAuthor
      Known Participant
      April 17, 2018

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

      C
      ClayUUID
      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.

      M
      mehmetk89082497
      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

      C
      Chris LhautAuthor
      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 ?

      G
      GC_Laurent
      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
      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.

      C
      Chris LhautAuthor
      Known Participant
      April 17, 2018

      Ok thanks.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices