Often while working on dynamic flash websites, I get confronted with the challenge of placing multiple interactive items on top of an image. (think of it as a Ferrari with roll over popup zoom and detail buttons).  Since it's dynamic, x/y coordinates...

Last one, another version of the bitmapData lock. This time with polygons, a random defines the number of sides (3 for a triangle and so on pentagon, hexagon and all)  see drawPolygon() method and interesting use of the drawing API. The experiment...

Yet another version of the bitmapData lock. This time with stars...I like stars. The experiment uses an external class to create the slider.  You can download the slider class here.

Another version of the bitmapData lock. This time with rounded corner rectangles.  Using the drawing API, this experiment was a good opportunity to write a method.  Use the slider to increase the size of the squares. The experiment uses an...

Yesterday I posted an experiment that looked into the bitmapData lock method. One detail though is that you can invoke lock on a bitmapData that is not visible to users and in turn analyse it's data to  execute some arbitrary random function...like...

I was playing around the bitmapData class in AS3 and wanted to illustrate the use of the BitmapData.lock() method. Using this methods you can make changes to a bitmapdata object without rendering all those changes until the bitmap is unlocked. To improve...

Rotating an image on itself 360 degrees while skewing the bitmap to recreate perspective. Similar to the last post, in order to achieve the effect, I change the strength of the displacementMapFilter effect on the y plane, maximizing it on the left...

Skewing my bitmap as it travels across the stage. I added the 3D effect the I-tunes flow uses.  In order to achieve the effect, I change the strength of the displacementMapFilter effect on the y plane, maximizing it on the left and right extremes...

The last few posts were dedicated to skewing a bitmap using bitmapdata. Now that the technique is mastered, I decided to start skewing my bitmap as it travels across the stage.  Hence simulating the I-tunes cover flow animation. Not much has changed...

Using the basic skew properties to crunch the image horizontally, giving the impression that the image is rotating on itself.  It simulates real 3D rotation with correct bitmap distortion. I change the _xscale using the following. Use the slider...

Moving onto implementing the I-tunes cover flow menu, this experiment lets the user skew the bitmap on both ends using the slider.  The gradient is based off the last post where I was dynamically creating a gradient using the beginGradientFill...

In order to animate the background brown gradient via actionscript (in this case the slider) . I used  beginGradientFill  and placed it on an onEntrFrame event in order to have it draw continuously. I have to admit that I don't use the beginGradientFill...

Yet another extension of the 3D Bitmap skew v1 post, this time I animated the background brown gradient.  My goal here is to make sure I can skew the bitmap from the left as well as from the right.  The following animation actually proves...

This is an extension of the 3D Bitmap skew v2 post, this time I wanted to add a back side to the image.  The technique is similar to the 3D flip code I posted a while back. If you use the slider to animate the image flips and the back side becomes...

Instead of placing it in a 3D world using a 3D engine, I decided to simply use the basic skew properties.  Basic skew simply crunches the image horizontally, giving the impression that the image is rotating on itself.  Combined with the displacementMap...

I love the I-Tunes cover flow view. I like the way the album images distort as they rotate. I started looking for ways to create a bitmap skew that simulates a 3D object  rotating in space.  One of the  challenges I had was not to use...

If you want to remove the BG image from the square pixelated transition v2 post, you will need to remove the clone property for the myBitmapEffect bitmap and simply define it as a transparent square; such as // Create effect bitmapData myBitmapEffect=...

A step further into creating late 80's style of kitch transitions. This effect is based on square pixelated transition v0 post, the only difference is that I am resizing the rectangles as the vertical dotted clip moves along the picture. sSize =...

This efefct is acheived via a cocktail combining the square pixelated transition v0 post and the blur transition, Oh yeah and an alpha transparency effect. I am using my circular tween animation to move my vertical clip from the edge of the image through...

Similar to the grid 101 post where I create a 2x2 grid over and image.  I create  10 pixel high squares using the flash.geom.Rectangle class  and use the bitmapData getPixel32 method as color picker  to color each rectangle appropriately. //...

In this code I use my  emboss transition first and then I create 1 pixel high rectangles, color them using the bitmapData getPixel32 to find the grey color and make them stretch horizontally as my dotted line moves along the image.

In this code I use my  black and white transition frst and then I create 1 pixel high rectangles, color them using the bitmapData getPixel32 to find the grey color and make them stretch horizontally as my dotted line moves along the image....

Uning the bitmapData getPixel32 method, sort of a color picker,  which returns an ARGB color value at a given x,y position of a bitmap. I create 1 pixel high rectangles, color them using fillrect and make them stretch horizontally as my dotted...

A cocktail combining blur transition, my b&w tranition post and the circular tween animation creates this effect.  Sweet.

Moving along from my blur transition post, I added an alpha tween of the image to create a sweet disaperaing act. I am using my circular tween animation to move my vertical clip from the edge of the image through it's length. Use the slider to set...

The blurFilter class is a topic I have previousely discussed. Similar to my b&w tranition post, this blur effect starts from the left and tweens to the right of the image. I will use this notable effect later in combination with others to create...

The ColorMatrixFilter class is a topic I should get into in future posts. Since I am keeping up with different transition techniques, I figured it would be best to use it first and down the line I will introduce it and show its versatility . This emboss...

Since Keith Peters mentioned another method to do black and white transformation using ColorMatrixFilter. I played around with the values and got a Sepia color transform. These values are not scientific, simply a resultt of playing around with the...

I am using my circular tween animation to move my vertical clip from the edge of the image through it's length. Set init and target point and get the number of pixels the clip needs to travel.  According to a set speed, calculate the amount of...

In the next series of posts I will be exploring various image transition techniques using the bitmapData class.  I am still impressed at the boundless power of this class yet its remains unexplored and kindoff overshadowed by flex and AS3. ...

An extension to the distort image v5 post, In this instance I am using the transformation matrix to create transformation effects onto my clips.  Next week I will take a closer look into the trasfrmationMatrix class.  For now though, the...

An extension to the distort image v4 post, Ripple, skew, flip, displace and tumble the image, as long as you have fun. You might see the vertical lines at times, but thats usually when yout ry to stretch things too much.

Based on the last distort image v3 post, In this example you can use the sliders to change the amplitude, frequence and wave and generate all sorts of cool image distortion effects.   Each stripe reacts according to the  following equation...

Got to flip my image in 3D, sweet effect. The code is based on the last distort image v1 post, chopping an image into small verical stripes using bitmapData copyPixel.  In this example I declared variable called amplitude, frequence and wave ...

Many effects can be acheived by chopping an image into small verical stripes.  In this example use the sliders to set different radio wave type distortion patterns to the image.  The code is based on the last distort image v1 post. ...

This image flip code is based on the last distort image v0 post.  I chopped my image into small verical stripes using the copyPixels method.  In this example I rotate each stripe according to the mouse x position. In case you are wondering...

In an effort to distort and flip images, I used Perlin Noise and displacementMapFilter succesfully.  The displacementMapFilter v3 post had a dynamic gradient map that generated pseudo-random results. But I still was not convinced of the effect...

Combining the displacementMapFilter v0 post and the recently added perlin Noise v3 we can now pseudo-randomly displace image pixels by using colors.  In this case the black and white color gradient is generate using perlin noise (click on show...

In the last post  I used a Perlin Noise to generate a movieClip where the b&w gradient shifts continually through the manipulation of the random seed number.  As an alternative, to generate different pseudo-random results, I decided...

In the displacementMapFilter v1post the black and white color gradient behind the image was a movieClip with an gradient color.  If we want to create a dynamic gradient map that generates pseudo-random results you use Perlin Noise. In this example...

The displacementMapFilter v0 post described how to displace image pixels by using colors.  In case you were wondering how I created the black and white color gradiwent that is scrolling behind the image (click on show map to see).  It's simple...

The displacementMapFilter class gives us the ability to displace image pixels by using colors.   You can use this filter to achieve a warped or mottled effect on a BitmapData or MovieClip.  It uses the pixel values from the specified BitmapData...

In a previous post I talked about the the draw method.  Draw basically draws a source image or movie clip onto a destination image.  Sort of a snaphot.  This execution is done using the Flash Player vector renderer which automatically...

In the last post I described the copyPixel method that copies a rectangular area of the source image to a rectangular area of the same size at the destination point  BitmapData object.  We now use the Point object to precisely position our...

CopyPixel  copies a rectangular area of the source image to a rectangular area of the same size at a destination point of the destination BitmapData object. copyPixels(sourceBitmap,sourceRect,destPoint) this is a great method for pixel manipulation...

One of the great features of the BitmapData class is the ability to take a snapshot of the visual state of anything that has an instance name as a bitmap, such as movie clips, video objects, and text fields. The draw method simply uses the vector renderer...

In older versions of flash, if you wanted to create a seameless patterning background using an image, you needed to create a grid of duplicated movieclips.  Needless to say that that technique resulted in somewhat 30 lines of code and eate CPU...

Ever wanted to apply a gradient mask to a clip.  The following post applies a circular gradient clip positioned in the middle of the stage as a mask to the bitmap. Use your mouse to move the image and see it fade in and out of the maked region,...

Creating a reflection below any type of bitmap is a simple bitmapData operation that utilises the draw method.  Draw basically draws a source image or movie clip onto a destination image.  sort of a snaphot. In order to create the reflection...

You can display an instance of the BitmapData object inside any movie clip using the new MovieClip.attachBitmap method. In this post, an instance of the BitmapData class is stored in memory and never seen until you decide it is time for it to get rendered...

The bitmapData class has PerliNoise, Perlin noise and its various derivatives and enhancements are used throughout...

Noise!  the bitmapData class has noise, guess what it generates noise inside a bitmap and it hardly eats any CPU.  The following code shows  how to access this method.  It is relatyively easy to set up, as for the bitmapData initialisation...

The paletteMap method gives you control over adding color to regions of the bitmap. We define that region by creating a point (xy corrdinates) and drawing a rectangle inside the source bitmap.   paletteMap([sourceBitmap],[sourceRect],[destPoint],[red],[green],[blue],[alpha]); As...

Next step in working with bitmapData is the flash.geom.Rectangle and the flash.geom.Point class.  What they do....simply create points (xy corrdinates) and draw rectangles inside and existing bitmap.  Why do we need these?  It's the...

The  Flash 8 Image API uses 32-bit ARGB color values.  You might have seen it in my last post that I defined the bitmap color as 0xFFFFFFFF. That's right, 8 intead of the usual 6  hex values. This might come as a shock to us web designer...

I decided to play with the  Flash 8 Image API in order to ultimately stretch, skew and deform bitmaps in 3D space. Flash 8 introduced the BitmapData class which lets you create arbitrarily sized transparent or opaque bitmap images and manipulate...