Layers that call HTML in Flash

This tutorial requires you to have some basic knowledge of HTML, CSS, Flash, JavaScript and ASP

It's a good way to use HTML text to make animations with Flash. It's very simple and easy to use, and it's all about using the Geturl () script in ActionScript, which is more convenient and powerful than any other language you can imagine (such as JavaScript).

Take a look at this episode: In a special project, the designer needs Flash animation to run at the top of the page, and then display the text after the Flash is played. You can do a lot of things in Flash, but in this case it's not appropriate to display text in the HTML layer.

First step: Layout

First create a page that contains layers (if you are unfamiliar with the concept of layers, you can search for them in Google, you will find a lot of useful things that are worth taking a moment to look at). In my example, I used a navigation layer, a layer for displaying text content, and a flash layer, as shown in the following illustration:

The effect I use below is to hide the text content layer before the Flash movie finishes playing, so the first thing to do is to set the Visible property of the layer to hide, and the other two layers to keep the default visible properties.

Step Two: JavaScript

Here's what I'm saying: I'm using Dreamweaver's built-in show/hide script and inserting it into the head of the page.

Whether you're writing a JavaScript script, or dragging one from a script library or Dreamweaver, you can toggle the layer's display and hide. With this script, you can quickly write down the simple JavaScript functions you want.

The model in the diagram above is actually simpler than the completed functionality. In fact, a total of three layers----content layer and two layers that contain the mouse up and down arrow graphics, which are used to scroll through the content layer. These are the things that need to be hidden until the movie is finished. Instead of creating four different scripts in the Flash timeline, I created a JavaScript script that quickly showed all the layers:

<script language= "JavaScript" type= "Text/javascript" >
<!--
function Mm_findobj (n, D) {//v4.01
var p,i,x; if (!d) d=document; if ((P=n.indexof ("?")) >0&&parent.frames.length)
{
D=parent.frames[n.substring (p+1)].document; N=n.substring (0,p);}
if (!) ( X=d[n]) &&d.all) x=d.all[n]; for (i=0;! x&&i<d.forms.length;i++)
X=d.forms[i][n];
for (i=0;! x&&d.layers&&i<d.layers.length;i++) X=mm_findobj (n,d.layers[i].document);
if (!x && d.getElementById) X=d.getelementbyid (n); return x;
}
function MM_showHideLayers () {//v3.0
var i,p,v,obj,args=mm_showhidelayers.arguments;
For (i=0 i< (args.length-2); i+=3) if ((Obj=mm_findobj (args[i))!=null)
{v=args[i+2];
if (obj.style) {Obj=obj.style v= (v== ' show ')? ' Visible ':(v= ' hide ')? ' Hidden ': v;
}
Obj.visibility=v; }
}
function Showlayers () {
MM_showHideLayers (' content ', ', ', ' show ')
MM_showHideLayers (' Divupcontrolmain ', ', ', ' show ')
MM_showHideLayers (' Divdowncontrolmain ', ', ', ' show ')
}
-->
</script>

It's very simple! As you can see, all I have to do is create a script function for each layer that needs to be displayed. I'm not a very strong JavaScript programmer, there's definitely a better way to implement it.

Step Three: Call this function in Flash

Insert the following script where you want the text content layer to appear on the timeline of the Flash Movie:

GetURL ("Javascript:showlayers ()");

Now, the hidden layer in the HTML page can be controlled by the Flash movie to show it at the right time. However, there is still a problem, every time users open the page, you need to be patient to read the movie to see the content text. Here is my solution.

Step Fourth: Save people's Patience

When the user first visits this page, can make a cookie record, when the user again visit, the server read cookies can know whether they have seen the film. If the user has seen the movie, you can use the last frame and a small play button to replace the movie, the user can directly see the text content. Using Google, take the time you can do this in any language, such as Perl,php,javascript. Here ASP is my choice of weapon. There are two parts to the code:

1 Check the cookie and display the appropriate content:

2) Top of the form

<div id= "Flash" style= "Position:absolute; left:0; top:0; width:760;
height:160; Z-index:1; Visibility:visible ">

<%
If Request.Cookies ("viewed") ("force") = "" Then
%>

<p><object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
Codebase= "http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=4,0,2,0"
Width= "760" height= "160" >
<param name= "movie" value= "http://www.webjx.com/htmldata/2006-03-09/swf/force.swf" >
<param name=quality value=high>
<param name= "Loop" value= "false" >
<param name= "Menu" value= "false" >
<embed src= "http://www.webjx.com/htmldata/2006-03-09/swf/force.swf" Quality=high pluginspage= "http://" Www.macromedia.com/shockwave/download/index.cgi? P1_prod_version=shockwaveflash"
Type= "Application/x-shockwave-flash" width= "760" height= "160"
Loop= "false" menu= "false" >
</embed>
</object></p>

<%
Else
%>

<p>Border= "0" ></p>

<script language= "JavaScript" type= "Text/javascript" >
Showlayers ()
</script>

<%
End If
%>

</div>

Simple point for a statement---if the cookie is empty or does not exist, embed the Flash movie (the hidden layer is displayed after the play is played), otherwise display the last frame of the JPG picture to toggle the hidden layer.

2) Write cookies

<% Response.Cookies ("viewed") ("force") = "True" Response.Cookies ("viewed"). Expires = Date +%>

As long as the user visits this page and is the first time browsing in the browser, it will be written to the cookie, the later browsing time will not be disturbed by the film. And the only thing left is what if they want to watch the movie again? I do a simple script clear.asp and a ' replay ' link:

<a href= "Clear.asp?url=force.asp&cookie=force" > Replay </a>

As you can see, the link clears the cookie and the code is as follows (ASP):

<% strURL = request.querystring ("url") Strcookie = Request.QueryString ("cookie") Response.Cookies ("Viewed") ( Strcookie) = "" Response.Redirect strurl%>

All I have to do is get the URL and cookie name from the query string, delete the cookie and relocate to the user-opened page. Why do you do it? Because simply removing cookies on the same page doesn't work, it's too late. You need to reload this page, and that's my solution, all of it's done and it's running really well.

* Tested in IE5, IE 6, Mozilla and Netscape