Adding the Finishing Touches

You’ll now add a little bit of button behavior to your menu items and give them a nice animation as they appear onscreen.

1. In your document class, update the generateMenu method to include the following highlighted code:

private function generateMenu():void { var items:XMLList = xml.item; var itemY:Number = menuItemStart.y; for(var i:uint=0; i < items.length(); i++) {

var mi:menuItem = new menuItem(); mi.x = -mi.width ; mi.y = itemY; mi.txt.text = items[i].@name;

Chapter 5 Sharing Your Animation

mi.index = i; mi.buttonMode = true; mi.useHandCursor = true; mi.mouseChildren = false; mi.addEventListener(MouseEvent.ROLL_OVER,

➥ onMenuItemRollOver); mi.addEventListener(MouseEvent.ROLL_OUT,

➥ onMenuItemRollOut); mi.addEventListener(MouseEvent.CLICK,

➥ onMenuItemClick); addChild(mi);

itemY += mi.height + menuItemSpacing; TweenLite.to(mi, 1, {x:menuItemStart.x,

➥ delay: i*.1, ease:Back.easeOut}); }

} The preceding highlighted code starts by setting the x

position of each menu item so that each item sits off the left edge of the Stage. To show the hand cursor when hovering over each button, the buttonMode and useHandCursor properties are both toggled to true . The mouseChildren property is toggled to false so that the textfield nested in each menu item does not affect the cursor. Event listeners are added for rolling over and rolling off each menu item. Finally, each item is tweened over a 1-second duration to its proper x position. A delay is added based on the item’s location in the loop. Items later in the loop will have a longer delay. A back ease is added to cause each item to overshoot its position before snapping back (hence the name) to its final location. Postpone testing your movie for a moment, because you still need to define the methods called by the event listeners.

2. Add the following two methods before the onMenuItemClick method:

private function onMenuItemRollOver(e:MouseEvent): ➥ void {

var btn:MovieClip = e.currentTarget as ➥ MovieClip;

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

var btnGlow:GlowFilter = new GlowFilter( ➥ 0x6699ff, .75, 8, 8, 2, 3, true);

if(btn.enabled) btn.filters = [btnGlow];

private function onMenuItemRollOut(e:MouseEvent):

➥ void {

var btn:MovieClip = e.currentTarget as ➥ MovieClip;

btn.filters = null; }

Each method retrieves the menu item from the incom- ing event and types it to a MovieClip so that the filters

property can be accessed. The rollover method cre- ates a light blue inner glow and assigns the ﬁlter to the active menu item, but only in the case that the menu item’s enabled property resolves to true . The rollout

method then resets the item’s ﬁlters when the item is no longer active.

3. Now update the onMenuItemClick method with the following highlighted code: private function onMenuItemClick(e:MouseEvent): ➥ void {

if(currentMenuItem) {

currentMenuItem.enabled=true; TweenLite.to(currentMenuItem, .25,

➥ {x:menuItemStart.x, ease:Quad.easeIn});

} currentMenuItem = e.currentTarget as MovieClip; currentMenuItem.enabled = false; currentMenuItem.filters = null; TweenLite.to(currentMenuItem, .5,

➥ {x:menuItemStart.x+20});

loadItem(currentMenuItem.index); }

The if block at the top executes if currentMenuItem has been assigned a value. If so, the currentMenuItem is reenabled and tweened back to its original location. Then, per the original code, the currentMenuItem

Chapter 5 Sharing Your Animation

property is updated to the item that was just clicked. That item is then disabled (so that the ﬁlter is not shown when the current item is rolled over) and its ﬁlters (that were assigned within the rollover method) are cleared. The menu item is then tweened so that it sits against the content.

A completed version of the Site.as ﬁle can be found on the CD in the Chapter 5/ﬁnished/website/folder.

4. Save your document class and test your movie. You should now see the buttons slide in (Figure 5.40), glow

when rolled over (Figure 5.41), and slide against the content region when clicked (Figure 5.42).

Figure 5.40 The buttons form a rubbery wave as they animate onto the Stage.

Figure 5.41 The rollover glow

Figure 5.42 The clicked menu button

in action.

slides against the content region.

Congratulations! You’ve completed the portfolio. You can now customize it and make it your own. Play around with your ﬁles and see what you can come up with. Here are some suggestions to get you started:

. Try updating the code to scale artwork that is larger or smaller than the 550 x 400 content area, and see if you

can load artwork of different sizes and shapes (hint: think about constraining proportions).

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

. Try different types of easing on your tweens, like Elastic.easeOut on the tween within your generateMenu

method. . Try creating different types of transitions, such as blur-

ring and unblurring the description rather than rotat- ing it.

. Give the content_mask an instance name and animate the mask rather than the content.

Have fun and alter the portfolio until it provides a good representation of you and your work. Because your site is so ﬂexible, you can try all kinds of variations. When you have the portfolio just the way you want it, you’re ready to upload it for the world to see.

Adding the Finishing Touches