g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Balloon - Rectangle Primitive Tool Rounded Corners

If you have been following along with the FlashR project tutorials, we have completed the first two parts of section one of the Product Tour. We have designed and created a virtual ecard shop and animated our first ecard to fill the screen. The third part of section one will be the text balloon animation.

We still need to tell our audience the name of the artist. We will do this with the text balloon, which will fade-in slightly after the ecard begins to enlarge and later fade-out along with the ecard at the end of the animation.

View Storyboard

Our first step will be to create a text balloon movie clip with rounded corners and a solid white color. We will use this same movie clip each time we create a text balloon. Using the Rectangle Primitive tool, we can set the Fill color to white and the Stroke to null. From the Menubar, click Insert - New Symbol. Name this movie clip symbol "textBalloon". You will automatically go into Edit mode for this movie clip. Now draw the rectangle onto the stage. The dimensions for the balloon are a Width of 200 pixels and the Height of 120 pixels. We can adjust the balloon's dimensions as needed to accommodate the length of each artist's name.

To round the corners, we will use the Rectangle Options in the Properties panel. Drag the slider control to the right to round the rectangle corner radius to 25. Because the textBalloon is white and the stage is white, we cannot see the rounded corners. To see the corners, change the Fill color temporarily to gray. Return the Fill color to white and right-click on the rectangle with the Selection tool. Choose Convert to Symbol. Name the movie clip "textBalloon2". Now that this graphic is a movie clip, we can add a filter. In the Filters section of the Properties panel, click the Add Filter icon and then choose Drop Shadow from the menu. The default drop shadow filter is a little too dark. So, we will reduce the Strength to 25%. Then return to Scene 1.

Create a new layer on the Timeline for the textBalloon. Drag an instance of the textBalloon movie clip onto the stage and place it within the guidelines. We can customized it for our first artist, Kate Mawdsley. Our first task is to add the text to the balloon. Pamela Gladding uses Edwardian Script ITC as a "signature font". We will set the Color to #006666, Size to 30 pts and Letter Spacing to 3. We will now add the artist's name and medium, such as "Watercolor, Kate Mawdsley". Add the text on the top of the balloon and then select both text and balloon. From the Menubar, click Modify Group. This will group both the text and graphic together. Finally, we can convert this group to a movie clip which we will name "KateMText". We now have a movie clip (textBalloon) within a second movie clip (KateMText).


Pamela Gladding Ecards

Join us in the Flash forum.





Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor