Basic tutorial on interaction between JavaScript and flash

Source: Internet
Author: User
Tags html input text

Below are some examples of direct communication between flash and HTML files using JavaScript. Each example has a simple step.

This article discusses three basic Flash/JavaScript communication methods:
Javascript-to-Flash Communication-use the JavaScript method of Flash Player
Communication between flash and JavaScript-use flash fscommand
Flash-to-Flash Communication ---------- use a local connection object or a combination of the two technologies

Not all browsers attach great importance to scripts. To communicate with Flash players, the browser must have built-in hooks so that flash players can 'snoop '. The browser must be of the following types:
Netscape Navigator 3.0-4.7x, and Netscape 6.2 or higher
(Windows 95/98/NT/2000/XP or MACOs; Java and liveconnect are allowed)
Internet Explorer 3.0 or higher
(Windows 95/98/NT/2000/XP only; ActiveX allowed)

Communication between JavaScript and flash

This example demonstrates how to use the flash method to send the variable from the HTML input text to the Flash file on the page. The HTML input data is transmitted to the Flash file through the flash setvariable method.

Example:
Download the source file: javascript_to_flash.zip (17 K)

Steps:

Flash in progress
1. Create a new file and save it as javascript_to_flash.fla
2. Use a text tool to create a text field on the stage
3. Select this text field. On the property panel, select Dynamic text from the drop-down list and fill in "myvar" in the variable column"
Note: The best practice is to use instance and use myvar. Text to change the value of myvar. For simplicity and compatibility with flash4 and flash5, we use the form of variable names.
4. Save the file
5. Publish HTML and SWF files

Dreamweaver
The next step is to move to Dreamweaver. Of course, it can also be another HTML editor.
1. Open the HTML file released in the previous step.
2. Insert the generated SWF file and object/EMBED tag
(1) Insert> media> flash and select the flash
(2) switchCodeView, we need to modify the selected <Object> and <embed> labels
(3) Insert id = "myflash" in the object tag"

<Object classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000"
Codebase = "http://download.macromedia.com/pub/shockwave/cabs/
Flash/swflash. Cab # version = 5, 0, 0"
Width = 366 Height = 142 id = "myflash">
Note: If you paste and copy the code, make sure to delete unnecessary line breaks. Otherwise, errors may occur. You can also directly enter the ID in the property panel.
(4) Insert name = "myflash" and swliveconnect = "true" in the embed label to ensure that the ID attribute is not used! The Code should be like this:

<Embed src = "javascript_to_flash.swf" Quality = high width = 366 Height = 142
Type = "application/X-Shockwave-flash" pluginspage = "http://www.macromedia.com/shockwave/download/index.cgi?
P1_prod_version = shockwaveflash"
Name = "myflash" swliveconnect = "true">
</Embed>

3. Create a form field
(1) return to the design view
(2) Insert a text field (Insert> form Object> text field). If you want to add a form field, select Yes
(3) modify the HTML tag of the text field as follows:

<Input type = "text" name = "sendtext" maxlength = "45" onchange = "dopassvar (this)">
When the content of the text field changes, onchange is triggered, and the dopassvar () function is called.

4. Create a JavaScript function that passes variable values
Copy the following JavaScript code to the

<Script language = JavaScript>
<! --
Function dopassvar (ARGs ){
VaR sendtext = args. value;
Optional variable Doc ument. myflash. setvariable ("myvar", sendtext );
}
// -->
</SCRIPT>
5. Save the file and test it (F12)

Communication between flash and JavaScript

This example shows how to use the flash fscommand to send data to JavaScript.

Example 2
Download source file: flash_to_javascript.zip (10 K)

Procedure:
Flash in progress
Create a new file and save it as flash_to_javascript.fla
Create a text field, set it to input text, and select "border" so that we can see it and specify its variable as inputvar.
Create a button and add the following as on the button:

On (release ){
Fscommand ("send_var", inputvar );
}
Save files and export HTML and SwF

Dreamweaver
1. Open the exported HTML file and modify the <Object> and <embed> labels. The result is the same as the following:
<Object classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000"
Codebase = "http://download.macromedia.com/pub/shockwave/cabs/
Flash/swflash. Cab # version = 5, 0, 0"
Width = 366 Height = 142 id = "myflash">

<Embed src = "javascript_to_flash.swf" Quality = high
Width = 366 Height = 142
Type = "application/X-Shockwave-flash"

Pluginspage = "http://www.macromedia.com/shockwave/download/index.cgi?
P1_prod_version = shockwaveflash "name =" myflash "swliveconnect =" true ">
</Embed>
2. Insert the following Javascript into the <body> tag:
<Script language = JavaScript>
<! --
VaR internetexplorer = navigator. appname. indexof ("Microsoft ")! =-1;
Function myflash_dofscommand (command, argS ){
VaR myflashobj = internetexplorer? Myflash: Document. myflash;
Alert (ARGs );
}
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 myflash_fscommand (byval command, byval ARGs) \ n ');
Document. Write ('call myflash_dofscommand (command, argS) \ n ');
Document. Write ('end sub \ n ');
Document. Write ('</script \> \ n ');
}
// -->
</SCRIPT>

Communication between flash and flash
The preceding two methods are used in combination. Two or more Flash files in the same HTML can directly send messages to each other. send messages to JavaScript from a flash using fscommand, and send messages to another flash Using Flash Javascript methods

For details, see the example of communication between flash films.

Starting from Flash MX, the local connection object can be used to send messages between flash. this allows two flash videos in the same HTML or in two browser windows to send messages to each other without using JavaScript or fscommand.
For details, see here: Use the local connection object in Flash MX)

This site localconnection Tutorial: http://www.blueidea.com/tech/multimedia/2003/739.asp

A list of Javascript methods for Controlling Flash Player is provided:

Play () ---------------------------------------- play an animation
Stopplay () ------------------------------------ stop an animation
Isplaying () ----------------------------------- whether the animation is playing
Gotoframe (frame_number) -------------- jump to a frame
Totalframes () ------------------------------- get the total number of animation Frames
Currentframe () ------------------------------ return the number of frames of the current animation-1
Rewind () ------------------------------------- returns the first frame of the animation.
Setzoomrect (left, top, right, buttom) ------- enlarge the specified area
Zoom (percent) ------------------------------ change the animation size
Pan (x_position, y_position, unit) ------------ move an animation in the X and Y directions
Percentloaded () ---------------------------- return the percentage of animation loaded
Loadmovie (level_number, PATH) ----------- load an animation
Tgotoframe (movie_clip, frame_number)-movie_clip jump to the specified number of frames
Tgotolabel (movie_clip, label_name) ------ jump to the specified tag
Tcurrentframe (movie_clip) --------------- return movie_clip current frame-1
Tcurrentlabel (movie_clip) ----------------- return the current movie_clip label
Tplay (movie_clip) ------------------------- play movie_clip
Tstopplay (movie_clip) -------------------- stop playing movie_clip
Getvariable (variable_name) ----------------- get the variable
Setvariable (variable_name, value) ----------- variable assignment
Tcallframe (movie_clip, frame_number) --- Call specifies the action on the frame
Tcalllabel (movie_clip, label) ---------------- call specifies the action on the label
Tgetproperty (movie_clip, property) -------- get the specified attribute of movie_clip
Tsetproperty (movie_clip, property, number)-set the specified attribute of movie_clip

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.