JavaScript and Flash interactive Communication basic tutorials _javascript Skills

Source: Internet
Author: User
Tags html input text dreamweaver
Here are some examples of direct communication between Flash and HTML files that use JavaScript, with each example having a brief step

This article discusses 3 basic Flash/javascript communication methods:
JavaScript to Flash Communication----JavaScript method using Flash Player
Flash to JavaScript communication----using Flash Fscommand
Flash to flash communication----------use a local connection object or a combination of 2 technologies

Not all browsers value scripts. In order to communicate with the Flash Player, the browser must have a built-in hook so that the flash player can ' listen '. Browsers must be several of the following:
Netscape Navigator 3.0-4.7x, and Netscape 6.2 or higher
(Windows 95/98/nt/2000/xp or MacOS; Java and LiveConnect allowed)
Internet Explorer 3.0 or higher
(Windows 95/98/nt/2000/xp only; Allow ActiveX)


JavaScript to Flash Communication

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

Viewing samples: Example
Download source files: Javascript_to_flash.zip (17k)

Steps:

In Flash
1. Create a new file, save as Javascript_to_flash.fla
2. Create a text field on the stage with a type tool
3. Select this text field, and in the Properties panel, select dynamic text from the Drop-down list, and fill in the variable (variable) column with "MyVar"
Note: The best habit is to use instance to change the value of MyVar with Myvar.text. For simplicity and compatibility with FLASH4 and FLASH5, we use the form of variable names.
4. Save the file
5. Publish HTML files and SWF files

In Dreamweaver
The next step is to move to Dreamweaver, and of course it can be another HTML editor.
1. Open the HTML file that was published in the previous step
2. Insert the generated SWF file and object/embed label
(1) Insert>media>flash, and select this Flash
(2) switch to Code view, we need to modify the selected <OBJECT> and <EMBED> tags
(3) In the Object tab, insert Id= "Myflash"

<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
Codebase= "http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=5,0,0,0 "
width=366 height=142 id= "Myflash" >
Note: If you are pasting the copied code, be sure to delete the unnecessary line break. Otherwise, it may cause errors; IDs can also be entered directly in the Properties panel
(4) In the Embed tab, insert Name= "Myflash" and swliveconnect= "true" 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 Design view
(2) Insert a text field (insert> form object> text field), and if you are asked if you want to add a form field, select
(3) Modify the HTML tag of the text field to this:

<input type= "text" name= "SendText" maxlength= "" Onchange= "Dopassvar" (This) >
Whenever the content of the text field changes, the onchange is triggered and the Dopassvar () function is called

4. Create a JavaScript function that passes the value of a variable
Copy the following JavaScript into the
<script language=javascript>
<!--
function Dopassvar (args) {
var sendtext = Args.value;
Window.document.myFlash.SetVariable ("MyVar", SendText);
}
-->
</SCRIPT>
5. Save the file and test it (F12)


Flash to JavaScript communication

From HTML, you can send data to flash, and vice versa. This example demonstrates how to apply the Fscommand of Flash to send data to JavaScript.

View Example: Example 2
Download source files: Flash_to_javascript.zip (10K)

Brief steps:
In Flash
Create a new file, save as Flash_to_javascript.fla
Create a text field, set it as input text, select "Border" so we can see him, specify his variable as Inputvar
Create a button that adds the following as:

On (release) {
Fscommand ("Send_var", Inputvar);
}
Save files, export HTML and SWF

In Dreamweaver
1. Open the export HTML file, modify the <OBJECT> and <EMBED> tags, the results above:
<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
Codebase= "http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=5,0,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> tags:
<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>


Flash and Flash Communication
With the blending of the two methods above, two or more flash in the same HTML can send messages to each other directly. Send messages to JavaScript from a flash using Fscommand, use flash JavaScript methods to pass messages to another flash

A detailed look here: A communication example between flash movies

Starting with Flash MX, the local connection object can be used to send messages between flash. This allows two flash movies in the same HTML or in two browser windows to send messages to each other without having to use JavaScript or Fscommand
See here in detail: Using the local Connection object in Flash MX (English)

The LocalConnection tutorial of this website: http://www.blueidea.com/tech/multimedia/2003/739.asp

A list of JavaScript methods with Flash Player control available:

Play ()----------------------------------------animation
Stopplay ()------------------------------------stop animation
IsPlaying ()-----------------------------------whether the animation is playing
Gotoframe (frame_number)----------------jump to a frame
Totalframes ()-------------------------------get the total number of frames for the animation
Currentframe ()------------------------------return the number of frames in the current animation-1
Rewind ()-------------------------------------causes the animation to return to the first frame
Setzoomrect (Left,top,right,buttom)-------enlarge the specified range
Zoom (percent)------------------------------change animation size
Pan (x_position,y_position,unit)------------to translate the animation in the x,y direction
percentloaded ()----------------------------returns the percentage of animation being loaded
Loadmovie (Level_number,path)-----------load animation
Tgotoframe (movie_clip,frame_number)-Movie_clip jumps to the specified number of frames
Tgotolabel (movie_clip,label_name)------Movie_clip jumps to the specified label
Tcurrentframe (movie_clip)---------------postback Movie_clip Current frame-1
Tcurrentlabel (movie_clip)-----------------postback movie_clip current label
Tplay (Movie_clip)---------------------------play Movie_clip
Tstopplay (movie_clip)----------------------stop movie_clip Playback
GetVariable (variable_name)-----------------Get variables
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 properties of Movie_clip
Tsetproperty (Movie_clip,property,number)-Set the specified properties 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.