Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Лупа


Этот урок научит вас, как создать лупу, чтобы просматривать извне загруженную картинку.
Создайте новый муви клип и нарисуйте вашу лупу; залейте стеклянную часть любым цветом по желанию.
alt
Выделите красный и нажмите F8, этим вы создадите новый муви клип, который мы будем использовать как маску.

После конвертирования удалите его из муви клипа лупы.

Перетащите оба муви клипа на сцену, один с инстанс именем "imgMask" и другой "magGlass".
Теперь создадим новый муви клип - контейнер нашего изображения, перетащим его на сцену и дадим ему инстанс имя "imgHolder".

Вставим это в первый фрейм:
CODE

//загружаем изображение с именем "image.jpg" в муви клип imgHolder
loadMovie('image.jpg', imgHolder);
      //прячем мышь
       Mouse.hide();

//новый муви клип - контейнер увеличенного изображения
this.createEmptyMovieClip("zoomImg", 33);

//зададим маску внутри муви клипа , чтобы увеличенное изображение было круглым
zoomImg.setMask(imgMask);

// bitmap объект для увеличения картинки
var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);

//аттачим bitmap к мувику "zoomImg"
zoomImg.attachBitmap(zoomBitmap, 5);

//мощность увеличения, увеличивая это - увеличиваем изображение больше
var magPower = 2;

//matrix объект чтобы расположить увеличенный bitmap внутри лупы
var zoomMtx = new flash.geom.Matrix();

//масштабируем изображение используя "magPower"
zoomMtx.scale(magPower, magPower);

//изменяем глубину для мувика лупы, чтобы он был сверху
magGlass.swapDepths(_root.getNextHighestDepth());

_root.onEnterFrame = function()
{

       //установим мувик лупы на положение мыши
       magGlass._x = _xmouse - 70;

       //итак мышь в середине  линзы
       magGlass._y = _ymouse - 70;

       //увеличенный мувик изображения
       zoomImg._x = magGlass._x;
       zoomImg._y = magGlass._y;

       //маска мувика
       imgMask._x = magGlass._x;
       imgMask._y = magGlass._y;

       //где рисовать увеличенное изображение
       zoomMtx.tx = -_xmouse * magPower;
       zoomMtx.ty = -_ymouse * magPower;

       //рисуем увеличенное изображение используя картинку в
       //контейнере и положение matrix.
       zoomBitmap.draw(imgHolder, zoomMtx);
}

Это работает для любой картинки, выберите другую картинку и назовите ее "image.jpg", протестируйте.
Объяснение кода
CODE

loadMovie('image.jpg', imgHolder);

Загружаем "image.jpg" в мувик "imgHolder".
CODE

       //прячем мышь
       Mouse.hide();


CODE

this.createEmptyMovieClip("zoomImg", 33);

Создаем пустой мувик для увеличенного изображения.
CODE

zoomImg.setMask(imgMask);

Зададим маску в "zoomImg"исспользуя мувик "imgMask", чтобы увеличенное изображение не перекрывало лупу.
Параметры для используемой функции:
CODE

setMask(Mask_MC);
var zoomBitmap = new flash.display.BitmapData(155, 155, false, 0xEAEAEA);

Создаем новую BitmapData с высотой и шириной 155пикселей не прозрачное и цвет заднего фона "0xEAEAEA".
CODE

new BitmapData(width, height, transparency, color);

Прозрачность и цвет - параметры.
CODE

zoomImg.attachBitmap(zoomBitmap, 5);

Аттачим "zoomBitmap" в мувик "zoomImg":

CODE

attachBitmap(bitmapData, depth);
var magPower = 2;

Мощность увеличения.
CODE

var zoomMtx = new flash.geom.Matrix();

Matrix объект для масштабирования и рисования увеличенного изображения.
CODE

zoomMtx.scale(magPower, magPower);

Установим параметры масштаба внутри matrix в "magPower"; картинка не будет еще масштабирована, нам нужно нарисовать ее, используя matrix.
CODE

scale(_x scale, _y scale);
magGlass.swapDepths(_root.getNextHighestDepth());

Положим лупу сверху .
CODE

_root.onEnterFrame = function()
{          
       magGlass._x = _xmouse - 70;
       magGlass._y = _ymouse - 70;

Спрячем мышь и установим координаты magGlass равными координатам мыши.
CODE

zoomImg._x = magGlass._x;
       zoomImg._y = magGlass._y;
       imgMask._x = magGlass._x;
       imgMask._y = magGlass._y;

Установим положение для остальной части.
CODE

zoomMtx.tx = -_xmouse * magPower;
zoomMtx.ty = -_ymouse * magPower;

Переменные "tx" и "ty" внутри matrix отвечают за расположение области рисования в картинке; мы установим эти две переменные так, чтобы увеличенное изображение было в центре лупы.
CODE

zoomBitmap.draw(imgHolder, zoomMtx);
}

Рисуем увеличенное изображение в zoomBitmap, используя функцию draw():
CODE

draw(source, matrix)

Это все!
Исходник берём здесь:
Нажмите для скачивания lupa.rar!
Название: lupa.rar
Размер: 4.79 Kb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (1)

#1 написал: INFERNAL | 3 августа 2009 12:30
     

Здесь не совсем получился такой эффект, какой должен. У меня не видно приближённого изображения картинки, когда водишь лупой, а вообще, если всё сделаете по уроку, то результат будет нормальный
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.