Using JSON files in Edge Animate

Using JSON files in Edge Animate

19:40 01 September in Adobe Edge Animate
12 Comments

Adobe Edge Animate is becoming one of my favorite development tools to create custom mobile compatible HTML5 content. Whether you are creating an interactive banner, interactive website, engaging eLearning interaction or anything else than you want to be aware of what Adobe Edge Animate. Each release just keeps getting better and better.

In this latest releases they introduced a way to easily tie in external javascript files easily into the Library area by clicking a plus button and searching for the external library to attach to your project. Adobe Edge Animate already uses jQuery so do not need to attach jQuery but you can use any of the other external libraries out there. One of my favorite is Greensock. Greensock and Edge Animate are like a match made in heaven.

I will cover more of Greensock in later posts but for now I want to focus on bringing in your own JSON files. JSON is a way to store data in a Javascript file, this way you do not need to use something like XML and have to parse the XML in order to get your external content. What is the benefit of keeping your content separate?

There are couple of benefits but some of the main benefits is it allows to adapt the same content in many different ways. So I can take the same content and apply it to another website, or mobile app or anything else. Then you create your interactions to grab from that content and use it however it needs to. Another way is JSON is much easier to update for a non-techie than getting into the code so they can do their own updates and you focus on the cool stuff as the developer.

So to get started create your own Javascript file. This will be an external Javascript file. You can do this in Dreamweaver, Sublime text, text wrangler or any other HTML editor. I am going to name my JS file info.js. You can really name this whatever you want. Go ahead and save your file without typing anything in there yet.

Now let’s create a simple variable inside of this JSON file. Here is the variable that I am going to use. You can use whatever variable you want.

  1. var JSONObject= {
  2.  
  3. };

We are now going to create one simple line of JSON in this variable. You do this with two sections. You give the content an ID and place that within quotes and then you add a : sign and within new quotes give the content for that ID. That way we can reference the ID and grab the content from that ID to use within text fields or as settings within our Edge Animate file. Just to see how this works I am going to add one line of code.

  1. var JSONObject= {
  2.  
  3. "page_text": "This is a normal string that can be used."
  4.  
  5. };

So I give it the ID of page_text and give that ID the value of “This is a normal string that can be used.” Now this means I can pull in that string of text into my Edge Animate file and whenever I update the JSON file my Edge Animate project is automatically updated without me even bringing up Edge Animate. That is the true power of JSON, keep the content separate from the interaction.

So now we need to go into Edge Animate then attach this JS file into the Edge Animate library. You do this inside of your Edge Animate project. With the project open go to the library section and click on the plus sign in the Scripts section. You will have two options Add JS File from Disk or Add JS File from URL. If you choose from disk it will place that JS file inside of your packaged file. This is good if you are going to be wrapping your project inside of Phonegap so it can be played offline. From URL will not place a file in your package making your output smaller and allowing the JS to be pulled from local servers performing quicker when connected to the internet.

script

Now that we have that Javascript file attached we can now reference the content with the name of the variable we came up with inside of the JSON file.

  1. JSONObject

Then after the dot we type the name of the value we want to use which is the value before : so in this case we want to have the following.

  1. JSONObject.page_text

Now from here we can place the content into a variable so we can use it throughout our interaction. You can do this by using the following code. Do this on the creationComplete event.

  1. sym.setVariable("page_text",JSONObject.page_text);

You can see that we set a variable called page_text and we give it a value of JSONObject.page_text which means the value after the : which in this case is “This is a normal string that can be used.”. So now the final step is to use that information to update our interaction. If it was a setting I can have an if statement that checks the value or if the value is true or false it can do some logic around it but in this case we are going to update the text we have on the Edge stage. So we need to have a text box on the stage and let’s give it an ID of page_text at this point it does matter what you type in the box because we will be changing that out with the code.

Now let’s add a trigger on stage to update the page_text content to the variable we have created. Let’s do this in the composition ready event so add a trigger on the stage of compositionReady. Now let’s type the following code:

  1. sym.$("page_text").html(sym.getVariable("page_text"));

compReadt

Save the file and preview your interaction. You can see now the text is being updated to the text within the JSON file. The nice thing about this is now we can update the text in the JSON file and the interaction and it will automatically update the content without even pulling up Edge Animate.

This is only the beginning for what we can do inside of the JSON file. If you want to download a sample project use this button.

Download Sample Project:

Buy this on Selz
Sell digital downloads on Selz

Watch video:


Be Sociable, Share!
12 Comments
  • Andrew 20:42h, 19 November Reply

    Hi and thanks for your tutorial,

    How would I target a text box within a symbol that is on the stage? I have this code to target a text box on the stage, but would like to have it inside a symbol.

    //JSONObject.title_welcome_center
    sym.setVariable(“title_welcome_center”,JSONObject.title_welcome_center);
    sym.$(“title_welcome_center”).html(sym.getVariable(“title_welcome_center”));

  • Jeff Batt 21:06h, 22 November Reply

    To reference the text box in a symbol on the stage you would use getSymbol() and reference the symbol name. Here is how the second line would be modified. I named my symbol Symbol_Name.

    sym.getSymbol(“Symbol_Name”).$(“title_welcome_center”).html(sym.getVariable(“title_welcome_center”))

  • Andrew 17:04h, 24 November Reply

    Thank you Jeff. I’m not onto looking to import jpgs into an empty symbol through JSON. I will scourer the forums but may hit you up again if I can’t find the solution easily enough. Thanks again.

  • Bruce 16:48h, 01 April Reply

    I want to use this, but my version of AE (2014.1.1) only gives the option of CreationComplete or BeforeDeletion when assigning actions to the Stage. It does not give the option of CompositionReady. How do I get around this?

  • Adam 21:56h, 18 May Reply

    Hi there,

    How would I go about referencing a line of text from a completely different document, instead of the string? Say, a specific line in a .txt file?

    Thanks!

  • Froffs 17:24h, 24 June Reply

    Hi Jeff,
    Great tutorial, how do you pass the current tutorial into array of symbols instances,
    say 5 text and image? Thanks

  • Jaime Rived 10:13h, 29 June Reply

    You’re great, man. After several tutorials I’ve arrived here and everything is clear in my mind now. Thanks!!!

    • Jeff Batt 17:06h, 29 June Reply

      Awesome! Glad you liked it.

  • Blade 11:02h, 02 September Reply

    Hi Jeff

    grat tutorial. That solved perfectly half of the job.
    Now how do I write back data in the info.js file?

    thanks.

    • Jeff Batt 17:46h, 02 September Reply

      You would have to use PHP or something that does that kind of thing. You could use a DB like Firebase and that would handle writing to a DB and you would have to refresh the page with the updated data. I have not tried it in Edge Animate but that would be one direction I would look into.

Post A Comment