Newest Articles

Image Color Tinting using Actionscript
3d Rotating Image Cube
Image Slider with Easing
Catapult Game
Mp3 Player with XML Playlist
onEnterFrame vs setInterval


Popular Articles

True Fullscreen Flash Mode
FLV Player
Image Slider
Image Color Tinting using Actionscript
Album Slide
Catapult Game


Random Articles

Music Player
RSS feed scroller
FLV Player
Glowing Orb
12 Hour Clock with Hands
Gravitas


Links

Foundation-Flash
Tutorial4Me
MickM
TutorialQuest
Tutorialsphere.com - Free Online Tutorials
Photochopz
Newgrounds
TWiT
Link to SwfSpot
Swf Spot



rss feed

Infinitely Zooming Image

Infinitely Zooming Image
AddThis Social Bookmark Button
Description: Image contains a frame which zooms out forever
Author: John Bezanis
Added: March 25th 2007
Version: Flash 8
Total Views: 25935
Views in the Past 7 Days: 379


Start out by choosing a picture with some sort of frame. The larger the source and frame, the better the result will be. Here's a shrunken down version of the source used in this demo:
source image
Open up an image editing program and rotate the image so that the frame is squared and level. With the selection tool, select the contents of the frame and copy it to get the dimensions of the frame. Paste it and rescale to fit either the height or width of the document. Use this to resize the entire document so that it is the same dimensions as the frame. Delete the layer with the frame contents. Select the entire image, copy it, paste it, and resize it to fit perfectly inside of the frame. Repeat this process until the pasted image is so small that it is only a few pixels in size. Your image should now look similar to this one but much larger:
repeating image
Open up Flash and the following file:
Infinite Zoom
Open up the symbol repeatingimage in the library. Delete the image on the stage. Click File->Import->Import to Library and select your image. It will appear in the library. Drag it over to the stage, and move it so that the 'vortex' of the image is at the 0,0 position. There is a crosshair at that position. Go back to the main level, and in the third frame of the layer maskandframearea, select the gray box. move and resize this box so that it fits the first frame. Hit ctrl-Enter to preview the project. It probably isn't going to perfectly fit the window. Select the gray box, and in the properties tab, look at the height and width of the gray box. Resize your document to those dimensions. Move the gray box to position 0,0. Move the image so that the frame is directly behind the gray box. Hit ctrl-Enter. The image should fill the screen.

Download Source File
Questions and Suggestions
what the hell!!! :)
June 4th 2007 09:06AM   -   michael
how to copy keyframes
June 22nd 2007 01:06AM   -   abdulraheem
coooooooooooooooooooooooooollllllllllllllllllllllllllll...!!!!!
June 29th 2007 07:06AM   -   dhara-m-ali (mali dharam)
ya this is very good but i failed to make this type of effect...
July 2nd 2007 02:07AM   -   pradyuman
this is a neat effect, but you can do the whole thing just as easily with an animation
July 2nd 2007 11:07AM   -   monkey
Hehe, thats funny though
July 26th 2007 09:07AM   -   Platfuse
veeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrryyyyyyyyyyyyy coooooooooooool!
September 11th 2007 21:09PM   -   rose
nice idea.. really cool.
October 16th 2007 17:10PM   -   Venkadesan Tharshan
nice tutorial
December 12th 2007 02:12AM   -   farhan rao
This is very interesting but I cannot figure out how did you make it in Flash. So would you please tell me at least how can I start or where can I find tutorial to make it? Please answer me. Thank you!
January 9th 2008 14:01PM   -   Aleksandra
great work.
January 19th 2008 15:01PM   -   jimi
awesome
February 20th 2008 15:02PM   -   Manzoor
Add a Question or Suggestion
name:
website (optional):
captcha type the characters into the box
message (5000 characters or less):