SWF It Good

How to use Bitmap and BitmapData in ActionScript 3 – v3

Alright, this example is very similar to the other examples I have done. But with this one I am scaling all pixels at the same rate. Just click on it the image in the example Source | Example

[as] import flash.display.*;
import caurina.transitions.Tweener;
import flash.sampler.*;

var pixHolder:Sprite = new Sprite();

var img:Img = new Img();
//pixHolder.opaqueBackground = true;

addChild(pixHolder);

var coords_array:Array = [];
var pixels_array:Array = [];

var bmd:BitmapData = new BitmapData(img.width, img.height, false);
bmd.draw(img, new Matrix());
bmd.lock();
startSampling();

for (var i:int = 0; i < img.width; i++)
{
for (var j:int = 0; j < img.height; j++)
{
var coords:Object = {};

//var pixData:BitmapData = new BitmapData(1, 1, false, bmd.getPixel(i, j));

//var pixBit:Bitmap = new Bitmap(pixData, PixelSnapping.ALWAYS, true);

var pixSprite:Sprite = new Sprite();
pixSprite.graphics.beginFill(bmd.getPixel(i, j), 1);
pixSprite.graphics.drawRect(0, 0, 1, 1);
pixSprite.graphics.endFill();

pixSprite.x = i;
pixSprite.y = j;
//pixSprite.filters = [new BlurFilter(5, 5, 3)];
//pixSprite.addChild(pixBit);
pixHolder.addChild(pixSprite);

coords.sprite = pixSprite;
coords.x = i;
coords.y = j;
coords_array.push(coords);
}
}
trace(”what: ” +getSampleCount() )

bmd.unlock();
bmd.dispose();
stage.addEventListener(MouseEvent.CLICK, updating, false, 0, true);

function updating(evt:MouseEvent):void
{
removeEventListener(MouseEvent.CLICK, updating);
trace(”over”);

for(var k:int = 0; k < coords_array.length; k++)
{
Tweener.addTween(coords_array[k].sprite, {x:coords_array[k].sprite.x * 2, scaleX:coords_array[k].sprite.scaleX * 2, scaleY:coords_array[k].sprite.scaleY * 2, delay:.5,  y:coords_array[k].sprite.y * 2, transition:”linear”, time:.5});
}
trace(getSampleCount() )
}
[/as]

Add comment April 29th, 2008

How to use Bitmap and BitmapData in ActionScript 3 – v2

Alright, in this example, I am cutting each pixel in an image and piecing it back together again. Only this time I animating the pixel to a new location, piecing back the image at 200%. I think this can open a lot doors in what you can do with a bitmap.

Here is the Bitmap test 2 example

bitmaptest2.fla

Here is the code

[as]import flash.display.*;
import caurina.transitions.Tweener;
//holds all the pixels
var pixHolder:Sprite = new Sprite();
//linkage to img in library
var img:Img = new Img();

addChild(pixHolder);

//array that will hold info of each pixel
var pixels_array:Array = [];
//bitmapdata of the img
var bmd:BitmapData = new BitmapData(img.width, img.height, false);
//put the img bitmapdata in the new bitmapdata object
bmd.draw(img, new Matrix());
//I heard this helps performance
bmd.lock();
//loop thru each pixel
//i.e. i= 0; j = 0 then i=1; j = 0 then i = 2; j = 0 you get it right?
for (var i:int = 0; i < img.width; i++)
{
for (var j:int = 0; j < img.height; j++)
{
//create an obj to hold each pixels info
var coords:Object = {};

//in this example I decided to use a rect graphic instead of a single bitmap
//for fun
var pixSprite:Sprite = new Sprite();
//make a pixSprite for each pixel
pixSprite.graphics.beginFill(bmd.getPixel(i, j), 1);

pixSprite.graphics.drawRect(0, 0, 1, 1);
pixSprite.graphics.endFill();
// add an event listener to each pixel to animate
pixSprite.addEventListener(MouseEvent.MOUSE_OVER, updating, false, 0, true);
//put pixels in their right place
pixSprite.x = i;
pixSprite.y = j;
pixHolder.addChild(pixSprite);
}
}

bmd.unlock();
//you don’t need the data in memory any more
bmd.dispose();

function updating(evt:MouseEvent):void
{
//the moused over pixel removes listener, scales 200% and moves down to make a img at 200%
evt.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, updating);
trace(”over”);
Tweener.addTween(evt.currentTarget, {scaleX:2, scaleY:2, x: img.width + evt.currentTarget.x * 2, y: img.height + evt.currentTarget.y * 2, transition:”linear”, time:.5});
}

[/as]

Add comment April 23rd, 2008

How to use Bitmap and BitmapData in ActionScript 3 – v1

So the last couple of weeks I have been jacking around w/ Bitmaps and BitmapData. I’ve always wanted to try it but never had the courage. Now that I have, I wish I’d have done it sooner.

In this first example I’m just copying each pixel throwing it to the wind and using Tweener to animate it to a spot. I don’t think Tweener is the best option course as you can see it runs slow. I’m also using Grant Skinner’s Memory Gauge to illustrate how slow it is. This is just a proof of concept anyway.

Here is the Bitmap and BitmapData src v1

Here is the code
[as]
// code written by Josh Weatherspoon of http://swfitgood.com

import flash.display.*;
import caurina.transitions.Tweener;
//holds all the “pixels”
var pixHolder:Sprite = new Sprite();
//image of me in the library thru linkage
var img:Img = new Img();
//pixHolder.opaqueBackground = true;

addChild(pixHolder);

//array that will hold info of each pixel
var coords_array:Array = [];

//bitmapdata of the img
var bmd:BitmapData = new BitmapData(img.width, img.height, false);
//put the img bitmapdata in the new bitmapdata object
bmd.draw(img, new Matrix());
//I heard this helps performance
bmd.lock();
//loop thru each pixel
//i.e. i= 0; j = 0 then i=1; j = 0 then i = 2; j = 0 you get it right?
for (var i:int = 0; i < img.width; i++)
{
for (var j:int = 0; j < img.height; j++)
{
//create an obj to hold each pixels info
var coords:Object = {};

//var pixData:BitmapData = new BitmapData(1, 1, false, bmd.getPixel(i, j));

//var pixBit:Bitmap = new Bitmap(pixData, PixelSnapping.ALWAYS, true);
//in this example I decided to use a circlular graphic instead of a single bitmap
//for fun
var pixSprite:Sprite = new Sprite();
//make a pixSprite for each pixel
pixSprite.graphics.beginFill(bmd.getPixel(i, j), 1);
pixSprite.graphics.drawCircle(0, 0, 1);
//set the pixel to a random location on the stage
pixSprite.x = Math.random() * stage.stageWidth;
pixSprite.y = Math.random() * stage.stageHeight;
//pixSprite.filters = [new BlurFilter(5, 5, 3)];
//pixSprite.addChild(pixBit);

pixHolder.addChild(pixSprite);
//gather info to access each pixel individually
coords.sprite = pixSprite;
coords.x = i;
coords.y = j;
coords_array.push(coords);
}
}
bmd.unlock();
// on mouse over start animating
stage.addEventListener(MouseEvent.MOUSE_OVER, updating, false, 0, true);

function updating(evt:MouseEvent):void
{
// loop thru each pixel and move it to the original location
stage.removeEventListener(MouseEvent.MOUSE_OVER, updating);
for(var k:int = 0; k < coords_array.length; k++)
{
Tweener.addTween(coords_array[k].sprite, {x:coords_array[k].x, scaleX:1, scaleY:1, delay: .3, y:coords_array[k].y, transition:”linear”, time:10});
}
}

[/as]

Add comment April 21st, 2008

Adobe Evangelist Daniel Dura visits Travelocity

So today Daniel Dura, an Adobe Evangelist, came by Travelocity to talk about Flash, Flex and AIR. It was interesting to here him speak and his hair was redder then pictures led on. But I won’t hold that against him.

History and Examples

If you have ever seen anyone from Adobe speak, you know they have to go over the History of the Flash Player, AVM, JIT and all that. Luckily he didn’t have to talk about the history of the web as some Adobe eseminars do.

Once he got past that some people asked questions about some of Adobe’s technologies. I’m not quoting Daniel, but he compared Flash to Silverlight and AIR to WPF. One thing I didn’t know is that the debugger and even the compiler are open source. Though I will never want to rewrite the compiler. Nice Adobe

Oh and they showed this killer travel app that they cooked up.

Examples

I don’t know what the rest of the audience’s background is but I though it was good he went over using AS3 in FlexBuilder. Some examples were using E4X, Arrays and DisplayObjects. Afterwards he created a simple Flex rss reader for his blog. Then converted to an AIR app which is quite simple if you didn’t know.

What was not easy was him showing us how to compile it only using the command line. Thankfully after that he showed how to do that in FlexBuilder (cake).

Next was an HTML example, I forgot what the example was. Though he remined me that you can call flash packages in JavaScript. The way it works is their is the flash engine and the JavaScript engine. The JavaScript engine says, “Hey, I can’t find this DropShadowFilter thing…Oh, I’ll look in the Flash engine. There it is.” That is really exciting to me. See my post on calling Flash class in Javascript.

After that he talked about the other AIR specific packages.

• Drag and Drop
• Service Monitor
• SqlLite

(An aside) One thing I saw that was awesome cause I love the in operator and for each but I didn’t know you could do this

[as]var array:Array = ["butter", "eggs", "sugar"];

trace((2 in array));[/as]

Good Job Daniel. You reawakened my want to use AIR.

Oh see his Air Code

Add comment April 15th, 2008