Страницы

четверг, 23 февраля 2012 г.

Flash. Создаем покадровую анимацию

Начинаем рисовать первые шедевры и создаем для них анимацию. Учимся работать на первых стадиях во FLASH.

Итак, я надеюсь, вы уже ознакомились с видом программы adobe flash, и посмотрели, где какие значки имеются и располагаются в наших руках. Представляю вам вид программы после запуска, установленной на моем компютере версии Adobe Flash CS4: Представляю мое расположение окон программы:


  • Как видите, у меня вся менюшка с инструментами находится слева - эти инструменты мы будем использовать для рисования и редактирования наших творческих произведений.
  • Окно рисования по центру снизу - это наш белый лист, на котором (так бы мы делали и вживую) мы будем собственно творить.
  • Сверху по центру - окно с кадрами (фреймами), которое и будет являться нашим местом отсчета для создания из статической графики анимационного движения, придав очередную посменность кадрам с рисунками, тем самым творя из этого динамические (изменяющиеся картинки).
  • Справа - окошко с настройками, которые могут в принципе изменяться нами, но пока они нам не пригодятся я так думаю.
Кстати вот та суть создания анимации - это поочередная смена кадров, т.е. смена рисунков один за другим, что создает видимость живой, изменяющейся картинки. Давайте пробывать рисовать. Итак, по уже имеющимся знаниям определим, что окошко слева - это наши инструменты. С ними мы и будем работать. Рисовать можно разными элементами, начиная от карандаша и заканчивая (даже не знаю чем) другими возможностями :)

Создаем новый файл, в результате чего должен появиться наш пустой белый лист. Мы готовы к рисованию. Итак сразу отметим, как только появился белый лист, в окне с кадрами сверху (далее буду называть их фреймами) выделился черный незакрашенный кружок на фоне, похожим на клаваши пианино - это наш первый кадр для прорисовки. Изначально всегда создается первый кадр для возможности рисования. А далее выбор количества кадров мы будем увеличивать в зависимости от нашего желания. Итак вот такая картина должна быть у вас сверху:


Красная линия вдоль нашего кадра обозначает, что в данный момент используется данный кадр, т.е. мы рисуем и изменяем сейчас его. Если перевести курсор на другой кадр и выбрать его, то эта красная метка перепрыгнет на выбранный кадр. Итак выделим на окне кадров наш незакрашенный кружок - 1 кадр. Пока в этом кадре мы ничего не нарисовали, он останется незакрашенным и белым. Как только мы будем на нем рисовать, он станет черным и закрашенным. Можете сами в этом убедиться и начать рисовать.
Для начала рисования можете выбрать любой инструмент по душе. Попробуйте, например, карандаш. Проведите линию или овал на белом листе по центру (наша область рисования) и посмотрите, как изменится вид нашего первого кадра сверху (станет закрашенным черным). Это сигнализирует нам о наличии внутри кадра какой-то графики или объекта.

Давайте попробуем нарисовать круг с помощью инструмента Oval Tool. Вот, что примерно должно получиться:


Ура! У нас есть первый кадр, который мы можем уже просмотреть :) С помощью сочетания клавиш Ctrl+Enter вы вызовете Flash Player, в котором начнет проигрывать ваше создание. Пробуйте! Что мы видим: застывший кружок на белом фоне :) Ну а что мы хотели, если мы только его и нарисовали.

Давайте попробуем оживить наше рукоделие путем создания нового кадра. Для создания нового кадра нам нужно перевести взгляд, эмоции, чувства, мысли курсор на кадр номер 2 (вверху в окне с кадрами) и выбрать его. Наш красный маркер соответственно должен сместиться на второй кадр, что даст нам понять о выбранном втором кадре, который в данный момент будет нами использоваться.  Жмем правой кнопкой мыши на втором кадре. Давайте разберем команды из выпавшего меню для понимания:
  • "Insert Keyframe" - создаст фрейм с внутренним наполнением, таким же, как и у предыдущего кадра. В нашем случае, на белом листе появится тот же кружок, который мы создали в первом кадре. То есть копируется вся информация с предыдущего фрейма. Команда  "Insert Keyframe" создает копию кадра, который независимо от предыдущего может меняться и принимать вид, задаваемый нами конкретно для этого кадра.
  •  "Insert Frame" -  создаст кадр продолжения для предыдущего кадра. Т.е. данный фрейм, как будто будет продолжать анимацию предыдущего кадра. Если у нас там был кружок, то здесь он и останется. Отличие от  "Insert Keyframe" состоит в том, что данный кадр мы менять не сможем, он будет зависеть от предыдущего кадра, имеющего черный закрашенный кружок. А сам он он будет иметь форму прямоугольника, что свидетельствует о его зависимости от предыдушего кадра, имеющего закрашенный черный или незакрашенный круг.
  •  "Insert Blank Keyframe" - создаст кадр с пустым внутренним содержимым, т.е. просто новый кадр, имеющий внутри себя пустой чистый лист, на котором мы будем рисовать. Этот кадр также не  зависит от предыдущих кадров, но ничего внутри себя не имеет - пустой кадр.
Теперь выбираем из выпавшего меню "Insert Keyframe" (вставить кадр):


У нас теперь есть второй кадр с пустым содержимым. Давайте наполним его чем-нибудь. Например, нарисуем квадрат. Выбираем инструмент для рисования квадрата и вводим его в белый наш лист:


Теперь давайте посмотри что у нас получилось. Проверим сочетанием клавишь Ctrl+Enter, вызвав тем самым наш проигрыватель Flash. Итак, у нас теперь есть готовая флешка :) Конечно пока она содержит два кадра, сменяющих друг друга без остановки, но это наш первый шаг и можно этим гордиться! Для того, чтобы наша флешка появилась в формате .swf, нужно сделать публикацию файла, которая находится в первом главном меню нашей программы. Проверьте ваши настройки публикации и посмотрите, как настроена ваша программа. Можно также использоваться сочетание клавиш  Ctrl+Shift+Enter. Итоговая картина во Flash должна быть примерно такая:

Комментариев нет:

Отправить комментарий