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

Застосування покадрової анімації також збільшує розмір підсумкового відеофайлу, оскільки вага має кожен кадр. У програмі Macromedia Flash Professional 8 кожен кадр, що містить унікальне зображення, називається ключовим кадром. Для створення покадрової анімації потрібно намалювати унікальне зображення в кожному кадрі, і таким чином кожен кадр стає ключовим.

Додавання ключових кадрів у Macromedia Flash Professional

Для того щоб додати ключовий кадр, виділіть кадр, який буде ключовим, і виберіть у меню Insert - Timeline - Keyframe . Можна також для створення ключового кадру натиснути на потрібному кадрі правою клавішею миші, і вибрати команду Insert Keyframe .

Зверніть увагу: під час створення нового документа перший кадр є ключовим у будь-якому випадку. А ось решту ключових кадрів потрібно створювати.

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

Ключовими кадрами можна зробити не всі кадри. Допустимо, Ви зробили ключовими кадри 1, 5, 6, 7 тощо. Зображення, яке Ви створите в кадрі 1, залишатиметься видимим, поки не дійде черга до кадру 5. Таким чином Ви збільшуєте тривалість програвання першого кадру в п'ять разів.

Створення покадрової анімації

1. Зробіть зображення у першому кадрі.
2. Виберіть кадр, з якого розпочнеться анімація. Зробіть його ключовим за допомогою меню Insert - Timeline - Keyframe , або за допомогою кліка правою клавішею миші Insert Keyframe .
3. Змініть зображення у новому ключовому кадрі.
4. Продовжуйте додавати нові ключові кадри та змінювати їх вміст, доки анімація не буде готова.
5. Протестуйте вашу покадрову анімацію, натиснувши Enterабо вибравши в меню Controle - Play .

Копіювання зображень під час створення покадрової анімації

Для створення зображень у ключовому кадріможе виникнути потреба копіювати зображення, яке є в іншому кадрі. Для цього виділіть кадр, зображення якого копіюватимете, і виберіть у меню Edit - Select All, або натисніть клавіші Ctrl+A. Все зображення стане виділеним. Після цього копіюєте зображення за допомогою меню Edit - Copy (або Ctrl+C), потім виділяєте ключовий кадр, в який Ви копіюватимете зображення, і вибираєте меню Edit - Paste in Place (або Ctrl+Shift+V). Зображення буде вставлено у новий ключовий кадр, і Вам залишиться лише його редагувати.

Ще простіше скопіювати сам ключовий кадр і вставити його в інше місце на часовій стрічці. Для цього натискаєте на кадрі, який Ви хочете скопіювати, правою клавішею миші та вибираєте Copy Frame. Натискаєте правою клавішею миші на кадр, замість якого хочете поставити скопійований кадр, і вибираєте Paste Frame. Кадр буде скопійовано.

Робота з кадрами у програмі Macromedia Flash

Під час створення покадрової анімації Вам доведеться працювати з кадрами: додавати ключові кадри, видаляти зайві ключові кадри, вставляти та видаляти звичайні кадри. Все це робиться або через меню Edit - Timelineабо через клік правою клавішею миші. Клікнувши правою кнопкою миші на кадрі, Ви можете:

• Insert Frame- Вставити кадр;
• Insert Keyframe- Вставити ключовий кадр;
• Remote Frames- Видалити кадри (один або кілька). Якщо Ви виділите одразу кілька кадрів за допомогою переміщення по них мишкою з натиснутою лівою клавішею, Ви їх відразу можете видалити.
• Insert Blank Keyframe- Вставити порожній ключовий кадр, зображення в якому не повторюватиме зображення попереднього кадру;
• Clear Keyframe— видалити зображення ключового кадру, при цьому він перестане бути ключовим.
• Clear Frames— Видалення зображення кадрів (одного або кількох). Якщо видалити зображення ключового кадру, він стане порожнім ключовим кадром.

Створюємо анімацію у програмі Macromedia Flash

Зробіть такий, або схожий ролик:

та збережіть його за допомогою меню File - Save as, у форматі .fla .

Як підказка можете подивитися зображення тимчасової стрічки, яка в мене вийшла.

Використовуйте під час створення Вашої покадрової анімації інструмент Text .

Інструмент Text

Використовуйте цей інструмент для написання тексту. Для його активації натисніть на іконку із зображенням літери А. Пропишіть текст, задайте його властивості в панелі властивостей, якщо потрібно, пересуньте межі, щоб він весь помістився, а потім, за необхідності, за допомогою інструмента Free Transformзмініть його розміри.

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

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

Тренажер “Іван-царевич та Василиса Прекрасна” призначений для відпрацювання навичок знаходження точки на координатній площині за заданими координатами. У разі координати явно не задані. Їх потрібно знайти, порахувавши значення виразу. Таким чином, цей тренажер допомагає також розвитку обчислювальних навичок. Суть завдання полягає в наступному: учень, обчисливши координати точки, повинен перетягнути до цієї точки відповідний "оберіг". У кожному завданні необхідно розкласти по своїх місцях сім оберегів, після чого натиснути кнопку Готово. Якщо завдання виконано правильно, то з'явиться повідомлення про те, що пастка пройдена, якщо хоча б один "оберіг" лежить не на своєму місці, то з'явиться повідомлення про помилку: "Іван-царевич потрапив у пастку".

Етапи створення тренажера:

1) створюємо на першому кадрі статистичне текстове поле (Statik Text) та записуємо в ньому текст завдання (рис. 13). У разі це казка;

2) першому кадрі пишемо код: stop();

3) додаємо кнопку переходу на наступний кадр. Для цього потрібно:

• намалювати кнопку будь-якої форми (наприклад, стрілку);
• виділити її;
• клацнути по ній правою кнопкою миші;
• у вікні вибрати команди: Convert to Symbol -> Button;
• виділити отриману кнопку та написати код:
• on (release) (nextFrame();) – при натисканні на наступний кадр.

Код для будь-якого символу в Macromedia Flash записується на панелі Action Frame (рис. 14):

4) оформлення першого кадру виконується за бажанням. Якщо ви хочете вставити якийсь малюнок, то це можна зробити за допомогою звичайних команд - "Копіювати" - "Вставити" або вибрати команду File -> Import.

5) другого кадру розташовується саме завдання. Щоб створити другий (і всі наступні) кадр, потрібно на тимчасовій шкалі виділити відповідний кадр, клацнути по ньому правою кнопкою миші і вибрати команду Insert Keyframe (рис. 15).

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

Отже, на другому кадрі ми поміщаємо координатну площину, причому малюємо її на другому шарі (створення шарів описано в попередньому параграфі).

Координатна площина, у нашому випадку, намальована за допомогою інструменту "пряма" (LineTools)(рис 16), малюємо одну лінію із затиснутою кнопкою Shift, копіюємо її (Ctrl+C) і вставляємо (Ctrl+V) потрібному відстані. Потім можна скопіювати вже дві прямі і т.д. Отримавши необхідну кількість прямих, копіюємо їх усі, вставляємо і вибравши команду "вільна трансформація" (Free Transform Tool)(Мал. 16), повертаємо наші прямі на 90 градусів. Таким чином ми отримуємо сітку потрібного нам розміру (рис. 17).

Сітку можна отримати й іншим способом, але нам було зручніше скористатися саме намальованою вручну сіткою, оскільки з нею простіше працювати.

6) координатні осі зображуємо на шарі 3;

7) координати точок записуємо за допомогою вже знайомого текстового поля - Statik Text, "обереги" малюємо за допомогою інструментів малювання. Все це виконуємо на шарі 1;

8) копіюємо зображення оберегів з першого шару та поміщаємо на третій (рис. 18);

9) кожен оберег перетворимо на кліп:

• виділити необхідний оберіг;
• клацнути по ньому правою кнопкою миші;
• у вікні вибрати команди: Convert to Symbol -> Movie Clip;
• кожному кліпу надати ім'я: Оbereg1, Оbereg2, ..., Оbereg7 (рис. 19).

10) для кожного кліпу записуємо наступний код:

on (press) (x0 = this._x; y0 = this._y;

this.startDrag(false);)

on (release) (this.stopDrag();

if (x0==this._x and y0==this._y)( this._rotation+=45; ))

11) на шарі 1 у точках, відповідних записаним координатам поміщаємо невеликі кружечки (за кольором збігаються з кольором фону, щоб учень не бачив, куди потрібно пересунути оберіг);

12) кожен малюнок перетворимо на кліп (рис. 20).

13) кожному кліпу даємо ім'я: Lov1, Lov2, ..., Lov7 (від слова "пастка"). Номер пастки повинен відповідати номеру оберега, який учень за допомогою мишки переміщатиме в точку з потрібними координатами.

14) на будь-який із шарів додаємо текстове поле Dynamik Text і задаємо йому ім'я: text1 (рис. 21).

14) розміщуємо на формі кнопку Готово (рис. 22). Кнопку додаємо так само, як і у пункті 2;

15) для цієї кнопки пишемо наступний код:

if ((ober1.hitTest(lov1)) and (ober2.hitTest(lov2))

and (ober3.hitTest(lov3))and (ober4.hitTest(lov3))

and (ober5.hitTest(lov5))and (ober6.hitTest(lov6))

and (ober7.hitTest(lov7))) (

text1.text = "Іван Царевич потрапив у пастку"; ))

16) на наступному кадрі створюємо повідомлення про проходження пастки (рис. 23). Можна додати якийсь малюнок.

Мал. 23 Мал. 24

18) для кнопки "Меню" - on(release) (loadMovie (" ім'я файлу.swf", _level0);)

Якщо учень натискає кнопку “Далі”, він переходить на наступний кадр (рис. 24). На цьому кадрі потрібно перемістити, відповідно до нових координат, кліпи: Lov1, Ljv2, ..., Lov7. Якщо учень проходить всі пастки (у разі їх 7), то екрані з'являється заключний кадр (рис. 25).

19) для кнопки "Знову" записуємо код: on (press) (gotoAndPlay(1);)

20) щоб при запуску програми картинка відкривалася на весь екран на першому кадрі потрібно написати код: fscommand("fullscreen", true);

21) компіляція програми – кнопки: Ctrl + Enter;

22) на будь-який кадр додаємо картинки за бажанням – програма готова.

"Визначення координат" - це тест на перевірку вміння знаходити координати по точці координатної площини. По заданій на площині точці потрібно визначити її координати та записати їх у відповідні віконця (рис. 26).

Етапи створення тесту:

1) на першому шарі, якому можна назвати “сітка”, намалюйте координатну сітку (можна скопіювати сітку з попереднього завдання);

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

3) на другому шарі додайте два текстові поля (Statik Text). В одному запишіть "Абсцис точки А", в іншому - "Ордината точки А";

4) створіть шар 3 та назвіть його “координати”;

5) у цьому шарі створіть два текстових поля (Input Text) і назвіть їх korx (координата x) і kory (координата y);

6) розмістіть ці поля навпроти відповідних полів “абсцису” та “ординату”;

7) створіть динамічне текстове поле (Dynamik Text) і назвіть його “rez” (результат) (рис. 27);

8) створіть кнопку переходу на наступний кадр, запишіть код: on (release) (_root.nextFrame(); )

9) створіть кнопку "готово" або "перевірити". При натисканні цієї кнопки програма перевіряє правильність введених учнем координат. Якщо координати вказані правильно, програма видає повідомлення “Правильно”, якщо ні – “Неправильно”. Код для цієї кнопки змінюватиметься в залежності від розташування точки на координатній площині.

if ((krx.text == "5") and (kry.text == "4")) (sum++;

rez.text = "Правильно"; ) else ( rez.text = "Не правильно"; ))

10) для підбиття підсумків тесту на першому кадрі будь-якого шару треба записати наступний код:

var n = 10; // кількість питань

var sum = 0; // кількість правильних відповідей

function tiktak() (time++;)

timer = setInterval (tiktak, 1000); // Таймер

• розташування та позначення точки на координатній площині;
• позначення точки в полі "абсцис точки_" і "ордината точки_";
• у коді кнопки "готово" вказати нові координати точки.

12) повторюємо всі описані кроки необхідну кількість разів (залежить кількості запитань у тесті, у разі – 10 раз);

13) після останнього питання необхідно створити ще один ключовий кадр (кадр із результатами тесту):

1. створіть на цьому кадрі текстове поле (Statik Text) з написом "Результати:" або "Оцінка:" (рис. 29);
2. створіть динамічне текстове поле та назвіть його text;
3. на підсумковому кадрі напишіть наступний код:

clearInterval(timer);

(if (sum==10) ( ozenka.text="Відмінно";)

if ((sum==9) or (sum==8)) ( ozenka.text="Добре";)

if ((sum==7) or (sum==6)) ( ozenka.text="Трійка";)

if ((sum==5) or (sum==4) or (sum==3)

or (sum==2) or (sum==1) or (sum==0)) ( ozenka.text="Двійка";))

14) щоб була можливість виконати цей тест ще раз (якщо ви хочете надати учням таку можливість), створіть кнопку “Знову”;

15) напишіть для цієї кнопки код: on (press) (gotoAndPlay(1);)

Алгоритм створення презентації “ Побудова фігур ”

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

1. спочатку ми відзначаємо всі крапки, потім послідовно їх з'єднуємо;
2. кожну наступну точку відразу з'єднуємо з попередньою.

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

• створіть два ключові кадри;
• на кожному кадрі розмістіть зображення координатної площини та текст завдання;
• на першому кадрі напишіть код stop(); fscommand("fullscreen",true);
• координатну площину перетворіть на кліп (пункт 3.1 крок 6);
• у режимі редагування кліпа (для виклику двічі клацніть по кліпу) створіть другий шар, на якому з'являться точки;
• щоб точки почали з'являтися не відразу під час запуску кліпу – перші 30 кадрів залиште без зміни (рис. 30):

• далі через кожні сім кадрів створіть ключовий і додайте на нього по одній точці фігури (рис. 31):
• після цього, так само через 7 кадрів, починаємо додавати з'єднувальні лінії (рис. 32):
• на останньому кадрі напишіть код stop();
• перейдіть в режим редагування сцени (подвійне клацання повз кліп) і на першому кадрі створіть кнопку переходу на наступний кадр: on (release) (nextFrame(););
• на другому кадрі, в режимі редагування кліпу, створюємо другий та третій шари. На другому шарі з'являтимуться точки, на третьому відрізки;
• створюємо послідовність кадрів (рис. 33):
• на останньому кадрі пишемо код stop ();
• повертаємося в режим редагування сцени та додаємо кнопку переходу на попередній кадр.

Бажаю успіхів у створенні власних робіт!

І. С. Сакович,

керівник вищої кваліфікаційної категорії гуртка «Інформатика та обчислювальна техніка» Гомельської міської станції юних техніків, Білорусь

СТВОРЕННЯ ТЕСТІВ У СЕРЕДОВИЩІ MACROMEDIA FLASH

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

Тестування як форма контролю та об'єктивної оцінки знань та вмінь учнів дедалі більше привертає увагу викладачів – практиків. Однак багатьох освітян не влаштовують «готові» тести: їх оформлення, зміст, рівень складності, невідповідність програмного матеріалу. Програма Macromedia Flash надає унікальні можливості для створення «авторських» тестів – барвистих, анімаційних, інтерактивних, розрахованих на вікові групи учнів.

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

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

Типові правила підготовки матеріалів для тестового контролю:

основний текст завдання містить трохи більше 8-10 слів;

кожен тест має висловлювати одну ідею, одну думку;

завдання мають бути короткими, чіткими, легко читаються;

неправильні відповіді повинні конструюватися на основі типових помилок та бути правдоподібними;

правильні відповіді повинні розташовуватись серед усіх запропонованих відповідей у ​​випадковому порядку;

формулювання завдань не повинно містити двозначності та «пасток»;

слід мати тести щодо зростання проблеми;

відповіді одне питання нічого не винні залежати від відповіді інші питання.

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

Для побудови тестових завдань найбільш придатними методиками є:

а) вибір варіанта (альтернативні);

б) підбір пари;

в) поле введення;

г) виняток зайвого.

Тестування стає набагато цікавішим, коли питання представлені не в стандартній формі, наприклад: голосова відповідь (підходить для вивчення іноземних мов), Drag-and-drop (можливість побудови або переміщення об'єктів на екрані), область на малюнку (для вибору правильної відповіді необхідно відзначити область на представленому малюнку) та інші.

До вашої уваги пропонуються різні варіанти тестів, розроблені в середовищі Macromedia Flash, на заняттях комп'ютерного гуртка. Вік авторів тестів: 12 – 16 років.

Тест типу «Правилка»

Розміщуємо в кожному кадрі fla-документа текст завдання «Виправте помилки в словах», текстове поле типу Static з текстом питання, текстове поле типу Input c ім'ям otvetдля введення відповіді, кнопка переходу до наступного питання.

Кожному кадру з питаннями необхідно присвоїти ім'я (наприклад, vopros1, vopros2, ...) і помістити на нього скриптstop();

Можливі два варіанти сценарію при неправильній відповіді на запитання:

Очікування правильної відповіді, тобто. перехід на наступне питання здійснюється лише за наявності правильного виконання завдання;

Перехід до питання з підрахунком правильних відповідей.

У першому випадку на кнопку пишеться наступний код:

on (release) (

if (otvet==” курча”)

(gotoAndPlay("vopros2"))

else

{text = "ви не виправили помилку";)

}

У другому випадку на кнопку запишемо наступний код:

on (release) (

gotoAndPlay (” vopros 2”); // Перехід новий кадр

if (otvet =="курча")// Перевірка відповіді

{n = n +1);

}

Де n – змінна для підрахунку правильних відповідей.

Примітка. На перший кадр слід записати наступний скрипт:n =0;

Після закінчення тестування для другого варіанта сценарію необхідно вивести інформацію: «Кількість правильних відповідей: …». Для цього в текстове поле типу Dynamic міститься змінна n .

Тест з варіантами відповідей

Пропонується питання та 3-4 варіанти відповіді на нього. Кожному варіанту відповідає кнопка, при натисканні на яку здійснюється перехід до наступного питання.

На кожен кадр із запитаннями необхідно помістити скриптstop();

На одну кнопку з правильним варіантом відповіді записується наступний код:

on (release) (

gotoAndPlay(“vopros2”);

n = n +1;

//n – кількість правильних відповідей

}

На інші кнопки міститься код:

on (release) (

gotoAndPlay (“vopros 2”);

}

В останньому кадрі flash-ролика слід помістити статичний текст "Кількість правильних відповідей:" і вивести в текстове поле типу Dynamic значення змінної n.

Іноді для вибору варіанта відповіді зручніше використовувати не об'єкти-кнопки, а самі текстові записи відповідей перетворювати на кнопки.

Примітка.Умовний оператор у цьому типі тестів не використовується.

Тест із введенням номера правильної відповіді

Пропонується питання і 3-4 варіанти пронумерованих відповідей. Створюється поле типу Input з ім'ям otvetдля введення номера правильної відповіді.

Для переходу до наступного питання використовується кнопка, на яку міститься наступний код:

on (release) (

if (otvet ==”…”)

(n=n+1);

gotoAndPlay (“vopros 2”);

}

Результат тестування як кількості правильних відповідей оформляється у останньому кадрі flash -ролика. Можна запам'ятовувати номери запитань із вірними варіантами відповіді та додатково виводити інформацію: «Правильні відповіді були отримані на запитання з такими номерами: …».

Тест «Встанови відповідність»

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

Для перевірки результату на кнопку слід написати наступний код:

on (release) (

if (kk 1=="3" && kk 2=="5"&& kk 3=="2"

&& kk 4=="4" && kk5=="1" && kk6=="6")

{otvet = "Правильно")

else (otvet = "Неправильно";)

}

Кросворд

Малюється сітка кросворду. У кожну комірку кросворда міститься текстове поле типу Input , яке отримує ім'я. Для перевірки рішення кросворду пишемо код:

on (release)

{

if (s 1=="m " && s 2=="i " && s 3=="l "

&& s4=="k" && s5=="b" && s6=="

&& s7=="e" && s8=="a" && s9=="d"

&& s10=="c" && s11=="a" && s12=="r" && s13=="r" && s14=="o" && s15=="t"

&& s16=="t" && s17=="e" && s18=="a")

(otvet = "Северно")

else

{otvet = "Не всі слова відгадані")

}

Примітка.Вкажіть для всіх текстових полів вирівнювання по центру.

Тест із переміщенням об'єктів (метод Drag-and-Drop)

Для прикладу використовується тест з англійської мови на тему «Вимовлення звуків»: розташовані на полі слова необхідно перенести в потрібне місце каруселі відповідно до їхньої звукової вимови.

Створюємо текстові поля, перетворимо їх на кнопки, для переміщення на кожну кнопку пишемо код:

on (press) (

startDrag("ka1", false);

}

on (release) (

stopDrag();

}

Де ka1- Ім'я кнопки.

Щоб здійснити перевірку, необхідно написати наступний умовний оператор з огляду на координати прямокутних областей:

on (release) (

if (ka 6._x >-60 && ka 6._x<30 && ka 5._x >-60 && ka 5._x<30 && ka 4._x >-60 && ka 4._x<30 && ka 7._x >-160 && ka 7._x<-110 && ka 8._x >-160 && ka 8._x<-110 && ka 9._x >-160 && ka 9._x<-110 && ka 1._x >100 && ka 1._x<140 && ka 2._x >90 && ka 2._x<150 && ka 3._x >90 && ka 3._x<150 && ka 1._y <100 && ka 2._y <100 && ka 3._y <100 && ka 4._y <100 && ka 5._y <100 && ka 6._y <100 && ka 7._y <100 && ka 8._y <100 && ka 9._y <100 && ka 1._y >-10 && ka 2._y >-10 && ka 3._y >-10 && ka 4._y >-10 && ka 5._y >-10 && ka 6._y >-10 && ka 7._y >-10 && ka 8._y >-10 && ka 9._y >-10)

{otvet = "Правильно")

Else

{otvet ="Неправильно, спробуйте ще раз";)

}

Тест "Лабіринт"

Малюється лабіринт, яким потрібно провести об'єкт, наприклад, кулька. У кожному переході лабіринту постає чергове питання тесту.

Рух кульки задається автоматично за допомогоюMotiontweening. У потрібних місцях лабіринту створюються ключові кадри, на які міститься скриптstop(). Об'єкт зупиняється і далі просувається лабіринтом тільки при введенні в комірку правильної відповіді.

На кнопку перевірки пишеться наступний скрипт:

on (release) (

if (ot ==11) // Перевірка відповіді

{ gotoAndPlay (11);} // рух кульки

else

{ gotoAndPlay (4);} // Відкат кульки на початок

}

Примітка.Детальніше дивись у журналі «ІІО» №10-2008.

Малюються повітряні кульки, кількість яких дорівнює кількості питань у завданні. При неправильних відповідях кульки «лопаються» (зникають). У результаті - скільки кульок залишилося, стільки було правильних відповідей.

Прикладом є текст вірша з пропущеними літерами. На місцях перепусток створюються текстові поля для введення (краще не залишати їх порожніми, а помістити символ «.»).

Для наочності змінюємо колір шрифту на полях введення.

Кнопці перевірки відповідає наступний код:

on (release) (

if(x1!="і") (q1._alpha=0;)

if(x2!="о") (q2._alpha=0;)

if(x3!="ю") (q3._alpha=0;)

if(x4!="о") (q4._alpha=0;)

if(x5!="кульбаби") (q5._alpha=0;)

}

Де q 1, …, q 5 – імена кліпів-кульок;

x 1, …, x 5 – імена текстових полів уведення.

Примітка.Властивість alpha характеризує прозорість об'єкта. Як альтернативу можна використовувати властивість видимості, наприклад,q 1._ visible = false ;

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

Тест «Зводимо будинок»

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

На перший кадр помістити код, який робить кожен їх кліпів невидимим:

ім'я кліпу. _ visible = false ;

На кнопку

on (release) (

q1._visible=true;// Двері

gotoAndPlay(“vopros2”);

}

На кнопку c невірною відповіддю пишемо код:

on (release) (

text1=' двері';

gotoAndPlay(“vopros2”);

}

При правильних відповідях питання тесту поетапно «зводиться» будинок (стають видимими його окремі фрагменти). В іншому випадку, під рядком «В будинку не вистачає:» у підготовлені текстові поля типу Dynamic послідовно виводяться назви частин будинку, що бракують.

Тест «Розфарбуй малюнок»

Малюється чорно-біла картинка, кожен фрагмент якої оформляється як окремий кліп (наприклад, розбитий на сектор м'яч). Кожному кліпу надають ім'я. Якщо тестований правильно відповідає питанням, то малюнок поступово зафарбовується.

На кнопку c правильною відповіддю пишемо код:

on (release) (

gotoAndPlay ("vopros 2");

col=newColor(q1);

col.setRGB(0xFFcc33);// Колірзаливки

}

Де q 1 – ім'я кліпа-фрагменту малюнка.

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

Тест-жарт «Відгадай-ка»

При наведенні мишки на потрібний об'єкт він стає видимим. Можна «заховати» всі об'єкти та шукати їх, водячи мишкою по екрану. Необхідно використовувати метод hitTest.

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

onClipEvent (enterFrame) (

if (this.hitTest

(_root._xmouse,_root._ymouse,true))

{_ root . dd 1._ visible = true ; //назва міста

col = new Color(_root.kr1);

col . setRGB (0 xFF 6600); //колір червоний

}

Тест із використанням компонентів CheckBox

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

Результати тестування оформлюємо як таблиці. Стрілка (кліп з ім'ям strelka) вказує на поточний номер питання.

На кнопку перевірки пишемо наступний код:

on (release) (

gotoAndPlay(“vopros2”); //наступне питання

strelka ._ y +=17; // Переміщення стрілки вниз

//перевірка правильності відповіді

if (k3.getValue() && !k1.getValue()

&& !k2.getValue())

{ o 2="+";} //занесення символу «+» до таблиці

else

{ o 2="-";} //занесення символу «-» до таблиці

}

Де k1, k 2, k 3 - імена компонентів CheckBox,

o1,…, o 5 – імена текстових полів типу Dynaniс, розташованих у другому ряду таблиці,

getValue – властивість стану прапорця (true чи false).

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

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

Бажаю всім удачі, натхнення та польоту творчої думки при розробці нових захоплюючих тестів!

МІНІСТЕРСТВО ОСВІТИ ІРКУТСЬКОЇ ОБЛАСТІ

ІРКУТСЬКИЙ ІНСТИТУТ ПІДВИЩЕННЯ КВАЛІФІКАЦІЇ

РОБОТНИКІВ ОСВІТИ»

Створення анімації
в програмі Macromedia Flash

ОсновиFlash- технологій

Навчально-методичний посібник

Іркутськ, 2008

Друкується за рішенням Редакційно-видавничої ради ІПКРВ

УДК 51

ББК 37.92

Створення анімації у програмі
Macromedia Flash. Основи Flash – технологій. Навчально-методичний посібник. -Іркутськ: ІПКРО, 2008. -104 с.

Рецензенти:

– кандидат фізико-математичних наук, доцент Іркутського державного педагогічного університету

– кандидат фізико-математичних наук, доцент, зав. кафедрою ІІМОІ Іркутського державного педагогічного університету.

Навчально-методичний посібник містить основні принципи використання Flash – технологій, чи технологій інтерактивної web-анімації. розглядаються можливості універсального редактора для створення презентацій, кліпів, заставок, ігор, банерів та логотипів, розробки комп'ютерних ігор, створення мистецьких анімаційних фільмів та Web-сторінок.

Безперечною перевагою Flash-технологій є можливість отримання анімованих динамічних інтерактивних web-сторінок дуже невеликого розміру, що є ідеальним для використання в Інтернеті. Рекомендується вчителям загальноосвітніх шкіл, викладачам системи початкової, середньої та вищої професійної освіти, студентам та учням.

ISBN -212-2

© Іркутський ІПКРО, 2008

© , 2008

	Тестування анімації. Публікація фільму……………………….
	Практична робота «Створення простогоWeb– сайту»………..
	Організація навігації за проектом засобами ActionScript……….
	Приклад розробки проекту «Анімація та програмування у Flash»...
	Додаток. Питання та завдання для самоконтролю………………...
	Література……………………………………………………………...

Вступ

Цей посібник призначений для тих, хто хоче навчитися основ роботи з програмою Flash. Ми будемо розглядати останню версію програми Macromedia Flash Professional 8.

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

Flash-технології або, як їх ще називають, технології інтерактивної web-анімації, були розроблені компанією Macromedia.

Безперечною перевагою Flash-технологій є можливість отримання анімованих динамічних інтерактивних web-сторінок дуже невеликого розміру, що є ідеальним для використання в Інтернеті.

Adobe Flash, Flash, Adobe Flash Player, Adobe Flash Professional, Macromedia Flash - все це назви програм розробки веб-додатків, ігор та мультфільмів під flash-платформу (Flash Platform), поряд з нею існують інші інструменти (середовища): Adobe Flex Builder, Flash Development Tool (FDT) та інші.

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

В основі Flash-технології лежить плавне перетікання одного ключового кадру в інший. Це дозволяє створювати складні мультиплікаційні сцени, задаючи лише кілька ключових кадрів кожному за персонажа. Така технологія застосовувалася задовго до Macromedia Flash. У 1986 році було випущено програму Fantavision, яка використовувала цю технологію. У 1991 році на основі цієї технології була випущена гра Another World, а двома роками пізніше – Flashback. У 1995 році, після покупки програми для анімації FutureSplash Animator, компанія Macromedia випустила продукт під назвою Flash.

Технологія Flash використовує векторну графіку у форматі Shockwave Flash (SWF).

Складовими Flash-технології є:

· векторна графіка;

· Підтримка декількох видів анімації;

· Можливість створення інтерактивних елементів інтерфейсу;

· Підтримка взаємодії з імпортованими графічними форматами (у тому числі растровими);

· Можливість включення синхронного звукового супроводу;

· Забезпечення експорту Flash-фільмів у формат HTML, а також у будь-який з графічних форматів, що використовуються в Інтернеті;

можливість перегляду Flash-фільмів як в автономному режимі, так і за допомогою Web-броузера;

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

У посібнику міститься велика кількість прикладів та індивідуальних завдань, виконуючи які читач зможе опанувати
навички створення інтерактивної комп'ютерної анімації.

I. Комп'ютерна графіка та анімація

Комп'ютерна графіка з'явилася досить давно – вже у 1960-их роках. Сьогодні прийнято користуватися термінами «комп'ютерна графіка» та «комп'ютерна анімація». Поняття «комп'ютерна графіка» включає всі види робіт зі статичними зображеннями, комп'ютерна анімація має справу з зображеннями, що динамічно змінюються.

Комп'ютерну графікузазвичай поділяють на растрову та векторну. За допомогою векторної графікиможна створити об'ємне (тривимірне) зображення: її технологія дозволяє давати комп'ютеру вказівки (команди), керуючись якими він будує зображення за допомогою закладених у програму алгоритмів. Цей метод більше схожий на креслення, причому часто тривимірне. За допомогою векторної графіки об'єкти будуються з так званих «примітивів» - ліній, кіл, кривих, прямокутників, еліпсів і т.д. лівого верхнього кута, ширину, висоту тощо), а вже комп'ютер креслить її сам.

У векторних програмах зручно працювати з текстом, легко створювати геометричні фігури, проста та легка робота з кольором.

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

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

Другий істотний недолік - неможливість адекватно описати за допомогою об'єктів реальне зображення (наприклад, фотографію людини). Занадто багато сил доведеться витратити, щоб розкласти його на графічні примітиви. Модель вийде надзвичайно громіздка та неточна. Тому для реальних зображень використовують іншу модель - растрову, а представлені нею зображення відносять до растрової графіки.

Растрове зображення розбите на безліч дрібних елементів – пікселів. Колір кожного пікселя записується у пам'ять комп'ютера. Якщо зображення має розмір 800 пікселів по горизонталі та 600 пікселів по вертикалі, то кажуть, що зображення має розмір 800x600. Чим більше пікселів у зображенні, тим краще воно виглядає на екрані і при друку.

Ще один важливий параметр, який потрібно знати, щоб грамотно працювати з растровим зображенням тип колірної моделі. Він визначає спосіб опису кольору чи тону кожним пікселем. Наприклад, модель RGB описує будь-який колір як композицію трьох основних складових: R ( R ed) - червоний, G ( G reen) – зелений, B ( B lue) – синій. Цей параметр особливо важливий при підготовці зображення для певних цілей (виведення на екран або принтер).

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

Комп'ютерна анімація

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

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

Комп'ютерна анімація передбачає використання комп'ютерного обладнання та програмного забезпечення для створення анімації.

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

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

Цей метод дозволяє створювати анімаційні фільми дуже високої якості.

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

Для створення комп'ютерної анімації існує безліч програмних програм, у тому числі і програма Macromedia Flash.

II. Знайомство з програмоюFlash

До кінця 20 століття можливості комп'ютерної анімації досягли рівня звичайних відеороликів. Але в Macromedia Flash впроваджено такі можливості, про які не можуть і мріяти творці відеофільмів – це діалог, участь користувача в анімації. Спочатку це були звичайні кнопочки, від натискання яких відбувалися ті чи інші графічні зміни. Але дуже швидко Macromedia Flash перетворилося на середу розробки професійних програм: сайтів, довідників, ігор, презентацій. Зараз для створення таких програм програмісту необхідно бути трохи дизайнером, знати графічні можливості програми Flash і вбудованої в неї мови програмування ActionScript.

Загальна схема створення Flash-фільмів

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

Основні поняття

При побудові будь-якого Flash-фільму використовується об'єктно-орієнтований підхід. Це означає, що всі елементи фільму інтерпретуються як об'єкти того чи іншого типу, для кожного з яких задано деякі властивості та визначено набір допустимих операцій. Наприклад, для об'єкта «Текст» повинен бути встановлений розмір символів, спосіб зображення, колір і т. д. Текст можна певним чином редагувати, вирізати; копіювати, створювати на його основі текстові гіперпосилання і т. п. Те саме можна сказати про графічні зображення і про звук. Тим не менш, при роботі з Flash замість поняття "об'єкт" частіше використовується термін символ (Symbol). Основна відмінність між ними полягає у наступному.

Символ є своєрідним шаблоном об'єкта з певним набором властивостей. Символ зберігається у спеціальній бібліотека символів (Library)і може бути багаторазово використаний як в тому самому фільмі, так і в декількох фільмах. Кожна нова копія символу, вміщена у фільм, називається екземпляром символу (Instance). Примірник успадковує всі властивості самого символу, і між ними встановлюється зв'язок: при зміні властивостей символу відповідні зміни автоматично застосовуються до всіх екземплярів. Механізм символів дозволяє скоротити і розмір фільму: якщо в ньому використовується кілька екземплярів символу, інформація про його властивості не дублюється. Разом з тим, ви можете змінювати деякі властивості конкретного екземпляра, що не впливає на властивості символу-оригіналу. Наприклад, можна змінити розмір та колір екземпляра, а якщо йдеться про звуковий символ – додати той чи інший ефект.

Як правило, динаміка у Flash-фільмах забезпечується за рахунок того, що протягом деякого інтервалу часу змінюються ті чи інші властивості екземпляра (наприклад, координати, колір, розмір, прозорість тощо), тобто змінюється стан екземпляра. З кожним станом екземпляра пов'язаний окремий кадрфільму (Frame).Кадр, що відповідає зміні стану екземпляра, називається ключовим кадром (Keyframe). Ключовий кадр розглядається як об'єкт відповідного типу, властивості якого користувач може змінювати. Для ключових кадрів передбачені деякі спеціальні функції та команди.

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

У фільмі можна використовувати кілька різних об'єктів. Стан кожного з них може змінюватися незалежно від інших, або взагалі залишатися незмінним (якщо, наприклад, певний об'єкт використовується як тло). Щоб спростити опис поведінки різних елементів фільму, кожен з них міститься, як правило, на окремий шар (Layer).Розробники Flash для пояснення ролі шарів у фільмі порівнюють їх із листами прозорої кальки. Зібравши докупи «стопку» таких аркушів, ви можете отримати якусь сцену, на якій діють різні «персонажі». Сцена (Scene)- це ще один термін, який використовується під час роботи з Flash. Кожна сцена є певним поєднанням шарів. Для простих фільмів досить створити і описати одну-єдину сцену, що містить один шар. Для більш складних може знадобитися створити кілька різних сцен. Перехід від однієї сцени до іншої визначається вже не часовою діаграмою, а дещо іншим механізмом. У найпростішому випадку сцени фільму виконуються послідовно, відповідно до їх порядкових номерів. Для складнішої побудови фільму використовуються засоби мови ActionScript.

При створенні складних фільмів досить важливу роль відіграє ще одне поняття. кліп (Clip, або Movie clip). Кліп – це спеціальний тип символу. Він являє собою міні-фільм, для якого створюється власна часова діаграма і встановлюються власні параметри (наприклад, частота зміни кадрів). Кліп, як будь-який інший елемент фільму, може бути включений до бібліотеки символів для багаторазового використання у фільмі. Кожному екземпляру кліпу може бути призначене власне ім'я.

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

Послідовність дій під час створення Flash-фільму

При запуску більшості Windows-програм автоматично створюється «заготівля» (порожній документ, бланк) того типу, для роботи з яким призначена ця програма. Наприклад, при відкритті вікна текстового процесора Word у ньому з'являється порожній документ, до якого ви можете ввести потрібний текст, додати графіку тощо. .). Щоб документ виглядав так, як хотіли б ви, доцільно встановити необхідні значення відповідних параметрів.

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

Після встановлення загальних параметрів фільму можна перейти до формування першої сцени фільму. Вирішивши, які саме об'єкти повинні бути присутніми на цій сцені, ви послідовно поміщаєте кожен з об'єктів на новий шар. Установка параметрів шару – це один із найбільш відповідальних етапів побудови фільмів. Оскільки у фільмі шари (або вміщені на них об'єкти) тим чи іншим чином взаємодіють один з одним, після опису чергового шару може виявитися, що потрібно відредагувати створені раніше. У цьому немає нічого страшного, це цілком природно, і Flash дає автору можливість скоригувати попередні дії.

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

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

Ті об'єкти, які передбачається використовувати у фільмі неодноразово (хоча б двічі), доцільно одразу створювати як нові символи.

Створення Flash-фільмів є дуже складною справою. Тому після завершення чергового кроку корисно перевірити отриманий результат, протестуватийого. Flash дозволяє тестувати як окремі сцени фільму, так і фільм загалом. Якщо тестування пройшло успішно, не забувайте зберегти результат своєї роботи на диску (на відміну від Word, Flash не підтримує функцію автоматичного збереження).

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

Інтерфейс програмиFlash

Кожному нововідкритому файлу відповідає свій робочий стіл. На робочому столі знаходиться кадр- біла прямокутна область на екрані, де відтворюється Flash-фільм.

Рядок заголовка –містить назву програми та ім'я документа;

Меню- Включає всі команди, передбачені програмою;

Тимчасова шкала - служить контролю тривалості показу зображень (управління анімацією).

Панель редагування (Edit Bar) - дозволяє керувати сценами, редагувати символи, масштабувати робочу область;

Інспектор властивостей– відображає властивості вибраного інструменту, символу або документа. За замовчуванням відображаються властивості документа: розмір, колір тла, частота кадрів, параметри публікації та параметри пристрою;

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

Усі панелі можна відкрити з основного меню Windowsабо що містяться в ньому підменю.

МенюView

У програмі Flash передбачені деякі можливості, що підвищують точність малювання. Це засоби для розмітки столу та робочої області: лінійки (Rulers), сітка (Grid) і напрямні (Guides). Отримати доступ до них можна через головне меню View.

Напрямні– це горизонтальні та вертикальні лінії, які можна використовувати в роботі як допоміжні, щоб точніше розмістити об'єкти на робочому полі. Щоб відобразити на екрані напрямні, потрібно спочатку відобразити лінійки: View à Rulers. Щоб відобразити напрямні, виберіть команду View à Guidesà Show Guides, а потім перетягніть напрямні з лінійок: при перетягуванні напрямної з лівої лінійки ви отримуєте вертикальну напрямну, а з верхньої – горизонтальну. Щоб видалити напрямну, перенесіть її на лінійку.

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

Щоб відобразити сітку, виберіть команду View à Grid à Show Grid. Щоб задати розміри клітинки сітки або змінити колір ліній сітки, виберіть команду View à Grid à Edit Grid.

III. Малювання в середовищіMacromedia Flash

У Macromedia Flash ви можете створювати векторні малюнки, які складаються з контурів ( Stroke) та області заливання (Fill). Окремі контури можна намалювати за допомогою інструментів Line(Лінія)або Pencil(Олівець). Якщо за допомогою цих інструментів ви намалюєте замкнуту область, її можна буде пофарбувати довільним кольором, градієнтом або заповнити растровим малюнком, тобто отримати область заливки.

За допомогою інструментів Rectangle(Прямокутник)і Oval(Овал)можна створити одночасно контур та заливку. Інструмент Brush(Пензлик)створює лише заливку, без контуру.

Давайте тепер детальніше розглянемо панель інструментів та засоби малювання, які на ній розташовані.

Панель інструментів розділена на 4 області:

1. Група Tools(Інструменти малювання та виділення);

2. Група View(дозволяє рухати лист та збільшувати/зменшувати зображення);

3. Група Colors(дозволяє вибирати колір заливки ( Fill color) та контуру ( Stroke color) з палітри, змінювати ці кольори місцями, робити один із них прозорим або встановлювати чорно-білий режим);

4. Група Options(Відображає додаткові можливості кожного інструменту).

Вибір інструменту та його модифікаторів (режимів роботи) здійснюється натисканням лівої клавіші миші на панелі інструментів.

На рис. 3 показана панель інструментів з вибраним інструментом Selection(Стрілка)та у групі Optionsвідображаються модифікатори саме цього інструмента.

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

Для інструментів, що створюють заливку ( Rectangle, Oval, Brush, Paint Bucket) в інспекторі властивостей є можливість вибрати колір заливки.

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

Для того, щоб об'єкти існували незалежно один від одного або контур і заливка становили єдине ціле, використовують режим малювання. Object Drawing(Цей режим мають інструменти Line(Лінія), Pen(Перо),Oval(Овал),Rectangle(прямокутник),Pencil(олівець)і Brush(пензлик))або виконують групування об'єктів.

Рис.4 Модифікатор Objekt Drawing

Для угруповання необхідно виділити об'єкти, які потрібно згрупувати (або лише обведення та заливку, двічі клацнувши на об'єкті) та виконати команду Modify à Group (Змінитиà Групувати). Навколо виділених об'єктів з'явиться блакитна рамка, що обмежує. Вона означає, що об'єкти згруповані і поводитимуться як єдине ціле. Безпосередньо редагування групи неможливо. Щоб змінити об'єкти групи, виконайте подвійне клацання на вмісті групи. Flash перейде в режим редагування цієї групи (всі інші об'єкти набудуть блідого тону). Вихід з режиму редагування групового об'єкта здійснюється на назві поточної сцени, вказаній у лівій частині панелі інструментів Edit Bar. Розгрупувати об'єкти можна командою Modify à Ungroup(Змінитиà Розгрупувати).

При використанні режиму малювання Objekt Drawingвиходить схожий результат - намальована фігура відразу буде поміщена в блакитну рамку, і набуде всіх тих властивостей, які мають групи.

Розглянемо докладніше інструменти, що найчастіше використовуються.

ІнструментSelection(Стрілка або Виділення)– використовується для виділення об'єктів та зміни їх форми. Щоб виконати над об'єктом ті чи маніпуляції, його необхідно попередньо виділити. У Flash можна назвати об'єкт повністю чи його частина, групу об'єктів. Щоб виділити весь об'єкт, слід вибрати інструмент Selectionі потім виконати одну з двох дій:

· Клацнути двічі мишею всередині об'єкта;

· встановити покажчик миші поза об'єкта, і, натиснувши кнопку миші, перемістити покажчик в такий спосіб, щоб весь об'єкт опинився усередині області, обмеженої прямокутником.

Для виділення контуру об'єкта слід підвести вказівник до межі об'єкта та клацнути (один раз) лівою кнопкою миші. У результаті контур буде виділено так само, як і при виділенні всього об'єкта, а внутрішня частина об'єкта залишиться не виділеною.

Якщо контур об'єкта є багатокутником (тобто має кути), то клацання на будь-якій ділянці (відрізку) контуру призводить до виділення тільки цієї ділянки. Щоб виділити весь такий контур, слід клацнути послідовно на всіх відрізках контуру, утримуючи клавішу Shift. Інструмент Selectionтакож можна використовувати для редагування контурів об'єктів. Для цього потрібно підвести покажчик до контуру (він не повинен бути виділений!). Коли біля покажчика з'явиться значок у вигляді невеликої дуги, натиснути ліву кнопку миші та, не відпускаючи її, перемістити вказівник у потрібному напрямку.

Інструмент Selectionмає параметри Smoothі Straighten– вони дозволяють покращити якість малюнків (згладити лінії чи випрямити). Параметр Snap To Objects- прив'язка до об'єктів - змушує створювані об'єкти прив'язуватися до вже наявних на робочому полі (з'являється кружечок у тій точці, в якій буде зроблена прив'язка).

ІнструментPencil (Олівець)– можна використовувати для вирівнювання ліній та згладжування кривих під час малювання. Для цього призначено 3 режими модифікатора (див. рис.5).

Рис.5 Модифікатор інструменту олівець; результати роботи інструмент олівець з використанням різних модифікаторів.

ІнструментLine(лінія) -призначений для креслення прямих ліній. При натиснутій клавіші Shift- Лінії будуть строго вертикальними (горизонтальними) або розташовуватися під кутом 45 °. При натиснутій клавіші Alt- Малювання лінії починається від середини лінії, в обидві сторони.

Інструменти Лініяі Олівецьстворюють контури. Налаштувати зовнішній вигляд контурів можна інспектором властивостей.

Основні параметри налаштування товщина(thickness) та гострі кути (sharp corners). Додаткові параметри залежать від типу контуру:

Тип Лінії	Додаткові параметри	Можливі значення
Solid (суцільна)
Dashed (Штрихова)	Dash (довжина штриха та інтервалу)	Від 0,25 До 300
Dotted (Точкова)	Dot Spacing (відстань між точками)	Від 0,25 До 300
Ragged (Нерівна)	Pattern (Модель)	Solid (суцільна)
	Simple (Проста)
	Random (Випадкова)
	Dotted (Точкова)
	Random Dotted (Точкова випадкова)
	Triple Dotted (Потрійна точкова)
	Random Triple Dotted (Випадкова потрійна точкова)
	Wave Height (Висота коливання)	Flat (Рівна)
	Wavy (Хвиляста)
	Very Wavy (Дуже хвиляста)
	Wild (Буйна)
	Wave Length (Довжина коливання)	Very Short (Дуже коротка)
	Short (Коротка)
	Medium (Середня)
	Long (Довга)
Stipple (Точковий Пунктир)	Dot Size (Розмір точки)	Tiny (крихітний)
	Small (Маленький)
	Medium (Середній)
	Large (Великий)
	Dot Variation (Варіанти точок)	One Size (Одного розміру)
	Small Variation (З невеликими відмінностями)
	Varied Sizes (Різних розмірів)
	Random Sizes (Випадкових розмірів)
	Density (Густина)	Very Dense (Дуже щільно)
	Dense (Щільно)
	Sparse (Рідко)
	Very Sparse (Дуже рідко)
Hatched (Поперечно-Штрихова)	Thickness (Товщина)	Hairline (Волосяна)
	Thin (Тонка)
	Medium (Середня)
	Thick (Товста)
	Spaсe (Відстань)	Very Close (Дуже близьке)
	Close (Близьке)
	Distant (Видалити)
	Very Distant (Дуже віддалене)
	Jiggle (Невирівняність)
	Bounce (Скачки)
	Loose (Розпливчаста)
	Wild (Буйна)
	Rotate (Нахил)
	Slight (Слабкий)
	Medium (Середній)
	Free (Вільний)
	Curve (Кривизна)	Straight (Пряма)
	Slight Curve (Слабка кривизна)
	Medium Curve (Середня)
	Very Curved (Сильна)
	Length (Довжина)	Equal (Одночасна)
	Slight Variation (Зі слабкими відмінностями)
	Medium Variation (З середніми відмінностями)
	Random (Випадкова)

Вибрати колір контуру можна, скориставшись інструментом Stroke Color(група Colorsна панелі інструментів). Для цього:

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

Створення кнопок

Кнопка є чотирикадровим інтерактивним мувікліпом. Коли ми привласнюємо тип «Кнопка», Flash створює для нового символу монтажну лінійку з чотирьох кадрів:

Up-стан - це кадр, що відповідає ситуації, коли кнопка не натиснута і покажчик миші розташований не над кнопкою;

Over-стан кадр, що ілюструє вид кнопки, коли покажчик миші розташований над кнопкою, але кнопка не натиснута;

Down-стан | даний кадр показує вид кнопки при її натисканні;

Hit-стан визначає область, в якій кнопка реагує на клацання миші; цю область у кліпі не видно.

Щоб створити кнопку, виконайте команду Insert => New Symbol (можна набрати клавіші Control+F8). У діалоговому вікні Create New Symbol введіть ім'я символу-кнопки (наприклад, but1) і виберіть тип символу Button («Кнопка»).

Flash перейде в режим редагування символу, надавши кадри Up, Over, Down і Hit. Перший кадр, Up, стає порожнім ключовим кадром. Намалюємо у цьому кадрі ненатиснутий вигляд кнопки (рис. 1).

Мал. 1. UP-кадр кнопки

Виділимо другий кадр, помічений як Over та відповідний стану, коли курсор занесений над кнопкою. Вставимо у цьому кадрі ключовий кадр (за командою Insert => Keyframe), у результаті з'явиться ключовий кадр, що повністю повторює зміст Up-кадра. Змінимо колір кнопки, як показано на рис. 2.

Рис 2. Over-кадр кнопки

Аналогічно додамо наступний кадр (Down-кадр) та намалюємо натиснутий стан кнопки (рис. 3).

Мал. 3. Down-кадр кнопки

У Hit-кадрі поки не нічого малюватимемо, а повернемося до цього кадру трохи пізніше.

Перейдемо до основної сцени, викличемо бібліотеку за командою Window => Library та створимо екземпляр символу кнопки шляхом перетягування його на сцену (рис. 4)

Мал. 4. Створимо екземпляр кнопки, перетягнувши його з бібліотеки

В результаті отримаємо наступний фільм. Як видно з цього фільму, натискання кнопки відбувається не лише тоді, коли ми натискаємо мишею на центральну (робочу) зону кнопки, але й при натисканні на рамку навколо неї. Пов'язано це з тим, якщо Hit-кадр не намальований, то робоча область кнопки буде відповідати Up-кадру.

Для того, щоб натискання кнопки відбувалося тільки в робочій зоні, необхідно в Hit-кадрі визначити цю зону, тобто намалювати кнопку без рамки (див. рис. 5)

Мал. 5. Hit-кадр кнопки

Після того як ми додамо необхідний Hit-кадр, отримаємо наступний фільм, в якому при натисканні на рамку продавлювання кнопки не відбувається.

Щоб зробити кнопку інтерактивною, необхідно пов'язати факт натискання кнопки із виконанням певних команд, тобто описати певний сценарій. Для завдання сценаріїв у Flash існує спеціальна мова Action Script. У цьому уроці ми торкнемося лише незначної частини можливостей цієї мови, а надалі повертатимемося до структури та синтаксису Action Script у міру ускладнення прикладів створення інтерактивних фільмів на Flash.

Поняття про Action Script

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

При вбудовуванні сценарію у фільм його можна впроваджувати у різні частини фільму. Точніше, сценарії Action Script можуть містити ключові кадри, екземпляри кнопок та екземпляри мувікліпів. Відповідно сценарії називаються сценаріями кадру (Frame Action), сценарієм кнопки (Button Action) та сценарієм кліпу (MovieClip Action).

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

Action Script має власний синтаксис, багато в чому схожий із синтаксисом JavaScript. Flash MX 2004 підтримує Action Script усіх попередніх версій Flash.

Одним з основних понять Action Script є Actions – команди, які видають інструкції під час виконання SWF-файлу. Наприклад, gotoAndStop() відсилає відтворюючу головку (Рlayhead) на певний кадр або мітку. Від слова Actions і походить назва мови – Action Script (дослівно – сценарій дій). З більшістю понять цієї мови ми ознайомимося на конкретних прикладах.

Інтерактивний фотоальбом

Продемонструємо використання кнопок для керування фотоальбомом – створимо набір фотографій та додамо дві кнопки, які будуть гортати фото вперед та назад.

Помістимо на основній монтажній лінійці перше фото і додамо кнопку зі стандартного набору. Для доступу до потрібної папки слід виконати команду Windows => Control Panels Common Libraries => Buttons (рис. 6).

Мал. 6. Додамо кнопку зі стандартної бібліотеки

В результаті виконання цієї команди з'явиться панель, що містить великий набір намальованих кнопок різних типів. Виберемо, наприклад, Key Buttons (кнопки, схожі на клавіатурні клавіші), відкриємо відповідну папку, виберемо кнопку key-left (рис. 7) і створимо екземпляр цієї кнопки (шляхом перетягування її на сцену).

Мал. 7. Елементи папки Key Buttons

Зверніть увагу, що коли ви встановлюєте другу кнопку (key-right) на сцені і переміщаєте її, щоб встановити на одному рівні з першою кнопкою, програма підказує (пунктирну лінію), яка дозволяє точно позиціонувати кнопку (рис. 8).

Мал. 8. Автоматичне вирівнювання кнопок на одному рівні

Щоб додати сценарій, необхідно викликати редактор Action Script за командою Window =>Development Panels => Actions або натиснувши клавішу F9. Якщо ви збираєтеся часто писати скрипти, цю клавіатурну команду варто запам'ятати. В результаті з'явиться редактор Action Script (рис. 9).

Мал. 9. Панелі редактора Action Script

Якщо ви експериментуєте, виділяючи різні елементи на сцені, одночасно відстежуючи повідомлення в панелях редактора Action Script, то виявите, що програма підказує, на який елемент можна «вішати» код. Якщо виділити на сцені кадр, то у верхньому лівому куті панелі редактора з'являється напис Actions - Frame, якщо клацнути по кнопці, то з'явиться напис Actions - Button, тобто програма підказує, що код, що вводиться, буде ставитися до сценарію кнопки. А якщо виділити фотографію, то в полі, призначеному для введення скрипту, з'явиться повідомлення: Current selection cannot have actions applied to it (до цього виділеного об'єкта не можна застосувати сценарій).

Ми будемо надавати сценарій кнопці. В останніх версіях ActionScript є можливість писати централізований код, тобто код, який розміщений в одному місці, і така можливість дозволяє краще розумітися на великих програмах. Однак у простих прикладах (які ми й розглядаємо) надання сценарію кнопці цілком допустимо.

Отже, для кнопки зі стрілкою вліво нам потрібно формалізувати наступний сценарій: "Якщо кнопка відпускається на деякому кадрі, то з цього кадру необхідно перейти на попередній кадр". Відповідно до синтаксису мови Action Script (рис. 10) це буде виглядати так:

У першому рядку записаний обробник подій кнопки on(), що має формат:

Тепер додамо кілька ключових кадрів так, що в них скопіюються створені в першому кадрі кнопки, і помістимо у створені кадри потрібні фотографії.

Якщо запустити на виконання створений фільм, то кадри безперервно програватимуться один за одним, а отже, насамперед нам потрібно дати команду «Стоп» на першому кадрі. Для цього першому кадру додамо відповідну команду (рис. 11).

Мал. 11. Сценарій, наданий першому кадру

Зверніть увагу: команда надається вже не кнопці, а кадру. Той факт, що кадру присвоєно сценарій, відзначається на основній монтажній лінійці - у позначенні кадру над жирною точкою з'являється маленька літера «a».

В результаті ми отримали наступний фільм.

Якщо у нас у фотоальбомі всього кілька кадрів, то двох кнопок – «Вперед» і «Назад» – цілком достатньо, але якщо набір фотографій великий, то бажано мати ще й кнопки, що відсилають на початок і кінець фільму. У наступному прикладі ми додамо відповідні кнопки: "В перший кадр" та "В останній кадр". Вибрати кнопки відповідної мнемоніки можна зі стандартної бібліотеки кнопок із папки Сircle Вuttons (рис. 12).

На запропонованому прикладі ми ознайомимося з ще однією командою gotoAndStop(), яка дозволяє перейти до потрібного кадру з наступною зупинкою.

Мал. 12. Кнопки із папки Circle Buttons

На кнопку переходу до першого кадру (третя зліва на рис. 13) повісимо код, як показано на рис. 13.

Мал. 13. Сценарій для кнопки "В перший кадр"

У випадку з фотоальбомом з п'яти кадрів до останньої кнопки додамо сценарій переходу «В останній кадр»:

Автоматизоване написання скрипту

Досі ми набирали всі команди вручну, проте панелі редактора ActionScript надають низку сервісів для автоматизованого написання скрипта. Розглянемо ці можливості.

Мал. 14. Засоби автоматизованого написання скрипту

Панель редактора Action Script дозволяє вибирати, перетягувати, перерозподіляти та видаляти команди.

Покажемо, як можна написати той самий скрипт для кнопки "Вперед" в автоматизованому режимі. Вибравши папку Movie Clip Control (верхнє ліве вікно на рис. 14) можна отримати доступ до оброблювача подій on, а далі потрібно або двічі клацнути по відповідному пункту, або перетягнути вираз на поле написання скрипта в режимі Drag and Drop.

Мал. 15. Підказка для завершення виразу

В результаті на робочому полі з'явиться необхідний вираз та підказка виду (рис. 15): вибираєте з меню потрібну команду та вираз завершується автоматично. Як видно з меню, можна вибрати не тільки умову, пов'язану з екранними кнопками - можна також вибрати з меню рис. 15 пункт keyPress “ ”, або keyPress “ ”, що відповідає натисканню клавіатурних клавіш (стрілка вліво, стрілка вправо), тобто є можливість створити фотоальбом, який «перегортатиметься» за допомогою клавіш клавіатури.

Мал. 16. Звертання до кнопки клавіатури

Задіємо команду keyPress “ (мал. 16), потім перейдемо в папку Timeline Control, виберемо команду nextFrame і перетягнемо її на робоче поле (рис. 17).

Мал. 17. Команду nextFrame можна знайти у папці Timeline Control

Для кнопки, яка переводить фільм на початок фотоальбому, в якості події можна вибрати з меню натискання клавіші Home, а далі (рис. 18) перетягнути на поле команду gotoAndStop, в результаті чого з'явиться ще одна підказка щодо можливого синтаксису цієї команди.

Стрілки у підказці дозволяють переглянути різні варіанти синтаксису. Програма надає два варіанти (рис. 18 і 19), тобто пропонує задати сцену та кадр або лише кадр. У нашому випадку достатньо вказати лише кадр (Frame). Якщо назва сцени опущена, за промовчанням здійснюється перехід до кадру поточної сцени.

Мал. 18. Підказка щодо можливого синтаксису команди

Мал. 19. Стрілка-трикутник дозволяє переглядати варіанти синтаксису

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

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

Мал. 20. Під час введення коми у списку подій автоматично з'являється меню додаткових команд

Додамо до першої події (натискання клавіатурної кнопки) друга подія (відпускання екранної кнопки):

on (keyPress " ", release)

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

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

Нехай альбом складатиметься з малюнків, комп'ютерної графіки та фотографій.

Першому кадру розділу «малюнки» дамо мітку Pictures, аналогічно першим кадрам інших розділів надамо мітки graphics і photo.

Створимо шар для розміщення міток та назвемо його Lables. Щоб поставити мітку кадру, у панелі Properties необхідно вибрати тип мітки Name та записати її ім'я. У разі Pictures (рис. 21). Аналогічно розмістимо мітки у кадрах 5 та 10 (рис. 22).

Мал. 21. Приклад присвоєння кадру мітки

Тепер додамо новий шар та назвемо його Actions. У першому ключовому кадрі шару Actions викличемо панель Actions Frame (шляхом натискання кнопки F9) та наберемо команду stop () (див. мал. 22)

Мал. 22. Сценарій першого кадру

Додамо ще один шар під ім'ям Subjects (тематика), в якому дамо назви відповідним кадрам: «Малюнки» (рис. 23), «Графіка» та «Фото».

Мал. 23. Назва для кадрів розділу «Малюнки»

Тепер додамо збоку кнопку меню з аналогічними іменами, які розташуємо на новому шарі під назвою Мenu.

Надрукуємо з лівого краю перший пункт меню «Малюнки» та переведемо його в кнопковий символ. За допомогою інструмента Arrow виділимо текстовий блок «Малюнки» і виконаємо команду Modify => Convert to Symbol (цю команду можна виконати і за допомогою клавіші F8), на панелі Convert to Symbol задаємо тип символу Button і визначимо його ім'я як pictureButton (рис. 24 ).

Мал. 24. Призначимо кнопці початку розділу малюнків ім'я рictureButton

Створимо чотири кадри для кнопки «Малюнки»: перший представлятиме просто вихідний текст (рис. 25), другий - той самий текст тільки синього кольору, третій кадр ми пропустимо (у цьому випадку Down-кадр буде такий самий, як і Over-кадр ), а в Hit-кадрі намалюємо прямокутну область, яка визначить область натискання кнопки (рис. 26).

Мал. 25. Up-кадр кнопки pictureButton

Мал. 26. Hit-кадр кнопки pictureButton

Тепер нам потрібно повісити сценарій на новостворену кнопку. Для цього виділимо кнопку в сцені Scene 1 і натиснувши F9, викличемо панель Actions, а потім внесемо код, показаний на рис. 27.

Мал. 27. Сценарій переходу на кадр із міткою