Як ви пам’ятаєте, кількома уроками раніше ми навчалися додавати найпростішу текстову анімацію у банери, застосовуючи при цьому ефекти motion tween. У сьогоднішньому уроці ми також будемо працювати з текстом, який можна додати у банери, але спробуємо створити дещо складніший ефект – змусимо пробігати по тексту відблиски.

Я майже впевнений, що раніше вам неодноразово доводилося зустрічатися з цим ефектом, оскільки він дуже гарно виглядає і робить банер більш пишним. Дизайнери настільки закохані у цей прийом, що, складається враження, готові використовувати його всюди, де це тільки можливо.

Шар маска (mask layer)

Для того, щоб засвоїти цей урок, нам знадобиться вивчити принципи функціонування нового поняття – маскувального шару у Flash. Таким чином ми вбиваємо двох зайців – навчаємося створювати текст з анімованим відблиском (який «пробігатиме» по всій довжині тексту) і знайомимося із шаром-маскою (mask layer) (який ще неодноразово знадобиться нам у наступних уроках).

Читати далі про створення анімованих відблисків у Flash…

Пам’ятаєте, у одній із попередніх статей ми навчалися малювати м’ячик, використовуючи векторні інструменти Flash. Сьогодні ми підемо трішки далі і спробуємо змусити цей м’ячик застрибати.

Для роботи ви можете використати уже готовий Flash-файл з намальованим м’ячиком, або ж, користуючись покроковою інструкцією з попередньої статті, намалювати м’ячик по-новому.

1. Перше, що ми зробимо – це відконвертуємо наш м’ячик в символ (Movie Clip) і трішки його зменшимо, щоб зручніше було працювати. Розміри сцени збільшимо, щоб у м’ячика було місце для стрибків. Тип Movie Clip вибрано для того, щоб вкласти анімацію у сам м’ячик (він не лише стрибатиме, але й буде обертатися).

Читати далі про анімацію стрибаючого м’ячика у флеш…

Початкову інформацію про створення простих банерів у флеш, а зокрема про те, як створити основу з границями і вставити лінк, читайте у попередній статті про створення банерів. Сьогоднішня публікація, по-суті, є її продовженням і сьогодні ми навчимося додавати анімацію в банери.

Передусім нам потрібна заготовка, з якою ми закінчили попередній урок. Це основа банеру, залита однотонним фоном і обмежена границями, окрім того, на ній присутнє активне посилання. Все дуже просто:

Тепер спробуємо додати в цей банер трохи життя. Для цього ми скористаємося функціями motion tween, детально описаними у одному з попередніх уроків. Для простоти я обрав текстову анімацію (тобто працювати ми будемо з текстом).

1. Перш за все потрібно вигадати короткий салоган, який з’являтиметься на банері. Можливо – кілька влучних фраз або словосполучень, які можна умовно розділити на логічні одиниці. Я вирішив обмежитись трьома фразами, які почергово з’являтимуться на банері. «Анімація, ігри, банери -> Flash для новачків -> Просто, доступно і абсолютно безкоштовно».

Читати далі про анімацію простих банерів у Flash…

На відміну від більшості графічних форматів, флеш дає дизайнерам змогу по-справжньому розкрити свій потенціал і звільнити креативність. Жоден статичний банер чи навіть анімований покадровий Gif не має таких можливостей і гнучкості, як флеш-банери. Закономірно, що для дизайну банерів більшість розробників обирають саме цей формат.

Сьогоднішній урок, по суті – буде першим кроком до створення банерів у флеші. Попри всю свою простоту, він включатиме три важливі аспекти, які притаманні без перебільшення кожному флеш банеру:

1. Створення основи (сцени, на якій розгортатиметься вся дія банері)
2. Лінкування (прив’язування банера до того чи іншого сайту, на який він посилатиметься)
3. Створення анімаційного ряду (того, що побачить відвідувач і що спонукатиме його перейти за лінком)

Створення основи: тло та поля

Створення основи – це, мабуть, найпростіший, і при цьому – дуже важливий крок при створенні банера. Перш за все потрібно визначитись з його розмірами. Я обрав один з найбільш стандартних форматів: 468 x 60.

Читати далі про створення найпростішого банера у Flash…

Як і обіцяв у попередній статті про роботу з інструментом перо (pen tool), викладаю скрінкаст. У цьому короткому відео ви побачите, яким чином з допомогою пера можна “обмалювати” (створити векторний контур) “верхньої” частини ялинки.

Як я вже згадував: “перо” - це надзвичайно потужний інструмент для роботи з векторною графікою, і у випадку, якщо ви захочете самостійно створювати “мультяшну” анімацію - то майже напевне будете змушені засвоїти принципи його роботи. Вся справа в тому, що керуючи направляючими векторами можна досягнути практично будь-якого викривлення контурів.

Але, менше слів - дивіться відео:

Оскільки це в принципі новий для мене формат, буду надзвичайно вдячний за критику та побажання того, що можна було б зробити краще. Думаю, в майбутньому час від часу робитиму такі короткі відеоуроки, в яких “показуватиму” те, що складно пояснити на словах. Все інше по можливості залишатиметься у текстовому форматі, оскільки хто б мені що не говорив - а текст - є текст. І працювати з ним - зручніше!

UPD: ще цікавить ваша думка про якість відео! Може бути? Чи потрібно робити більш якісні відеофайли, жертвуючи при цьому трафіком (оскільки розмір відео у мегабайтах закономірно буде більшим).

У попередньому уроці ми дізналися про загальні принципи функціонування інструментів перо (pen) та додаткового вибору (subselection tool). А сьогодні ми спробуємо більш детально розібратися з функціонуванням кривих Безьє з допомогою інструменту перо (pen). А щоб урок не видався нудним, спробуємо провести детальне практичне заняття, в якому намалюємо новорічну ялинку (ну то й що, що Новий рік вже закінчився).

За основу, яку будемо «обмальовувати», візьмемо ось таку привабливу ялиночку, яка складається із простих контурів. Можете скопіювати зображення, щоб і собі попрактикуватися з ним.

Сьогодні ми спробуємо не лише досконало повторити її у флеші, але й розфарбуємо. Отож, до справи:

1. Імпортуємо в бібліотеку (File -> Import -> Import to Library) зображення ялиночки і відразу ж розміщуємо його на сцені (не забудьте підігнати розмір сцени до розміру зображення). Шар, на якому буде розміщуватися це зображення виступатиме фоном. В наступних кроках ми будемо повторювати зображення. Тому, щоб випадково не «пошкодити» цей шар, замкнемо його у шкалі часу (timeline). Натисніть на замок



Читати далі про малювання з допомогою інструмента перо (pen)…

Сьогодні я спробую розпочати мініцикл публікацій про малювання у флеші з допомогою інструмента Перо (Pen). Для людей, яким ніколи раніше не доводилося працювати з цим інструментом він може видатися дещо складним і навіть незрозумілим. Проте, вже у найближчих уроках я покажу, наскільки корисним може видатися цей інструмент на практиці. Сьогодні ж хочу розповісти про загальні принципи функціонування кривих Безьє.

Отже, можливість безпосереднього керування кривими Безьє з’явилася ще у п’ятій версії Flash. Для роботи з ними у програмі виділено відразу два інструменти. Це вже згадуваний нами інструмент перо (pen), а також інструмент часткового вибору (subselection tool).

Якщо раніше вам ніколи не доводилося задавати складну кривизну лінії, то, можливо, на перших порах ці інструменти вам не знадобляться. Але рано чи пізно (а особливо, коли ви перейдете до малювання складних контурів для анімації) вас зацікавить створення кривих саме з допомогою цих інструментів.

Читати далі про роботу інструментів перо та часткового вибору у Flash…