Instances

Project 2. Live buttons

During this lesson we will make two small projects. In both of them we will be working with buttons and implementing more advanced varieties of them.

Let's refresh an "evolution" of the button design from our Flash basic course

• The simplest button may be clicked and will but doesn't change it's appearance when clicked
• Over and possibly Click states are changed – to create rollover effects. Most buttons are done like that by Flash designers
• Movie symbol is inserted in Over state. On mouse over button may start "pulsing" or gradually change transparency or something else. If done well those buttons are very appealing.

However you may find one annoying details in the last kind of buttons – on mouse over "microanimation" of Over state starts OK, but when mouse is moved out the movie skips abruptly.

Today we will create the buttons, which is free of that bug.

• Create a simple word button, for example a word "home". Don't add any rollover effects to it. Don't use background drawing – only a word. Draw a rectangle in the Hit state frame to make a solid clickable area.
• Duplicate 5 – 6 buttons from first one. Remember you need explicitly duplicate it – not copy. If you forgot how to do it – refer to the basic course or Help. As a result you will have several button symbols looking the same
• Change words on the duplicated button symbols – for example like "contacts" , "products", "links", "locations"
• Create a simple movie symbol. It may be a circle or rectangle. The movie symbol must have two layers – one for the content (circle) and another for the ACTIONS
• Create a simple animation for this movie. For example make this circle a bit larger and shrink again. Below are examples of symbols you will need for this project

• Enter a keyframe at the first frame of the movie symbol. Type stop(); script into this keyframe. You animation will be potentially possible, but disabled because of this stop() script
• Create several symbols of animated movie ball. Give each symbol a unique instance name. It may be ball1, ball2, ball3 or any sequence
• Combine movie symbol with each button in pairs. In our example we placed circles beyond letter buttons
• For each button enter the following code. Of course you need to show a different instance name for each button.

  
  on(rollOver){
         ball1.play();	
  }
  

• Observe the code. Ball1 is an instance of the movie symbol. Play() is the method of this movie symbol. When button clicked it triggers this instance of movie – it plays and returns to it's start where stops again.
• Test the movie. When you move a mouse over the buttons they triggers movies and… look like it works.

• You've noticed that we used rollover event for this effect. If you wish you may add more event handlers to the same buttons (and in real application you will of course. For example if you want to load external file it could be

  on(release) {
     getURL(http://www.yoursite.com)
  }
  
  

  It's possible to add as many event handlers as many events button is able to accept.

  Below is one more example done using the same concept. Now the word is encapsulated in the movie, which is triggered by button

  Next