Преоразмеряване картинка във Flash
Публикувана от smilev на January 17 2011 14:07:25

---

---

Разширена новина

---

Тези от вас, които са преоразмерявали заредени картинки или обобщено казано — преоразмерявали някаква растерна графика в MovieClip знаят, че качеството се влошава, пикселизира се, и независимо от точността на кода нещата не се подобряват.

На помощ идва един външен за ActionScript 2.0 клас, с който ще направим "гладко" изображение. Този клас се нарича BitmapData, а конструкцията е следната:

var bmp:BitmapData = new BitmapData(width:Number, height:Number [, transparent:Boolean, fillColor:Number]);

1. Като за начало ще трябва да "извикаме" клас BitmapData тъй като той е външен, а по-късно ще ни трябва:

import flash.display.BitmapData;

След като направим това вече ще имаме достъп до този клас, както и до методите му, който ще са необходими.

2. Ще направим два празни MovieClip-a, както и един клип, който ще представлява основния Timeline. Доста удобна техника за адресиране на "основата":

var home:MovieClip = this;
var holder:MovieClip = home.createEmptyMovieClip("holder", 1);
var holder2:MovieClip = home.createEmptyMovieClip("holder2", 2);
holder2.loadMovie("picture.jpg");

home е основния Timeline, а holder1 и holder2 са двата контейнера, в които ще преоразмеряване. Единият ще бъде с обикновено преоразмеряване, затова можем веднага да заредим в него картинката (последния ред горе).

Картинката която зареждам ("picture.jpg") е голям правоъгълник, страните му са значително по-големи от 500 px, а аз ще го преоразмеря, така че по-голямата страна да е 500 пискела, а по-малката — според съотношението им.

3. Вече имаме зареждане, но дори и да тествате анимацията локално може да даде бъгове, затова обичам да правя периодични проверки:

home.onEnterFrame = function(){
if(holder2._width != 0){
delete this.onEnterFrame;

Няма да се впускам в подробни обяснения. Просто казано: когато картинката се зареди в празния MovieClip дължината му ще е по-голяма от 0. Когато това стане ще започне с действията.

var bmp:BitmapData = new BitmapData(holder2._width, holder2._height);
bmp.draw(holder2);
holder.attachBitmap(bmp,1,"auto",true);

Както и сами виждате декларираме наша си променлива, представляваща инстанция на клас BitmapData. Тъй като оперирането с нея е доста трудно (визирам прикачването и взимането на растерна графика) се налага да да използваме контейнера holder2, а и ще видите разликите много лесно. За сега ще продължим с тази конструкция на кода, но може да се експериментира в оптимизиране.

Метода draw е значително семпъл. Прикачваме към bmp съдържанието на holder2, където заредихме картинката, т.е. вече можем да се възползваме от attachBitmap.

Конструкцията на attachBitmap:

attachBitmap(bmp:flash.display.BitmapData, depth:Number [, pixelSnapping:String, smoothing:Boolean]);

Обърнете внимание на последния параметър smoothing — булева променлива, при стойност true ще предотврати пикселизирането.

4. Основната работа е свършена, затова просто ще ви покажа скрипта който използвах за преоразмеряване до 500px:

var newWidth:Number = 500;
var newHeight:Number = 500;
var $width:Number = holder._width;
var $height:Number = holder._height;
if($width > newWidth || $height > newHeight){
if($width >= $height){
var r:Number = $width / $height;
newHeight = newWidth / r;
}else{
var r:Number = $height / $width;
newWidth = newHeight / r;
}
holder._width = holder2._width = newWidth;
holder._height = holder2._height = newHeight;
holder2._x = holder._width;

Проверяваме дали една от страните е по-голяма от 500 пиксела, проверяваме коя е по-голяма и изчисляваме съотношението, на базата на което оразмеряваме по-малката страна.

5. Ще добавим и две текстови полета:

var frm:TextFormat = new TextFormat();
frm.align = "center";
frm.font = "Verdana";
frm.size = 10;
var text1:TextField = home.createTextField("text1",3,holder._x,holder._height,holder._width,17);
var text2:TextField = home.createTextField("text2",4,holder2._x,holder._height,holder._width,17);
text1.text = "Using BitmapData class";
text2.text = "Usual resizing";
text1.setTextFormat(frm);
text2.setTextFormat(frm);
}
}
}

И това е всичко.