Ефект лінзи, як зробити ефект лінзи, анімація лупи, ефект збільшувального скла

Як зробити ефект лінзи.

Сьогодні ми розглянемо ще один варіант, як зробити ефект лінзи у флеш за допомогою невеликого коду 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", щоб відкрити вікно "Дія", де вводимо наступний код:

На цьому ми завершимо цей урок ефекту лінзи, тепер можна протестувати, що у нас вийшло: "Управління -> Тестувати ролик".

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