mesh on MX

Sunday, May 05, 2002

Example : Integrating Flash MX and Radio
This tutorial demonstrates a simple example of integrating Radio with Macromedia Flash MX.

If you have visited this site before, you may or may not have noticed that the heading at the top of all of my pages is actually a Flash 6 movie. The movie displays the title (left), data from the Macromedia XML Resource Feed (right), and the date that the site was last updated (center). The last updated information actually comes from a Radio macro, and is a good example of a simple way to integrate data from Radio within a Macromedia Flash 6 movie.

First, lets look at the basic HTML required to display a Flash movie within an HTML page:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="100%" HEIGHT="40">
<PARAM NAME=movie VALUE="movie.swf">
<PARAM NAME=quality VALUE=high>

<EMBED src="movie.swf" WIDTH="100%" HEIGHT="40"
  TYPE="application/x-shockwave-flash"
  PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

Notice that there is EMBED tag within the Object tag. The OBJECT tag is used for browsers that use the ActiveX version of the Flash player, and the EMBED tag is used for all other browsers.

The code should be pretty self explanatory. The Flash movie to be loaded is specified in the movie attribute of the PARAM tag, and the SRC attribute of the EMBED tag. Note that you can use either relative or absolute paths to specify the Flash movie (.swf).

In Flash 5, you could pass name / value pairs to the Flash movie by appending them to the end of the path to the Flash movie, like so:
<PARAM NAME=movie VALUE="movie.swf?foo=bar">

This technique still works in Flash 6, but has the limitation that the amount of data you can send varies depending on the browser it is running in.

Flash 6 offers a better solution, FlashVars, which allows you to send large amounts of data (i believe it is 64kb) into the Flash movie at runtime. The data is sent as a URL encoded query string of name / value pairs to the Flash movie.

Here is an example:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="100%" HEIGHT="40">
<PARAM NAME=movie VALUE="movie.swf">
<PARAM NAME=FlashVars VALUE="foo=bar&bim=bam%20bam">
<PARAM NAME=quality VALUE=high>

<EMBED src="movie.swf"
  WIDTH="100%" HEIGHT="40"
  flashvars = "foo=bar&bim=bam%20bam"
  TYPE="application/x-shockwave-flash"
  PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

Notice that we have added a flashvars attributes to both the OBJECT and EMBED tags. When the Flash movie loads, the name / value pairs passed through the FLASHVARS attributes will then be available to the Flash movie on the main timeline.

So, how do we get data from Radio to Flash? Remember that Radio macros are processed on the server side. If you look at the main template for Radio, you will see that the code that creates the HTML to display the last updated date is:

<%if radioResponder.flStaticRendering {return (searchEngine.stripMarkup(now))} else {return ("")}%>

This will output the last date and time that the weblog was updated.

In order to get that data into Flash, we need to specify it in the FlashVars attribute, and we need to URL Encode the data. Here is the code that displays the Flash movie at the top of my pages:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="100%" HEIGHT="40"
id="header" ALIGN="">
<PARAM NAME=movie VALUE="/0106797/images/header.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#002039>
<param name="flashvars"
  value="u=<%if radioResponder.flStaticRendering {
   return (string.urlencode(searchEngine.stripMarkup(now)))}
   else {return ("")}%>">

<EMBED src="/0106797/images/header.swf"
  quality=high bgcolor=#002039
  WIDTH="100%" HEIGHT="40"
  NAME="header"
  flashvars="u=<%if radioResponder.flStaticRendering {
   return (string.urlencode(searchEngine.stripMarkup(now)))}
   else {return ("")}%>"
  ALIGN="" TYPE="application/x-shockwave-flash"
  PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

The code (for the OBJECT tag) that passes the data from Radio to Flash is:
<param name="flashvars"
value="u=<%if
  radioResponder.flStaticRendering {
  return (string.urlencode(searchEngine.stripMarkup(now)))}
  else {return ("")}%>">

Notice that we embed a Radio macro within the HTML code.

Two other things to note. First, we are storing the last updated string in a variable called u (which, btw is a bad naming convention on my part). Secondly, we URL encode the string using the radio string.urlencode function.

There is one problem with the code above though. If there are any line returns with the OBJECT tags, Radio will place HTML formating, which will break the tags. Because of this, you must remove all line returns from the HTML code, which in essence places it all on one line.

Update : Dave Winer sent along this link, which shows how to workaround the issue of Radio inserting HTML markup into your code.
<param name="flashvars" value="u=5%2F5%2F2002;%209%3A21%3A42%20PM">

which is a URL encoded string of the last updated date / time.

Within our Flash movie, we have a text field with an instance name of "updated" that will be used to display the last updated time.

Here is all of the code necessary to place the data in the field:
updated.text = "Updated : " + u;

This says that the text in the updated field should be the string "Updated " plus the value of the variable u (which was passed in through the flashvars tag).

Pretty simple, heh? Of course, this is a very simple example, but using this technique, you could theoretically create an entire weblog in Flash that is managed by Radio (although I am not sure that you would want to).

If you have any comments, corrections or suggestions, please post them in the comments section.

Update : Thanks to Greg Burch for pointing out an error (its flashvars and not flashvar).
10:37:23 PM    comment []  Google It!

Getting Started with Flash Remoting and Java within ColdFusion MX
This is an addendum to the following article:

Getting Started with ColdFusion MX and Flash Remoting article

that uses a Java class deployed in ColdFusion MX to create a service that can be called from Flash via Flash Remoting. Note, currently you must have ColdFusion MX installed in order to use Flash Remoting. However, we will be releasing separate versions for Java servers very soon.

This article assumes that you are familiar with Java and Java concepts.

1. Open the above article in your web browser.

2. Download and install the ColdFusion MX preview release.

3. Download and install the Flash Remoting Addons for Flash MX.

4. Create HelloWorld.java in the com.macromedia.test package.

HelloWorld.java should contain the following code:

--------HelloWorld.java------------
package com.macromedia.test;

public class HelloWorld
{
public String sayHello()
{
  return "Hello World";
}
}

---------------------------------------

compile this into the <cfinstall>\runtime\servers\default directory.

There are no changes required in the Flash code. Open the example file in Flash MX and test your movie.

Note : If you have done any of the other versions of the tutorials, you need to rename the wwwroot\com\macromedia\test directory (to ensure that the Java class is called and not the code in the folder).

Of course, this is a really simple example. Play around with passing more complex data such as Arrays, HashMaps and ResultSets. Ill post more information later on how to pass more complex datatypes.
9:12:13 PM    comment []  Google It!