22 May 2010

Using BitmapSplit function with Tweener

Few posts ago I introduced Dynamic Bitmap Split Function. This function allows you to split any Bitmap into any (reasonable) number of column and rows and use those parts separately.

Here is one quick example of using this function together with Tweener class. Click on image to see live example.



and here is code:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.ByteArray;
import flash.geom.Rectangle;
import flash.events.Event;
import caurina.transitions.*;

var bmd1:BitmapData = new BitmapData(100, 100, false, 0x666666);
var bm1:Bitmap = new Bitmap(bmd1);
bm1.x = 120;
bm1.y = 100;
addChild(bm1);
var expand:Boolean = false;
var bitmapsArray:Array = new Array();

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void
{
if(expand)
{
bm1.alpha = 0;
for(var k:uint = 0; k < bitmapsArray.length; k++)
{
var curr:uint = bitmapsArray[k].length;

for(var l:uint = 0; l < curr; l++)
{
Tweener.addTween(bitmapsArray[k][l],
{x:20*l+10, y:33*k+10, alpha:0.5, time:3, transition:"linear"});
expand = false;
}
}
}
}

function splitBitmap(_source:BitmapData, _columns:int, _rows:int):void
{
var _bitmapWidth:int = _source.width;
var _bitmapHeight:int = _source.height;

var _onePieceWidth:Number = Math.round(_bitmapWidth / _columns);
var _onePieceHeight:Number = Math.round(_bitmapWidth / _rows);

var _copyRect:Rectangle = new Rectangle(0, 0, _onePieceWidth, _onePieceHeight);
for(var i:int = 0; i < _columns; i++)
{
var tempArray:Array = new Array();

for(var j:int = 0; j < _rows; j++)
{
var _piece:String = "piece"+String(i)+String(j);
var temp:* = [_piece];
temp = new BitmapData(_onePieceWidth, _onePieceHeight, true, 0xFF0000CC);

var newBytes:ByteArray = _source.getPixels(_copyRect);
newBytes.position = 0;
temp.setPixels(_copyRect, newBytes);

var _newBitmap:String = "newBitmap"+String(i)+String(j);
var tempBitmap:* = [_newBitmap];
tempBitmap = new Bitmap(temp);

tempBitmap.x = i * (_onePieceWidth) + bm1.x;
tempBitmap.y = j * (_onePieceHeight)+ bm1.y;
addChild(tempBitmap);

tempArray.push(tempBitmap);
}
bitmapsArray.push(tempArray);
}
expand = true;
}

splitBitmap(bmd1, 5, 3);


more examples to come.

*_*

20 May 2010

How to start with PaperVision3D

While searching for some instructions on how to start with PaperVision3D for complete idiots there were few very good and few outdated places. One very detailed set of tutorials starting with Papervision 3D Programming Tutorial written in September 2009 doesn't work with Flex 4 SDK, but requires older compiler version or changing some of the code provided.

Getting Started with PaperVision3D

Most useful tutorial I found on downloading and installing PaperVision3D came from YouTube. This 9 minutes video is walk-through of how to find and install Tortoise SVN, how to use it to download PaperVision3D files and how to start new Flex project using those files.



Video is narated by Amanda V. from Northern Kentucky University, Office of Instructional Design.

Another option is to setup Papervision3D in FlashDevelop and explore some cool PaperVision3D examples . Feel free to share a link or two with PaperVision3D Tutorials. Thanks.

*_*

17 May 2010

Adobe AIR + Flash on Android

Android platform developers have only a few days left until Google's largest developer event of the year, I/O Conference in San Francisco May 19-20. They announced 80 sessions, more than 3000 developers and over 100 demonstrations including AIR and Flash on Android.

Mobile devices developing has never been this exciting and Android 2.2 (FroYo) is the latest wanna-rule technology.


image by tomsun

*_*

07 May 2010

Enter your choice now: Adobe or Apple?

There's a war out there and the end of it is far beyond horizon. Wounded developers soldiers on both sides, waiting for next battle while Generals are drinking wine somewhere in the castle tower and looking at the battlefield plans. Off course, everyone knows that war is pointless, but ... wait, what? You don't?

o Thoughts on Flash by Steve Jobs
o On Adobe, Flash CS5 and iPhone Applications by Mike Chambers
o Is Flash Dead Yet? by Scott Schiller
o The iPad provides the ultimate browsing experience? by Lee Brimelow

Main question is why this clash happened at first place and who is target audience: consumers, businesses or developers? So, what are they saying if asked to choose between Adobe or Apple:

- consumers - I don't care, but it must be cool
- businesses - I don't care, but it must work
- developers - I do care, but I'm not 100% sure why :)

My choice? Google.

There is no choice, only toilet paper.

*_*

03 May 2010

AS3: Dynamic Bitmap Split Function

Recently I had most rewarding moments while playing around with Bitmap and BitmapData classes in ActionScript3.0 and also I must mention how this becomes more fun than really learning the language.

While reading about copying pixels from one Bitmap to another this idea fall into my mind about writing function to allow me to split any loaded or drawn image into desired number of columns and rows. Solution was quite easy actually, with a little help of ByteArray class.

Here is the function which allows you to do just that, dynamic split of any image:


function splitBitmap(_source:BitmapData, _columns:int, _rows:int):void
{
var _bitmapWidth:int = _source.width;
var _bitmapHeight:int = _source.height;

var _onePieceWidth:Number = Math.round(_bitmapWidth / _columns);
var _onePieceHeight:Number = Math.round(_bitmapWidth / _rows);

var _copyRect:Rectangle = new Rectangle(0, 0, _onePieceWidth, _onePieceHeight);
for(var i:int = 0; i < _columns; i++)
{
var tempArray:Array = new Array();

for(var j:int = 0; j < _rows; j++)
{
var _piece:String = "piece"+String(i)+String(j);
var temp:* = [_piece];
temp = new BitmapData(_onePieceWidth, _onePieceHeight, true, 0xFF0000CC);

var newBytes:ByteArray = _source.getPixels(_copyRect);
newBytes.position = 0;
temp.setPixels(_copyRect, newBytes);

var _newBitmap:String = "newBitmap"+String(i)+String(j);
var tempBitmap:* = [_newBitmap];
tempBitmap = new Bitmap(temp);

tempBitmap.x = i * (_onePieceWidth) + bm1.x;
tempBitmap.y = j * (_onePieceHeight)+ bm1.y;
addChild(tempBitmap);

tempArray.push(tempBitmap);
}
bitmapsArray.push(tempArray);
}
}


Setting tempBitmap x and y properties is optional, because I wanted to put new pieces in original place (above bm1, original Bitmap) so viewer can't see these are new

DisplayObjects. In this way transition effect is masked. You may also notice bitmapsArray, two-dimensional Array to hold all pieces in one place for later easy manipulation.

There can be some improvements to it, like limiting max number of columns and rows or adding image import with Loader class etc. but main functionality is there, working like a charm. Now, you can use this function to produce all kinds of transition effects and image manipulations. Some examples might follow in future posts.

*_*

 

template by blogger templates