Create  Flash Slide Presentation - Eyes Girl Game application
 
 
 
               
Learn  Step-by-step how to write the Flash Slide Presentation - Eyes Girl Game application

 

Demo / Animation



 

   
1.
 Create  Flash Slide Presentation
 
  1. Run the Macromedia Flash Profesxional  8
  2. From File menu,  click New,  the New document dialog box appears(see the following figure),  from General page select Flash Slide Presentation  Icon  and click  Ok  


     

  3. System create New Flash Slide Presentation (see the following figure)

  4. Add 17 slides to this  Flash Slide Presentation :

     


     

    1. Add  slide to your presentation using the context menu in the Screen Outline pane:
      In the Screen Outline pane, select the presentation thumbnail. Right-click and select Insert Screen from the context menu.
      The new slide automatically inherits media from the presentation slide .(see the following figure)

    Note:
    Repeat this step to add  other slides
     

  5. The Flash Slide Presentation  with all slides added ...(see the following figure)


    Note
    From File menu,  click  Save  and The Name the file - eyesgirl_game.fla   ( Into the folder - C:\EyesGirl_Game application)
     

   
2.
 Importing graphics:
 
 
  1. From File menu,  select Import and click Import to Library  - to import an image into the current document.
    The Import to Library dialog box appears, select all images to be import.  (see the following figure), 


    From this dialog box, open the folder  eyes_pic   ( \EyesGirl_Game application\eyes_pic )
     Select the following graphic file:

    "0.JPG" "1.JPG" "2.JPG" "3.JPG" "4.JPG" "5.JPG" "6.JPG" "7.JPG" "8.JPG" "9.JPG" "10.JPG" "11.JPG" "12.JPG" "13.JPG" "14.JPG" 4.gif", "15.JPG" "16.JPG" "17.JPG" "Button.JPG" "operation.bmp"
     


    and click  Open

    These images are imported to be storecd in library:  Library - eyesgirl_game  (see the following figure)


    
 

   
3.
 Add the following items to the presentation slide
 
  1. Select the presentation
  2. From the Library panel,  drag these graphics  in the Document window:  
    1- 0.jpg
    2- Button.bmp
     
    (see the following figure)

    Pic  presentation

  3. From Window menu,  select Proprieties and then check  Proprieties. In the Component inspector - Proprieties panel do the followingenter 0 in the X text box and 0 in the X text box (see the following figure)

     

  4. Configuring the  Document Properties:
    In the Document  window, Right-click and select Document Properties from the context menu.  The Document Properties dialog box appears, In this dialog box,   select Contents - (Width - 580 and  height
    - 621)  and then click OK.  (see the following figure)


     


    1

  5. From the Library panel,  drag the following graphics:   ("bt_plan.bmp", "bt_plan.bmp) in the Document window. (in Pic  presentation)

     


    Note
    From File menu,  click  Save


 

  1. Add  2 Dynamic text boxes :
    From Window menu,  select Tools, Tools panel dialog box appears ,
     

    Tools








     
    1.

     

       TextBox
     
    1. In the Tools panel, click the Text tool.
    1. Click the text box you just drew to select it.
    2. In the Component inspector - Proprieties panel, do the following values:
      • Text Type :        Dynamic Text
      • InstanceName : txtstatus_A
      • W :   256
      • H  :   21
      • X  :  -279.6
      • Y  :  293.9
      •  
      •  
      • Font :          Times New Roman
      • Font Size :   15
      • Style :          Bold
      • Line Type : Single line

        The Property inspector with the correct values entered

     

     
    2.
       TextBox
     
      1. In the Tools panel, click the Text tool.
      1. Click the text box you just drew to select it.
      2. In the Component inspector - Proprieties panel, do the following values:
        • Text Type :         Dynamic Text
        • InstanceName : txtvar_mouse
        • W :    110
        • H  :     21
        • X   :    167.6
        • Y   :    293.9
        • Font :           Times New Roman
        • Font Size :   13
        • Style :          Bold
        • Line Type : Single line
           

      The Property inspector with the correct values entered 1

     
       
     

  2. Convert element  to a symbol, Add  Keyframe, Add  ActionScript code - List of  elements on the Stage to be convert("bt_plan.bmp", "bt_plan.bmp

     
    1. "bt_plan.bmp"
    1. Select this element ("bt_plan.bmp")  on the Stage.
      Right-click  and select Convert to Symbol from the context menu.
      In the Convert to Symbol dialog box (see Pic A)
      Click OK
       



      Pic A

                  

    2. In the Component inspector - Properters panel do the following   (see the following figure)
      • Button
      • instance of:  bt_plan
      • name: btn_plan
      • W :      50.0
      • H   :      19.3
      • X   :     15.0
      • Y    :    292.6



       

    3. Focus - Add  Keyframe to this button
      1. Select the button ("btn_plan")
      2. Right-click  and select Edit in Place from the context menu.
      3. In the Timeline  - (see the following figure)


         Add to Up Keyframe other Keyframe

        Select Up KeyFeame, Right-click  and select Insert Keyframe from the context menu. New Keyframe name: Over appears  
        - (see the following figure)


         

      4. Select Over  KeyFeame. and add  2 Lines to the button ("btn_plan") on the Stage
        1. In the Tools panel, select the Line tool,. near the top of the button ("btn_plan") , draw the 1st line
        2. In the Tools panel, select the Line tool,. near the botton of the button ("btn_plan") , draw the 2nd line

    4. add the ActionScript code:to this button (symbol converted)
      Right-click  and select
      Action from the context menu.
      In the Actions panel, type the following ActionScript:
      on (release) {
      _root.presentation.txtVar_mouse.text= "0 , 0";
      _root.presentation.txtstatus_A.text = " Girl Eyes - www.puresoftwarecode.com";

      // GoTo slide18 Screen behavior
      this.gotoSlide(this.slide18);

      }

       
         
    2. "Btn_Print.bmp"
    1. Select this element ("btn_print.bmp")  on the Stage.
      Right-click  and select Convert to Symbol from the context menu.
      In the Convert to Symbol dialog box (see Pic A), type the name of the symbol: btn_Print_F and select  Button
      Click OK
    2. In the Component inspector - Properters panel do the following   (see the following figure)
      • Button
      • name : btn_Print_F
      • instance of:  btn_Print
      • W :      59.0
      • H   :      18.0
      • X   :     96.3
      • Y    :    293.9
         

      •  

    3. Focus - Add  Keyframe to this button
      1. Select the button ("btn_Print_F")
      2. Right-click  and select Edit in Place from the context menu.
      3. In the Timeline,   Add to Up Keyframe other Keyframe  - (see the following figure)



        Select Up KeyFeame, Right-click  and select Insert Keyframe from the context menu. New Keyframe name: Over appears  
        - (see the following figure)

         

      4. Select Over  KeyFeame. and add  2 Lines to the button ("btn_Print_F") on the Stage
        1. In the Tools panel, select the Line tool,. near the top of the button ("btn_Print_F") , draw the 1st line
        2. In the Tools panel, select the Line tool,. near the botton of the button ("btn_Print_F") , draw the 2nd line

    4. add the ActionScript code:to this button (symbol converted)
      Right-click  and select
      Action from the context menu.
      In the Actions panel, type the following ActionScript:
      on (release) {
      printAsBitmap(0, "bframe");
      }

       
         
     
         
 
 
  The presentation slide after all added ...

 

 
4.
 Add the Graphics to the slide1
  1. Select the slide1
  2. From the Library panel,  Drag the graphic:   ("1.jpg") in the Document window - slide1
       the graphic Bitmap:   ("1")
     
    1. Select "1", from Window menu,  select Proprieties and then check  Proprieties.
    1.  In the Component inspector - Parameters panel do the following
      • X  :      -290.0
      • Y  :      -308.4
      • W :       580.0
      • H :        599.0      
         
        see the following figure


        1

      slide1 after  1st  added ...
     


    Pic
    !S_1

     

  3. add the ActionScript code:to this button (symbol converted)
    Right-click  and select
    Action from the context menu.
    In the Actions panel, type the following ActionScrip
    on (release) {

    _root.presentation.txtVar_mouse.text= this._xmouse.toString() + " , " + this._ymouse.toString();
    _root.presentation.txtstatus_A.text = " Girl Eyes - www.puresoftwarecode.com";

    _root.presentation.btn_Print.enabled = true;

    if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse >= -256) && (this._ymouse <= -206))) {
    // GoTo slide1 Screen behavior
    this.gotoSlide(this._parent.slide1);
    break;
    }

    if (((this._xmouse >=-166) && (this._xmouse <= -119)) && ((this._ymouse >= -256) && (this._ymouse <= -206))) {
    // GoTo slide11 Screen behavior
    this.gotoSlide(this._parent.slide11);
    break;
    }

    if (((this._xmouse >= 73) && (this._xmouse <= 122)) && ((this._ymouse >= -256) && (this._ymouse <= -206))) {
    // GoTo slide13 Screen behavior
    this.gotoSlide(this._parent.slide13);
    break;
    }

    if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse >= -196) && (this._ymouse <= -149))) {
    // GoTo slide2 Screen behavior
    this.gotoSlide(this._parent.slide2);
    break;
    }

    if (((this._xmouse >= -106) && (this._xmouse <= -58)) && ((this._ymouse >= -196) && (this._ymouse <= -149))) {
    // GoTo slide10 Screen behavior
    this.gotoSlide(this._parent.slide10);
    break;
    }

    if (((this._xmouse >=14) && (this._xmouse <= 59)) && ((this._ymouse >= -196) && (this._ymouse <= -149))) {
    // GoTo slide12 Screen behavior
    this.gotoSlide(this._parent.slide12);
    break;
    }

    if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse >= -135) && (this._ymouse <= -87))) {
    // GoTo slide3 Screen behavior
    this.gotoSlide(this._parent.slide3);
    break;
    }

    if (((this._xmouse >=-106) && (this._xmouse <= -58)) && ((this._ymouse >= -135) && (this._ymouse <= -87))) {
    // GoTo slide8 Screen behavior
    this.gotoSlide(this._parent.slide8);
    break;
    }

    if (((this._xmouse >=-166) && (this._xmouse <= -119)) && ((this._ymouse >= -135) && (this._ymouse <= -87))) {
    // GoTo slide9 Screen behavior
    this.gotoSlide(this._parent.slide9);
    break;
    }

    if (((this._xmouse >=14) && (this._xmouse <= 59))&& ((this._ymouse >= -135) && (this._ymouse <= -87))) {
    // GoTo slide6 Screen behavior
    this.gotoSlide(this._parent.slide6);
    break;
    }

    if (((this._xmouse >= 73) && (this._xmouse <= 122)) && ((this._ymouse >= -135) && (this._ymouse <= -87))) {
    // GoTo slide7 Screen behavior
    this.gotoSlide(this._parent.slide7);
    break;
    }

    if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse >= -75) && (this._ymouse <= -27))) {
    // GoTo slide4 Screen behavior
    this.gotoSlide(this._parent.slide4);
    break;
    }

    if (((this._xmouse >=-106) && (this._xmouse <= -58)) && ((this._ymouse >= -75) && (this._ymouse <= -27))) {
    // GoTo slide16 Screen behavior
    this.gotoSlide(this._parent.slide16);
    break;
    }

    if (((this._xmouse >= 14) && (this._xmouse <= 59)) && ((this._ymouse >= -75) && (this._ymouse <= -27))) {
    // GoTo slide14 Screen behavior
    this.gotoSlide(this._parent.slide14);
    break;
    }

    if (((this._xmouse >=-46) && (this._xmouse <= -1)) && ((this._ymouse >= -15) && (this._ymouse <= 33))) {
    // GoTo slide5 Screen behavior
    this.gotoSlide(this._parent.slide5);
    break;
    }

    if (((this._xmouse >=-166) && (this._xmouse <= -119)) && ((this._ymouse >= -15) && (this._ymouse <= 33))) {
    // GoTo slide17 Screen behavior
    this.gotoSlide(this._parent.slide17);
    break;
    }

    if ( ((this._xmouse >= 73) && (this._xmouse <= 122)) && ((this._ymouse >= -15) && (this._ymouse <= 33))) {
    // GoTo slide15 Screen behavior
    this.gotoSlide(this._parent.slide15);
    break;
    }
    }
     
   
5.
 Repeat Operation "Add the Graphics to the slide1" For Slide2, Slide3, Slide4, Slide5, Slide6, Slide7, Slide8, Slide9, Slide10, Slide11, Slide12, Slide13, Slide14, Slide15, Slide16, Slide17, Slide18
        List of Slides and the Graphics Cooresponding  from the Library panel :
  1. Select the slide2,  From the Library panel,  Drag the graphic ("2.jpg") in the Document window
  2. Select the slide3,  From the Library panel,  Drag the graphic ("3.jpg") in the Document window
  3. Select the slide4,  From the Library panel,  Drag the graphic ("4.jpg") in the Document window
  4. Select the slide5,  From the Library panel,  Drag the graphic ("5.jpg") in the Document window
  5. Select the slide6,  From the Library panel,  Drag the graphic ("6.jpg") in the Document window
  6. Select the slide7,  From the Library panel,  Drag the graphic ("7.jpg") in the Document window
  7. Select the slide8,  From the Library panel,  Drag the graphic ("8.jpg") in the Document window
  8. Select the slide9,  From the Library panel,  Drag the graphic ("9.jpg") in the Document window
  9. Select the slide10,  From the Library panel,  Drag the graphic ("10.jpg") in the Document window
  10. Select the slide11,  From the Library panel,  Drag the graphic ("11.jpg") in the Document window
  11. Select the slide12,  From the Library panel,  Drag the graphic ("12.jpg") in the Document window
  12. Select the slide13,  From the Library panel,  Drag the graphic ("13.jpg") in the Document window
  13. Select the slide14,  From the Library panel,  Drag the graphic ("14.jpg") in the Document window
  14. Select the slide15,  From the Library panel,  Drag the graphic ("15.jpg") in the Document window
  15. Select the slide16,  From the Library panel,  Drag the graphic ("16.jpg") in the Document window
  16. Select the slide17,  From the Library panel,  Drag the graphic ("17.jpg") in the Document window
  17. Select the slide18,  From the Library panel,  Drag the graphic ("0.jpg") in the Document window

     

 
 
 
  Save and Publish Settings ..
 
   
  1. From File menu,  click  Save
  2. From File menu, click  Publish Settings ..  The Publish Settings dialog box appears, In this dialog box:  (see the following figure)

 

     then click Publish and click Ok
 
 

 


Previous Home
2