Flash exquisite animation icon: Follow the mouse to move the magnifying glass

Zoom In | follow | follow mouse

The current popular icon design software portfolio is Illustrator/corel Draw + Photoshop (This article does not discuss the pixel icon), made out of the icon is static, if you want to apply to flash, must be imported through a bitmap, and do not say that transparent GIF sawtooth, PNG large volume, The light of a mosaic phenomenon makes usability a big discount, let alone a dynamic icon.

The advantages of using flash design icons are obvious: support for dynamic icons, no distortion amplification, easy porting, and sound bonding, and so on. The disadvantage is not suitable for the performance of complex lighting, a look is a cartoon.

Let's take a look at my experimental work:

Click here to download the source file

If you're interested in the process, go ahead, let's start with the middle ball.

1. A new MC, name to do Icon_ball bar

2. Draw a positive circle, set the outline and fill the style, the effect is as follows:

3. Adjust with the gradient adjustment tool:

4. Create a new layer, named Hilight, by the way the original frame renamed Ball

5. Draw a circle again, move to the figure position

6. Modify the results in the Color mixer panel as shown in figure:

The black in the picture is transparent, deselect the selection to see

7. Adjust the gradient direction

8. Create a shadow Layer

9. Draw a black circle, and when selected, use the soft edge feature to set the parameters

10. Select the shadow, press F8, turn into a component, name Ball_shadow

11. Adjust the transparency and size of Ball_shadow

12. Create a new layer, draw the logo

Through the above method, I believe you must have mastered the basic method of drawing three-dimensional form, that is:
Draw basic shapes, gradients, highlights, and shadows in turn.

The following clock is also the way, so I no longer detail, here only a few key steps, you can play, because this is not the only way, I believe you will create a suitable way.

Effect preview:

1. The making of the panel

2. The making of a scale
I like the small and fine scale, for the sake of convenience, enlarge twice times to see
Draw all the scales and turn them into components (F8).

Copy this component once, press Ctrl+shift+p to paste, press ctrl+↓ to move below, and then reduce the brightness

Effect:

3. The production of pointers
Create a new MC, draw a pointer, the idea of the location of the registration point (cross)
Because the pointer color is white, so we temporarily set the document background to black

Copy 3 pointers so that their registration points coincide with the center of the panel

Select these three pointers and press F8 to turn them into components

Effect as shown

Duplicate this MC, same scale, reduce brightness processing,

4. Slightly modified, with the base and text, and the text to break the last code to see if your time is right:

The mouse to move to the first icon place, you can see the magnifying glass will move, while the shadow also with the movement, and only in a certain area of the display, it is flash makes the icon full of dynamic

This is the timeline after the completion:

Description: If you are ignorant of flash, I suggest you find this introductory book to see, limited to space, this article may not meet your needs

Component Decomposition diagram:

1. Folder

Pure gradient + Contour, note that the outline of the color light some

2. Shadow

First draw a circle and a line, then convert to fill, finally soften the edge and turn into a component

3. Mask

is actually just a translucent part, see source file

3. Magnifying glass

The main part of the magnifying glass, the white thick lines have been converted into fill, the middle of the ink bottle with the tool to fill in a faint outline

Magnifying glass handle, plastic part with gradient, metal part directly draw shape with line, then paint and delete line

Note: The magnifying glass body and handle go together into the component so that you can move together

Below we want to do, just create the most basic animation, limited to space, this article no longer detailed, if interested, can go to the Classic Forum Flash column questions, welcome:

For specific ActionScript code, see source file