SWF menus to load HTML pages

Before, beginning, here is the zip file containing all the source code for this example.

I thought it was easy all the time. But it is really easy, if one knows the below “AllowScriptAccess” script parameter in HTML/javascript. This parameter is in the OBJECT and EMBED tags of HTML, by which FlashIDE generally embeds our SWF in the HTML ( If not embeded by SWFObject by us manually, then also we need to make these settings  ).

<param name=”allowScriptAccess” value=“always” />

By default, when published from FlashIDE, the value for this parameter is “sameDomain”. This should be something like

<param name=”allowScriptAccess” value=“sameDomain” />

The real deal  is, even if there is no param in a HTML page with “allowScriptAccess” , the default value it takes as “sameDomain”. That means, the SWF and HTML must be from the same domain. That makes it difficult to test this locally. One has to upload the HTML and SWF to a server and check it.  Well, if we change it to “always” like

<param name=”allowScriptAccess” value=“always” />

our SWf file can now communicate with any HTML page.

Once we know our settings, we need to know the API to call. The Class that makes actionscript-javascript communicate is known as “ExternalInterface“. This is in the package “flash.external.ExternalInterface“. All we need to do is call a javascript function from actionscript as follows

ExternalInterface.call(‘callFromFlashMenu’, btnName);

In the above call, we are calling a function defined in our HTML page as below

<script type=”text/javascript”>
function callFromFlashMenu(menuName)
{
alert(menuName);
}
</script>

This function takes one string as input and just alerts it to the user. This parameter we are sending from actionscript as the second parameter as you can see it ExternalInterface.call(‘callFromFlashMenu’, btnName);

Taking this concept forward, we will be making a menu in Flash and send the button names to the javascript function. This will make our javascript know about the button we have clicked in our SWF. Once button name is known to javascript, we can have a validation and change the HTML page on the container. Now what is the container? Well, in our HTML page, we will have an “iframe”, which can display any HTML page. The code would be

<iframe id=’htmlSrc’ src =”http://www.saumyaray.com&#8221; width=”600″ height=”300″>

<p>Your browser does not support iframes.</p>

</iframe>


As you can see, iframe has a property named “src”, which takes a html page URL, as its parameter. We can send in whatever HTML page URL, we want to display in this container. Even we can change the size of the container. So thats it, we already have the parameter from the actionscsript and now depending upon the button name we can change the “src” property of the “iframe”. The full scripts, along with the FLA is here for you to download and try.

The javascript function would look like

<script type=”text/javascript”>

function callFromFlashMenu(menuName)

{

if(menuName==’btnOne’)

{

document.getElementById(‘htmlSrc’).src=’http://www.yahoo.com&#8217;;

}else if(menuName==’btnTwo’){

document.getElementById(‘htmlSrc’).src=’http://www.bing.com&#8217;;

}else if(menuName==’btnThree’){

document.getElementById(‘htmlSrc’).src=’http://www.google.com&#8217;;

}

}

</script>

Hope that helps 🙂

Happy flashing

Advertisements

Author: saumya

designer / developer / maker / educator @saumya

2 thoughts on “SWF menus to load HTML pages”

  1. Hi, Thanks for the tutorial, but I cannot open the FLA to see what I should put there. Can a CS3 or CS4 version be posted?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s