WebDevelopersJournal.comTips on Web Page Design, HTML and Graphics
SITE SEARCH
Newsletters
Java/Open Source Daily



Jobs at webdeveloper.com

Resources By Subject
Technical
Graphical
Authoring
Business
WDJ resources
Archive

internet.com

internet.commerce
  • Partner With Us
















Developer Channel


Find a web host with:
CGI Access DB Support Telnet Access
NT Servers UNIX Servers



Semi-automatic?

JavaScript
JavaScript Helper:
Meet Paige Turner, the least geeky geek we've ever come across.

Variables and Operators Explained:
First of a three part guide to JavaScript basics.

Controlling Forms:
Enhance your HTML forms with a touch of JS.

DHTML:
Forget how it works, let's see some in action!


Flash 4 For Intermediate Users - Stage 3: Text Animation

Go Back To Introduction Page
See The Movie

The words 'Bull's Eye': motion tweening.


1) Add a new layer, and move it to the top of the layers palette. Name it 'bull's'. Then click on the 37th frame of this layer and insert a KeyFrame (F6).

stage 3a2) Pick the text tool. Set the font type to Times New Roman; or Georgia for Mac users. Change the size to 48 and Bold, and the colour to a bright red. Now click the tool just outside the top edge of the circle. Type the word - Bull's - then pick the selection tool again. Press Ctrl+K and align the word horizontally only, and align it to the page (click in the box at the bottom left of the window).

3) We'll need to convert this text object into a symbol now. So make sure the word is selected, and press F8. stage 3bNow click on the 50th frame for this layer and press F6. Move this copy down toward the middle of the circle just in between the two shields. Hold the Shift key and press your down arrow key 6x. This should move it pretty close to where we want it.

4) We want this word to appear to fade in, as it moves into position, so click on the 37th frame again and press Ctrl+I (Modify/Instance). In the Color Effect section choose Tint from the menu and move the slider all the way to the right. This will start the word off as black, which will produce an invisible effect against the black background.
Now right-click the 37th frame and choose 'Create Motion Tween' from the menu. Then double-click the same frame and under the Tweening tab, move the 'Easing' slider all the way to the right.

Press your Enter/Return key now to preview the animation you've done so far. If everything is cool, continue on. If not, find where the problem is and retrace the previous steps/stages to figure out what you need to do to correct it.

stage 3c5) Now to create the word 'Eye' for the logo, just repeat steps 1-4; replacing the word Eye for Bull's, and creating the word at the bottom of the circle instead of at the top; so you'll need to move the word up not down. All the other instructions will be the same.

The word 'Entertainment': motion tweening along a path.


I've left this word till last because it involves using a Motion Guide path for its animation. Motion Guide paths aren't hard to work with though, just more involved. About the only thing that could go wrong with them is that your symbols aren't sitting EXACTLY over top of the start and end points of the path. Let's give it a go, you'll see it's easy.

1) Add another new layer to the palette. Name it 'entertainment'. Then move this layer to the very bottom in the list. We want this word to float around behind everything else in the movie.

2) Pick the type tool. Set the font to Arial, size 10; Helvetica for Mac users. Change the text colour to a medium light grey, and click the Bold button as well.
stage 3dNow click the type tool at the top left corner of the canvas and type the word - Entertainment. Use the arrow keys if necessary to get the word really close to the inside edge of the canvas area; but not outside of it.

3) Switch to the selection tool and click on the text object. Then press F8 to convert it to a Symbol. Now click on the 50th frame of this layer and insert a KeyFrame (F6). Move this copy of the text down below everything else, to the bottom center of the canvas. Press Ctrl+K and align the word horizontally only, and click in the 'Align to page' box. stage 3eNow press Ctrl+Alt+S and increase the size of the text to 300%. And last, use the arrow keys to nudge the word up so it sits right in between the bottom of the circle and the bottom of the canvas.
Click on frame 1 of this layer, then right-click the frame and choose 'Create Motion Tween' from the menu. Then double-click the frame, and under the Tweening tab move the 'Easing' slider all the way left. This will make the word move faster as it reaches it's final resting spot.

4) Now we'll add the Motion Guide path. This can be a wee bit tricky at first, but stick with it and you'll get through it fine.
Start off by right-clicking on the name area of the 'entertainment' layer. From the pop-up menu choose the 'Add Motion Guide' option. A new guide layer will appear right above our target layer. Notice the special icon on the left side of the Motion Guide layer.

Now for the guide itself.
The trick here is to make sure that your symbols end up sitting exactly over top of the start and end points of the guide path. If they aren't, you know it because the text won't follow the line you create. Keep this in mind as you create your start and end points of your path.
stage 3fClick on the Guide layer, then pick the Pencil tool. Now start your path as close as you can to the very center of the small 'entertainment' symbol (top left/1st frame). Draw a wavy line going across the canvas and down toward where the larger version of 'entertainment' was positioned. Stop drawing the line when you think you've reached the center of the large symbol (bottom center/50th frame).

When you've finished drawing your guide path, press Enter/Return to play the movie, and see if the text follows the path. If it doesn't, then the ends of the path are not exactly centered on the text symbols. The easy way to center a path end onto a symbol is to first select the symbol, then move the mouse over the top of the path end. corner bracketWatch the mouse pointer as it gets close to the end. When it's exactly over the end of the path, a small corner bracket symbol will appear beside your pointer. When you see that, click and hold the mouse button down while you drag the end to the center of your text symbol. alignment circleAnd when your path end is centered over your symbol, you'll see a thick outlined circle appear under the point of your mouse. Let go of the mouse button when this happens.

After doing this, press Enter/Return to preview the movie and check the results.
Keep moving the path ends like this until the text follows the path.

stage 3g6) And finally, click again on the first frame of the 'entertainment' layer, and press Ctrl+I. Under the Color Effects tab choose Tint, and move the slider all the way to the right; 100%. We're going for another fade-in effect here. Now hide your Motion Guide path by clicking on the small dot next to the name, and underneath the eye icon. You should see a big red X appear.

And that's it, we're done! Turn off your grid if you have it showing, and press Enter/Return to watch the completed movie.
Congratulations! :O)>
Suits PonytailsPropheadsContact WDJDiscussWeb AudioSearch