Flash CS3 and HTML frames

**Flep** · 25-08-08

Here is a tutorial that many of you will find very useful.
I have received several private messages on the forum with requests for help on how to work with a Flash CS3 menu and frames in HTML.

With Actionscript 2.0 worked fine using the method getURL ();
With Actionscript 3.0 will have many problems.

For example, suppose that we have a page main.html that contains 2 frames (nav.html and content.html).
Then we have other 5 html pages: frame_1.html, frame_2.html, frame_3.html, frame_4.html, frame_5.html.
The frame nav.html contains a menu flash on the left side.
The frame content.html will be the portion of html page that displays one of 5 pages we want to call.

I noticed on the web there are many tutorials on how to do this with JavaScript, but with a Flash menu in how to do?

To achieve the aim, we must call a javascript function from the Flash menu using Actionscript 3.0 .

FLASH SECTION

I create a FLA and save it as "menu.fla".
Create 5 Movieclip to use with menu.
I open the panel actions and write:

Code:

var clips_array:Array=new Array(frame_1_mc,frame_2_mc,frame_3_mc,frame_4_mc,frame_5_mc);
var frames_array:Array=new Array("frame_1.html","frame_2.html","frame_3.html","frame_4.html","frame_5.html");
for(var i:int=0;i < clips_array.length;i++)
{
	clips_array[i].id=i;
	clips_array[i].mouseChildren=false;
	clips_array[i].buttonMode=true;
	clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
}

function setDown(evt:MouseEvent):void
{
	ExternalInterface.call("openAlert",frames_array[evt.target.id]);
}

Analize the code:

I create an Array and I push in it all the 5 names of the Movieclip
var clips_array:Array=new Array(frame_1_mc,frame_2_mc,frame_3_mc,frame_4_mc, frame_5_mc);

I create an Array and I push in it the 5 names of the html pages
var frames_array:Array=new Array("frame_1.html","frame_2.html","frame_3.html","frame_4.html","frame_5.html");

start a for loop
for(var i:int=0;i < clips_array.length;i++)
{
assign a numeric id for each MovieClip
clips_array[i].id=i;
let's apply the buttonMode for each MovieClip ( so you can see the hand on MOUSE_OVER )
clips_array[i].mouseChildren=false;
clips_array[i].buttonMode=true;
everytime a MovieClip has clikked, Flash calls the function setDown
clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
}

I create the function setDown
function setDown(evt:MouseEvent):void
{
this function will call a Javascript function that lives in the file nav.html ( passing the name of the page we want to load into the frame content.html )
ExternalInterface.call("openAlert",frames_array[evt.target.id]);
}

HTML AND JAVASCRIPT SECTION

main.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=macintosh" />
<title>flash and html frames</title>
</head>
<frameset rows="*" cols="16%,*">
<frame src="http://www.flepstudio.org/forum/tutorials/nav.html" name="nav" />
<frame src="http://www.flepstudio.org/forum/tutorials/content.html" name="content" />
</frameset>
<noframes></noframes>

This file contains 2 frames ( nav and content ).

nav.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>nav</title>
<script language="JavaScript">
function openAlert(s)
{
	parent.content.location.href=s;
}
</script>
</head>


<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="obj1" width="200" height="500" border="0" id="obj1">
  <param name="movie" value="menu.swf" />
  <param name="quality" value="High" />
  <embed src="http://www.flepstudio.org/forum/tutorials/menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="200" height="500"> </embed>
</object>

This file contains the Javascript function that will be called by Actionscript.
The Javascript function (openAlert) will loads one of the 5 pages into content.html frame.

content.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>content</title>
</head>

This file is empty, it will load the pages called from Actionscript via Javascript.

Also we have the 5 pages:
frame_1.html
frame_2.html
frame_3.html
frame_4.html
frame_5.html

"decorate them" as you want/need.

VIEW THE EXAMPLE

Source files:

**Miumi** · 13-11-08

Just wondering about way to resolve this problem. Are you author of this method?
If yes, please explain where you get knowledge to solve this.

**Flep** · 19-11-08

Hi,
which problem do you mean ?

**Miumi** · 06-12-08

I mean it's a good example. Thanks. Sorry for rough English.

I've manage it a bit and upload for those who can be interested in landscape menu...

Working as previous example.

**trane** · 29-12-08

I copied your Actionscript and HTML, changing your page names to mine. I also named my framesets after yours. However, I get these errors from Flash when publishing:

Line 3
the class or interface 'int' could not be loaded.
for(var i:int=0:i < clips_array.length;i++)

And...

Line 11
the class or interface 'MouseEvent' could not be loaded.
function setDown(evt:MouseEvent):void

I don't understand the errors, can you help shed some light on the problem?

Also, Regarding:

ExternalInterface.call("openAlert",frames_array[evt.target.id]);
}

I didn't quite understand how your actionscript knew to load the html pages into "content" frameset. I don't see any call to "content"... does it just KNOW that frames_array is it?

Any help you can lend me would be very much appreciated!

Thank you,

Trane

**Miumi** · 31-12-08

Hello, train!
I also had with this many aggro...
I will simply place here zip file with html's which connected to .swf file, hope you will found this useful, and resolve your complication.

And happy, Happy NEW year!

Thread: Flash CS3 and HTML frames

LinkBack

Thread Tools

Display