Flash Training: 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

Part Three: 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