Как сделать фото с эффектом анимации

Как сделать фото с эффектом анимации

 

 

 

Сегодня мы рассмотрим еще один вариант, как сделать эффект линзы во флэш с помощью небольшого кода Action Script. На сайте уже есть упрощенный пример, как сделать эффект лупы, но в том варианте анимированная лупа выглядела просто, как плоская область, где изображение показанно увеличенным, в этом же уроке будет рассмотрен пример с эффектом выпуклой линзы, и создастся реалистичный эффект увеличительного стекла.

 

Для данного урока я использовал программу Adobe Flash CS5 с использованием ActionScript 3.0.

 

1 Во-первых создайте новый документ с необходимыми параметрами и выбором версии ActionScript 3.0.

 

 

 

2 Далее импортируйте изображение в библиотеку программы, к которому будет применяться анимация линзы и изображение рамки вокруг линзы с эффектом увеличительного стекла (рамку можно сделать в PhotoShop) . Изображение, используемое в качестве фона лучше выбрать более большего размера, чем сцена флэшки, так как при эффекте увеличительного стекла оно будет более четко отображаться (я использовал картинку для увеличения с размерами 1024х768).

 

3 Теперь переименовываем слой в "Фон" и находясь на нем перетаскиваем из библиотеки на сцену изображение для увеличения, уменьшаем его размер по вертикали и горизонтали на 50% и выставляем его по центру с небольшим запасом пустого пространства по краям.

 

 

 

 

4 Создаем новый слой и называем его "Линза". Находясь на этом слое рисуем два квадрата размерами 100х100 пикселей и устанавливаем первому квадрату заливку с вертикальным градиентом от красного к черному цвету, а второму квадрату задаем заливку с горизонтальным крадиентом от зеленого к черному цвету.

 

 

5 Затем выбираем красный квадрат, преобразовываем его в "Фрагмент ролика" и называем его "redMap", потом выбираем зеленый квадрат, также преобразуем его в "Фрагмент ролика" и называем его "greenMap".

 

 

 

6 Теперь выбирем "Фрагмент ролика" "greenMap" и в панели "Свойства-->Отображение" выбираем "Осветление".

 

 

7 Затем совместите оба ролика (над роликом "redMap" поместите ролик "greenMap", совмещение должно быть точным).

 

 

 

8 Когда два ролика совмещены друг с другом нам надо сделать из них единое целое, поэтому кликаем по названию слоя "Линза", чтобы выбрать сразу два ролика и преобразуем их в "Фрагмент ролика" под названием "colorMap" и пока созданный ролик еще выбран в панели "Свойства" присваиваем ему уникальное имя "colorMap_mc".

 

 

 

9 Теперь создаем слой "Рамка" и находясь на нем перетаскиваем из библиотеки на сцену изображение рамки, преобразуем его в "Фрагмент ролика" под названием "lens" и помещаем его над роликом "colorMap" (точное положение рамки лупы будет задано с помощью кода ActionScript) и когда ролик "lens" все еще выбран в панели "Свойства" задаем ему уникальное имя "lens_mc".

 

 

 

 

10 Далее создаем слой "ActionScript", выбираем его первый кадр и нажимаем кнопку "F9", чтобы открыть окно "Действие", где вводим следующий код:

 

// Прячем курсор мыши Mouse.hide(); var dPoint:Point = new Point(0, 0); var dMap:BitmapData = new BitmapData(colorMap_mc.width, colorMap_mc.height, true, 0x808080) dMap.draw(colorMap_mc) removeChild(colorMap_mc) var dFilter:DisplacementMapFilter = new DisplacementMapFilter (); // Устанавливаем коэффициент увеличения изображения dFilter.scaleX = 50 dFilter.scaleY = 50 dFilter.componentX = 1 dFilter.componentY = 2 dFilter.mode = "color" dFilter.color = 0x000000 dFilter.alpha = 0 dFilter.mapPoint = dPoint dFilter.mapBitmap = dMap Image_mc.filters = [dFilter] Image_mc.addEventListener(Event.ENTER_FRAME, onFrame) function onFrame(e:Event){ dPoint.x += ((mouseX-colorMap_mc.width/2)-dPoint.x)0.3 dPoint.y += ((mouseY-colorMap_mc.height/2)-dPoint.y)0.3 // Рамка над линзой всегда будет находится над линзой lens_mc.x = dPoint.x-0 lens_mc.y = dPoint.y-0 dFilter.mapPoint = dPoint Image_mc.filters = [dFilter] }

 

На этом мы завершим данный урок эффекта линзы, теперь можно протестировать, что у нас получилось: "Управление-->Тестировать ролик".

 

 

Материал был взят из зарубежного источника code.tutsplus.com исключительно в ознакомительных целях.

 

Похожие уроки:

 

Эффект лупы

 

 


Как сделать фото с эффектом анимации

Похожие записи:



Как сделать запись в трудовой об увольнении по ликвидации

Поделки из ракушек материалов

Горнолыжный акбулак схема проезда