Creating a Twitter Widget with Flash
- Designing the Flash Widget
- Writing the Twitter Widget Functionality
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Twitter usage is growing at a phenomenal rate—in just one year, Twitter grew by 1,382%. In January 2009, it received 4.5 million unique U.S. visitors. Recently I wrote an article called "Creating a Twitter Widget with Ajax," which explained how to bridge the gap between a local website and remote RSS feed using PHP and Ajax. This article addresses the same concept, but we'll be using Flash ActionScript 3.0 and PHP to create a handy Twitter widget for displaying your latest tweets on the Web.
It's not a requirement, but we'll assume that you're already familiar with ActionScript 3.0 and PHP. If you need to get up to speed on ActionScript 3.0, check out my book The ActionScript 3.0 Migration Guide: Making the Move from ActionScript 2.0.
Designing the Flash Widget
We'll start by designing the Twitter widget in Flash and then write the code to make it function. Create a new Flash file called tweeter.fla, giving it the dimensions 200x200 pixels. Add a header to the widget (see Figure 1), including a dynamic text field (don't forget to embed the fonts), and give it the instance name titleTxt. This TextField will eventually be used to contain the title of the Twitter feed.
)
Add a layer below the header for a ScrollPane component. Resize the layer to fit the stage, and give it an instance name of tweetPane (see Figure 2).
)
Now we need to create a DisplayObject that will contain our individual tweets, so let's add a new MovieClip symbol to the library and call it tweet (see Figure 3). This MovieClip will be linked to its own class, called Tweet.as. (We'll cover that process a bit later.)
)
Add a background MovieClip to your new tweet MovieClip. This will be used to define the space behind and around each Twitter message. Next, add a text field, embed the fonts, and give it the instance name tweetTxt (see Figure 4).
)
