Learn Flash FS Commands
Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us 

 

Flash Tutorials

   

Flash Tutorial - FS Commands

 

Free Flash Tutorial

 


to FS Commands

The aim of the tutorial is to learn how to get Flash to send the Browser JavaScript commands. You will learn how Flash can be used to run JavaScript code on a HTML web page. This is called an FS Command.

Example: Download the Flash file Int 118a

Start Up Message

Example of Flash buttons that run JavaScript commands on the web page.

Note: Some of the above JavaScript commands can be done directly from Flash: Pop Ups, Random page and Print.

In my opinion it is better, when possible, to use Flash directly. The reason for this is because Internet Explorer and Netscape interprets JavaScript differently, therefore you get Browser inconsistency. You will also find that different versions of the Browsers will vary, this makes testing difficult. In general in Flash if something works it will work irrespective of what Browser you are using.

You will find that all of the above JavaScript has been designed to work in Internet Explorer.

Step One: The Flash Buttons

  1. Open a new Flash Movie.
  2. Make a simple set of buttons you would to use for your web site.
  3. Now on any of the buttons you wish to use to run some javascript code with, attach the following code to the button:

    4.     on (release, releaseOutside) {
                fscommand("0", "click");
        }
            on (rollOver, dragOver) {
                fscommand("0", "over");
        }
            on (rollOut, dragOut) {
                fscommand("0", "out");
        }


  4. You can add this code to one or more buttons. Each time however you add this code to a new button you must change the number "0" that appears in the code three times. Every time you add the code to a new button you would increase "0" by 1 like so:

    Code for second button:

    5.     on (release, releaseOutside) {
                fscommand("1", "click");
        }
            on (rollOver, dragOver) {
                fscommand("1", "over");
        }
            on (rollOut, dragOut) {
                fscommand("1", "out");
        }

    Code for third button:

        on (release, releaseOutside) {
                fscommand("2", "click");
        }
            on (rollOver, dragOver) {
                fscommand("2", "over");
        }
            on (rollOut, dragOut) {
                fscommand("2", "out");
        }

        Etc.

        Note: You must always start at "0" and keep going up in number by "1" each time you add the code to a new button.

  5. Export the movie as a Flash Movie (swf file): File > Publish

Step Two: The JavaScript

  1. Open up your HTML web page editor (i.e. Dreamweaver, FrontPage etc..)

  2. Open up a blank new web page or an existing new web page that you would like to add your buttons to.

  3. Click one the page where you would like the button to appear (Must be within the body section i.e. between the <body> and </body> tags)

  4. Now add the following HTML code in the HTML code view of your web page editor:
    5. <OBJECT id="navbar" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="XXX" height="XXX">

    <PARAM NAME="movie" VALUE="    YourFileName.swf">

    <PARAM NAME="quality" VALUE="high">

    <PARAM NAME="menu" VALUE="true">

    <EMBED src="    YourFileName.swf" quality="high" menu="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="XXX" height="XXX" swLiveConnect="true" NAME="navbar"> </EMBED>

    </OBJECT>

    Note: You MUST use this code or the FSCommand will not work !!

  5. Now change the XXX values for so that the width and height values are how you want your Flash Movie to display.

  6. Then replace YourFileName with the file name of your movie. Be careful this is case sensitive and never use spaces for file names that are used on the web.

    7. Note: The Flash movie that you created earlier (the swf file) must be in the same location as your web page. If it is in the same location as the web page then you only use the button name. If however the file is in a different location you must include the file path. If you don't know about HTML file paths just make sure your Flash Movie is located in the same folder as your web page.

  7. Now whilst still in the HTML code view for your web page builder program add the following code in the head section of your web page (if you add the code just before the </head> tag is best). You will find the <head> tags at the top of your web page and will look something like this:
    8. <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <title>Your Web Page </title>

    Add the code here

    </head>
  8. In the Head section add the following JavaScript code:
    9. <script language="javascript" type="text/javascript">

    <!--

    // HANDLES FSCOMMAND CALL FOR INTERNET EXPLORER

    if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {

    document.write('<SCRIPT LANGUAGE=VBScript\> \n');

    document.write('on error resume next \n');

    document.write('Sub navbar_FSCommand(ByVal command, ByVal args)\n');

    document.write(' call navbar_DoFSCommand(command, args)\n');

    document.write('end sub\n');

    document.write('</SCRIPT\> \n');

    }

    //-->

    </SCRIPT>


  9. Now in the Body or Head section for your web page add the following code:

    <script language="javascript" type="text/javascript">

    <!--

    // Handle all the FSCommand messages in a Flash movie

    function navbar_DoFSCommand(command, args) {

    if ( command == "0" ) {

    if ( args == "click" ) {     Remove this and add you own javascript function here for when the first flash button is clicked }

    if ( args == "over") {       Remove this and add you own javascript function here for when the first flash button is rolled over }

    if ( args == "out" ) {       Remove this and add you own javascript function here for when the first flash button is rolled out of }

    }
    }
    //-->
    </SCRIPT>


  10. For each button you have attached the fscommand to you will need to add extra set of code, like the code form above for that fscommand. So if you have three flash buttons with the fscommand attached to them then your javascript code would look something like this:

    <script language="javascript" type="text/javascript">
    <!--
    // Handle all the FSCommand messages in a Flash movie
    function navbar_DoFSCommand(command, args) {
    if ( command == "0" ) {
    if ( args == "click" ) {     Add your own javascript function here }
    if ( args == "over") {   Add your own javascript function here }
    if ( args == "out" ) {   Add your own javascript function here }
    }
    if ( command == "1" ) {
    if ( args == "click" ) { Add your own javascript function here }
    if ( args == "over") {   Add your own javascript function here }
    if ( args == "out" ) {   Add your own javascript function here }
    }
    if ( command == "2" ) {
    if ( args == "click" ) { Add your own javascript function here }
    if ( args == "over") {   Add your own javascript function here }
    if ( args == "out" ) {   Add your own javascript function here }
    }
    }
    //-->
    </SCRIPT>


  11. Always start from"0" like in flash and keep adding "1" for each button that you have.
  12. When adding your own customized javascript you can add any function or code that you want to run for when the button of your choice is either clicked, rolled over or rolled out of with the mouse. Simply replace the:

    "remove this and add you own javascript function here for when the first flash button is clicked"

    and replace it with the code or function you wish to run when the mouse is over, out or click on your button.

JavaScript Functions Used in this Tutorial

In the example above all individual JavaScript functions are in the Head tag except for one. The message that is displayed needs a small amount of additional information in the Body of the web page. Otherwise the Browser would not know where to display the message:

<a id="Words">You can add a start up message here that will show up when the page first loads.</a>

The following is the Java Script functions as listed in the head tag of this page:

<script language="javascript" type="text/javascript">
<!--

// LINKS FOR RANDOM FUNCTION
var links = new Array(4);
links[0] = "http://www.yahoo.com/";
links[1] = "http://www.google.com/";
links[2] = "http://www.altavista.com/";
links[3] = "http://www.webcrawler.com/";

// Handle all the FSCommand messages in a Flash movie
function navbar_DoFSCommand(command, args) {
if ( command == "0" ) {
if ( args == "click" ) { }
if ( args == "over") {
Words.innerHTML = 'This button will display a message on the browser status bar.';
self.status="Hey this is a very long status bar message !";
}
if ( args == "out" ) {
self.status="";
Words.innerHTML = 'Start Up Message';
}
}
if ( command == "1" ) {
if ( args == "click" ) { openWindow('http://www.yahoo.com',350, 295); }
if ( args == "over") { Words.innerHTML = 'This will open Yahoo website in a popup window'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "2" ) {
if ( args == "click" ) { }
if ( args == "over") { Words.innerHTML = 'This button will only display a message here on MouseOver'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "3" ) {
if ( args == "click" ) { }
if ( args == "over") { Words.innerHTML = '<img src=\"wasp.jpg\"><P>You can display images too'; }
// CHANGE THE ABOVE IMAGE SRC TO YOUR OWN E.G. YourImage.GIF
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "4" ) {
if ( args == "click" ) { shake(10); }
if ( args == "over") { Words.innerHTML = 'Click for the EARTH QUAKE !'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "5" ) {
if ( args == "click" ) { window.external.AddFavorite('http://www.webwasp.co.uk/','webwasp.co.uk') }
if ( args == "over") { Words.innerHTML = 'Add webwasp.co.uk to your favourites !'; }
// Change the above web address to your own
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "6" ) {
if ( args == "click" ) { alert ("This is a Javascript Alert") }
if ( args == "over") { Words.innerHTML = 'Click this button to generate an \'Alert\' message'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "7" ) {
if ( args == "click" ) { random(); }
if ( args == "over") { Words.innerHTML = 'Click this button to randomly go to Yahoo, Google, AltaVista or WebCrawler'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "8" ) {
if ( args == "click" ) { history.go(-1); }
if ( args == "over") { Words.innerHTML = 'This button will act like your browser\'s back button'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "9" ) {
if ( args == "click" ) { window.print(); }
if ( args == "over") { Words.innerHTML = 'Click this button to bring up the print prompt box'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
if ( command == "10" ) {
if ( args == "click" ) { top.window.close(); }
if ( args == "over") { Words.innerHTML = 'Click button to close this window'; }
if ( args == "out" ) { Words.innerHTML = 'Start Up Message'; }
}
}

// EARTHQUAKE FUNCTION
function shake(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}

function openWindow(file,w,h) {
newWindow = window.open(
file,
'newWin',
'top=100,left=150,width='+w+',height='+h+',resizable=yes,toolbar=no,location=no,scrollbars=yes')
}

function random() {
var a = 1+Math.round(Math.random()*4);
var i = a;
location = links[i];
}

function expand() {
for(x = 0; x < 50; x++) {
window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);
window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);
}
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
}

//-->
</SCRIPT>

Further Info about JavaScript

For more information on what JavaScript is and tutorials on how to use it simply go to google and search for “JavaScript” or “JavaScript tutorials”. If you simply spend some time searching the net you'll soon find many sites that give help and advice tutorials on JavaScript for example:

http://www.hotscripts.com
http://www.experts-exchange.com
http://forums.devshed.com/
http://www.allexperts.com
http://javascript.internet.com/
http://www.javascript.com/


For more help and advice please feel free to ask for help on the webwasp massage boards: forum

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

Webwasp Community: Webwasp Mates & Dates

Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates

 Top of Page • Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.