EdgeAnimateIconI recently subscribed to the Adobe Creative Cloud and thus got all the nice tools from the Edge series, too. First and foremost Adobe Edge Animate, of course. While learning how to use the app (btw, subscribed to Lynda.com, too 😉 ) I stumbled upon Simon Widjaja’s show on Adobe TV called Create Like Crazy with Adobe Edge Tools & Services. Being a developer I was thrilled when I saw that as soon as in episode one Simon covered how to not only animate graphics but access the Twitter API, too.

Unfortunately, this episode is a bit old and not only has Edge Animate evolved since then but the Twitter API has, too. Because Twitter made the use of OAuth obligatory for all of it’s calls the code Simon presents in this episode doesn’t work anymore.

However, on his website for Adge Animate fans, EdgeDocks.com, Simon posted an update to this code that’s compatible with todays Twitter API / OAuth requirements. It makes use of the JavaScript Twitter library named Codebird (which is available for PHP, too).

I really wanted to make this Edge Animate / Twitter mashup work and so I dug in and had success eventually . Yay! 🙂 So here’s the „missing manual“ on how to alter the original script from the Adobe TV episode to make it work today.

I followed along Simon’s video up until the point where he says „That’s it! Now we can run the Edge composition in the browser.“ (around 5:26). If you try to run this today nothing will happen. So let’s have a look at the updated solution.

In the  ZIP file I downloaded from EdgeDocks.com I found the two additional JavaScript files codebird.js and sha1.js. I took a look at the index.html file and saw that we need these two files to be included in our project’s main html file (the one that’s named <projectname>.html):

<!-- Twitter -->
   <script type="text/javascript" src="sha1.js"></script>
   <script type="text/javascript" src="codebird.js"></script>
<!-- Twitter End -->

Because I didn’t know how to make Edge Animate to add these two lines at the right location into the project’s html file I saved the current state in Edge Animate, did NOT quit, edited the existing <projectname>.html in the project folder manually by adding above lines immediately after the

<!--Adobe Edge Runtime End-->

line and when I came back to Edge Animate it asked if I wanted to use this and reload the composition:

Screen Shot 2014-03-16 at 21.57.09

Said Yes and continued.

(Note: I put these two files into a „js“ subfolder in my project folder and included them with „js/sha1.js“ and „js/codebird.js“. But I guess you don’t have to.)

I won’t go into the details of obtaining the necessary OAuth Consumer Key/Secret and Token/Token Secret keys you’ll need to make the whole thing work. That would be another blog post. [Short version: go to apps.twitter.com, sign in and click the „Create New App“ button.] I assume you have those at hand.

Now inside the try/catch block the very first thing I added was this:

var cb = new Codebird;
cb.setConsumerKey('CONSUMER_KEY', 'CONSUMER_SECRET');
cb.setToken('TOKEN', 'TOKEN_SECRET');

(Note that on Twitter’s Application Managements page the consumer key is called „API key“ and the consumer secret is called „API secret“.)

Now I thought that’s it! Because I assumed that after creating an instance of the Codebird class and providing all the keys any following communication to/from Twitter will just work.

Wrong! 🙁

You have to use Codebird’s function calls and can’t use jQuery’s methods from the original code any longer. So instead of the $.ajax call this is what makes the thing work (the whole try/catch block):

try {
   var cb = new Codebird;
   cb.setConsumerKey('CONSUMER_KEY', 'CONSUMER_SECRET');
   cb.setToken('TOKEN', 'TOKEN_SECRET');

   // Read tweets
   var o = { username: "EdgeAnimate", count: 4 };
   var params = {
      screen_name: o.username,
      count: o.count
   };
   cb.__call(
      'statuses_userTimeline',
      params,
      function(data) {
         $.each(data, function(index, item) {
            var itemRenderer = sym.createChildSymbol("itemRenderer", "tweetContainer" );
            itemRenderer.$("tweet").html(item.text);
            itemRenderer.$("image").css("background-image", "url("+item.user.profile_image_url+")");
            itemRenderer.play( index * -500 );
         });
      }
   );
} catch(error) {
   alert("Error: "+error.toString());
}

Basically, it’s all in the readme.md file that comes either with the download from EdgeDock.com or that’s on Codebird’s github page.

And here’s the result showing the last four tweets of Twitter account @EdgeAnimate (reload page to see the animation):
[edge_animation id=“7″]

Later I found the menu command „Create from template…“ in Adobe Edge’s File menu — so I could have opened EdgeDock’s template directly and it would have worked. Well, the way I did it I learned a lot. (And that’s what I wanted to!) 😉

Oh! And here’s a tip for embedding an Edge Animate composition into a WordPress blog post (besides the basics from that Adobe TV show’s fifth episode) if it makes use of additional JavaScript libraries like the composition in this article (codebird.js & sha1.js): add those JavaScript files to Edge Animate’s Library>Scripts area before publishing into the .oam file:

Screen Shot 2014-03-16 at 21.47.11

Otherwise you’ll get errors like this from WordPress:

Screen Shot 2014-03-16 at 21.59.47

Thanks a lot to Timm Jansen for help on this! 🙂