2007年8月9日 星期四

Montage 蒙太奇 相片瀏覽系統

製作 蒙太奇 效果的相片瀏覽系統,不過,實際上,很難決定用哪一個 像素值 來代表這一張相片,所以就會變成用一堆縮圖組合出來的蒙太奇效果,會很亂七八糟的。

最後,只好聽從 Maso 的建議,在每張小相片上面,加一個有顏色的半透明色塊,這樣比較有感覺!















import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
//----------------------------------取得WEB216安全色的BitmapData
function get256bd(srcBD:BitmapData):BitmapData {
var safeColorArray:Array = [0x00, 0x33, 0x66, 0x99, 0xCC, 0xFF];
var redArray:Array = new Array(256);
var greenArray:Array = new Array(256);
var blueArray:Array = new Array(256);
for (var i:Number = 0; i<256; i++) {
var c:Number = i;
for (j=0; j<safeColorArray.length; j++) {
if (c<=safeColorArray[j]) {
c = safeColorArray[j];
break;
}
}
redArray[i] = c << 16;
greenArray[i] = c << 8;
blueArray[i] = c;
}
var rect:Rectangle = new Rectangle(0, 0, srcBD.width, srcBD.height);
var pt:Point = new Point(0, 0);
var bd = new BitmapData(srcBD.width, srcBD.height, true, 0x00000000);
bd.paletteMap(srcBD, rect, pt, redArray, greenArray, blueArray);
return bd;
}
//----------------------------------由指定範圍取出一個像素值
function getPixelByRect(sourceBD:BitmapData, rect:Rectangle):Number {
var rectBD:BitmapData = new BitmapData(rect.width, rect.height, true, 0x00000000);
rectBD.copyPixels(sourceBD, rect, new Point(0, 0));
var bd1Pixel:BitmapData = new BitmapData(30, 30, true, 0x00000000);
var matrix:Matrix = new Matrix();
matrix.scale(30/rect.width, 30/rect.height);
bd1Pixel.draw(rectBD, matrix);
var ary:Array = new Array();
for (var i = 0; i<bd1Pixel.width; i++) {
for (var j = 0; j<bd1Pixel.height; j++) {
var color:Number = bd1Pixel.getPixel32(i, j);
var isFind:Boolean = false;
for (var k = 0; k<ary.length; k++) {
if (ary[k].colorNum == color) {
ary[k].count++;
isFind = true;
break;
}
}
if (!isFind) {
ary.push({colorNum:color, count:1});
//trace(ary[ary.length-1].colorNum)
}
}
}
ary.sortOn("count", Array.DESCENDING | Array.NUMERIC);
return ary[0].colorNum;
}
//----------------------------------載入圖檔
var _mcl:MovieClipLoader = new MovieClipLoader();
var _mclListener:Object = {};
_mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc.oraWidth = target_mc._width;
target_mc.oraHeight = target_mc._height;
target_mc.swapDepths(_root.getNextHighestDepth());
target_mc._x = this.rect.x;
target_mc._y = this.rect.y;
target_mc._width = this.rect.width;
target_mc._height = this.rect.height;
target_mc.onEnterFrame = function() {
this._x += ((0-this._x)*0.4);
this._y += ((0-this._y)*0.4);
this._width += ((this.oraWidth-this._width)*0.4);
this._height += ((this.oraHeight-this._height)*0.4);
if (Math.abs(0-this._x)<10) {
this._x = 0;
}
if (Math.abs(0-this._y)<10) {
this._y = 0;
}
if (Math.abs(this.oraWidth-this._width)<10) {
this._width = this.oraWidth;
}
if (Math.abs(this.oraHeight-this._height)<10) {
this._height = this.oraHeight;
}
if (this._x == 0 && this._y == 0 && this._width == this.oraWidth && this._height == this.oraHeight) {
startLoadPixelImgs();
this.onEnterFrame = null;
delete this.onEnterFrame;
}
};
};
_mcl.addListener(_mclListener);
var _mcl2:MovieClipLoader = new MovieClipLoader();
var _mclListener2:Object = {};
_mclListener2.onLoadInit = function(target_mc:MovieClip) {
//trace(target_mc._x + ", " + target_mc._y + ", " + target_mc._width + ", " + target_mc._height);
target_mc._width = this.cubeWidth;
target_mc._height = this.cubeHeight;
target_mc.onRelease = pixelMC_onRelease;
};
_mcl2.addListener(_mclListener2);
var oraImg_mc:MovieClip = _root.createEmptyMovieClip("oraImg_mc", _root.getNextHighestDepth());
var pixelImg_mc:MovieClip = _root.createEmptyMovieClip("pixelImg_mc", _root.getNextHighestDepth());
function loadOraImg(path:String, rect:Rectangle) {
_mclListener.rect = rect;
_mcl.loadClip(path, oraImg_mc);
}
function startLoadPixelImgs() {
//把縮圖容器清空,並移到最上面
pixelImg_mc.removeMovieClip();
pixelImg_mc = null;
pixelImg_mc = _root.createEmptyMovieClip("pixelImg_mc", _root.getNextHighestDepth());
pixelImg_mc.showPixelAll = function() {
var bd2:BitmapData = new BitmapData(oraImg_mc._width, oraImg_mc._height, true, 0x00000000);
for (var i:Number = 0; i<_mclListener2.cols; i++) {
for (var j:Number = 0; j<_mclListener2.rows; j++) {
var rect:Rectangle = new Rectangle(_mclListener2.cubeWidth*i, _mclListener2.cubeHeight*j, _mclListener2.cubeWidth, _mclListener2.cubeHeight);
//由指定範圍取出一個像素值
var color:Number = getPixelByRect(_mclListener2.bd, rect);
bd2.fillRect(rect, color);
}
}
this.bg2_mc._alpha = 0;
this.bg2_mc.attachBitmap(bd2, 200);
this.bg2_mc.onEnterFrame = function() {
if (this._alpha<100) {
this._alpha += 10;
} else {
this._alpha = 100;
this.onEnterFrame = null;
_root.onEnterFrame = onEnterFrameLoadPixel;
}
};
};
var bg_mc:MovieClip = pixelImg_mc.createEmptyMovieClip("bg_mc", 2);
var bg2_mc:MovieClip = pixelImg_mc.createEmptyMovieClip("bg2_mc", 3);
var pixelAll_mc:MovieClip = pixelImg_mc.createEmptyMovieClip("pixelAll_mc", 4);
var bd:BitmapData = new BitmapData(oraImg_mc._width, oraImg_mc._height, true, 0x00000000);
bd.draw(oraImg_mc);
//取得WEB216安全色的BitmapData
bd = get256bd(bd);
_mclListener2.bd = bd;
_mclListener2.cols = 25;
_mclListener2.rows = 25;
_mclListener2.cubeWidth = oraImg_mc._width/_mclListener2.cols;
_mclListener2.cubeHeight = oraImg_mc._height/_mclListener2.rows;
_mclListener2.i = 0;
_mclListener2.j = 0;
//繪製出來
bg_mc._alpha = 0;
bg_mc.attachBitmap(bd, 200);
bg_mc.onEnterFrame = function() {
if (this._alpha<100) {
this._alpha += 10;
} else {
this._alpha = 100;
this.onEnterFrame = null;
this._parent.showPixelAll();
}
};
}
function onEnterFrameLoadPixel() {
_mclListener2.j++;
if (_mclListener2.j<_mclListener2.rows) {
loadPixelImg();
} else {
_mclListener2.j = 0;
_mclListener2.i++;
if (_mclListener2.i<_mclListener2.cols) {
loadPixelImg();
} else {
_mclListener2.i = 0;
//結束
this.onEnterFrame = null;
}
}
}
function loadPixelImg() {
var rect:Rectangle = new Rectangle(_mclListener2.cubeWidth*_mclListener2.i, _mclListener2.cubeHeight*_mclListener2.j, _mclListener2.cubeWidth, _mclListener2.cubeHeight);
//由指定範圍取出一個像素值
var color:Number = getPixelByRect(_mclListener2.bd, rect);
var mc:MovieClip = pixelImg_mc.pixelAll_mc.createEmptyMovieClip("pixel_"+_mclListener2.i+"_"+_mclListener2.j, _mclListener2.i*10000+_mclListener2.j);
mc._x = _mclListener2.cubeWidth*_mclListener2.i;
mc._y = _mclListener2.cubeHeight*_mclListener2.j;
var img_mc:MovieClip = mc.createEmptyMovieClip("img_mc", 2);
var mask_mc:MovieClip = mc.createEmptyMovieClip("mask_mc", 3);
//作一個色塊遮罩,比較有感覺
mask_mc.lineStyle(1, 0xFFFFFF, 50);
mask_mc.beginFill(color, 70);
mask_mc.lineTo(_mclListener2.cubeWidth, 0);
mask_mc.lineTo(_mclListener2.cubeWidth, _mclListener2.cubeHeight);
mask_mc.lineTo(0, _mclListener2.cubeHeight);
mask_mc.lineTo(0, 0);
mask_mc.endFill();
//亂數決定一個檔案
if (paletteMapObj["{"+color+"}"] != undefined) {
var colorArray:Array = paletteMapObj["{"+color+"}"];
var path:String = colorArray[Math.floor(Math.random()*colorArray.length)];
mc.path = path;
_mcl2.loadClip("images40x40/"+path, img_mc);
} else {
trace("沒有對應的檔案");
}
}
function pixelMC_onRelease() {
_root.onEnterFrame = null;
loadOraImg("images/"+this._parent.path, new Rectangle(this._parent._x, this._parent._y, this._width, this._height));
}
var paletteMapObj:Object = new Object();
function loadImageXML() {
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function(success:Boolean) {
if (success) {
var photos:Array = this.firstChild.childNodes;
for (var i = 0; i<photos.length; i++) {
var fileName:String = photos[i].attributes["fileName"];
var color:String = photos[i].attributes["color"];
if (paletteMapObj["{"+color+"}"] == undefined) {
paletteMapObj["{"+color+"}"] = [fileName];
} else {
paletteMapObj["{"+color+"}"].push(fileName);
}
}
loadOraImg("images/photo (1).JPG", new Rectangle(0, 0, 0, 0));
}
};
xml.load("images/images.xml");
}
loadImageXML();

沒有留言: