Приветствую Вас Гость | RSS Главная | Движение - жизнь! (Прыгающий мячик) - Форум | Регистрация | Вход
Написать администрации: [masterclub.admin@gmail.com] Последние сообщения · Одноклубники · Правила форума · Поиск · RSS
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум » Adobe Flash » Уроки Adobe Flash CS4 » Движение - жизнь! (Прыгающий мячик) (Урок 1)
Движение - жизнь! (Прыгающий мячик)
МаргоДата: Воскресенье, 05.04.2009, 23:14 | Сообщение # 1
Мастер

Админ
Репутация: 543
Сообщений: 4822
Урок - Прыгающий мячик!
 
Награды: 1
DotroxДата: Воскресенье, 05.04.2009, 23:14 | Сообщение # 2
Адепт

Клубчанин
Репутация: 18
Сообщений: 92
Урок 1

Движение - жизнь!

В первом уроке вы увидите главную функцию Flash, главное, чем он отличается от любого графического редактора - движение, анимация!!! И это настоящая анимация, а не какое-нибудь подёргивание!

Итак запускаем Flash, в появившемся при запуске меню выбираем пункт Flash File (Action Script 3.0).
Теперь в панели инструметов нажимаем два раза на иконку с квадратиком(только не так, как при открытии папки, а просто раз нажать и ещё раз), появится маленькое меню, выбираем в нём пункт Oval Tool. Либо можно нажать на клавиатуре латинское O - это будет тоже самое.
Рисуем кружок, не очень большой и не очень маленький, чтоб ему хватило места двигаться по рабочей области. Цвет кружка выбираем внизу панели инструментов под прямоугольничком с ведром, а выше под карандашем цвет обводки.
Поставим и то и то что-нибудь красного оттенка или фиолетового.

Выбираем в панели инструментов самую первуя чёрную стрелочку, она нам понадобится для всех операций с кружком!

А теперь самая, наверное, важная часть урока - знакомство с видами анимации во Flash ( да, их несколько)!

Motion tween - анимация движения
Shape tween - анимация формы
Classic tween - упрощённый вариант motion tween ( в этом варианте не нужно создавать из нарисованного объекта символ перед тем как создавать анимацию - это происходит автоматически).

Но мы пойдём по полному пути. Нажимаем на кружке правой кнопкой мыши и выбираем Convert to Symbol, появится окошко, оставляем в нём всё как есть и жмём ОК.

Теперь переходим к временной шкале. Есть несколько способов работы с ключевыми кадрами, но воспользуемся пока одним! Сейчас на шкале только один кадр, нажимаем на него правой кнопкой мыши и выбираем первый пункт Create motion tween.

Сразу же появится полоска кадров. наводим мышку на её край чтобы появилась двухсторонняя стрелочка, нажимаем левую кнопку мышки и держим, теперь перемещая мышку мы можем установить количество кадров ролика, поставим 60!

А сейчас самое интересное!!! Устанавливаем красный бегунок в первый кадр, тем самым выбрав его. Теперь берём кружок и ставим его в начальную точку, из которой он будет двигаться. Представим, что кружок - это мячик, который попрыгает на экране и выскочит куда-то за его край. Ставим его где-то слева вверху, только учтите, что всё за пределами белого прямоугольника рабочей области в готовом ролике видно не будет!!! Так, поставили!

Теперь перемещаем красный бегунок в 15й кадр и переставляем кружок вниз(можно его поставить на нижний край белой области) и немного правее. Обратите внимание, что за кружком тянется зелёная линия - она показывает путь кружка, но самое интересное, чт её форму можно менять и кружок тогда сможет двигаться не по прямой, а по дуге окружности, например!

Так с 15м кадром закончили, ставим бегунок в 30й и перемещаем кружок вверх и ещё правее, далее в 45м вниз и правее, а в 60м вверх, но уже за пределы белой области чтобы мячик от нас убежал. Готово, мы задали движение кружка.

Нажимаем Enter. Кружок начал двигаться по, заданной нами траектории. Но мы видим всё это в черновом варианте, прямо на рабочей области. Чтобы увидеть как оно будет выглядеть в итоге нажимаем Ctrl и Enter одновременно, через секунду появится окошко, где будет результат работы. Вот, вроде, и всё!

Теперь ещё несколько моентов. Щёлкните мышкой в любом месте за пределами белой области и посмотрите на панель Propeties справа. Там есть несколько пунктов:

FPS - количество кадров в секунду, щёлкаем мышкой по цифрам возле и ставим там 25
Size - размер кадра, нажимаем на кнопочку Edit и в появившемся окне выставляем 640(width) и 480(height). Там можно выставить ещё цвет фона и единицы измерени размера кадра, но оставляем всё как есть!
Stage - цвет фона, и вот тут уже и выставим его. Кликаем мышкой по маленькому прямоугольничку рядом и ставим цвет светло зелёный, например.

На этом работа над изображением на сегодня закончена.

Теперь нужно сохранить работу, она нам ещё понадобиться! Выбираем в главном мню File -> Save as и сохраняем с любым названием, но с расширением .fla

А сейчас, когда работа уже сохранена, создадим сам ролик, который можно будет просматривать без самой программы в Flash плеере. Нажимаем File -> Export -> Export Movie и сохраяем с любым названием. Обратите внимание, что расширение тут уже будет swf

Вот этот файл уже можно разместить на форуме!

На этом первый урок окончен! Продолжение следует!!!

И вот, что получилось у меня:

Прикрепления: Kruzhok1.swf(1.0 Kb) · 9705424.png(90.8 Kb) · 1027813.png(100.9 Kb) · 5020697.png(109.5 Kb) · 7157227.png(96.1 Kb) · 9209774.png(98.2 Kb)




Сообщение отредактировал Dotrox - Воскресенье, 05.04.2009, 19:46
 
Награды: 0
DotroxДата: Воскресенье, 05.04.2009, 23:14 | Сообщение # 3
Адепт

Клубчанин
Репутация: 18
Сообщений: 92
Ромашка, вообще все панели можно двигать и перемещать как удобно, они могут и не прикрепляться к краям, а быть плавающими окнами, которые можно двигать как обычные окна Windows!

Кстати, такое возможно во всех программах Adobe из пакета CS4! В том числе и в фотошопе!




Сообщение отредактировал Dotrox - Четверг, 26.02.2009, 21:29
 
Награды: 0
МаргоДата: Воскресенье, 05.04.2009, 23:15 | Сообщение # 4
Мастер

Админ
Репутация: 543
Сообщений: 4822
Ура! С помощью Ромашки 11 , я тоже установила! Все открыла, сравнила, вышеперечисленные функции постаралась запомнить 15 Так что можно начинать, кто желает, думаю присоединится.
 
Награды: 1
МаргоДата: Воскресенье, 05.04.2009, 23:15 | Сообщение # 5
Мастер

Админ
Репутация: 543
Сообщений: 4822
Ура! Первый урок, дождались ! Буду сегодня пробовать 15
 
Награды: 1
МаргоДата: Воскресенье, 05.04.2009, 23:15 | Сообщение # 6
Мастер

Админ
Репутация: 543
Сообщений: 4822
Я довольная как индийский слон 4 , все получилось с первого раза, и от этого энтузиазм прям выпирает!
Спасибо 10 огромадное, из тебя первоклассный учитель 12 - все доступно, кратко и доходчиво.
Мне очень понравилось обучаться, я пока буду делать кучу мячиков 4 , и ждать с нетерпением следующего урока 6

Вот мой шарик 15 Он у меня выпрыгивал за контуры, но когда мы выставили другой размер, картинка стала больше и поэтому он пропадает не за контурами а внутри. Как кстати с этим быть, может сразу нужный размер картинки устанавливать... потому что судя по всему, потом когда задаешь этот самый размер, он, там где есть движение, все оставляет как есть, а добавляет все за счет фона. Может я че и не так ляпнула 4 , но думаю ты понял что я хотела спросить 1

Я уже и второй успела сделать 4

Прикрепления: 8725767.swf(1.1 Kb) · 4103802.swf(1.1 Kb)
 
Награды: 1
DotroxДата: Воскресенье, 05.04.2009, 23:15 | Сообщение # 7
Адепт

Клубчанин
Репутация: 18
Сообщений: 92
Да, наверное, и правда лучше размер выставлять вначале, я просто вспомнил про него уже в самом конце 1 4

Но можно и выставив размер в конце уже просто в последнем кадре сместить мячик за кадр и всё 15

Это был простой урок, следующие пару будут такого же плана, а потом пойдут посложнее!

Нужно будет ещё добавить к мячику деформацию от удара об землю, ну и саму землю 4


 
Награды: 0
РомашкаДата: Воскресенье, 05.04.2009, 23:15 | Сообщение # 8
Умелец

Админ
Репутация: 195
Сообщений: 1456
Dotrox, спасибо за урок. 6 10 Прикольно, мне понравилось. 12 Давайте же скорее расплющим шарик об землю. 4
Прикрепления: 0889330.swf(0.9 Kb)


Звания и титулы:
Мастер портрета
Открытка года
Мастер открыток
 
Награды: 6
DotroxДата: Воскресенье, 05.04.2009, 23:15 | Сообщение # 9
Адепт

Клубчанин
Репутация: 18
Сообщений: 92
Перед тем как плющить шарик 4 сначала расскажу как делать деформацию объектов, но это через пару дней!

Ромашка, всё получилось хорошо, только попробуй в последнем кадре сместить шарик, чтоб он был за пределами белого прямоугольника и в результате вылетал в конце ролика за кадр!


 
Награды: 0
АннушкаДата: Воскресенье, 26.04.2009, 13:46 | Сообщение # 10
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Dotrox, 1 я тоже сделала... спасибо 11
Прикрепления: 2830741.swf(1.1 Kb)




Звания и титулы:
 
Награды: 9
ФаготДата: Воскресенье, 26.04.2009, 16:44 | Сообщение # 11
Умелец

Клубчанин
Репутация: 116
Сообщений: 852
Аннушка, класс! С приобщением тебя к истинной вере!.. 4 Ну что ж, мячей у нас теперь навалом, пора и о футбольной команде задуматься...
 
Награды: 2
DotroxДата: Воскресенье, 26.04.2009, 18:38 | Сообщение # 12
Адепт

Клубчанин
Репутация: 18
Сообщений: 92
Аннушка, хорошо получилось!!!

 
Награды: 0
АннушкаДата: Воскресенье, 26.04.2009, 19:45 | Сообщение # 13
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Dotrox, спасибо, старалась 11 Дело новое идёт туго, но идёт...



Звания и титулы:
 
Награды: 9
faskaДата: Пятница, 14.08.2009, 00:22 | Сообщение # 14
Адепт

Одноклубник
Репутация: 0
Сообщений: 5
Спасибо, понравилось!))) И все-таки......будет ли второй урок?)))) 1 1
 
Награды: 0
РомашкаДата: Пятница, 14.08.2009, 07:19 | Сообщение # 15
Умелец

Админ
Репутация: 195
Сообщений: 1456
faska, второй урок здесь, а третий вот тут 15

Звания и титулы:
Мастер портрета
Открытка года
Мастер открыток
 
Награды: 6
faskaДата: Суббота, 15.08.2009, 02:33 | Сообщение # 16
Адепт

Одноклубник
Репутация: 0
Сообщений: 5
оооо, спасибо!)))) 15
 
Награды: 0
ФаготДата: Суббота, 15.08.2009, 12:31 | Сообщение # 17
Умелец

Клубчанин
Репутация: 116
Сообщений: 852
faska, только во втором уроке следи за мячом. Упустишь - в третьем уроке нечего делать будет! Так на втором и застрянешь!..
 
Награды: 2
faskaДата: Суббота, 15.08.2009, 17:11 | Сообщение # 18
Адепт

Одноклубник
Репутация: 0
Сообщений: 5
благодарю за совет, буду следить за ним изо всех сил! 15
 
Награды: 0
ФаготДата: Суббота, 15.08.2009, 17:19 | Сообщение # 19
Умелец

Клубчанин
Репутация: 116
Сообщений: 852
Молодца!.. Молодца!.. Но без фанатизма...
 
Награды: 2
alrusДата: Суббота, 15.05.2010, 12:58 | Сообщение # 20
Адепт

Одноклубник
Репутация: 0
Сообщений: 1
Мяч должен деформироваться. А то что получилось больше похоже на круг двигающейся как мяч =)

Тьма пришедшая со Средиземного моря накрыла ненавидимый прокуратором город...
 
Награды: 0
АннушкаДата: Суббота, 15.05.2010, 13:41 | Сообщение # 21
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
alrus, вот и покажите нам, КАК НАДО 3



Звания и титулы:
 
Награды: 9
SilverryДата: Воскресенье, 06.06.2010, 22:02 | Сообщение # 22
Адепт

Клубчанин
Репутация: 5
Сообщений: 20
А у меня никакой линии не появляется (у меня cs3).
То есть, я не могу корректировать траекторию полета шарика. В cs3 это как-то по другому делается или я в чем-то ошибаюсь?
 
Награды: 0
БродягаДата: Понедельник, 07.06.2010, 09:53 | Сообщение # 23
Умелец

Смотритель
Репутация: 283
Сообщений: 685
Quote (Silverry)
В cs3 это как-то по другому делается или я в чем-то ошибаюсь?

Не работал никогда с CS3, но у меня стойкое подозрение, что там еще небыла реализована анимация Motion Tween

Выйти из положения можно с помощью этого урока: Motion Сlassic Guide - во Flash CS4


В тапера просьба не стрелять — лабает как умеет.

Звания и титулы:
Эрудит июня

 
Награды: 1
SilverryДата: Пятница, 18.06.2010, 21:52 | Сообщение # 24
Адепт

Клубчанин
Репутация: 5
Сообщений: 20
Все, скачал CS4 и не заморачиваюсь, особенное спасибо Бродяге!
Прикрепления: Ball.swf(1.6 Kb)
 
Награды: 0
АннушкаДата: Пятница, 18.06.2010, 21:57 | Сообщение # 25
Мастер

Клубчанин
Репутация: 561
Сообщений: 4174
Silverry, молодец! 10 Загляни сюда, чтобы правильно выкладывать уроки у нас. 15



Звания и титулы:
 
Награды: 9
Форум » Adobe Flash » Уроки Adobe Flash CS4 » Движение - жизнь! (Прыгающий мячик) (Урок 1)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:

Посетители дня
Посетители:
Последние сообщения · Одноклубники · Правила форума · Поиск · RSS
Приветствую Вас Гость | RSS Главная | Движение - жизнь! (Прыгающий мячик) - Форум | Регистрация | Вход
Сайт управляется системой uCoz
Раскрутка сайтов