Here is a class that loads an image and then draws it onto the stage as horizontal streaks. This borrows some from the ImageViewer. This example makes use the BitmapData class for pixel manipulation.
[kml_flashembed movie=”examples/ImageStreak/ImageStreak1.swf” height=”300″ width=”400″ /]
The ImageStreak class supports the following methods:
ImageStreak( _mc:MovieClip, depth:Number, w:Number, h:Number, backgroundColor:Number )
- _mc sets the host clip that will hold the ImageStreak.
- depth, ImageStreak makes a new movie movie clip within it’s host at this depth.
- w, sets the width of the image.
- h, sets the height of the image.
- backgrounColor, sets the background color the image will be drawn over.
Call this constructor function to build a new instance of ImageStreak. For example the following creates a new instance of the ImageStreak class named my_is. The image will drawn in test_mc at depth 1, and be 213 pixels width by 213 pixels tall with a black background.
var my_is = new ImageStreak( test_mc, 1, 213, 213, 0x000000 )
load_image( url:String )
This method loads a new image file into the ImageStreak instance. ImageStreak will display a message showing % loaded. When the image is loaded the transition begins. For example the following loads a new image into my_is from the folder images.
my_is.load_image( "images/IMG_0698.jpg" )
setSpeed( milsecs:Number )
This method sets the speed of the transition. The transition draws each pixel in each vertical column from left to right. The value passed here as milsecs sets the number of milliseconds spent drawing each row. In practice there seems to be limit to how fast Flash can draw each row. For example, the following sets the speed of each column to 1/10th of a second, meaning ImageStreak would draw 10 columns per second at this setting.
my_is.setSpeed( 100 )
set_border( stroke_weight:Number, stroke_color:Number )
This funciton draws a border around the ImageStreak instance.
Stroke_weight sets the line thickness of the stroke and stroke_color sets the color. For example, the following sets a 6 pixel white stroke stroke. Note: colors are set as hex colors, use 0x in place of #. So, #FF0000 (red) becomes 0xFF0000.
my_is.set_border( 6, 0xFFFFFF )
setStep( pixels:Number )
Sets the number of horizontal pixels drawn with each pass. The following would set a 10 pixel step.
my_is.setStep( 10 );
Use this method along with setSpeed() to control the speed of the transition.
Awesome example. I’ve seen this on various sites like the Barbarian group and IF. I’ve tried making one like this, but ur solution is much more elegant. Keep up the great work Mitch!
Thanks Kyle, feel free to use it. If you have any questions about it let me know.