Creating a Twitter Widget in Flash

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Intermediate | Page 1, 2, 3

This tutorial will teach you how to create a simple twitter widget to show your latest tweets inside a Flash project. Such a widget can be used on any blog or website to inform the visitors of that website about the latest updates made on twitter and provide them with a simple method to follow you. Our widget will be coded using ActionScript 3.0. Creating this widget will use some simple AS3 classes such as URLLoader, XML, and TextField.

Making our widget function online will also require writing a small PHP script and configuring the cross domain policy of the website. You will need to have PHP installed on your server and you will need access to the root folder of your website in order to fully incorporate the widget.

The widget we will create by the end of this tutorial can be seen here below:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Our tutorial will be divided into the following sections:

  1. Setting up the graphical assets.
  2. Loading the Twitter data.
  3. Configuring live server communications.

Setting up the Graphical Assets

Our tutorial will start with the easy part, we will simply create the FLA, add the graphics, and then create the text fields that will display the latest tweets.

Start off by creating a new FLA in AS3 format.

AS3 Twitter Widget - New FLA

Now save your FLA somewhere on your computer. You can name your FLA Twitter Widget. Now access the Properties Inspector and set the size of your stage to 270x500px.

Flash Twitter Widget - Properties Inspector

I'm using the Essentials Workplace Layout - which is the default for Flash CS4. You can manually use this workplace by going through Windows>Workplace>Essentials.

Importing the Graphical Assets- The Background

We will now import all our graphical assets into the FLA. All the images necessary to create this widget can be found in this zip file. Download the file and extract all the assets somewhere accessible on your computer. Once you do that go back to Flash, and go through File>Import>Import to Stage to import the background image. Simply move the background so that it is in the center of the stage.

AS3 Flash Widget - Background Image Imported

Now access the Timeline, rename the our only layer as Background, and then Lock this layer.

Flash Widget - Background Layer

Our background is now ready.

Importing the "Follow Me" Button

Our initial layer is now used up and locked. We need to create another layer for our button. Click on the Add Layer button to create one, then rename this layer to Follow Me Button.

AS3 Twitter - Follow Me Layer

We will now add our button to this layer. Go through File>Import>Import to Stage and import the button graphic. Once on stage position it at the bottom part of the background image.

Twitter Widget - Follow Me Button

In order to be able to use this button through ActionScript, we need to convert it to a Symbol and then assign an instance name to it. To do that select the button, then go through Modify>Convert to Symbol. This should open up the Convert to Symbol window, set the name as Follow Me Button, the type to Movie Clip, the click on OK.

Follow Me Button - Symbol - Flash

While your object is still selected, access the Properties Inspector and assign the instance name follow_btn to it. An instance name is a reference that makes it easy for us to manipulate an object via ActionScript later.

Instance Name - Twitter Widget Flash AS3

That should do it. Our button is now ready for ActionScript use! Complete this stage by locking the Follow Me Button layer on the timeline.

Follow Me Layer Locked

Adding the Tweet Text Fields

Our tweets will be displayed on four text fields which we have to create manually on stage. Start off by creating a new layer for these text fields, name it Tweets Text.

AS3 Twitter Widget

Now select the Text Tool, then access the Properties Inspector, and do the following:

  1. Set the Type to Dynamic Text - A Dynamic Text field is one which can be manipulate via ActionScript.
  2. Set the font to _sans.
  3. Set the size to 11pts.
  4. Set the behavior to Multiline.

When you are done, draw a text field over the upper blank area on the background:

Dynamic Text TypeFirst Tweet Box

You will now have to assign an Instance Name to this text field, call it tweet_1. The instance name, as you should remember, is a reference to this object to make it easy to manipulate it via ActionScript.

Tweet 1 Done

Repeat the process for the other tweet text fields, apply the same exact settings for them and assign the instance names tweet_2, tweet_3 and tweet_4 to them respectively.

You should end up with a result similar to the image below.

Flash Twitter Widget - AS3

All of our graphics are now ready. We are going to start coding in the next section. Complete this section by locking the Tweet Text layer and creating a new layer called Actions. Right-click the only frame in this new layer and select Actions to start coding.

Actions Layer - Twitter Widget

Summary of this Section

We did the following in this sections:

  • Created our FLA in AS3 format.
  • Imported all the graphics into separate layers.
  • Assigned instance names for the objects that will be manipulated via AS3.

In the next section we will load our twitter data to show the latest tweets.

- Next Page