Von Has New Flash Ideas

The aim of the tutorial is to learn how to send any information to Flash with JavaScript. This info could be a variable or a text message. There are two examples in this tutorial. One sends a text message and the other a variable. For those unfamiliar with programming: a variable is something that “varies”. It could be anything you want.

In the example below it is the width of the car:

Example:Download the Flash file Int 120a

Example of a variable controlled via the JavaScript.

Using JavaScript to send a Text Message to Flash

Below is the example of what you will build in this tutorial.

Example:Download the Flash file Int 120b

Example of sending information to Flash with JavaScript.

NOTE: This method works in Netscape 7.1, Mozzila”s Fire Fox 1.0 and Microsoft Internet Explorer 6.0 service pack 2 but not Opera 7.54

Method One: Send Information to Flash with JavaScript:

1. Open a new: Flash Movie
   I set my width and height to: 410 x 160 pixels.
2. Save your Flash Movie as: send-info
3. With the text tool create a: Dynamic Text Box

Note: The dynamic text box has to be big enough to hold a sentence.

4. Select the: Text box
5. In the Property Inspector set the text box Variable Name (Var) to: text

Note: Don”t get the Variable Name mixed up with the Instance Name.

6. If you wish you can set the Text Box to re-size automatically depending on the number of words sent to it. To do this add the following to frame 1 of the Timeline:

this.text.autoSize = “left”;

Note: This will only work if the Text Box is set to Single Line in the Property Inspector.

As an alternative you can also use the one of the following:

this.text.autoSize = “center”; //or
this.text.autoSize = “right”;

7. Open up your normal web editor: Dreamweaver or FrontPage etc.
8. Create a new: Web Page
9. Go to code view in your web editor and add the following to the Head section of your web page:

10. Change the User Prompt… or the Please Enter… as appropriate. They change the text in the dialog box that appears.
    The first section displays a message above the Dialog”s Input Box and the second section changes the message in the Input Box. See illustration below:

    
    Dialog text and message box text is determined by what you type in the JavaScript code on your web page.

11. If your text box (or variable) is not called text, change the code above accordingly.
12. Add the following HTML code to the Body section of the HTML in code view of your web page editor:
    Click Here To Send Your Own Message To Flash” onClick=”SendMyInfo();”>

    // Note: You can also use:
    Click Here To Set the car width to 50” onclick=”window.document.GetInfo.SetVariable(”carWidth“”50″);” />
    // If you want to set a variable in the flash movie with out using a prompt or giving the user an option to enter their own value
    // This just allows you other ways to send information to flash. You could use a text link or anything you like =0)
    

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

13. Now change the 410 and 160 values for so that the width and height values are how you want your Flash Movie to display.
14. If your movie has a different name then replace send-info with the file name of your movie.

Note: Be careful with file names as they are case sensitive and never use spaces for file names that are used on the web.

15. If you wish you can replace the default message: Click Here To Send Your Own Message To Flash

16. If you wish you can define a start up message too by adding by adding the following into the Body Tag like this:

GetInfo.SetVariable(”text”"Hello this is a start up message!”);”

If you wish you can view an example of what the HTML source code would look like: View source code

Method Two: Send Information to Flash with JavaScript

NOTE: This method is said to work in all browsers but I tested it and found it to only works in Microsoft Internet Explorer 6.0 service pack 2. I personally recommend the above method but you may want to try it and may find it works for you

1. Open a new: Flash Movie
   I set my width and height to: 410 x 160 pixels.
2. Save your Flash Movie as: send-info
3. With the text tool create a: Dynamic Text Box

Note: The dynamic text box has to be big enough to hold a sentence.

4. Select the: Text box
5. In the Property Inspector set the text box Variable Name (Var) to: text

Note: Don”t get the Variable Name mixed up with the Instance Name.

6. Add this code to frame one of your movie:
7. #include “setvariables.as”
8. If you wish you can set the Text Box to re-size automatically depending on the number of words sent to it. To do this add the following to frame 1 of the Timeline:

this.text.autoSize = “left”;

Note: This will only work if the Text Box is set to Single Line in the Property Inspector.

As an alternative you can also use the one of the following:

this.text.autoSize = “center”; //or
this.text.autoSize = “right”;

9. Create a new web page and use this code:
10. /* ———————————————————–
    ———-Supporting Browsers———-
    PC:
    IE 5 and higher
    Netscape 6 and higher
    Moz/Firebird all
    Opera 7 and higher Mac OSX:
    IE 5.2
    Safari all
    Netscape 6 and higher
    Moz/Firebird/Camino all
    Opera 6 and higher

    Linux:
    Konqueror assumed
    ———————————————————– */
    var ua = navigator.userAgent.toLowerCase();
    var is_pc_ie = ((ua.indexOf(”msie”) != -1) && (ua.indexOf(”win”) != -1) && (ua.indexOf(”opera”) == -1) && (ua.indexOf(”webtv”) == -1));
    /* ———————————————————–
    function setFlashVariables(movieid, flashquery)

    movieid: id of object tag, name of movieid passed in through FlashVars
    flashquery: querystring of values to set. example( var1=foo&var2=bar )
    ———————————————————– */
    function setFlashVariables(movieid, flashquery) {
    var i, values;
    if (is_pc_ie) {
    var chunk = flashquery.split(”&”);
    for (i in chunk) {
    values = chunk.split(”=”);
    document.SetVariable(values, values);
    }
    } else {
    var divcontainer = “flash_setvariables_”+movieid;
    if (!document.getElementById(divcontainer)) {
    var divholder = document.createElement(”div”);
    divholder.id = divcontainer;
    document.body.appendChild(divholder);
    }
    document.getElementById(divcontainer).innerHTML = “”;
    var divinfo = “YourFileName.swf” FlashVars=”lc=”+movieid+”&fq=”+escape(flashquery)+”" width=”0″ height=”0″ type=”application/x-shockwave-flash”>“;
    document.getElementById(divcontainer).innerHTML = divinfo;
    }
    }

11. Only on the line where it reads: var divinfo = “YourFileName.swf” FlashVars=”lc=”+movieid+”&fq=”+escape(flashquery)+”" width=”0″ height=”0″ type=”application/x-shockwave-flash”>“;
12. Change the: YourFileName.swf to the name of your flash movie
13. Now save the file as: setvariables.js in the same location as your flash movie and web page
14. Now open note pad and add this code:
15. // ———————————————————–
    // Universal method for javascript->flash setvariable
    // ———————————————————–
    if(!_level0.$jslisten_init){
    Stage.$jsvarlistener = new LocalConnection();
    Stage.$jsvarlistener.setVariables = function(query) {
    var i, values;
    var chunk = query.split(”&”);
    for (i in chunk) {
    values = chunk.split(”=”);
    _root[values] = values;
    }
    };
    Stage.$jsvarlistener.connect(_level0.movieid);
    _level0.$jslisten_init = true;
    }
16. Save the file as: setvariables.as in the same location as your flash movie and web page
17. Save your Flash Movie: File > Save
18. Publish the Movie: File > Publish

Step Two: Setting up the HTML Web Page

1. Open up your normal web editor: Dreamweaver or FrontPage etc.
2. Create a new: Web Page
3. Go to code view in your web editor and add the following to the Head section of your web page:

   
   

4. Change the User Prompt… or the Please Enter… as appropriate. They change the text in the dialog box that appears.
   The first section displays a message above the Dialog”s Input Box and the second section changes the message in the Input Box. See illustration below:

   
   Dialog text and message box text is determined by what you type in the JavaScript code on your web page.

5. If your text box (or variable) is not called text change the code above accordingly.
6. Add the following HTML code to the Body section of the HTML in code view of your web page editor:
   Click Here To Send Your Own Message To Flash” onClick=”SendMyInfo();”>

   // Note: You can also use:
   Click Here To Set the car width to 50” onclick=”setFlashVariables(”GetInfo“,”carWidth=50″)” />
   // If you want to set a variable in the flash movie without using a prompt or giving the user an option to enter their own value
   // This just allows you other ways to send information to flash. You could use a text link or anything you like =0)
   

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

7. Now change the 410 and 160 values for so that the width and height values are how you want your Flash Movie to display.
8. If your movie has a different name then replace send-info with the file name of your movie.

Note: Be careful with file names as they are case sensitive and never use spaces for file names that are used on the web.

9. If you wish you can replace the default message: Click Here To Send Your Own Message To Flash

10. If you wish you can define a start up message too by adding the following into the Body Tag like this:

GetInfo“,”text=Hello this is a start up message!”);”>

If you wish you can view an example of what the HTML source code would look like: View source code

That”s it, you can send any message to Flash. It is worth noting that you can also send a variable to Flash using this method.

For more information on other ways of interaction between Flash and JavaScript see JavaScript in the: webwasp index

See these sites here for the more information on the second method:

http://www.mustardlab.com/developer/flash/jscommunication/

http://www.robertpenner.com/experiments/backbutton/backbutton_code.html

http://www.actionscript.org/tutorials/intermediate/Enabling_a_back_button_within_flash/index.shtml

… Read More of this tutorial at WebWasp.co.uk Tutorials

Allways, when you import a sound into a Flash, it seems very “cool” and “grace”. The sound is very important when you using it for some elements in your web site (flash menu, flash intro, some presentation..), becouse it makes your web site more powerful and it will leave a better impression.

This tutorial will teach you how to import a sound into a flash and how to create a button which will make a sound on click. This tutorial is for beginners who have no experience of using Flash.



Step 1

Create a new flash document, take the Rectangle Tool (R) and create a shape that would represent a button. Look at the picture below!



Step 2

Take the Text Tool (A), and type: sound on, on the button.



Step 3

Select the button (Ctrl+A), and press F8 on the keyborad (Convert to Symbol) to convert it into a Button. Look at the picture below!



Step 4

Click on File > Import > Import to Library, and choose c:disk > Windows > Media > notify, to import a sound into a flash Library.



Step 5

If you now open the Library (Ctrl+L), you”ll see this:



Step 6

Double click on the button or choose right click and Edit in Paste.



Step 7

Double click on layer1 to rename its name into a graphic. Insert a new layer and name it sound. Look at the picture below!



Step 8

Lock graphic layer, click on the sound layer and under Down choose right click > Insert Keyframe.



Step 9

Then, using a drag and drop technique, move your sound (notify) from Library on the stage.



Step 10

Unlock the graphic layer, and under Hit, choose right click > Insert Keyframe.





Step 11

Go back on the main scene (Scene 1), open the Properties Panel (Ctrl+F3) and set the options from the picture below!




Test your movie (Ctrl+Enter)


Download source file (.fla)