WebDevelopersJournal.comTips on Web Page Design, HTML and Graphics
SITE SEARCH
Newsletters
HTML (M-F) Text (M,TH)



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 2: The Shield Animations

<< Go Back To Introduction Page
See The Movie

'Shield Left' animation: Motion Tweening


For our flying shields we need to create a perfect triangle. There are two simple ways of doing this; with the Line tool, or my way. Let's try my way here. :)

1) Add a new layer and name it 'shield left'. Make sure it's sitting above the 'circle shrink' layer. Click on the 17th frame and press F6, to insert a Key Frame.

2) Go up to the VIEW menu and at the bottom, choose on the Grid option. Then look below the Tools palette and you'll see a horseshoe magnet icon. If it's not depressed already, click on it to turn on the Snap-to function.

3) Now pick the Square shape tool, and set the border line to None (transparent square in the Border Line colour palette), then set the Fill colour to a dark or royal blue. Then, anywhere on an empty area of your canvas, create a perfect square that's four grid spaces in size; by holding the Shift key down while you drag the mouse directly right for four grid spaces.

4) Switch back to your selection tool. Make sure the square shape isn't selected, and slowly move your mouse pointer over the bottom right-hand corner of the square. Your pointer should turn into a corner-bracket shape when the mouse gets close to the corner edge. Once it does, click and hold down the mouse, while dragging the corner upward into the center of the square. Then release the mouse, and you should now have a perfect triangle.

Note: if you have any problems understanding this method, then use the Line tool instead.

stage 2a5) Move the triangle over to and off the left center edge of the canvas, on the *outside* of the visible canvas area.

Now we need another shield, but one that faces to the right instead. To create that, press Ctrl+L to open your Library for this document. In the list of current symbols, you'll see one called 'shield left'. Right-click on it (Mac: long-click), and choose Duplicate from the menu. Rename this to 'shield right'. Then right-click again and choose Edit from the menu. Make sure you've selected this symbol now and open the Modify menu. Go down to the Transform menu and choose Flip Horizontal, then choose Flip Vertical also after that.
Once flipped, click on the 'Scene 1' tab up in the top-left corner of your document window to return to the main movie window again.

6) Now add a new layer just above the 'shield left' layer. Name this layer 'shield right'. Click on the 'shield right' symbol in your Library list, and drag it onto the canvas area. Then move it over to the right side, and just off of the canvas area itself. Try to line it up vertically with the 'shield left' symbol, so it sits directly across from it. Use the grid lines to make this easier. Or press Ctrl+K and use the alignment commands.

7) Now we need to animate these shields up to a certain point in the movie. To do this, start by clicking on frame 27 of the 'shield left' layer. Press F6 to insert a Key Frame. Now we have a duplicate of the symbol on the 27th frame. Press Ctrl+K and align this copy to the center of the page. Then resize this symbol by 300%. And finally, right-click on the 17th frame of this layer (the first frame of this sequence) and choose 'Create Motion Tween' from the pop-up menu.

Now repeat step 7 for the 'shield right' layer.

stage 2b8) We want our shields to collide in the middle, but be slightly off-set from each other when they do. To make this happen, click on the 27th frame of the 'shield left' layer, and hold the Shift key down while you press your down arrow key once and left arrow key once. Then do the same for the 'shield right' layer, but instead, press the up and right arrow keys once. This will create the off-set we need.

9) Next, we'd like to create the effect of our shields banging into each other, and bouncing away slightly. And when they recoil back into the center, they'll do a 180 degree spin before coming to a stop.
To create this effect we'll need to re-orientate our shields' final positions. Start by clicking on the 50th frame of the 'shield left' layer. Press F6 to insert a KeyFrame. Now press Ctrl+Alt+S, and in the Rotate box enter -225 degrees.
Now press your left arrow key 10x, and your up arrow key 1x. This should put the left shield exactly in the middle of the canvas, and pointing to the right. Right?
Now right-click on the 27th frame of this layer, and choose 'Create Motion Tween' from the menu. Then double-click the same frame, and within the 'Tweening' section (click the tweening tab) open the Rotate drop down menu and change the rotation to 'Counterclockwise'. Don't change the other settings for Rotate. But, where it says 'Easing', move the slider all the way to the right side. This will slow our shield's movement down as it completed it's rotation.

stage 2c10) Ok, now repeat Step 9 for the 'shield right' layer also. Everything should work exactly the same except the shield will be pointing to the left.
Go to Stage 3 >>>
Suits PonytailsPropheadsContact WDJDiscussWeb AudioSearch


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers