Newest Articles

MegaCombs
Flash Media Player
XML Driven Pie Chart
Base Defender
Hangman Game
8 Ball Pool


Popular Articles

True Fullscreen Flash Mode
3d Rotating Image Cube
Hangman Game
Mp3 Player with XML Playlist
Infinitely Zooming Image
Catapult Game


Random Articles

Horizontal Line Transition
Spark Effect
Drivable Car
Paddle Ball
Mp3 Player with XML Playlist
XHTML Image Mapper


Links

Foundation-Flash
Reddit
Newgrounds
TWiT
Link to SwfSpot
Swf Spot

Contact me on Google+



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


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
Comments Currently Disabled