Instances

Project 3. Toolbar

During this project we will create one more button combination – a toolbar. Drop-down menu-like toolbars are very popular in Web design and usually are written in JavaScript with numerous small images and long code.

Flash with it's native animation methods allows to make it not only easier but also much more versatile visually.

It's a bit of preliminary work for this project. Be attentive to details during this stage.

• Create 3 or 4 buttons for the menu folders. They must look alike and be horizontally elongated. Buttons must have a non-transparent background and bear the word – name of the menu folder. In our case those are "animals", "birds" and "plants"
• Create several buttons for each submenu, group them into as many sets as many menu folders you have. In our example we have "robin", "heron", "hummingbird", "eagle" for birds, "beaver", "raccoon" and so on for animals…
• Place buttons of each set one by one imitating menu panels. Select buttons for the set and transform them altogether in the graphic symbol. We have grAnimals, grPlants, grBirds. It is good idea to elaborate this panel graphically by adding background or anything else. So you will have such or similar elements on the stage.

• Create a movie symbol from each menu panel. Add the ACTIONS layer to it. So, in our example we have a movie with top layer ACTIONS and lower layer keeping grAnimals. Other movie will have grPlants and so on. Make it about 20 frames long. Name it respectively, for example – mvPlantsMenu
• Give thouse menu panel movies unique instance names, for example "plants " for mvPlantsMenu
• Place three keyframes an the start, end and middle of this movie timeline.
• Insert a keyframe at the start and middle of this movie timeline ACTIONS layer and add stop() scripts to them.
• Adjust internal graphic symbol for this movie for start, middle and final frames. (in our case it grPlants for mvPlantsMenu. Remember that in it's turn grPlants keeps several buttons with names of plants). Shrink graphics vertically for the first and last keyframe – it may have height for example 5 pixels. Leave the height of the graphics in the middle keyframe not changed. Add motion tween.

  So if we didn't have a stop script then menu drops and shrinks again. Adjust position of the symbol for better visual effect .

• Now on the main stage adjust the components. Create two layers. Place menu buttons on the top layer and menu panel movies in the lower layer.
• Position menu panels (their height should be shown as shrunk in their first frames) behind the menu buttons – they must be hidden in their minimized size.
• Add the following script to the buttons

  on(press) {
  	tellTarget("plants") {
  	  play();	
  	}
  }
  
  

  It is actually deprecated old-fashioned way that was used previously to do exactly the same that we've done for the previous project. We've shown it to make you aware of it – you may see it still in use by Flash designers. TellTarget is the Action to create a series of statements calling methods of the same instance. You may easily substitute it with simple plants.play(); as we done previously. Note that as tellTarget parameter "plant" is typed in quotes, but when we refer to it directly – it need to be without quotation marks. Be sure that you substituted "plants" with your own name of the menu panel movie instance. We use press event handler to make menu bare to "response faster"
• Test the movie. When you click menu bar item, movie clip hidden behind triggers and plays up to the point where it fully expanded and stop. If we click it again it invoke play() script again and playing the second half of the animation – get smaller back and hides beyond the menu bar.

  In our example we made menu panel movie symbol motion tweening a bit more complex to add a "rubber" effect

• If you wish you may add individual scripts for each buttons referring to various web pages. Keep this file you may need it later.

Next