Wednesday, 23 January 2013

Actionscript 3 and Twitter API

Many posts I have read online regarding Actionscript 3 and the Twitter API use a PHP proxy to bypass the Flash player's cross domain security restrictions. This approach works, but another way to accomplish this problem is to load the Twitter feed via Javascript in the HTML page and pass the feed data back to the swf. I have used the Actionscript’s ExternalInterface.call() and ExternalInterface.callBack() methods to call a Javascript function and to pass back the loaded data.

1. The HTML code

I have used the SwfObject to embed the swf file in the HMTL page. The loadTwitterFeed() function loads the Twitter users timeline JSON data using the JQuery.getJSON(). Once the JSON data has been loaded the tweetLoaded() function gets called in the swf and the JSON data is passed back to the swf. The getFlashMovieObject() is a helper function that handles the swf on different browsers.

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>Actionscript 3 and Twitter API</title>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
</head>

<body>
 <div id="flashContent"></div>
 
 
 <script type="text/javascript">
  $(document).ready(function()
  { 
   //embedding the swf file
   var flashvars = {};
   var params = {allowScriptAccess: 'always'};
   var attributes = {};
   
   swfobject.embedSWF("AS3TwitterAPI.swf?rnd="+Math.random(), "flashContent", "550", "400", "10.2",false, flashvars, params, attributes);
  
  });
  
  
  //Function called from the swf
  function loadTwitterFeed(twitterURL)
  {
   $.getJSON(twitterURL, function(data) 
   {
     getFlashMovieObject('flashContent').tweetLoaded(data);
   });
  }
     
  //Function for handling Flash movie on different browsers
  //code from: permadi.com/tutorial/flashjscommand/
  function getFlashMovieObject(movieName)
  {
   if (window.document[movieName]){
    return window.document[movieName];
   }
   if (navigator.appName.indexOf("Microsoft Internet")==-1){
    if (document.embeds && document.embeds[movieName])
    return document.embeds[movieName];
   }
   else{
    return document.getElementById(movieName);
   }
  }
   
 </script>
 
</body>
</html>


2. The Actionscript 3 code

I have used the ExternalInterface.call() and ExternalInterface.addBackback() methods to load a function from Javascript and to pass back data. The tweetloaded() function populates the data from the Twitter feed. The twitterBox instance is a quick and dirty movie clip with a dynamic text field to hold the text, and an empty movie clip to hold image. I have used the Loader class to load the image into the empty movie clip. For more info, look at this post.

package  
{
 import flash.display.Loader;
 import flash.display.MovieClip;
 import flash.events.Event;
 import flash.external.ExternalInterface;
 import flash.net.URLRequest;
 
 public class Main extends MovieClip 
 {
  private static const TWITTER_USERNAME:String = 'ilike2flash';
  private static const TWITTER_URL:String = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name='+TWITTER_USERNAME+'&callback=?';
  private static const NUM_TWEETS:uint = 3;
  private static const PADDING:uint = 20;
  
  private var twitterboxes:Array = new Array();
  private var count:int = -1;
  
  public function Main() 
  {
   if(ExternalInterface.available)
   {
    //load function from Javascript
    ExternalInterface.call("loadTwitterFeed", TWITTER_URL);
    
    //add Javascript call back
    ExternalInterface.addCallback("tweetLoaded", tweetLoaded);
   }
  }
  
  private function tweetLoaded(obj:Object):void
  {
   for (var i:uint = 0; i < NUM_TWEETS; i++) 
   {
    var twitterBox:TwitterBox = new TwitterBox();
    twitterBox.txt = obj[i].text;
    twitterBox.y += (i *  twitterBox.height + PADDING);
    addChild(twitterBox);
    twitterboxes.push(twitterBox);
    
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
    loader.load(new URLRequest(obj[i].user.profile_image_url));
   }
  }
  
  private function loaded(e:Event):void
  {
   count++;
   twitterboxes[count].img.addChild(e.target.content);
  }
 }
}

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP