You need JavaScript Support To View This Page Flash Tutorial: Blurring a Picture - webwasp.co.uk

Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Tutorial - Communication with Flash

144 Intermediate
Flash Compatibility: MX 2004, MX and Flash 5

Written by: Rabid Lemming

Length: 2,728 Words

Assumed Knowledge: Some knowledge HTML, JavaScript and Flash ActionScript

Level: Medium

 

Access: Free Tutorial

Note: This tutorial has not yet been edited - so that I cannot be sure it is error free or that the instruction are easy to follow. It will be edited soon. Thanks - Site Editor: Phil Schulz.

The aim of the tutorial is to learn different methods of communication with flash

NOTE: IMPORTANT READ!!! I strongly recommend you read the following related tutorials:

Cross Ref: FS Commands enables the Flash movie to send JavaScript Commands to the web page or the Browser: FS Commands

Cross Ref: Control flash though web links to play sound in flash: Flash Sound on HTML Web Pages

Cross Ref: Learn how to send any information to Flash with JavaScript: Send Information to Flash with JavaScript

Cross Ref: Learn how to send information from one Flash Movie to another part 1: Communication between Flash Movies: Part 1

Cross Ref: Learn how to send information from one Flash Movie to another part 2: Communication between Flash Movies: Part 2

Cross Ref: Learn how to control a Flash Movie using standard HTML links on a web page using JavaScript: Web Page Controls Flash Movie

Cross Ref: Navigate through your flash movie using the browser back and forth history buttons: History buttons used with Flash

Example: Download the Flash file  Int 144a

Change the colour of this table by rolling over the colour's on the left

       ^^Flash Movie^^                     ^^Web Page Table^^

You can communicate between any language like javascript, php, asp, VBScript or etc... In this tutorial you will learn how to create simple Flash buttons that can change the background colour of the table or HTML web page in with our flash movie in. Before going further you have to know that Flash Scripting requires Netscape Navigator 3.x and above (LiveConnect and Java-enabled; Windows 95/98/NT/2000 or Mac OS; ) or Internet Explorer 3.x and above (ActiveX enabled; Windows 95/98/NT/2000 only). Netscape 6 does not support LiveConnect, that's why Flash scripting in Netscape 6 is currently very buggy. But "JavaScript:" in getURL technique doesn't require LiveConnect plug-in, and it works in Netscape 6. Also this technique does not require Active-X, and it works in IE 5 on Mac.

Step one: The Flash

  1. Open a new Flash Movie.
  2. Create a set of buttons and add the following code to them
  3. on (rollOut, dragOut) {
    //Set the table back ground colour to what ever colour you want
    getURL("JavaScript:ChangeTableBackgroundColour(MyTableCellName,'#FFFFFF')");
    }
    on (rollOver, dragOver) {
    //Set the table back ground colour back to it's default colour in this case white
    getURL("JavaScript:ChangeTableBackgroundColour(MyTableCellName,'#000000')");

    }
  4. Export the swf file and add it to your web page
  5. Add this code to head
  6. <noscript>You need Java Script Support To View This Page</noscript>
    <script language="javascript" type="text/javascript">
    <!--
    function ChangeTableBackgroundColour(MyTableCellName,TheTableCellColour){
    if (document.all || document.getElementById)
    MyTableCellName.style.backgroundColor=TheTableCellColour;
    else if (document.layers)
    MyTableCellName.bgColor=TheTableCellColour;
    }
    //-->
    </script>
  7. Create a table and in the td tad of the table cell you wish to change the background colour of add class="gray" id="gray" name="gray"
  8. Example:
  9. <table width="380" height="190" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="190" height="190" align="left" valign="middle"><div align="center">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="190" height="190" hspace="0" vspace="0" align="absmiddle">
    <param name="movie" value="PageColourChanger.swf" />
    <param name="quality" value="high" />
    <embed src="PageColourChanger.swf" width="190" height="190" hspace="0" vspace="0" align="absmiddle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
    </object>
    </div></td>
    <td width="190" height="190"
    class="MyTableCellName" id="MyTableCellName" name="MyTableCellName"><div align="center">
    <p>Change the colour of this table by rolling over the colour's on the left</p>
    </div></td>
    </tr>
    </table>


    Note: In the ActionScript above to type the line: | use: Shift + Back Slash \

Understanding the code:

In flash you can call the javascript code using the getURL method like so:

getURL("JavaScript:YourJavaScriptFunction(InformationYourWantToPassToTheJavaScriptFunction)");
The JavaScript: tells the browser that its a javascript function your calling
The parts in the brackets MyTableCellName,'#FFFFFF' in the flash file are the values your passing to the javascript function. So your saying call a javascript function on this web page by the name of
ChangeTableBackgroundColour and pass on the information to that function that the first argument or variable known as MyTableCellName is equal to the name MyTableCellName and the second argument or variable 
known as TheTableCellColour is equal to #FFFFFF that's what the getURL("JavaScript:ChangeTableBackgroundColour(MyTableCellName,'#FFFFFF')"); in flash is doing. On the web page the function when called by flash 
say's ok I have to set a table cell background colour called MyTableCellName to the colour of #FFFFFF. That what the function in step 6 above is doing. You can call your table cell anything you like instead of 
calling it MyTableCellName you could call it any thing you like. i just used MyTableCellName as i hope it makes more sense. You can call any javascript function and pass any information to it. 
To change the back ground of your web page you can use:
//In flash use:
on (press) {
    getURL ("JavaScript:ChangeTheWebPageBackgroundColor('#336600')");
}
On your webpage use:
<noscript>You need Java Script Support To View This Page</noscript> 
<script language="javascript" type="text/javascript">
<!--
function
ChangeTheWebPageBackgroundColor(BackgrounColor) {
if (window.document && window.document.bgColor) {
document.bgColor = BackgrounColor;
}
}
//-->
</script>
This script works with IE 4.0 and above, Netscape 4.0 and above and also DOM compliant browsers like IE 5.5 and Netscape 6.0.The "document.bgColor" property defines a document's background colour. In this example the background colour of our HTML page. The argument #336600 is a string that can contain either the hexadecimal definition of the color (like "#cccccc") or it's literal description (like "lime"). You can call basic javascript functions with out needing any code on your web page like window pop ups or alerts as flash MX 2004 now fully supports javascript. Examples: //Alert message on (press) { getURL ("JavaScript:alert('This is Flash!')"); } //link to an anchor on a web page on (release) { getURL ("myPage.htm?#bottom"); } //history back and forward buttons on (release) { getURL ("javascript:history.back()"); } on (press) { getURL ("javascript:history.back()"); } Sending variables from flash to a new page through php Example: Download the Flash file  Int 144b Important!!! NOTE: You have to disable pop ups for this example to work!

Step one: The Flash

  1. Open a new Flash Movie.
  2. Create a button and add the following code to it
  3. getURL("Receive.php", "new", "GET");
  4. Add a input box and give it the variable name: MySenderVariable

Receive.php is the name of my PHP document which flash is sending the variables value to. the "new" is the target window, "new" opens a new window. GET specifies the method we're using to send our variables. You can use either GET or POST. Basically GET shows up in the URL line and is easier to debug while POST doesn't and isn't.

Step two: The Flash

  1. Open a new Flash Movie.
  2. Create a dynamic text box and give it the variable name: MySenderVariable
  3. Create a new web page
  4. Now add the following HTML code in the HTML code view of your web page editor:
    <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="XXX" height="XXX">

    <PARAM NAME="movie" VALUE="
    YourFileName.swf?MyReceiverVariable=<?php echo $_GET[MySenderVariable]; ?>">

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

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

    <EMBED src="
    YourFileName.swf?MyReceiverVariable=<?php echo $_GET[MySenderVariable]; ?>" 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"> </EMBED>

    </OBJECT>

    Note: You MUST use this code or the it 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.

    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. ?MyReceiverVariable=<?php echo $_GET[MySenderVariable]; ?> This gets the value of MySenderVariable which is passed through the get url method passed from the first flash file and sets the variable MyReceiverVariable to the value of MySenderVariable. The html code for the swf file on the pop up window gets the value of MySenderVariable and sets the value of the variable in the flash file called MyReceiverVariable to that value. as the text box in the second swf file uses that variable name its contents are set to that value

You can set any variable value in flash though the html code for the flash movie.

Example: Download the Flash file  Int 144c

   

Step One: The Flash

  1. Open a new Flash Movie.
  2. Add a dynamic text box and give it the variable name: MyVar
  3. Now add the following HTML code in the HTML code view of your web page editor:
    <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="XXX" height="XXX">

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

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

    <PARAM NAME="
    FlashVars" value="MyVar=Hello">

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

    <EMBED src="
    YourFileName.swf" FlashVars="MyVar=Hello" 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"> </EMBED>

    </OBJECT>

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

  4. Now change the XXX values for so that the width and height values are how you want your Flash Movie to display.
  5. 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.

    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.

  6. the <PARAM NAME="FlashVars" value="MyVar=Hello"> and

    FlashVars="MyVar=Hello" set's the variable named MyVar in the flash file to the value of "Hello". As the text box in the flash file uses that variable its contents are set to this value

You can set multiple variables all at the same time like so:

Example: Download the Flash file  Int 144d

Step One: The Flash

  1. Open a new Flash Movie.
  2. Add a dynamic text box and give it the variable name: MyVar
  3. Add a second dynamic text box and give it the variable name: MyVar2
  4. Add a third dynamic text box and give it the variable name: MyVar3
  5. Now add the following HTML code in the HTML code view of your web page editor:
    <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="XXX" height="XXX">

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

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

    <PARAM NAME="
    FlashVars" value="MyVar=Hello&MyVar2=This Is My&MyVar3=Message">

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

    <EMBED src="
    YourFileName.swf" FlashVars="MyVar=Hello&MyVar2=This Is My&MyVar3=Message" 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"> </EMBED>

    </OBJECT>

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

  6. Now change the XXX values for so that the width and height values are how you want your Flash Movie to display.
  7. 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.

    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.

  8. The <PARAM NAME="FlashVars" value="MyVar=Hello&MyVar2=This Is My&MyVar3=Message"> and FlashVars="MyVar=Hello&MyVar2=This Is My&MyVar3=Message" set the variables named MyVar, MyVar2 and MyVar3 in the flash file to the value of "Hello", "This Is My" and "Message".

Understanding the different parts:

TheFirstVariableNameInFlash=InformationToBePassedToThisVariableHere&TheSecondVariableNameInFlash=InformationToBePassedToThisVariableHere&TheThirdVariableNameInFlash=InformationToBePassedToThisVariableHere

TheFirstVariableNameInFlash Is the name of the variable in flash

= Sets the message or values of the variable in flash equal to what ever follows

InformationToBePassedToThisVariableHere Is the information or values you want to set that variable equal to

& This concatenates or in other words adds the next variable in flash.

Example: Download the Flash file  Int 144e

Step One: The Flash

  1. Open a new Flash Movie.
  2. Create a dynamic text box and give it the variable name: MySenderVariable1
  3. Create a second dynamic text box and give it the variable name: MySenderVariable2
  4. Create a third dynamic text box and give it the variable name: MySenderVariable3
  5. Create a new web page
  6. Now add the following HTML code in the HTML code view of your web page editor:
    <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="XXX" height="XXX">

    <PARAM NAME="movie" VALUE="
    YourFileName.swf?MyReceiverVariable1=Hello Again&MyReceiverVariable2=This is Kewl Hey?&MyReceiverVariable3=LOL">

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

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

    <EMBED src="
    YourFileName.swf?MyReceiverVariable1=Hello Again&MyReceiverVariable2=This is Kewl Hey?&MyReceiverVariable3=LOL" 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"> </EMBED>

    </OBJECT>

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

  7. Now change the XXX values for so that the width and height values are how you want your Flash Movie to display.
  8. 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.

    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.

Understanding the different parts:

YourFileName.swf?TheFirstVariableNameInFlash=InformationToBePassedToThisVariableHere&TheSecondVariableNameInFlash=InformationToBePassedToThisVariableHere&TheThirdVariableNameInFlash=
InformationToBePassedToThisVariableHere

YourFileName.swf The name and location of the swf movie

? Sends the variable values to flash

TheFirstVariableNameInFlash Is the name of the variable in flash

InformationToBePassedToThisVariableHere Is the information or values you want to set that variable equal to

& This concatenates or in other words adds the next variable in flash.

Example: Download the Flash file  Int 144f

Step One: The Flash

  1. Open a new Flash Movie.
  2. Create a dynamic text box and give it the variable name: MyVarFunction1
  3. Create a second dynamic text box and give it the variable name: MyVarFunction2
  4. Create a third dynamic text box and give it the variable name: MyVarFunction3
  5. Create a forth larger box and give it the instance name (NOT variable name) OutPut
  6. Add a new layer
  7. On the new layer add the following action script
  8. function RunMe(Num) {
    if (Num == 1) {
    OutPut.text = "Hello this is my first message";
    }
    if (Num == 2) {
    OutPut.text = "Hello this is my second message";
    }
    if (Num == 3) {
    OutPut.text = "Hello this is my third message";
    }
    }
    MyVarFunction1 = "<A HREF=\"asfunction:RunMe, 1\">Run Function One</A>";
    MyVarFunction2 = "<A HREF=\"asfunction:RunMe, 2\">Run Function Two</A>";
    MyVarFunction3 = "<A HREF=\"asfunction:RunMe, 3\">Run Function Three</A>";
    OutPut.text = "Click the links to the left";

Understanding the different parts:

TheNameOfTheTextBoxVariable = "<A HREF=\"asfunction:TheNameOfTheFunctionYourCalling, AnyParametersYouWishToPassToTheFunction\">The text you want to appear in the text box goes here </A>";

TheNameOfTheTextBoxVariable Is the var name in the property panel for the text box

asfunction: Is the type of script your calling in this case a flash action script function but you could call other functions like javascript, php, asp or what ever. See below for examples

TheNameOfTheFunctionYourCalling is the function name in this example the function is called RunMe

AnyParametersYouWishToPassToTheFunction after the TheNameOfTheFunctionYourCalling if you will to pass some information back to the function add a comma followed by the parameters value you wish to send back.

You can send more than one parameter at one like so: TheNameOfTheFunctionYourCalling, parmValue1, parmValue2, parmValue3 etc...

Example: MyVarFunction1 = "<A HREF=\"asfunction:RunMe, 1,2,3\">Run One Function But Pass Three Values At Once To It </A>";

The text you want to appear in the text box goes here This is self explanatory

The function NameOfTheFunction(Num) { The Num in the brackets is set to the first parmValue1 sent by the function call. In the example Num is set to a number but you can set it to any thing you like

You could have if you where passing multiple values: function RunMe(Num1,Num2,Num3) { Where Num1 would be equal to parmValue1, Num2 would be equal to parmValue2 and Num3 would be equal to parmValue3

You don't have to use Num you can call Num any thing you like and the parmValue can be a number, word, true/false statement or any thing you like.

Think of it as calling a function by its name and as you call it your setting its values

Examples of calling other scripts:

MyVarFunction2 = "<A HREF=\"JavaScript:alert('Hello')\">Run Function Two</A>"; this will call a javascript alert message
MyVarFunction3 = "<A HREF=\"http://www.webwasp.co.uk\">Random Color</A>"; this will load a web page

Note: always best to keep function on the main time line an not inside movie clips as it can get messy. how ever should you for some reason ever need to run a function inside a movie clip you can do so like so:

MyVarFunction1 = "<A HREF=\"asfunction:InstanceNameOfTheMovieClip.FunctionNameInsideTheMovieClip\">Run Function One</A>"

Also you don't have to pass values back to the function if you don't want to. Just don't add the comma followed by the value after the function call and when creating a function name leave out the Num in the brackets

Example:

MyVarFunction1 = "<A HREF=\"asfunction:RunMe\">Function Call </A>";
function RunMe(Num) {
OutPut.text = "Hello this is my message";
}

Ok by now after reading this tutorial and the others i recommended at the top you should now be able to control and communicate with flash in ways others can only dream of.

 

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


10449 visitors to this page since Oct 04 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat 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.