Flash Tutorials: Automatic Focus in a Flash Form	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash Tutorial - Automatic Focus in a Flash Form

Free Tutorial

The aim of the tutorial is to learn how to set the focus on a Flash Movie so that when a web page first loads the cursor is in the first Input Box. This saves the user the hassle of having to click on the flash movie or in the input box before they can start typing. This tutorial will also show you how to control the Tab Key so that the cursor moves to the next input box of your choice.

Example: Download the Flash file Int 135a

(The button below only works in: Microsoft Internet Explorer!)

Example of setting focus on a flash movie when a web page first loads

Step One: Create the Input Box

1. Open a new Flash Movie.
2. Select the Text tool and drag a text box on stage.

Note: If you have dragged the text tool you should get a paragraph text box which has a square in the top right hand corner:




3. Open the Property Inspector: Window > Properties (Ctrl F3)
   
4. With your Text Box still highlighted select: Input Text (from the drop down menu):
   
   
   
5. Select the font, font style, size and colour.
   
6. Select: Left Justify.
   
7. If your Property Inspector is in collapsed view, click on the down arrow in the bottom right corner of the Property Inspector to expand the panel. If you have an up arrow your panel is already expanded: Expand Property Inspector
8. In the Property Inspector give your Text Box the Instance Name:   /:Text1
9. In the Property Inspector give your Text Box the Var Name:   /:Text1
   
   
   Text Box Properties.
   
   
   
10. Create a new: Text Box

Note: The easiest way is to copy and paste the existing Text box.

11. Give this new Text Box the Instance Name and Var Name:   /:Text2
12. Create a third Text box with the Instance Name and Var Name:   /:Text3
    
    
    My Three Input Boxes.
    
    
    
13. Add 3 static lines of text next to each of the above Text Boxes: Input 1:   Input 2:   Input 3:
    
    
    My Three input Text Boxes now have labels: Input 1 to 3.
    
    
14. Place a button Off Stage: Button

Note: This button is there so that we can attach some ActionScript to it. It is not designed to be seen (or clicked!!). For this reason you can use any standard button that you may find in the Button Library: Window > Other Panels > Common Libraries > Buttons

Do not use Knobs, Faders or Component buttons as they have different ActionScript.


15. Add this code to your button:

on (keyPress "<Tab>"){
    if (_root.a == 0) {
        Selection.setFocus("_root.Text1");
        Selection.setSelection(length(/:Text1), length(/:Text1));
        _root.a = 1;
    }else if (_root.a == 1) {
        Selection.setFocus("_root.Text2");
        Selection.setSelection(length(/:Text2), length(/:Text2));
        _root.a = 2;
    }else if (_root.a == 2) {
        Selection.setFocus("_root.Text3");
        Selection.setSelection(length(/:Text3), length(/:Text3));
        _root.a = 0;
    }
}


16. Add a new layer and call it ActionScript
17. Add this code to the first frame of the ActionScript:

var a = 0;

Step Two: Publishing the Movie

1. Save your file: File > Save (Ctrl S)
2. Go to: File > Publish Settings (Ctrl Shift F12)
3. For Type select only: Flash
4. Click: Publish
5. Click:OK

Note: This will create a Flash swf (Shock Wave File) in the same location as your main Flash Movie. You will now have two files such as:



My Flash files.


6. Take a note of the Width and Height of your Movie. You can find this info in: Modify > Document (Ctrl J)
7. Save your file: File > Save (Ctrl S)
8. Close Flash: File > Exit (Ctrl Q)
   
   
9. Open your favourite: Web Editor

Note: You can use any program that will enable you to create web pages and edit the HTML such as Dreamweaver, FrontPage or Note Pad.

10. Open or create a standard: HTML Web page
11. Save this file.

Note: This web page and the Flash Movie (swf file) must be saved to the same location or folder. You may need to use My Computer or some similar file management program to move the Flash swf file to the same location as the HTML web page.

12. Add the Flash Movie to your web page by using this HTML code:
    
    <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="XXX" height="XXX" id=mymovie>
    <param name="movie" value="NameOfYourSWFMovie.swf">
    <param name="SeamlessTabbing" value="false">
    <param name="swLiveConnect" value="true">
    <param name="quality" value="high">
    <embed NAME=mymovie src="NameOfYourSWFMovie.swf" SeamlessTabbing="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="XXX" height="XXX" swLiveConnect=true></embed>
    </object>
    
    
13. Change the XXX to the values for the width and height of your movie.
14. Change the NameOfYourSWFMovie.swf to the name of your: Flash swf file

Important: You do not need to change the: id=mymovie
But if you do wish to change this Do Not use capital letters in the id as this can cause problems with some browsers.

1. In the opening Body Tag in your HTML code change to:
   
   <body onLoad="window.document.mymovie.focus();">
   
   

That's it !

When you run the movie and click in the first text box and press the Tab key a few times your notice that it moves from box to box. The advantage of this code is that if an input box has something in it, it will set the cursor at the end of the text which is very handy. Try typing something short into one of the input box's when you run the movie and then press the Tab key until that input box has focus again. You will notice how the blinking cursor is set at the end of the length of text that you typed in.

Important Note: When you view the Flash Movie in Internet Explorer the Movie will automatically have focus when the page loads and set focus will be on the first input box. You will see the blinking cursor automatically displayed and you can start typing without having to click on the Flash Movie first. HOWEVER! There is currently no known method to set focus on a Flash Movie when the web page first loads and that works in ALL Browsers. This is the best method to date but it ONLY works in Microsoft’s Internet Explorer and NOT Netscape or Mozilla etc. For any other Browser you have to select the Flash Movie before it has focus which is a unavoidable for now. We can only hope that one day soon Macromedia or Internet Browser's companies decide to make life easier for us all. They could formulate a method to set focus on a Flash Movie when a web page first loads that works on ALL known browsers. Also remember that if you use the swf on it’s own (say your making a web site entirely out of flash) that the swf will not automatically have focus and that the user will still have to click on it to set the focus.

Another Option: Nested Input Boxes

Example: Download the Flash file Int 135b

(The button below only works in Microsoft’s Internet Explorer!)

1. Open a new Flash Movie: File > New
2. Next select the Text tool:
3. On the Stage drag out a: Text Box

Note: If you have dragged the Text Tool you should get a paragraph text box which has a square in the top right hand corner:


Paragraph Text Box.


4. Open the Property Inspector: Window> Properties (Ctrl F3)
5. With the Text Box still highlighted select: Input Text
   
   
   Selecting Input Text from the Property Inspector.
   
   
6. Select any Font, Style, Size and Colour:
   
   
   Selecting the Font Style.
   
   
7. Select: Left Justify.
   
8. If your Property Inspector is in collapsed view, click on the down arrow in the bottom right corner of the Property Inspector to expand the panel. If you have an up arrow your panel is already expanded: Expand Property Inspector
   
   
9. In the Property Inspector give the Text Box the Instance Name:   inTxt_1
10. In the Property Inspector give the Text Box the Var Name:   inTxt_1
    
    
    Properties for the Text Box.
    
    
11. Create a new Text Box and call the Instance Name and Var Name: inTxt_2
12. Create a new Text Box and call the Instance Name and Var Name: inTxt_3
13. Create a new Text Box and call the Instance Name and Var Name: tf_4

Note: This is named differently to the rest: tf_4

14. Create a new Text Box and call the Instance Name and Var Name: Txt_5
15. Create a new Text Box and call the Instance Name and Var Name: inTxt_6
16. Create a new Text Box and call the Instance Name and Var Name: inTxt_7
    
    
17. Now add Static Text next to each input field:
    • Text Input 1:   
    • Text Input 2:   
    • Text Input 3:   
    • Text Input 4:   
    • Text Input 5:   
    • Text Input 6:   
    • Text Input 7:
      
      
      
      My Stage layout with the Input Boxes and their labels.
      
      
18. Select the first three: Input Boxes
19. Right click (Mac: Ctrl click) and select: Convert to Symbol
20. For name type: mc1
21. For behaviour select: Movie Clip
    
    
    
    
    
22. In the Property Inspector give this new Movie Clip an Instance Name: mc1
    
    
    Giving the Symbol an Instance name.
    
    
23. Now select the last three input box's and convert them to a: Movie Clip
24. Give this new Symbol the Instance Name: mc2

Note: You should have one input box in the middle that's not a movie clip (the forth one down).

25. Add a new layer and call it: ActionScript
26. Add this code to that layer in the first frame it:
    
    //set mc container properties to enable tabbing through child objects
    mc1.tabChildren = true;
    mc1.tabEnabled = false;
    mc2.tabChildren = true;
    mc2.tabEnabled = false;
    
    //set the tabbing sequence
    mc1.inTxt_1.tabIndex = 1;
    mc1.inTxt_2.tabIndex = 2;
    mc1.inTxt_3.tabIndex = 3;
    tf_4.tabIndex = 4;
    mc2.inTxt_5.tabIndex = 5;
    mc2.inTxt_6.tabIndex = 6;
    mc2.inTxt_7.tabIndex = 7;
    
    // set initial focus to the first input text object
    focusManager.setFocus(mc1.inTxt_1);
    // Clear the input box's
    _level0.mc1.inTxt_1 = "";
    _level0.mc1.inTxt_2 = "";
    _level0.mc1.inTxt_3 = "";
    _level0.tf_4 = "";
    _level0.mc2.inTxt_5 = "";
    _level0.mc2.inTxt_6 = "";
    _level0.mc2.inTxt_7 = "";
    stop();
    
    
27. Now add the movie to your web page but use this HTML code:
    
    <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="XXX" height="XXX" id=myothermovie>
    <param name="movie" value="NameOfYourSWFMovie.swf">
    <param name="SeamlessTabbing" value="false">
    <param name="swLiveConnect" value="true">
    <param name="quality" value="high">
    <embed NAME=myothermovie src="NameOfYourSWFMovie.swf" SeamlessTabbing="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="XXX" height="XXX" swLiveConnect=true></embed>
    </object>
    
    
28. Change the XXX to the values for the width and height that you require for your movie.
29. Change the NameOfYourSWFMovie.swf to the name of your Movie's swf file
30. In the HTML body tag change it from <BODY> to
    
    <body onLoad="window.document.myothermovie.focus();">
    
    
31. Again this has the same Browser compatibility problems as the first movie but is just a good example of how to set up and use the focus manger in Flash
    
    

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