Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
Миу....
tn_gallery_16121_1054_76598.jpg

© Krasivo
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

4 страниц V   1 2 3 > »   
Добавить ответ в эту темуОткрыть тему
> Прыгающий мяч, урок для начинающих N2, Adobe Flash CS3, анимация движения (Motion Tween)
V
dreamer
сообщение 6.05.2007 - 15:45
Сообщение #1


Салат... или же суп...
**

3 местоЗвезда писателя II степениЗвезда писателя II степениЗвезда писателя III степениЗвезда писателя II степениЗвезда писателя I степени
Группа: Почетные граждане
Сообщений: 218
Регистрация: 4.08.2006
Из: Дом родной
Пользователь №: 359
Галерея


Симпатии:  37  


Прыгающий мяч, урок для начинающих N2
Adobe Flash CS3, анимация движения (Motion Tween)

1. Предварительные настройки
- Создаём новый документ: File > New > Flash File (ActionScript 3.0)
- Изменим частоту кадров с 12 fps (12 кадров в секунду) до 30 fps. Для этого дважды щёлкаем на надписи 12 fps в нижней части палитры Timeline, затем в поле Frame Rate пишем 30.
Прикрепленное изображениеПрикрепленное изображение
- Изменяем имя слоя «Layer 1» на «Мяч»


2. Рисуем мяч. Шаги почти такие же, как в уроке N1 при создании тушки колобка.
- Выбираем первый кадр слоя «Мяч»
- Рисуем в нижней части рабочей области небольшой круг (т.к. мяч будет прыгать вверх)
- Ещё раз выбираем первый кадр слоя «Мяч»
- На палитре Color выбираем тип заливки Radial
- Для центра градиента (левый цвет градиента) выбираем любой светлый цвет, для края градиента (правый цвет градиента) выбираем любой цвет средней яркости
- Перемещаем центр градиента
Прикрепленное изображение


Для правильной работы анимации движения должно быть выполнено несколько условий:
1. Наличие символа для каждого анимируемого объекта. Другими словами, анимация движения всегда создаётся на основе символов.
2. Отсутствие посторонних объектов. В начальном и конечном ключевых кадрах анимации движения должен находиться только один символ – ничего лишнего.
3. Для анимации используется один и тот же символ. Т.е. в начальном и конечном ключевых кадрах анимации движения должен находиться один и тот же символ. В процессе анимации будут меняться только свойства этого символа (например, изменяя координаты символа, получаем анимацию перемещения в пространстве)


3. Создаём символ - основу анимации движения (Motion Tween).
- Выбираем первый кадр слоя «Мяч». При создании символов желательно выбирать именно кадр, а не объекты на рабочей области, т.к. при выборе кадра Вы автоматически выбираете всё его содержимое (проще соблюсти условие N2).
- Выполняем команду Modify > Convert to Symbol… (F8)
- Называем символ «Мяч». Тип символа – Movie Clip.
Прикрепленное изображение


Список всех символов для текущего документа можно найти на палитре Library (Window > Library (Ctrl +L)). Палитра Library обычно находится в правой нижней части окна Flash.

4. Создаём анимацию прыжков. Анимация прыжков состоит из двух стадий. На первой стадии мяч подпрыгивает вверх, замедляясь до нулевой скорости, затем на второй стадии он падает вниз, ускоряясь от нулевой скорости. Для нормальной работы циклической анимации первый и последний кадр анимации должны быть одинаковы.
- Добавляем в слой «Мяч» пятнадцатый и тридцатый ключевой кадр (нажимаем правой кнопкой на кадр, выбираем Insert Keyframe).
Прикрепленное изображение
- Выбираем 15 кадр слоя «Мяч».
- Перемещаем мяч наверх, удерживая клавишу Shift (инструмент Selection Tool – чёрная стрелка).
Прикрепленное изображение
- Выбираем первый кадр слоя «Мяч» (или любой кадр первой стадии анимации – с первого по четырнадцатый).
- Включаем анимацию движения на первой стадии. Для этого на палитре настроек (Properties) выбираем из списка Tween: > Motion (по умолчанию None – покадровая анимация). Если всё сделано правильно, кадры первой стадии окрашиваются в голубой цвет, и рисуется стрелочка слева-направо.
Прикрепленное изображение

- В настройках анимации (на палитре Properties), выберем Ease > 100 (при значении Ease = 100 происходит замедление движения до нулевой скорости).
Прикрепленное изображение
- Выбираем пятнадцатый кадр слоя «Мяч» (или любой кадр второй стадии анимации – с пятнадцатого по тридцатый).
- Включаем анимацию движения на второй стадии. Для этого на палитре настроек (Properties) выбираем из списка Tween: > Motion.
Прикрепленное изображение
- В настройках анимации, выберем Ease > -100 (при значении Ease = -100 происходит ускорение движения с нулевой скорости).
Прикрепленное изображение


5. Тестируем анимацию - команда Control > Test Movie (Ctrl + Enter)

Прикрепленный файл  ball1.swf ( 277 байт ) Кол-во скачиваний: 11982


6. Усложним анимацию, добавив сплющивание мяча. В итоге получится анимация из четырёх стадий:
1. Сплющенный мяч восстанавливает форму (Начинаем со сплющенного мяча, т.к. в начале анимации мяч находится внизу, и анимация циклическая). Восстановление формы происходит с ускорением.
2. Мяч подпрыгивает (с замедлением).
3. Мяч падает (с ускорением).
4. Мяч сплющивается (с замедлением). В конце 4 стадии мяч должен быть настолько же сплющен, как и в начале 1 стадии, чтобы при воспроизведении анимации не произошло скачка.

Приступим:
- Скопируем первый кадр слоя «Мяч» в 4 кадр и в 27 кадр, чтобы создать небольшие промежутки простоя мяча в начале и конце анимации (при добавлении обычным способом – Insert Keyframe, добавится частичное подпрыгивание на первую и четвёртую стадию, а нам это не нужно). Для этого нажимаем правой кнопкой на первый кадр, выбираем Copy Frames, затем правой кнопкой на 4 кадр > Paste Frames, правой кнопкой на 27 кадр > Paste Frames.
Прикрепленное изображение
Прикрепленное изображение
- Выбираем первый кадр слоя «Мяч»
- Сплющиваем мяч инструментом Free Transform (Q). Для этого перетаскиваем вниз его верхнюю границу, удерживая клавишу Alt (если не использовать Alt, низ мяча будет подскакивать).
Прикрепленное изображение
- Скопируем первый кадр слоя «Мяч» в 30 кадр (чтобы добавить сплющивание на последнюю стадию и устранить скачок при переходе с последнего кадра на первый кадр в циклической анимации). Для этого нажимаем правой кнопкой на первый кадр, выбираем Copy Frames, затем правой кнопкой на 30 кадр > Paste Frames.

- Проверим ускорение на всех стадиях. Выбираем первый кадр, на палитре настроек выбираем Ease > -100; 4 кадр - Ease > 100; 15 кадр - Ease > -100; 27 кадр - Ease > 100.


7. Проверим анимацию (Ctrl + Enter).

Прикрепленный файл  ball2.swf ( 296 байт ) Кол-во скачиваний: 11899


Исходник здесь:

для Flash CS3
Прикрепленный файл  ball.zip ( 4.98 килобайт ) Кол-во скачиваний: 860


для Flash 8
Прикрепленный файл  less2_8_.zip ( 5.68 килобайт ) Кол-во скачиваний: 448


для Flash MX2004
Прикрепленный файл  less2_mx2004_.zip ( 6.1 килобайт ) Кол-во скачиваний: 254


для Flash MX
Прикрепленный файл  less2_mx_.zip ( 6.77 килобайт ) Кол-во скачиваний: 289



Для правильного отображения анимации (файлы .swf) должен быть установлен Adobe Flash Player 9. Его можно бесплатно скачать на adobe.com > Get Adobe Flash Player

Урок написан для Seegix.net и Arttower.ru

Продолжение следует...

------------------------------------------------------------------------------------------------------------------------------------------
Автором урока является Бруевич П.В. a.k.a. dreamer .
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.


The tutorial is written by Бруевич П.В. a.k.a. dreamer .
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.


Сообщение отредактировал Des - 18.02.2008 - 21:39
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Flash
сообщение 7.12.2007 - 15:17
Сообщение #2


Проезжий
*


Группа: Жители
Сообщений: 13
Регистрация: 7.12.2007
Пользователь №: 6531



Симпатии:  0  


Всё получилось. Спасибо.
Прикрепленный файл  ball.swf ( 553 байт ) Кол-во скачиваний: 578
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
jokerom
сообщение 8.12.2007 - 07:29
Сообщение #3


Зажиточный Горожанин
*****

2 место1 место2 место1 место1 место3 место1 место1 местоМеткий стрелок3 место
Меткий стрелокЗа вклад в развитие ArtTower.ruМеткий стрелокМеткий стрелокЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 2552
Регистрация: 30.09.2006
Из: Москва
Пользователь №: 974
Галерея


Симпатии:  167  


Flash, формы, которые принимает резиновый мяч при ударе и отскоке, почти все сделано правильно.
Но и в уроке, и особенно в Вашем исполнении, видно некоторое залипание мяча.
На "столкновение" мяча с полом используется всего два кадра, третий кадр - это уже отскок.






--------------------
влюбленный апельсин
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
dreamer
сообщение 8.12.2007 - 14:40
Сообщение #4


Салат... или же суп...
**

3 местоЗвезда писателя II степениЗвезда писателя II степениЗвезда писателя III степениЗвезда писателя II степениЗвезда писателя I степени
Группа: Почетные граждане
Сообщений: 218
Регистрация: 4.08.2006
Из: Дом родной
Пользователь №: 359
Галерея


Симпатии:  37  


Цитата(jokerom @ 8.12.2007 - 07:27) *
Flash, формы, которые принимает резиновый мяч при ударе и отскоке, почти все сделано правильно.
Но и в уроке, и особенно в Вашем исполнении, видно некоторое залипание мяча.
На "столкновение" мяча с полом используется всего два кадра, третий кадр - это уже отскок.


Хм, спасибо! Подумаю, можно ли поправить урок без значительного увеличения сложности.
Мне кажется, что всё-таки для первого урока по Motion Tween важнее простота выполнения, а не реализм.

Сообщение отредактировал dreamer - 8.12.2007 - 14:48
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
jokerom
сообщение 8.12.2007 - 17:27
Сообщение #5


Зажиточный Горожанин
*****

2 место1 место2 место1 место1 место3 место1 место1 местоМеткий стрелок3 место
Меткий стрелокЗа вклад в развитие ArtTower.ruМеткий стрелокМеткий стрелокЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 2552
Регистрация: 30.09.2006
Из: Москва
Пользователь №: 974
Галерея


Симпатии:  167  


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



Сообщение отредактировал jokerom - 8.12.2007 - 17:40


--------------------
влюбленный апельсин
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
dreamer
сообщение 9.12.2007 - 14:05
Сообщение #6


Салат... или же суп...
**

3 местоЗвезда писателя II степениЗвезда писателя II степениЗвезда писателя III степениЗвезда писателя II степениЗвезда писателя I степени
Группа: Почетные граждане
Сообщений: 218
Регистрация: 4.08.2006
Из: Дом родной
Пользователь №: 359
Галерея


Симпатии:  37  


Цитата
dreamer, согласен, что простота в уроке важней реализма, и мои придирки не слишком усложняют задачу,
и мяч выглядит более натурально.

Наверное я не правильно понял как был сделан Ваш мультик...
А можно у Вас попросить .fla исходник?
Я себе представлял изменения с использованием анимации внутри символов, которая описана в следующих уроках.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
jokerom
сообщение 9.12.2007 - 16:17
Сообщение #7


Зажиточный Горожанин
*****

2 место1 место2 место1 место1 место3 место1 место1 местоМеткий стрелок3 место
Меткий стрелокЗа вклад в развитие ArtTower.ruМеткий стрелокМеткий стрелокЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 2552
Регистрация: 30.09.2006
Из: Москва
Пользователь №: 974
Галерея


Симпатии:  167  


dreamer, пожалуйста.


--------------------
влюбленный апельсин
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
dreamer
сообщение 10.12.2007 - 10:43
Сообщение #8


Салат... или же суп...
**

3 местоЗвезда писателя II степениЗвезда писателя II степениЗвезда писателя III степениЗвезда писателя II степениЗвезда писателя I степени
Группа: Почетные граждане
Сообщений: 218
Регистрация: 4.08.2006
Из: Дом родной
Пользователь №: 359
Галерея


Симпатии:  37  


jokerom, в Вашем варианте присутствует как Motion Tween, так и покадровая анимация. Урок посвящен Motion Tween - для многих это усложнит понимание. К тому же было бы эффективнее объединить анимацию, сделанную в слоях "Мяч" и "блик" в один символ (независимое вращение мяча тоже можно сделать, с сохранением момента - внутри символа).
Так что предлагаю сделать более сложный вариант урока отдельно. Можно для интересности ещё добавить анимированную падающую тень от мяча (с прозрачностью).
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Liren
сообщение 3.02.2008 - 22:28
Сообщение #9


Читатель Страны Чудес
***

1 место
Группа: Жители
Сообщений: 321
Регистрация: 26.06.2007
Из: Великий Новгород
Пользователь №: 4145
Глазами и Душой
Галерея Блог


Симпатии:  26  


Спасибо, dreamer...
Начал изучать флэш...круто...
Вы все правильно говорите...
Ваши уроки очень доступны...Спасибо)


--------------------
утро...пойдем...домой...
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
dreamer
сообщение 4.02.2008 - 17:03
Сообщение #10


Салат... или же суп...
**

3 местоЗвезда писателя II степениЗвезда писателя II степениЗвезда писателя III степениЗвезда писателя II степениЗвезда писателя I степени
Группа: Почетные граждане
Сообщений: 218
Регистрация: 4.08.2006
Из: Дом родной
Пользователь №: 359
Галерея


Симпатии:  37  


И Вам спасибо! smile.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
neraven
сообщение 2.08.2008 - 11:07
Сообщение #11






Группа: Туристы
Сообщений: 3
Регистрация: 28.07.2008
Пользователь №: 9534



Симпатии:  0  



А этот мячик прыгает на сайте Adobe Flash

Сообщение отредактировал neraven - 2.08.2008 - 14:54
Прикрепленные файлы
Прикрепленный файл  Мячик.zip ( 15.01 килобайт ) Кол-во скачиваний: 630
 
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Edvinlaura
сообщение 5.09.2008 - 11:19
Сообщение #12






Группа: Туристы
Сообщений: 2
Регистрация: 5.09.2008
Пользователь №: 9909



Симпатии:  0  


можно еще к сплющиванию добавить небольшое симметричное расширение
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
oposum
сообщение 21.09.2008 - 23:51
Сообщение #13






Группа: Туристы
Сообщений: 3
Регистрация: 19.09.2008
Пользователь №: 10025



Симпатии:  0  


Автору большое спасибо, достаточно доступный и хороший урок clap.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
LionCubby
сообщение 16.11.2008 - 12:48
Сообщение #14






Группа: Туристы
Сообщений: 7
Регистрация: 16.11.2008
Из: Новосибирск
Пользователь №: 10672



Симпатии:  0  


Спасибо, очень хорошие уроки! prelest.gif

Прикрепленные изображения
Прикрепленное изображение
 
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
сияющая
сообщение 20.11.2008 - 09:15
Сообщение #15






Группа: Туристы
Сообщений: 2
Регистрация: 19.11.2008
Пользователь №: 10724



Симпатии:  0  


Спасибо за урок!
Прикрепленные файлы
Прикрепленный файл  мяч.swf ( 355 байт ) Кол-во скачиваний: 670
 
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

4 страниц V   1 2 3 > » 
Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 18.12.2017 - 13:45