Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
Flash & Swish  Home Flash & Swish Flash Tutorials Animated Magnify Effect
rss

Animated Magnify Effect

Author: Hv-Designs.co.uk More by this author


Open up the image you want to magnify in photoshop, im going to use a screenshot of my website for this example. Once your image is loaded into photoshop goto "image > image size", in the box that loads up de-crease the size by 100-200pixels make sure you tick the following options (see image below).

image 1

My orginal size is 650x474, with the constrain proportions option ticked i set my width at 550pixels, then the height should automatically change. Save your newly sized image in a seperate file, save it as image_small.gif. You should have 2 images in total "the orginal" and "image_small".

Fire up flash and create a new document, change the dimentions of your flash project to that of your small image, im my case mine is 550x401.

image 2

Label your 1st and only layer as "orginal".

image 3

Then goto "file > import > import to stage" and select your small image. Create a new layer above your orginal layer an name it "big image" then import it to the stage.

image 4

Select your "bigger image" layer then center the image horizontally and vertically.

image 5

Now create a new layer above your "bigger image" layer and name it glass or magnify, what ever your think is best. Now for this bit you can either search google for a magnifying glass or make your own, for the purpose of this tutorial ive found one on google images. Import your magnifying glass to the stage.

Click to enlarge
Click to enlarge

Right click your magnifying glass and goto "break apart".

Now you need to select the lasso tool image 7 and then in the options at the bottom select the polygon mode

image 8

Now go round the whole of the magnifying glass deleteing all the white bits including the glass in the middle, so all's your left with is the magnifying glass frame work, might be easier locking and hiding the other two layers. The polygon mode and lasso tool works the same as photoshop. Once your done you should have something like this.

Click to enlarge
Click to enlarge

Once your done resize your magnifying glass to a reasonable size and stick it to the left of the canvas in the empty workspace.

Click to enlarge
Click to enlarge

Create a new layer "under" your magnifying glass layer name it mask and create a black circle the same size as the magnifying glass glass.

Click to enlarge
Click to enlarge

Now select keyframe "70″ on all layers and insert a keyframe.

Click to enlarge
Click to enlarge

Now on the magnifying glass layer and the mask layer select keyframe 20 and insert a keyframe.

Click to enlarge
Click to enlarge

Do the same for frame 35 & 50.

Click to enlarge
Click to enlarge

Now at each frame 20, 35, 50 & 70 move the magnifying glass and mask to a different position on the canvas. Be sure to select the keyframe 1st. Once you've done that right click inbetween each frame and click "create motion tween. Your time line should now look like this.

Click to enlarge
Click to enlarge

If you press "enter" on the keyboard you can watch the animation play. Now right click the "MASK" layer and goto mask. Then in the menu bar at the top goto "control > test movie" and watch your creation.

Heres how mine turned out.



Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Animated Magnify Effect"