SlideShare a Scribd company logo
1 of 21
Adobe Flash
• Adobe Flash (раніше Macromedia Flash), - мультимедійна
платформа компанії Adobe Systems для створення веб-
додатків або мультимедійних презентацій. Широко
використовується для створення рекламних банерів,
анімації, ігор, а також відтворення на веб-сторінках
відео-і аудіозаписів.
Adobe Flash
• Анімація в Flash. Початок. ? Малюємо пташку.
• Для початку слід усвідомити кілька необхідних термінів, які
використовуються під флеше:
• Кореневої ролик - та область, з якої починається робота. У ньому є
послідовність кадрів, в ньому можна створити кілька шарів.
Об'єкт (символ, мувик) - по суті, маленький самостійний ролик - в
ньому, так само як і в кореневому ролику є свої кадри і шари. У
об'єктах може бути будь-яка графіка та інші об'єкти. Об'єкти
мають свої параметри і характеристики, в них навіть є своя
(внутрішня) система координат.
Кадр - область ролика, розділена за часом.
Ключовий кадр - кадр, що містить які-небудь зміни. Ключовий
кадр може бути або з якимось змістом, або порожнім - це можна
побачити на тимчасовій лінійці. Ключові кадри під флеше
відзначаються маленьким кружечком.
Ми могли б зробити послідовність
кадрів, малюючи кожен кадр заново,
але це було б довго. Тому ми зробимо 1
цикл помаху крил пташки в окремому
об'єкті (символі), а потім будемо просто
переміщати об'єкт.
Для створення об'єктів існує кілька способів:
Спочатку намалювати що-небудь, виділити і скористатися командою "Convert to Symbol"
("Перетворити в Символ")
Створити новий символ в бібліотеці (бібліотеку можна відкрити або в меню "Window->
Library", або за допомогою гарячої клавіші Ctrl + L) і там малювати.
Скористаємося першим способом.
Отже, ми намалювали галочку, тепер її потрібно
виділити і в контекстному меню (правою кн. Миші)
вибрати "Convert to Symbol "
У віконці вибираємо "Graphic" (про інших випадках - в іншому
уроці). Зверніть увагу на пункт "Registration" - тут можна
вибрати точку, яка буде початком координат нового символу.
Для нашого символу краще вибрати початок координат у
центрі - для цього потрібно натиснути в середній квадратик (1)
Після цього пташка при виділенні матиме такий
вигляд:
Тут видно маленький хрестик у середині - це початок координат цього
символу.
Тепер цей символ з'явився в бібліотеці - у нього є ім'я "Symbol 1" (2) (ім'я
можна змінити на будь-яке інше, але ми цього робити не будемо).
Для того щоб зайти в об'єкт потрібно натиснути на
нього 2 рази в кореневому ролику або в бібліотеці. При
цьому відкриється графіка, укладена в об'єкті, і його
внутрішня послідовність кадрів.
Зайшовши в об'єкт, створимо новий ключовий кадр
(3). Найпростіше це зробити за допомогою гарячої
клавіші F7 ("створити порожній ключовий кадр").
У новому кадрі ми повинні намалювати наступну фазу
руху помаху крил пташки. Щоб можна було
орієнтуватися на попередні кадри, існує функція показу
декількох кадрів (4).
При натисканні на них над лінійкою кадрів з'являється
область, на межі якої видно маленькі кружечки (5).
Натискаючи та утримуючи їх, можна розширювати або
звужувати область видимості. При цьому поточний
кадр відкритий для редагування, а решта показані
напівпрозорої.
Так, орієнтуючись на попередні кадри, ми малюємо
кілька фаз одного помаху крил так, щоб останній кадр
підходив до першого
Тепер можна переглянути анімацію цього
об'єкта, натиснувши Enter. При цьому
програються всі кадри цього об'єкта з
початку до кінця. На цьому етапі можна
оцінити правильність анімації і щось
виправити.
Після того як об'єкт з анімацією одного помаху
готовий, можна вийти з нього - для цього достатньо
натиснути на будь порожнє місце ролика, або
натиснути "Scene 1" над областю малювання (6).
Тепер ми знову перебуваємо в кореневому ролику. Але
при спробі запустити ролик, натиснувши Enter, ви
виявите, що руху не відбувається. І не дивно - в
кореневому ролику поки ще тільки один кадр. Для того
щоб створити нові кадри досить виділити порожнє місце
в будь-якій позиції на тимчасовій лінійці - я вибрав 40-ю -
і натиснути F5 (створити кадр).
Тепер, натиснувши Enter, ви побачите кілька
повторюваних помахів крил пташки.
Для того, щоб об'єкт з пташкою переміщався необхідно
створити "рух" в кадрах. Для цього натисніть будь-де
на створених кадрах правої кн. миші та виберіть
"Create Motion Tween"
Тепер кадри придбали такий вид :
Для того чтобы завершить движение, выделите
последний кадр и нажмите F6 (создать ключевой кадр)
затем переместите птичку в любое место - например, к
правому краю.
Теперь при проигрывании птичка движется из позиции
в 1-м кадре в позицию, которую вы ей дали в
последнем кадре. Т.е. кадры, между которыми видна
стрелка, являются начальной и конечной стадией
движения.
Тепер можна ускладнити рух - введемо траєкторію.
Для цього натиснути кнопку (7). Над поточним шаром
з'явиться новий шар (зверніть увагу, що між ними
особлива лінія - тобто шар з об'єктом і шар з
траєкторією нерозривно пов'язані).
Тепер, перейшовши в шар траєкторії за допомогою
"олівця" малюємо будь-яку лінію (але, при цьому в ній
не повинно бути складних перетинів, інакше флеш вас
не зрозуміє ^ _ ^).
Для того, щоб пташка почала переміщатися по
траєкторії, потрібно в початковому кадрі (8) помістити
на початок лінії (9), а в кінцевому (10) - на протилежний
кінець лінії (11).
Якщо ви все зробили правильно, то при перегляді
пташка полетить по лінії.
При цьому можна задати "орієнтацію до траєкторії" -
тобто пташка буде повертатися у відповідності з
напрямком руху.
Для цього, натиснувши на будь-який кадр
зі стрілочкою в нижньому меню
"Properties" ставимо галку "Orient to path"
(12).
На всякий випадок у параметрі "Rotate"
краще вказати "None" (13) - цей
параметр задає обертання об'єкта, але
про це пізніше ^ _ ~
Тепер пташка летить "носом вперед")))
Об'єкт з пташкою не обов'язково рухається з початку
лінії в її кінець - її можна переміщати по лінії вільно як
в ту, так і в інший бік.
Для прикладу, виділимо один з проміжних кадрів руху
(14) і перемістимо пташку в іншу позицію (15) (але при
цьому вона повинна бути на лінії).
Як ми бачимо, на цьому місці з'явився ключовий кадр з
новою позицією пташки.
Так само зробимо в іншому місці - виділимо ще кадр
(16) і перемістимо пташку в позицію (17)
Тепер наша пташка літає взад-вперед по лінії.
На цьому все))
• Запам'ятайте "гарячі клавіші", які ми тут застосували:
• F5 - створити (додати) кадр (не ключовий, а простий, без змін)
• F6 - створити ключовий кадр.
• F7 - створити порожній ключовий кадр.
Ще, при створенні "руху" в кадрах існують деякі
тонкощі.
• В одному шарі з рухом може бути тільки один об'єкт. При спробі
створити рух для декількох об'єктів одночасно флеш або
автоматично об'єднує їх в один об'єкт, або неправильно їх
переміщує.
• Рухати можна тільки об'єкти - якщо створити "рух" в кадрі з
графікою флеш автоматично об'єднує її в один об'єкт під ім'ям
Tween ##. Можна звичайно робити і так, але я особисто віддаю
перевагу спочатку створювати об'єкт, а потім застосовувати до
нього рух.
Вот теперь точно все ^_~

More Related Content

Viewers also liked

7 Reasons your B12 Levels are Out of Whack...
7 Reasons your B12 Levels are Out of Whack...7 Reasons your B12 Levels are Out of Whack...
7 Reasons your B12 Levels are Out of Whack...
Linda Socher
 
Osmデータ品質チェック方法
Osmデータ品質チェック方法Osmデータ品質チェック方法
Osmデータ品質チェック方法
Yoshi Sato
 

Viewers also liked (10)

7 Reasons your B12 Levels are Out of Whack...
7 Reasons your B12 Levels are Out of Whack...7 Reasons your B12 Levels are Out of Whack...
7 Reasons your B12 Levels are Out of Whack...
 
Feliz dia de la madre
Feliz dia de la madreFeliz dia de la madre
Feliz dia de la madre
 
Aplicaciones en facebook
Aplicaciones en facebookAplicaciones en facebook
Aplicaciones en facebook
 
JUSTUS AKAMPURIRA CV
JUSTUS AKAMPURIRA CVJUSTUS AKAMPURIRA CV
JUSTUS AKAMPURIRA CV
 
Final research proposal paper oil & venezuela-04.29.16
Final research proposal paper   oil & venezuela-04.29.16Final research proposal paper   oil & venezuela-04.29.16
Final research proposal paper oil & venezuela-04.29.16
 
Виртуальная выставка "Любимых книг забытые страницы"
Виртуальная выставка "Любимых книг забытые страницы"Виртуальная выставка "Любимых книг забытые страницы"
Виртуальная выставка "Любимых книг забытые страницы"
 
Monica-Morales-CV
Monica-Morales-CVMonica-Morales-CV
Monica-Morales-CV
 
Prota tematik 2
Prota tematik 2Prota tematik 2
Prota tematik 2
 
Osmデータ品質チェック方法
Osmデータ品質チェック方法Osmデータ品質チェック方法
Osmデータ品質チェック方法
 
Workout reviews
Workout reviewsWorkout reviews
Workout reviews
 

Similar to Gif animation (10)

як створити банер за допомогою флеш
як створити банер  за допомогою флешяк створити банер  за допомогою флеш
як створити банер за допомогою флеш
 
Pixel Art і анімація.pdf
Pixel Art і анімація.pdfPixel Art і анімація.pdf
Pixel Art і анімація.pdf
 
Laba5photoshop
Laba5photoshopLaba5photoshop
Laba5photoshop
 
Pz3
Pz3Pz3
Pz3
 
лабораторна 7 укр
лабораторна 7 укрлабораторна 7 укр
лабораторна 7 укр
 
лп р5
лп р5лп р5
лп р5
 
ЛР 1_ PHOTOSHOP
ЛР 1_ PHOTOSHOPЛР 1_ PHOTOSHOP
ЛР 1_ PHOTOSHOP
 
Лекція № 1. Методи створення анімації
Лекція № 1. Методи створення анімаціїЛекція № 1. Методи створення анімації
Лекція № 1. Методи створення анімації
 
Створення анімації обертання
Створення анімації обертанняСтворення анімації обертання
Створення анімації обертання
 
Випускна робота Корогодин
Випускна робота Корогодин Випускна робота Корогодин
Випускна робота Корогодин
 

Gif animation

  • 1.
  • 2. Adobe Flash • Adobe Flash (раніше Macromedia Flash), - мультимедійна платформа компанії Adobe Systems для створення веб- додатків або мультимедійних презентацій. Широко використовується для створення рекламних банерів, анімації, ігор, а також відтворення на веб-сторінках відео-і аудіозаписів.
  • 3. Adobe Flash • Анімація в Flash. Початок. ? Малюємо пташку. • Для початку слід усвідомити кілька необхідних термінів, які використовуються під флеше: • Кореневої ролик - та область, з якої починається робота. У ньому є послідовність кадрів, в ньому можна створити кілька шарів.
  • 4. Об'єкт (символ, мувик) - по суті, маленький самостійний ролик - в ньому, так само як і в кореневому ролику є свої кадри і шари. У об'єктах може бути будь-яка графіка та інші об'єкти. Об'єкти мають свої параметри і характеристики, в них навіть є своя (внутрішня) система координат. Кадр - область ролика, розділена за часом. Ключовий кадр - кадр, що містить які-небудь зміни. Ключовий кадр може бути або з якимось змістом, або порожнім - це можна побачити на тимчасовій лінійці. Ключові кадри під флеше відзначаються маленьким кружечком.
  • 5. Ми могли б зробити послідовність кадрів, малюючи кожен кадр заново, але це було б довго. Тому ми зробимо 1 цикл помаху крил пташки в окремому об'єкті (символі), а потім будемо просто переміщати об'єкт. Для створення об'єктів існує кілька способів: Спочатку намалювати що-небудь, виділити і скористатися командою "Convert to Symbol" ("Перетворити в Символ") Створити новий символ в бібліотеці (бібліотеку можна відкрити або в меню "Window-> Library", або за допомогою гарячої клавіші Ctrl + L) і там малювати.
  • 6. Скористаємося першим способом. Отже, ми намалювали галочку, тепер її потрібно виділити і в контекстному меню (правою кн. Миші) вибрати "Convert to Symbol " У віконці вибираємо "Graphic" (про інших випадках - в іншому уроці). Зверніть увагу на пункт "Registration" - тут можна вибрати точку, яка буде початком координат нового символу. Для нашого символу краще вибрати початок координат у центрі - для цього потрібно натиснути в середній квадратик (1)
  • 7. Після цього пташка при виділенні матиме такий вигляд: Тут видно маленький хрестик у середині - це початок координат цього символу. Тепер цей символ з'явився в бібліотеці - у нього є ім'я "Symbol 1" (2) (ім'я можна змінити на будь-яке інше, але ми цього робити не будемо). Для того щоб зайти в об'єкт потрібно натиснути на нього 2 рази в кореневому ролику або в бібліотеці. При цьому відкриється графіка, укладена в об'єкті, і його внутрішня послідовність кадрів.
  • 8. Зайшовши в об'єкт, створимо новий ключовий кадр (3). Найпростіше це зробити за допомогою гарячої клавіші F7 ("створити порожній ключовий кадр"). У новому кадрі ми повинні намалювати наступну фазу руху помаху крил пташки. Щоб можна було орієнтуватися на попередні кадри, існує функція показу декількох кадрів (4). При натисканні на них над лінійкою кадрів з'являється область, на межі якої видно маленькі кружечки (5). Натискаючи та утримуючи їх, можна розширювати або звужувати область видимості. При цьому поточний кадр відкритий для редагування, а решта показані напівпрозорої.
  • 9. Так, орієнтуючись на попередні кадри, ми малюємо кілька фаз одного помаху крил так, щоб останній кадр підходив до першого Тепер можна переглянути анімацію цього об'єкта, натиснувши Enter. При цьому програються всі кадри цього об'єкта з початку до кінця. На цьому етапі можна оцінити правильність анімації і щось виправити.
  • 10. Після того як об'єкт з анімацією одного помаху готовий, можна вийти з нього - для цього достатньо натиснути на будь порожнє місце ролика, або натиснути "Scene 1" над областю малювання (6). Тепер ми знову перебуваємо в кореневому ролику. Але при спробі запустити ролик, натиснувши Enter, ви виявите, що руху не відбувається. І не дивно - в кореневому ролику поки ще тільки один кадр. Для того щоб створити нові кадри досить виділити порожнє місце в будь-якій позиції на тимчасовій лінійці - я вибрав 40-ю - і натиснути F5 (створити кадр). Тепер, натиснувши Enter, ви побачите кілька повторюваних помахів крил пташки.
  • 11. Для того, щоб об'єкт з пташкою переміщався необхідно створити "рух" в кадрах. Для цього натисніть будь-де на створених кадрах правої кн. миші та виберіть "Create Motion Tween" Тепер кадри придбали такий вид :
  • 12. Для того чтобы завершить движение, выделите последний кадр и нажмите F6 (создать ключевой кадр) затем переместите птичку в любое место - например, к правому краю. Теперь при проигрывании птичка движется из позиции в 1-м кадре в позицию, которую вы ей дали в последнем кадре. Т.е. кадры, между которыми видна стрелка, являются начальной и конечной стадией движения.
  • 13. Тепер можна ускладнити рух - введемо траєкторію. Для цього натиснути кнопку (7). Над поточним шаром з'явиться новий шар (зверніть увагу, що між ними особлива лінія - тобто шар з об'єктом і шар з траєкторією нерозривно пов'язані). Тепер, перейшовши в шар траєкторії за допомогою "олівця" малюємо будь-яку лінію (але, при цьому в ній не повинно бути складних перетинів, інакше флеш вас не зрозуміє ^ _ ^). Для того, щоб пташка почала переміщатися по траєкторії, потрібно в початковому кадрі (8) помістити на початок лінії (9), а в кінцевому (10) - на протилежний кінець лінії (11).
  • 14. Якщо ви все зробили правильно, то при перегляді пташка полетить по лінії.
  • 15. При цьому можна задати "орієнтацію до траєкторії" - тобто пташка буде повертатися у відповідності з напрямком руху. Для цього, натиснувши на будь-який кадр зі стрілочкою в нижньому меню "Properties" ставимо галку "Orient to path" (12). На всякий випадок у параметрі "Rotate" краще вказати "None" (13) - цей параметр задає обертання об'єкта, але про це пізніше ^ _ ~
  • 16. Тепер пташка летить "носом вперед")))
  • 17. Об'єкт з пташкою не обов'язково рухається з початку лінії в її кінець - її можна переміщати по лінії вільно як в ту, так і в інший бік. Для прикладу, виділимо один з проміжних кадрів руху (14) і перемістимо пташку в іншу позицію (15) (але при цьому вона повинна бути на лінії). Як ми бачимо, на цьому місці з'явився ключовий кадр з новою позицією пташки.
  • 18. Так само зробимо в іншому місці - виділимо ще кадр (16) і перемістимо пташку в позицію (17)
  • 19. Тепер наша пташка літає взад-вперед по лінії.
  • 20. На цьому все)) • Запам'ятайте "гарячі клавіші", які ми тут застосували: • F5 - створити (додати) кадр (не ключовий, а простий, без змін) • F6 - створити ключовий кадр. • F7 - створити порожній ключовий кадр.
  • 21. Ще, при створенні "руху" в кадрах існують деякі тонкощі. • В одному шарі з рухом може бути тільки один об'єкт. При спробі створити рух для декількох об'єктів одночасно флеш або автоматично об'єднує їх в один об'єкт, або неправильно їх переміщує. • Рухати можна тільки об'єкти - якщо створити "рух" в кадрі з графікою флеш автоматично об'єднує її в один об'єкт під ім'ям Tween ##. Можна звичайно робити і так, але я особисто віддаю перевагу спочатку створювати об'єкт, а потім застосовувати до нього рух. Вот теперь точно все ^_~