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 1: The Circle Animations

<< Go Back To Introduction Page
See The Movie

Ok, to begin with, start Flash.
When it's opened, you'll need to setup some defaults for your movie. For this splash logo, you'll begin that by going to the MODIFY/Movie menu, or just press Ctrl+M (Mac: Command). Change the dimensions of your movie to 400 pixels wide, by 300 pixels high. Then change your background colour to black by clicking on the white colour swatch. Also, click in the Show Grid box, and set the Grid Spacing to 10 pixels (check the Ruler Units option to make sure it says Pixels).
We'll leave the other default settings as they are.

'Circle Shrink' Animation (part 1): Motion Tweening and Tinting

stage 1a1) First, click on the Circle tool, and set the border line to None (transparent square in the Border Line colour palette), then set the Fill colour to a bright red. Create a small red circle, about the width of your mouse pointer. Now position (or Align) the circle at the top center, and outside the top edge of the movie canvas. This way, you won't see the circle sitting there before the movie starts.

2) Now double-click the layer name and name this layer 'circle shrink'. Flash 4 automatically converts the first frame into a keyframe for you. Select the circle object now and press F8. This converts the circle into a Symbol, and adds it to your Library list for your movie.

3) Click in the 17th frame and insert another Key Frame (F6); Flash duplicates the circle symbol on the 17th frame. Then, right-click on the first frame and choose 'Create Motion Tween' from the menu; Flash puts a solid line between the 2 keyframes, signifying that there is motion tweening between them. Now press Ctrl+I. Under the Color Effects tab choose Tint from the menu, and move the slider to 100%. This will make our circle start off as black.

4) Click on the 17th frame. Go to the MODIFY/Transform/Scale and Rotate menu (Ctrl+Alt+S), and increase the size of this circle by 500%.

5) Click in the 27th frame now and insert another Key Frame (F6). Now press Ctrl+I, and apply these settings in the Properties window: :
  • Colour Effect = Tint
  • Amount = 100%
  • Colour = R/255 G/204 B/0
Now press Ctrl+Alt+S, and increase the size to 250%.

stage 1b6) Click now on the 17th frame and while holding down the Shift key, press your down arrow key 5 or 6 times. We want to create a 'swooping' effect with our circle by having this circle positioned below center. This circle will now animate into the centered one on the 27th frame.

Now, right-click on the 17th frame and choose 'Create Motion Tween' from the menu.

And that's it. The first part of the animation for this symbol is done.
Press the Enter key now to preview what you've done so far.

'Circle Grow' Animation: Motion Tweening

Now we have to create another circle. In the finished movie, this circle is the one that grows, and maintains the yellow-orange colour. This part is simple. After we've created this part, we'll go back to the 'circle shrink' layer and finish off its animation.

stage 1c1) To start, add another new layer, and name it 'circle grow'. Drag this layer so it's below the 'circle shrink' layer. Then right-click on the 27th frame of the 'circle shrink' layer, and choose 'Copy Frames' (or press Ctrl+Alt+C).

2) Now right-click on the 27th frame of the 'circle grow' layer and choose 'Paste Frames' (or press Ctrl+Alt+V). This circle needs to start out slightly smaller than the original, and get slightly larger as the animation plays out. So to do that, right-click in the 27th frame of this layer.

3) Go to the Modify/Transform/Scale and Rotate menu (Ctrl+Alt+S), and decrease its size to 80%. Then, right-click in the 50th frame and insert a Key Frame (F6). Again, press Ctrl+Alt+S and increase the size percentage to 110%. This will make the final size of this circle 10% smaller than it's original size. But it will appear to grow as the animation plays out.

4) And finally, right-click on the 27th frame and choose 'Create Motion Tween' from the menu.

'Circle Shrink' Animation (part 2): Motion Tweening and Tinting

Now we'll finish off the 'circle shrink' animation.

1) Right-click on the 50th frame of the 'circle shrink' layer and choose Paste Frames.

stage 1d 2) Now again, press Ctrl+Alt+S and change the percentage size to around 20-25%. This amount might be slightly different for you depending on the actual size of your large circle. But basically, we want this circle to be just a small dot in the center of the larger circle. Not TINY, just small.

3) Open the Modify/Instance menu (Ctrl+I) now and make sure under the Colour Effect it says TINT, and the Amount is set to 100%. Then change the colour to black using the slider on the right.

4) And lastly, right-click frame 27 and choose 'Create Motion Tween' from the menu.

Ok, so we've now completed Stage 1 - our circle animations. Press Enter to preview what you've done so far. The last frames in the animation should end with a small black circle centered within a larger yellow-orange circle. If this isn't what you're seeing, please review the previous steps to make sure you didn't miss something.

Go to Stage 2 >>>

Suits PonytailsPropheadsContact WDJDiscussWeb AudioSearch


The Network for Technology Professionals

Search:

About Internet.com

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