Odin's Blog

Using FlashVars to pass cue points array to Flash

Flash / AS 2.0Posted by Odin HG Sun, February 24, 2008 03:18:17
In this tutorial I'll use FlashVars to pass a array containing cue points to a MediaPlayback component into flash.

In this tutorial I'm going to use it to stream mp3 files.
You can of course use it with flv files too.

First, create a new flash document (550x400), open the components window and drag a MediaPlayback component and a button to the stage.
Label the button "Cue" or what ever you want, and give it a instance name of "btn1".

Now, give the MediaPlayback component a instance name of "player", and go to its parameters and set contentPath to a mp3 file
(ex. http://www.example.com/my_audio.mp3).
Also set mediaType to MP3, and controlPolicy to On.

Finished?
Let's select the first frame in timeline and open the actions panel.

First add:

stop();

var cue:Array = cuepoints.split(",");
current = 0;

Explanation:

stop();
Stop the movie.

var cue:Array = cuepoints.split(",");
Create a new array of the variable cuepoints.
The split function splits the variable at every comma.
This because our variable will look something like this:
"10,40,50,200,420".
The variable cuepoints is passed trough FlashVar, I'll get back to this later.


Add this code under the previous one:

_root.btn1.onRelease = function() {
_root.player.play(cue[current]);
current++;
if (current>=cue.length) {
current = 0;
}
};

Explanation:

_root.btn1.onRelease = function() {
This line checks if the button is pressed (or here, released).

_root.player.play(cue[current]);
Tell the player to play from the next cue point in our "cue" array.

current++;
Increase the current variable with 1.
So when we press the button again, it will play from the next cuepoint in our array.

if (current>=cue.length) {
current = 0;
}
If the current cue point is greater or equal to the number of total cue points, set the first cue point as next.

};
Close the onRelease function.

Full code:
stop();

var cue:Array = cuepoints.split(",");
current = 0;


_root.btn1.onRelease = function() {
_root.player.play(cue[current]);
current++;
if (current>=cue.length) {
current = 0;
}
};

Now, go to "File -> Export -> Export Movie".
Name it "player.swf" and click "Save".
When you are going to test this local on your computer,
you'll need to set "Local playback security" to "Access network only",
IF your mp3 file is on a webserver. Else you can just let it stay at
"Access local files only".


And now, the part where we're going to pass the flashvars from html.

Create a new HTML document in the same folder as your "player.swf".
And paste this in it:

<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="player.swf" width="550" height="400">
<!-- <![endif]-->
<!--[if IE]><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="550" height="400">
<param name="movie" value="player.swf" /><!-->
<!--dgx-->
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="cuepoints=10,20,30,40,50,60,70" />
<p>You need<a href="http://www.macromedia.com/go/getflashplayer" target="_blank">Adobe FlashPlayer</a> installed to view this.</p>
</object>


This is just the regular way to put flash into html, but the important line here is:

<param name="FlashVars" value="cuepoints=10,20,30,40,50,60,70" />

This is where your cuepoints is stored.

The cuepoints are given in seconds, so when you press the button the first time, it will play from 10 seconds in this example, second time 20 seconds...

If you have questions or just want to express your feelings,
post a comment below.

Odin.

• Comments(6)

Fill in only if you are not real

Author:

Code:

The following XHTML tags are allowed: <b>, <br/>, <em>, <i>, <strong>, <u>. CSS styles and Javascript are not permitted.