Последние сообщения на форуме
Форум Тема Автор Отв. Дата Последний
S8530 Wave II Не могу зайти в Samsung Apps !!! waver 29 22 ноя 2016, 03:47 vitys-1974
Программы Navitel Navigator Dinamo_LWS 4570 20 ноя 2016, 21:11 jack0571
S8530 Wave II Очень быстро разряжается аккумулятор ivan safronov 24 15 ноя 2016, 04:03 vitys-1974
Помощь Важно! Сбор информации для FAQ по проб... Trixter 48 26 окт 2016, 14:48 jack0571
Помощь Нарастающий звук при вызове! Z_Crash 18 24 окт 2016, 13:52 twizdedsista
S8500 Wave Вечное обновление samsung apps S8500 power_stile 14 21 окт 2016, 13:23 jack0571
  • jack0571
    jack0571 в новости:
  • RE745
    RE745 в новости:
  • jack0571
    jack0571 в новости:
  • DW12AS
    DW12AS в новости:
  • jack0571
    jack0571 в новости:
  • power_stile
    power_stile в новости:
  • jack0571
    jack0571 в новости:
  • power_stile
    power_stile в новости:
  • jack0571
    jack0571 в новости:
  • power_stile
    power_stile в новости:
» » [Инструкции] Практический урок по реализации анимации Flash™ для Bada

[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Автор: Wise, 9-02-2012, 22:07
[Инструкции] Практический урок по реализации анимации Flash™ для Bada


Перед изучением данной лекции рекомендуется ознакомится с предыдущим уроком. Тем кто его уже изучил рекомендуется еще раз перечитать.

В предыдущем уроке мы учились создавать простейшую фоновую заставку на flash:

Кроме того, мы узнали, как создать тему с помощью Sansug Theme Designer. Чтобы продвинуться дальше, важно, чтобы вы понимали общую схему разработки темы, описанной в этой статье.

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

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

Итак, начнем:


Создание контента:
Давайте создадим новый Flash Lite 4 проект, помня содержание предыдущего урока. Настраиваем разрешение экрана и FPS в зависимости от характеристик вашего мобильного телефона:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada
Сохраним этот проект под названием "ChristmasWallpaper.fla"
[Инструкции] Практический урок по реализации анимации Flash™ для Bada


Давайте посмотрим на следующие изображения, которые будут включены в рождественские обои, которые мы сейчас разрабатываем:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Поскольку этот урок учит, как разрабатывать Flash™ контент, порядок создания данных картинок здесь не описываются, поэтому их можно christmaswallpaperresource.zip [202,84 Kb]просто скачать.

Теперь, выберите [File > Import > Import to Library], в которой находятся данные картинки и нажмите кнопку "Open". После этого выберите в правой части экрана вкладку "Library". Тут вы можете убедиться, что все картинки были импортированы в наш проект. Там же можно найти автоматически сгенерированные объекты наших картинок с префиксом "Symbol" (символы). Для удобства дальнейшего использования расположим импортированные объекты по папкам в зависимости от их характеристик. Чтобы создать папку в библиотеке, выберите значок папки в нижней части экрана библиотеки или щелкните правой кнопкой мыши на экране Library и выберите "New Folder" во всплывающем меню. Для начала, создадим новую папку с именем "Bitmap" и переместим в нее *. JPG и *. PNG файлы. Затем точно также создадим папку "Graphics" и переместим в нее сгенерированные символы (Symbols).
[Инструкции] Практический урок по реализации анимации Flash™ для Bada


Файлы символов используются для построения Motion Tween анимации, являющейся мощным инструментом Flash™. Суть Motion Tween анимации состоит в том, что пользователь задает начальный и конечный кадр, а Flash™ автоматически генерирует значения для промежуточных кадров на основе метода интерполяции значений. При этом нам не нужно создавать дополнительные кадры!

В Flash™, существует 3 вида символов: "Graphic", "Button" и "Movie Clip". Graphic - является наиболее примитивным символом, применяемый для для повторного использования картинок, а также в качестве компонентов для других символов. Button - используется для создания интерактивных объектов, которые реагируют на действия пользователя. Movie Clip - используется для создания анимации объектов. Movie Clip включает в себя временную шкалу и может иметь свою собственную анимацию. Например, если вы просто хотите разместить изображение на экране, вы можете сделать это, используя символ типа "Graphic". Если вы хотите разместить изображение, которое выполняет определенные действия, когда вы нажимаете на него, то вам необходимо создать символ "Graphic" и импортировать его в символ "Button", который можно будет разместить на экране. Если вы хотите создать анимированный объект, создайте символ "Graphic", импортируйте его в символ "Movie Clip" и уже тут разрабатывайте анимацию. В результате у вас получится объект с готовой анимацией, который можно будет свободно перемещать по экрану.

Adobe Flash™ автоматически генерирует символ "Graphic" для .PNG изображений, как только они импортируется в библиотеку (мы это уже видели, когда импортировали свои картинки). Так как эти символы генерируются с автоматическими именами, их впоследствии будет тяжело различать. Поэтому, если вы их сразу переименуете, то это впоследствии сэкономит вам кучу времени. Давайте переименуем наши символы используя префикс "G_" как показано на рисунке:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada


[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Теперь давайте заполним наш экран с помощью изображений, находящихся в нашей библиотеке. Для начала, давайте установим фоновое изображение, которое представляет собой снежный пейзаж. Дважды щелкаем по значку "Layer 1" в окне "Timeline" в нижней части экрана, и переименовываем его в "L_bg", так его будет более легко отличить. Затем перетащите фоновый рисунок "bg.jpg" из библиотеки на нашу сцену (экран). Нам необходимо выровнять изображение по центру экрана, сделать это можно выбрав пункт меню "Align Window" а затем выбрать “Align horizontal center” и “Align vertical center”. Также можно сделать это задав значение смещения x и y равным 0 в "Properties window".

Как мы отметили выше, автоматически символы генерируются только для .PNG изображений, поэтому нам необходимо вручную создать символы для картинок формата .JPG. Выберите "bg.jpg" в рабочей области (просто кликните по картинке) и выберите в меню [Modify – Convert to Symbol] или просто нажмите клавишу F8. В появившемся диалоговом окне установите Имя и тип следующим образом:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Registration - определят точку отсчета координат при размещении нашего символа на сцене. Если ваш символ не используется для анимации других объектов, то данный параметр не имеет значения и можно использовать настройку по-умолчанию, то есть верхний левый угол символа. Нажимаем кнопку OK и перемещаем созданный символ в соответствующую папку в библиотеке.

Далее разместим на сцене звезду. Для этого нам нужно создать новый слой, кликнув по значку "New Layer" на временной шкале в нижней части экрана. Переименуем новый слой в "L_sky_star" и перетащим символ "" из библиотеки на сцену и выровняем его по центру сцены, как было описано выше.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Затем разместим на сцене снег, для этого создадим новый слой и назовем его "L_sky_snow". Поместим символ "G_sky_snow" в рабочую область и выровняем его по центру способом, описанным ранее. Аналогичным способом размещаем Санту, создав для него слой "L_santa" и разместив символ "G_santa" в нужном месте на сцене. Тем же путем добавляем Рудольфа ("G_rudolph") на слой "L_rudolph" и дом ("G_house") на слой "L_house". Не стоит беспокоится если вы добавили слои не в том порядке, его можно легко изменить, перетащив на нужную позицию, тем самым задать, какой из объектов будет виден над другими. И в конце мы добавим сияющую звезду. Для этого создадим слой "L_tree_star" и разместим на нем символ "G_tree_star_on" в нужном нам месте. В результате у вас должно получится следующим образом:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada


Разработка Flash™ анимации
Теперь давайте создадим анимацию для контента, который мы разместили на нашей сцене.
Для того, чтобы создать Motion Tween анимацию в Flash™, нам в первую очередь нужно создать символ Movie Clip. Motion Tween анимация создается путем добавления графических символов в каждый кадр нашего Movie Clip. Вы можете создать символ Movie Clip, выбрав в меню [Insert - New Symbol]. Если графический символ уже присутствует на сцене вы можете конвертировать его в Movie Clip, выбрав его на сцене и нажав в меню [Modify – Convert to Symbol], после чего выбрать тип символа Movie Clip.

[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Сначала выберем Санту ("G_santa"), размещенного на сцене, и нажмем в меню [Modify – Convert to Symbol]. В открывшемся окне переименовываем символ в "MC_santa" и устанавливаем тип "Movie Clip". В дальнейшем мы будем использовать префикс "MC" для всех Movie Clip символов. Регистрация определяет базу координат клипа. Выбираем центральное положение. Если вы установите центральную точку в качестве координаты (0, 0), вычислить координаты для таких операций как: движение, увеличениеуменьшение и вращение будет гораздо легче. Нажмите кнопку ОК, чтобы завершить операцию. Теперь мы можем найти символ "MC_santa" в библиотеке в правой части экрана.

Если вы дважды щелкните по символу "MC_santa" расположенном на сцене, то наш Санта выделится, в то время как другие объекты "затемнятся" и будут недоступны. Теперь мы можем редактировать непосредственно наш Movie Clip:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Теперь давайте зададим анимацию. Выберите на временной шкале в нижней части экрана 20й кадр и щелкните по нему правой кнопкой мыши. Выберем пункт "Insert Frame" в всплывающем меню:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

В созданном кадре, щелкните правой кнопкой мыши и выберите из всплывающего меню пункт "Create Motion Tween". После чего будет создан Motion Tween. Теперь мы можем настроить анимацию нужным нам способом.

Перейдем на вкладку "Motion Editor", расположенную рядом с "Timeline". В результате откроется редактор анимации, в котором мы сможем задать перемещение нашего Санты вниз-вверх.
Как уже отмечалось ранее в Motion Tween анимации если пользователь задает значение для нескольких кадров, Flash™ на основе интерполяции этих значений автоматически заполнит остальные кадры, не заполненные пользователем. Кадры, которые задает пользователь мы называем "ключевыми" (Keyframe). Чтобы создать ключевой кадр, поместите курсор мыши на кадре, как показано ниже, щелкните правой кнопкой мыши на соответствующей пунктирной линии и нажмите "Add Keyframe".
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Если этот способ неудобен для вас, вы можете кликнуть непосредственно по номеру кадра в верхней части редактора или ввести номер кадра в специальное поле в нижней части экрана, как показано на рисунке ниже, а затем установить необходимое значение для ключевого кадра, как описано ниже. В этом случае ключевой кадр создастся автоматически.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Перемещение Санты вверхвниз означает, что будет изменяться его Y координата (++ вниз, -- вверх). Давайте создадим в 10 кадре Keyframe и изменим в нем Y координату на -5 пикселей. Мы видим, что теперь изменился наклон линии, соответствующей координате Y.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Это означает, что наша анимация готова. Тем же способом создадим Keyframe в 20-м кадре и установим там Y координату, равную 0. В результате график приобретет вид, указанный на рисунке ниже:
[Инструкции] Практический урок по реализации анимации Flash™ для Bada
После того как вы проделаете все действия указанные выше, то анимация будет выглядеть следующим образом: до 10-го кадра Y координата будет плавно изменяться от 0 до -5. После 10-го и до 20-го кадра Y координата будет плавно изменяться от -5 до 0. X координата будет неизменна на протяжении всего времени. Таким образом мы задали движение для Санты. Теперь, давайте создадим другую анимацию. Для того, чтобы покинуть редактор нашего клипа, нажмите кнопку
"Scene 1" в верхней левой части экрана.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Тем же способом преобразуем символ Рудольфа "G_rudolph" в Movie Clip и назовем его "MC_rudolph". По аналогии с предыдущим примером создадим анимацию для Рудольфа, только на этот раз используем ось X, таким образом мы заставим наш объект двигаться влево-вправо. Кстати говоря, мы можем одновременно использовать анимацию и для оси X и для оси Y.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Теперь, давайте более подробно рассмотрим Motion Editor. Тут у нас имеются оси X и Y, которые мы использовали в примерах, описанных выше, а также операция Вращения (Rotation ). Если прокрутить окно редактора ниже раздела "Basic motion" мы увидим раздел настроек Transformation, который позволяет работать с такими параметрами как: масштабирование и наклон объекта. В результате таких преобразований может сильно ухудшится качество изображения, поэтому если вам необходимо использовать данные опции без потери качества, рекомендуется вручную создавать ключевые кадры, и заполнять их готовыми графическими объектами, созданными в сторонних графических редакторах.

Далее, давайте создадим анимацию, которая заставит звезду на елке мигать. Таким же образом, выбираем символ "G_tree_on" на сцене и преобразуем его в Movie Clip с именем "MC_tree_star", как показано на рисунке ниже.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Дважды щелкаем на созданном символе "MC_tree_star" и переходим в режим редактирования Movie Clip, щелкаем правой кнопкой мыши на 20 кадре и выбираем из контекстного меню "Insert Frame".

Путем изменения координат невозможно заставить звезду мерцать, поэтому мы подготовили 2 графических символа: "G_tree_star_on" и "G_tree_star_off". Создаем Keyframe в 11-м кадре. Удалите в данном кадре символ “G_tree_star_on” и замените его на “G_tree_star_off” сохраняя координаты положения символа. Таким образом, в кадрах с 1 по 10 у нас будет отображаться символ “G_tree_star_on”, а в кадрах с 11 по 20 - символ “G_tree_star_off”. Вот так мы и получим эффект мерцания звезды.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Ну и наконец, давайте создадим анимацию снежинок в небе. Для того, чтобы покинуть редактор нашего клипа, нажмите кнопку "Scene 1" в верхней левой части экрана. Выбираем символ "G_sky_snow" на сцене и преобразуем его в Movie Clip с именем "MC_sky_snow". Если вы не можете выбрать "G_sky_snow", то можно установить на все остальные слои режим блокировки, как показано на рисунке ниже. Тогда вы сможете легко выбрать необходимый вам объект.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Дважды щелкаем по символу "MC_sky_snow", выбираем 40-й кадр на временной шкале, вставляем ключевой кадр, выбрав "Insert Frame", щелкаем правой кнопкой мыши и выбираем из контекстного меню пункт "Create Motion Tween". 40 кадров соответствует примерно 2.7 секундам при данном значении FPS (15). Выбираем "Motion Editor", и находим раздел "Color Effect" (под разделом "Basic Motion"), нажимаем кнопку "+" и выберем значение "Alpha".
[Инструкции] Практический урок по реализации анимации Flash™ для Bada


Используя данную настройку вы можете изменять прозрачность вашего символа. При значении "Alpha", равном 0, наш символ становится полностью прозрачным и мы не сможем его видеть. При значении 100%, символ становиться полностью непрозрачным и отображается таким как мы его создали.

Итак, после того как мы выбрали данную опцию, создадим ключевые кадры в следующих местах: 20-й и 40й кадр. Для й-го и 40го кадра установим уровень Alpha 0%, для 20го кадра - 100%. Таким образом наши снежники буду исчезать, появляться и снова исчезать и т.д. Если данный способ неудобен для вас мы можете просто перетащить черную точку на графике в место, которое вам нужно. Однако если вам нужно точно значение, мы рекомендуем вводить его вручную.
[Инструкции] Практический урок по реализации анимации Flash™ для Bada

Выберите в меню [Control - Test Movie - тест] или нажмите Ctrl + Enter, чтобы просмотреть вашу анимацию в действии.
Создание Action Script:
Пользуясь материалами предыдущего урока, создадим новый Action Script 3.0 Class. Выбираем в меню [File – New] -> Action Script 3.0 Class. Создаем файл Main.as и вводим туда следующий код:

package
{
   import flash.display.*;
   import flash.events.Event;

   public class Main extends MovieClip    {
      public function Main()  //Конструктор
      {
          // Добавляем listener, который будет срабатывать при добавлении объектов данного класса на Stage
          addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
      }

       private function handleAddedToStage(e:Event):void {
             // Убираем наш listener
             removeEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);

             // Выполняем автозаполнение экрана, даже при несоответствии разрешения нашего ролика разрешению устройства
             stage.align = StageAlign.TOP;
             stage.scaleMode = StageScaleMode.SHOW_ALL;

              // Выключаем перемещение фокуса при нажатии по экрану или кнопкам
              stage.tabChildren = false;
              stage.stageFocusRect = false;
         }
    }
}


Далее подключаем наш класс в настройках основного проекта и нажимаем Ctrl + Enter (Как это сделать подробно описано в предыдущем уроке). В результате мы получим готовый .SWF файл, который теперь сможем вставить в нашу тему в качестве Idle Wallpaper.

по материалам сайта http://developer.bada.com

Информация взята с badawise.ru

Перепечатка материалов строго запрещена! Разрешается только ссылка на оригинальную статью!
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ВНИМАНИЕ! Все файлы расположенные на данном ресурсе были взяты из открытых источников. Все права на материалы представленные на сайте, принадлежат их авторам и издательствам. Любая информация представленная здесь, может использоваться только в ознакомительных целях, после чего вы обязаны ее удалить и приобрести в магазине. Ни администрация сайта, ни любые другие лица не могут нести отвественности за использование материалов данного сайта. Входя на сайт вы автоматически соглашаетесь с данными условиями.

Ramiro

  • 15 февраля 2012 16:22
  • 47 комментариев
спасиб качнул , для человека который ничего не понимает в программировании чуть мозг не вскипел аж задумался аа но мне так нада?!

Wise

  • 10 февраля 2012 21:56
  • 100 комментариев
Ramiro,

могу попозже выложить

Все будет сделано, но только завтра!
Всё моё творчество тут: http://badawise.ru/

Выкладываем и качаем файлы вместе:
http://borncash.com/?ref=188285
http://lib.wm-panel.com/reg/8228e5cf0101759c3a2f2534548407ca
http://turbobit.net/partner/?PHPSESUD=A8C6F177E0C4A985AF2CE5B0C88C1D23
http://depositfiles.com/signup.php?ref=Wise1986

DEMONVoz

  • 10 февраля 2012 15:25
  • 352 комментария
Цитата: Ramiro
где качнуть без зла ADOBE.FLASH.PROFESSIONAL.CS5.5?

на любом торрент-трекере

Samsung Galaxy Ace 2 GT-I8160
Samsung Wave 525 GT-S5250
Телефон убивает не MultiLoader, а кривые руки!
Школота - это не возраст, это - диагноз.

Ramiro

  • 10 февраля 2012 15:14
  • 47 комментариев
где качнуть без зла ADOBE.FLASH.PROFESSIONAL.CS5.5?

vovchiksss

  • 10 февраля 2012 11:11
  • 13 комментариев
Доброго времени суток!А Вы не могли бы либо выложить либо прислать в личку первый и второй уроки этой замечательной инструкции только все пункты которые нужно выполнить(написанные на английском языке)на русском языке!Просто я скачал эту чудо программу ADOBE.FLASH.PROFESSIONAL.CS5.5 полнстью на русском языке!И думаю у многих кто захочет этим заниматься она на русском!Заранее очень благодарен за труды!От меня будет однозначно плюс!

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Самое популярное на сайте
Кто сейчас на сайте?
Сейчас на сайте: 10
Гостей: 7
Пользователи: 0

0
Облако тегов