| If you also own Macromedia's Dreamweaver product, you can download Macromedia's JavaScript Integration Kit for Flash 5 at no cost. This kit contains a number of behaviors and scripts to make it easier to communicate between JavaScript and Flash. You can download it from www.macromedia.com/software/dreamweaver/productinfo/extend/jik_flash5.html. After you have installed the kit with the Macromedia Extension Manager, you will have access to the following tools: -
Browser Scripts for Flash. These scripts provide JavaScript methods for Flash objects. Select Command > Browser Scripts for Flash to see a list of the JavaScript functions that can be inserted into your HTML file. These include functions to open new browser windows , set cookies, edit form lists, and control images. -
Flash Deployment Kit. The main component of the Flash Deployment Kit is the Flash Dispatcher Behavior. This behavior uses a number of techniques for detecting Flash, depending on the user 's browser and operating system. This is particularly helpful because there is no one foolproof method of detecting Flash. To use it, in the Behaviors panel, add the Macromedia Flash Dispatcher behavior. A dialog box will pop up, allowing you to configure it for your needs. For more information on the Flash Dispatcher Kit, refer to Chapter 26, "Browser and Platform Idiosyncrasies." -
Flash Player controls. The Player controls make it easy to use Flash JavaScript methods to control the movie. These methods enable you to stop, play, fast-forward, rewind, go to a specific frame number, and even go to a specific frame based on a cookie. This feature can be used in conjunction with the Set_Cookie Browser Script for Flash to set cookies and control the playhead based on those cookies. The Player controls also allow you to zoom and pan the movie inside the embedded player. Finally, you can load a different movie into an embedded player, replacing it or overlapping it. To choose a control, create a link in the Behaviors panel; they are listed under MM Flash Player Controls. -
Advanced Form Validations. By setting up a hidden form field in your HTML page, you can use the Advanced Form Validations behaviors to send variables from Flash to JavaScript. These variables then can be tested to see if they match the correct formatting. Although these are useful for validating data in Flash forms, they can also be used to validate data in HTML forms. The next two exercises guide you through using the JavaScript Integration Kit with Flash. Exercise 27.5 Validating Social Security and Credit Card Numbers In this exercise, which requires Macromedia Dreamweaver and the JavaScript Integration Kit extension, you will create a Flash form that will send values to be validated by JavaScript. Follow these directions very carefully it's easier to screw up than to figure out where you screwed up. -
Create a new Flash movie with the dimensions 250x100 pixels. -
Open the Character panel (Window > Panels > Character) and set the text color to black. -
Select the Text tool and draw a text field at the top of the stage that takes up most of the width of the movie. -
With the text field selected, switch to the Text Options panel and make the following changes: Text Type: Input Text Line Type: Single Line Variable: ssflash HTML: Not Selected Border/Bg: Selected -
Duplicate the text field (Control+D or Command+D, in Windows) and move it below the first. Set the variable name to ccflash. -
Create a button or drag any button from the Buttons Library (Window, Common Libraries, Buttons ). -
With the button selected, launch the Actions panel and add the following code (see Figure 27.11): Figure 27.11. Multiple Flash form fields can be validated at once.  on (press) { getURL ("javascript:FDK_setFormText('myform','sshtml','" add ssflash add "');FDK_setFormText('myform','cchtml','" add ccflash add "');"); } -
Also on that button, add the following code to call the JavaScript function that will handle the validation process: on (release) { getURL("javascript:FDK_Validate('myform',false,true,'The Form Could Not Be Submitted\n\n');"); } -
Save your movie as jikvalidation.fla, and publish it. -
In Macromedia Dreamweaver, open jikvalidation.html, which was just created by Flash. -
Select the embedded movie. With the Properties Inspector, set both the name and the ID to myMovie. This allows the JavaScript Integration Kit behaviors to talk to your movie. (See Figure 27.12.) Figure 27.12. Be sure to set myMovie in both places.  -
Insert a form below the movie (Insert > Form). In the Properties Inspector, name it myform. -
Click inside the form and insert hidden HTML form fields for both of the Flash form fields (Insert > Form Objects > Hidden Field). -
Using the Properties Inspector, name the form fields sshtml and cchtml. -
To insert the code that will handle the validation process, click the red form border; in the Behaviors Inspector, choose Advanced Validate Form. Select form myform, and click OK. An onSubmit event is automatically placed in the <FORM> tag that calls the FDK_Validate() function. You can instead use any event or HTML link, however. -
To insert the JavaScript function that will receive form field values from Flash, select Commands, Browser Scripts for Flash. Then select FDK_setFormText and click OK. -
To insert the JavaScript that will actually validate the Social Security number in the <HEAD>, select the <BODY> tag and, in the Behaviors Inspector, select Advanced Form Validations > Social Security Number. Select hidden sshtml in form myform, and click OK. An onLoad event is added to the <BODY> tag: onLoad="FDK_AddSSNValidation('form1','document.form1.sshtml',true, false,'\'Please enter a valid social security number.\'')" -
To insert the code that will validate the credit card number, select the <BODY> tag and, in the Behaviors Inspector, select Advanced Form Validations > Credit Card Number. Select hidden cchtml in form myform, and click OK. The onLoad event is updated to also include a call to the new function (see Figure 27.13): Figure 27.13. Being able to validate form fields in Flash can save a lot of time by avoiding multiple requests to the server.  onLoad="FDK_AddSSNValidation('form1','document.form1.sshtml',true, false,'\'Please enter a valid social security number.\''); FDK_AddCreditCardValidation('form1','document.form1.cchtml',true, false,'\'The credit card number you entered is not valid.\n Please enter a new card and try again.\'')" -
If any of your form fields cannot be validated, a JavaScript window will pop up letting the user know which fields didn't validate. To tell the Web browser what to do if all the fields do validate, edit this line: action="http://www.yourdomain.com/newriders/2801.php" -
Save jikvalidation.html, and load it into your Web browser. -
First try submitting the form with no values. Then try with a valid Social Security number in the first field, and finally try with valid numbers in both fields. Now that you've had a chance to work with form validation in Flash, take another look at how you can use cookies. Exercise 27.6 Setting Cookies and Navigating Movies In this exercise, which also requires Macromedia Dreamweaver and the JavaScript Integration Kit, you will create a Flash movie that can set a cookie and then go to a specific frame in a movie based on that cookie. -
Create a new Flash movie with the dimensions 25050 pixels. -
Open the Buttons Library (Window > Common Libraries > Buttons). In the (circle) Button Set folder, drag the Go to 1, Go to 2, and Go to 3 buttons to the top of the stage, placing them next to each other. -
To call the JavaScript function that will set the cookie to 1, add the following code on the Go to 1 button: on(press) { cookievar=1; getURL("javascript:FDK_setCookie('JIKCookie','+cookievar+"', '1/1/2005','','','');"); } -
Copy that code to the Go to 2 and Go to 3 buttons, changing cookievar=1 to cookievar=2 and cookievar=3, respectively. -
Save your movie as jiksetcookie.fla, and publish it. -
Create another new Flash movie with the dimensions 150150 pixels. -
On frame 1, insert a stop(); action. -
Draw a text field that takes up most of the stage, and put the number 1 in it. Select the 1 and, in the Character panel, set the color to black and the font size to 72. In the Text Options panel, select Static Text. -
Insert a keyframe on frame 2, and change the value in the text field to 2. Repeat for frame 3. -
Save your movie as jikgetcookie.fla, and publish it. -
In Macromedia Dreamweaver, open the jiksetcookie.html file that was created by Flash. Also open the jikgetcookie.html file that was created by Flash. Copy the embedded player from jikgetcookie.html, and paste it below the movie in jikset-cookie.html. Save the page as jikcookies.html. -
Select the embedded jikgetcookie.swf movie, and set the name and ID fields to getcookie so that the Flash Frames Based on Cookie behavior will be capable of talking to it. -
To insert the function that will set the cookie, select Commands > Browser Scripts for Flash. Select FDK_SetCookie(), and click OK. -
Insert text next to the jikgetcookie.swf movie that says GotoFrameBasedOnCookie. Link it to # and press Tab to accept. Now it is an object that can have behaviors assigned to it. -
With the link select, open the Behaviors Inspector and select MM Flash Player Controls > Go to Flash Frame Based on Cookie. Select Movie: ID="getcookie", set Cookie Name=JIKCookie, Cookie Value=1, and Go To Frame=0. The value for Go To Frame is always one less than the frame number. -
Repeat Step 15 for frames 2 and 3, setting Cookie Value to 2 and 3 and setting Go To Frame=1 and 2. -
Save the file and load it into your Web browser. -
Set the cookie using the three buttons at the top, and then use the GotoFrameBasedOnCookie link to move the playhead accordingly . As you can see, the Macromedia product line integrates very well. Now you can begin to see how you can use Flash and Dreamweaver together to harness the powers of each.  |
