Getting Dynamic Data into Macromedia Flash

Getting Dynamic Data into

Macromedia Flash

Because the Web is such a dynamic environment, manually adding content takes too long. This is why databases have been long-time companions to websites. So why not learn how to take that same dynamic data and pull it directly into Macromedia Flash MX?

Introduction

It did not take long for Web designers to realize that content is king on the Internet. Your website may look cool, but if the content isn't there then you are likely not to have too many visitors coming back. In this article, you will learn how Flash MX can receive content from a database and then present that within a Flash Movie. This is the first step needed to create Flash-based applications. You open up a whole new world of possibilities once you know how to get database content into Flash.

Download source files here.

Flash and Databases

Flash has been able to receive data from databases since the release of Flash 3; the connection is made through a technology called Server Scripting. Traditional client server applications have typically gone directly through an ODBC connection or JDBC connection. The most common server scripting languages are Microsoft's Active Server Pages, Java Server Pages, and Macromedia ColdFusion. The server-generated page collects the database content and passes it on to Flash, as shown in Figure 1.

Figure 1 matthewdavid.ws has all of the content for the site dynamically loaded into it from different databases.

The way in which data is passed is something similar to this:

Step 1. A Web page is downloaded with a Flash movie embedded within it.

Step 2. The Flash movie makes a request to a server-generated Web page.

Step 3. The server-generated Web page connects to a database and receives the content made in the request.

Step 4. The database content is used to generate a dynamic Web page, which is sent to the Flash movie.

Step 5. Flash receives the Web page and ActionScript within the movie tells Flash where to place the content so that it can be viewed.

Creating the Database

The first step is to create the database. For this example, I am going to use a Microsoft Access database (see Figure 2). The reason is that Access is easy to use and most designers and developers have access to it. For more robust websites that receive a lot of traffic, you may want to think about using Oracle, SQL Server, or MySQL.

Figure 2 Microsoft Access is used to build the database.

The database has one table called RandomRec with two fields: ID and Statement. That's it. Later, when you are more comfortable working with Flash, you can experiment with more complex databases.

Server Scripting Languages

The next step is to create the server-generated page that will connect to the database and extract the content that will be presented to Flash. For this article I am using Microsoft's ASP technology.

You will need to have access to a Microsoft Internet Information Server (IIS). This is the application server that translates the ASP code we write.

You need to create a website on the server. If you are unfamiliar with how to do this, contact your local ISP.

Place the Access database that you have just created within the root of the new website on Microsoft Internet Information Server.

Open Notepad or your favorite text editor and type the following code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

<%

Dim MM_connstr_STRING

MM_connstr_STRING = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & _

       Server.MapPath("usability.mdb")

Dim rsUsability

Dim rsUsability_numRows

Set rsUsability = Server.CreateObject("ADODB.Recordset")

rsUsability.ActiveConnection = MM_connstr_STRING

rsUsability.Source = "SELECT * FROM RandomRec ORDER BY Statement ASC"

rsUsability.CursorType = 0

rsUsability.CursorLocation = 2

rsUsability.LockType = 1

rsUsability.Open()

rsUsability_numRows = 0

%>

<%

Dim Repeat1__numRows

Dim Repeat1__index

Repeat1__numRows = -1

Repeat1__index = 0

rsUsability_numRows = rsUsability_numRows + Repeat1__numRows

%>

<% 

While ((Repeat1__numRows <> 0) AND (NOT rsUsability.EOF)) 

%>

<%=(rsUsability.Fields.Item("Statement").Value)%>

<% 

 Repeat1__index=Repeat1__index+1

 Repeat1__numRows=Repeat1__numRows-1

 rsUsability.MoveNext()

Wend

%>

<%

rsUsability.Close()

Set rsUsability = Nothing

%>

Save the page as usability.asp. The script opens up a connection with the Usability database, retrieves the correct data out of the table RadmonRec, and repeats all of the rows of data.

Preview this page through the Web browser (see Figure 3). You should be able to view all of the data from the database.

Figure 3 Here you can see the ASP page displaying content. Later, this information will be pulled into Flash.

The next step is to load this data directly into Flash.

Loading Dynamic Data

Believe or not, the hardest part has been completed. The next step is to pull the content into Flash.

For this exercise I am using Flash MX for the Flash 6 player. It handles data differently than Flash 5 and earlier. You will find that it is more efficient and more flexible.

1. Create a new movie in Flash. Size the movie 400 x 270 pixels.

2. Select the Text Tool from the Tools Panel and drag a text field on the stage 384 x 270 pixels. The Text field is intentionally smaller than the entire movie. This will be made clearer later.

3. Select the new text field. Change the type of text field to Dynamic.

4. Name the movie "statement". Note that with Flash MX you can name a text field in the same way that you can name a movie. That is, you no longer need to give the Text Field a Variable name. This makes working with ActionScript much easier and less confusing.

Change the Line Type to Multiline (see Figure 4) and click the Render Text as HTML button (see Figure 5).

Figure 4 The Text Field is the dynamic element that will contain all of the information we need to display the loaded server-generated movie.

Figure 5 The Render Text as HTML button formats text with HTML markup.

5. The next step is to load the data into the movie. This has to be achieved with ActionsScript.

Select Frame 1 of the Timeline and open the Actions Panel. You will need to write the following ActionScript into the Actions Panel.

6. The first step is to declare that a data file is going to be loaded. This is done with a new variable called "data" and is declared through the method "new LoadVar."

var data = new LoadVars();

7. You have to tell Flash where to find the data. In this example, the final SWF movie and ASP page will all reside in the same folder.

data.load("usability.asp");

8. Now that you have the content loaded into Flash you need to tell Flash what do with it. Create a new function, called "Value", that defines how to present the data.

9.  function Value() {

   for (content in this) {

10. Using the Text ActionScript controls in Flash MX you can tell Flash that the content needs to be placed in the movie called "statement." The "htmltext" property explains that the content coming into Flash contains some HTML formatting.

11.     statement.htmltext += content;

12.   }

}

13. The final statement inserts the content when the movie has fully loaded.

data.onLoad = Value;

14. The entire script looks like this (see Figure 6):

15.var c = new LoadVars();

16.c.load("usability.asp");

17.function showValues() {

18.   for (i in this) {

19.     statement.htmltext += i;

20.   }

21.}

c.onLoad = showValues;

Figure 6 The scripts are placed into the Actions Panel.

At this point you can export the Flash Movie as usability.swf. View the usability.swf file in your Web browser. You will need to do this because the ASP file needs to be compiled by the server before it can be presented into the Flash Player.

Notice that the content from the ASP file loads successfully into the SWF movie, as shown in Figure 7. But you cannot view all of the content. The final step in this movie is to add a scroll bar that will allow you to view all of the content. This is why we left a little room on the stage.

Figure 7 Here you can see the data presented in the final exported Flash Movie.

Scroll Bar Component

One of the default sets of components that ships with Flash MX is the Flash UI Components. Open the Components panel because you will want to look for the ScrollBar component in this set.

Drag the ScrollBar Component away from the Components panel and onto the Stage. Drag the ScrollBar over the Statement Text Field. You will notice that the Scroll Bar snaps into position on the right side of the text field. Save and Export the Flash Movie.

Go to your Web browser and view the new movie on your Web page, as shown in Figure 8. You will see that the scroll bars now automatically sizes to reflect the length of the content loaded into the Text Field. Pretty cool, huh?

Figure 8 The ScrollBar component is added to the Dynamic Text Field.