Interactive Menu Buttons - Apps 4 (3)

Now, one of the most tedious part is creating the interactive menu buttons. Well, you would think that the menu page is one page only. Actual situation... it has to consist of several pages that the buttons in the menu point to.. that is if we have 5 buttons in the menu, we will have to create 5 similar page layout that will highlight the content of each of the button. There will be action script behind each button that will point to scene containing the page holding the information of the button.

You can test the application by clicking the image above

The pages in flash can be differentiated by scenes.  That is if we have 5 pages, then we will need to create 5 different scenes.

In this application, I created a 3 page application, yes, with 3 different scenes

1) home
2) pengenalan
3) rukun

1) Scene 1 - renamed as "home"

    This holds introduction to the application.  I created several layers here. From top to bottom
    a) stop
    b) buttons
    c) title
    d) background

   Firstly create the "background" layer. I import the Kaabah image to the library and then drag it onto the
   stage to become the background

  Secondly, I created the "title" layer and insert a static text that shows the title for the page

  Thirdly I created the "buttons" layer and insert the 3 menu buttons.  There will be an action script behind  
  the three buttons

 Behind button "Pengenalan"
  on (release) {
 gotoAndStop("pengenalan",1);
  }

 Behind button "Rukun"
  on (release) {
 gotoAndStop("rukun",1);
  }

 Behind button "Tabung Haji"
  on (release) {
 getURL(http://www.tabunghaji.gov.my/);
  }

Lastly, I don't want the scene to autonavigate to the next scene. Therefore I insert another layer and rename it as stop.  In this layer, in the first frame, create an action script that contains on the followin action:
        stop();


2) Duplicate "home" scene to "pengenalan" scene so that we can maintain the layout



    Firstly, remove the "background" layer so that we can put some readable notes on the stage

    Secondly, remove the stop layer because we are going to use "gotoAndStop"

  Thirdly, create another layer and rename it as "isi". In this layer, put in the static text as definition of
  rukun haji.

  Fourth, I want to insert the "dalil".  Therefore, I created another button called "dalil". Put this action script:
 

  on (release) {
  gotoAndStop("pengenalan", "dalil");
  }

  Fifth, I want to insert notes in one of the frame.  Therefore, first we create a keyframe, say, frame 30, for  
  all the layers.

 Sixth, in the "isi" layer, insert a keyframe in frame 15. Name this frame in the properties panel as "dalil" and 
 input the static text for dalil

Seventh, we want to be able to get back to "home" scene.  Therefore, I insert another button called "home" so that user will be able to go back to "home" page.  Behind the button is the action script:

 on (release) {
 gotoAndStop("home",1);
  }

3) Duplicate  "pengenalan" scene to "rukun" scene



First, put in the definition of rukun by inserting static text

Secondly, put in 6 different buttons to point to 6 different rukuns. Behind the buttons are the following action script:

on (release) {
 gotoAndStop("rukun","rukun1");
  }

for each of the button and so on until

on (release) {
 gotoAndStop("rukun","rukun6");
  }

Thirdly, to show the content of Rukun 1, I insert a keyframe in frame 3. Here, I input a static text for Rukun 1.



Fourthly, I insert another keyframe in frame 6 and input static text for Rukun 2.

The process is repeated until the last rukun.



I think the process is almost comprehensive enough..

 Time to test it here