New Bitmap Data Class

Уровень: Средний (Intermediate)
Необходимо: Flash MX 2004 и Flash 8 player
Необходимые знания: Достаточно состояния прочитать этот туториал
Файлы для загрузки: stars.zip и bmap.zip
Online-пример: Stars
Оригинал туториала: http://www.nwebb.co.uk/nw_htmlsite/index.php?page=browse_tutorial&tutorial=bitmapdata1&part=1

The BitmapData Class

Будем считать, что это пре-туториал, так что поправки в него еще возможно будут вноситься – следите за обновлениями… :)

Чтоб разобраться с тем, как публиковать ролики в формате Flash 8 в IDE Flash 7, пожалуйста читайте другой мой туториал (еще не переведен).

Ну и что ж это за такой BitmapData class?

flash.display.BitmapData позволит вам осуществлять попиксельный контроль растровых изображений. Что это значит? Ну, для примера скажу следующее:

- Вы можете копировать и вставлять изображения, части изображения или отдельные пиксели;
- Идентифицировать и/или изменять цвет каждого пикселя в отдельности или группы пикселей;
- Добавлять один или несколько новых Фильров.
- Создавать random-пиксели (типа «шум» или т.п.)
- и еще много чего интересного.
Ах, да… BitmapData class может использоваться и при работе с видео.

Создание примера BitmapData class

Итак, мы собирается создать пример класса вот с такими вот характеристиками:

bmap = new flash.display.BitmapData(100,100, false, 0);

Сам же BitmapData class будет иметь 4 параметра:

- Ширину (Width) (число, в пикселях)
- Высоту (Height) (число, в пикселях)
- Значение Alpha-канала (boolean)
- Дефолтовый цвет подложки (background color) (число)

Что собственно и показано в строке, выделенной полужирным чуть выше.
Лана, итак, как вы можете видеть, я создал прямоугольник 100 на 100 пикселей, не содержащий Alpha-канала (для тех, кто в танке – прозрачности попросту говоря) и с подложкой черного цвета (в данном случае это число «0»).

В общем, товарищи и собраться, я лично предпочитаю называть пример BitmapData class, который мы создали, как «BMD».

Замечание: В настоящий момент времени я точно не уверен на счет прозрачности (альфа-канала) в отношении BMD, а точнее прозрачности подложки – т.е. прозрачность добавляется для отдельного класса BMD или добавляет прозрачности всем пикселям изображения…

Copy & Paste

Возможно это лучший пример для начала работы с базовыми операциями типа копирования/вставки. Короче, пример позволит вам свободно в дальнейшем копировать и вставлять нужные вам пиксели из изображения в ваш BMD. Ну например, в Flash MX 2004 и ниже, было невозможно загрузить стороннее изображение в мувик, а затем сделать дубликат мувика и увидеть это самое стороннее изображении. Каждое стороннее изображение должно было перезагружено, если вы хотели увидеть его в копиях. Ну и это еще не все…
Конечно мы могли манипулировать изображением, которое было импортировано. Но в данном случае, наилегчайшим путем для начала было бы использовать импортированное изображение в первом экземпляре.
Итак, качаем первый пример (bmap.zip) и быстренько взглянем на предстоящие процедуры.

Что мы имеем. А имеем мы три объекта, специально предназначенных для операций «копирование и вставка»:
- Картинка;
- Уже созданный BMD;
- мувик.

А мувик имеет две опции:
- Точное определение параметров создаваемого клипа (ширина и высота отличные от нуля);
- Мувик был создан при помощи createEmptyMovieClip

Ну вот, в первом нашем рабочем примере мувик был создан в ручную.

Example 1:

Я тут уже разместил два MovieClips на главную сцену.

Первый MovieClip содержит картинку, размеры которой 100 на 100 пикселей.
Второй MovieClip содержит оранжевый прямоугольник, также 100 на 100 пикселей.

Итак, чтоб создать копию нашего изображения мы делаем следующее:

bmap = new flash.display.BitmapData(100,100, false, 0);
bmap.draw(source);
dest.attachBitmap(bmap, 1);

Первая строка создает наш BMD и делает его размером с нашу картинку. Вторая строчка копирует наше изображение в наш BMD. Ну и наконец, теперь мы можем увидеть инфу, которую мы скопировали в наш BMD. Правда увидеть содержание нашего BMD вы не сможете до тех пор, пока не разместите все это барахло в MovieClip, а для этого используется следующий синтаксис:

destinationMC.attachBitmap(someBMDInstance, depth);

Замечание: Существует 4 возможных параметра, используемых в attachBitmap. Это строки ("auto", "true" or "false") и булевые значения. Так что при написании кода, убеждайтесь в том, что вы все верно пишете… Вообще, это не имело отношения к нашему примеру, но было сказано на будущее так сказать…

Лана, вернемся к нашим баранам.
(тут было некоторое отступление автора, в сущности не имеющее отношения к делу, поэтому я их опустил)
Итак, BMD у нас тут идет как «дочка» мувика. Это означает, что контент, превышающий размеры существующего контента размер клипа будет увеличивать размеры клипа, ну и соответственно будет увеличиваться и размер BMD.
Примите это как данность.



Source contents: 100*100px (mc scaled: 100%)
Destination contents: 100*100px (mc scaled 100%)
BMD: 100*100px



Source contents: 100*100px (mc scaled: 100%)
Destination contents: 50*50px (mc scaled 100%)
BMD: 100*100px

Заметьте, что контент клипа составляет половину от размера изображения. Если же клип будет меньше чем BMD, то клип будет иметь размер BMD.



Source contents: 100*100px (mc scaled: 100%)
Destination contents: 100*100px (but mc scaled down by 50% to be 50*50px)
BMD: 100*100px

Тут, размер клипа соответствует актуальному размеру контенту BMD, но сам клип был уменьшен.



Source contents: 100*100px (mc scaled: 100%)
Destination contents: 50*50px (mc scaled up to 100*100px)
BMD: 100*100px

А тут, BMD больше чем контент клипа и получется, что клик 100 на 100 пикселей становится меньше чем 50 на 50 пикселей.




Так вот, если BMD будет меньше чем клип, только часть изображения будет отображена!



Ну и наконец, если BMD будет больше актуального размера изображения, то картинка будет отображаться полностью. Тогда вы и не увидите цветной подложки.
Ну вот, надеюсь, что вам стало немного понятно.

Screen-Shooting Stars

Для тех кто дочитал до сюда, я напомню, что мы тут до этого говорили про операции копирования/вставки. :)

Flash-плеер традиционно обрабатывает тихо и медлительно большие графические передвижения, но теперь все изменилось! Теперь вы можете как я говорил ранее, манипулировать пикселями и добавлять эффекты.
Что на самом деле это значит? Это можно обозначить одним коротким «ooooh!» … :)
Думаю, что эффективность будет вам доказана, когда по центру вашего экрана будут падать звездочки…

Для начала мы создадим одну-единственную звезду в мувике. Потом вы напишите сами код, по примеру вышепоказанных примеров для дублирования, чтобы этих звездочек стало много… или очень много – это на ваше усмотрение, изменяя при этом пропорции и размеры и прозрачность… ну чтоб веселее было.

Теперь представьте, как все это будет в конечном итоге выглядеть! :) И я просто уверен, что увлечены вы этим будет неделю или больше! :)

Star 1 Example:

Качайте stars.zip и глядите на код.
Пока что игнорируйте весь слой «filters» - он вам пока не пригодится.
Как вы можете видеть, есть слой с названием «as».
Я добавил вот такой вот код в onEnterFrame:

destMC.onEnterFrame = function()
{
drawStar();
capture();
drawToScreen();
}

Тут мы рисуем звездочку, делам скрин и помещаем этот скрин в мувик.

А это код для рисования звезды:
function drawStar()
{
//attach star at depth 1
var star = sourceMC.attachMovie("star", "star", 1);
glow.color = Math.floor(Math.random()*0xFFFFFF);
star.filters = [glow,bevel];
star._x = getRandomInt(w, (star._width/2));
star._y = getRandomInt(h, (star._height/2));
}

drawStar:

Вторая строчка кода изменяет цвет поблескивания (вы можете найти код поблескивания на слое «filters» - типа сюрпрайз для вас) :) Ну и все что мы делаем, так это используем функцию Math.random() для создания разных цветов в пределах от черного до белого… :)

Затем мы добавляем фильтр в клик.
Ну и наконец мы используем функцию getRandomInt(), где мы выставляем значения Х и У в рамках которых звезды будут проявлять активность... :)
Следующая функция capture() выглядящая очень просто:

function capture()
{
destMC._visible = false;
screenShot.draw(sourceMC);
destMC._visible = true;
}

Тут мы делаем наш клип невидимым. Зачем? Ну… начиная со второй итерации цикла, наш клип будет иметь скриншот нашей предыдущей звезды. А мы просто возьмем другой скрин, и спрячем предыдущий…
Следующая функция занимается тем, что организовывает полученные данные, ведь нам не зачем делать скрин скрина, иначе бы слои с нашими звездами не работали. На будущее помните, что при использовании фильтра поблескивания (glow) – звездочки выглядят отлично, но поблескивание вокруг звезд начинает выглядеть все больше и больше… что не радует конечно… Фактически, ваши эксперименты с эффектом поблескивания могут привести к ошибке, наподобие этой:





Ну ладно, закончим с захватом изображения, и и возьмем нужный нам скриншот, и сделаем наш мувик опять видимым.

drawToScreen:

function drawToScreen()
{
destMC.attachBitmap(screenShot, 1);
}

Собственно щаз мы приаттачили наш скриншот к мувику.
Ну собственно и все… вот весь код – тестируйте его в 8-м плеере – все должно быть очень красиво – красивые звезды, разного цвета, поблескивания и с разной скоростью движения.

Beyond The Stars

Если вы желаете очистить контент вашего BMD, вы можете использовать функцию fillRect(rectangle, color).

Enjoy :)