Из предыдущих уроков вы возможно поняли основные принципы работы в программе Flash MX, это что касается стандартных возможностей программы, основные шаги более-менее похожи. В данном примере немного усложним задачу, создав чуть более сложный графический элемент (пузырек) и применив дополнительный код - ActioScript.

1) Итак, приступаем. Для работы, в качестве заднего плана нам понадобится подходящее фото. Все рабочие файлы можно скачать здесь

 

 рис.1

 

2)  Откроем новый flash-документ с размерами 410Х455 пикс и частотой кадров 30 кадр. в сек. Импортируем в рабочую область файл bier.jpg из папки из папки bubbles. Слой переименуем как bg.

 

рис.2

 

3)  Создаем новый символ (Ctrl+F8). Имя дадим bubble, Тип - Графика.

 

 рис.3

 

4) Это самая творческая часть урока, нам надо создать фотореалистичный пузырек. Начнем с того что создадим Круг 10 пикс диаметр (инструмент Овал(R)). Немного предадим нашему овалу форму яйца , для этого на верхней панели >Изменить > Преобразование > Искажение(овал должен быть выделен). Теперь надо создать заливку. Перейдем на закладку Цвет (в правом верхнем углу). Тип установим радиальный . Создаем сложный градиент, добавив несколько маркеров с определенным цветом. Ориентируемся на рисунок 4.

 

рис.4

 

5) Для того чтобы выравнять градиентную заливку относительно созданной фигуры, воспользуемся Инструментом преобразования градиента (клавиша F).

 

 рис.5

 

6) Внутри этого символа создадим еще один графический элемент. На панели слоев создадим новый слой, назовем его как blick. Создадим этот блик, используя Инструмент Перо (P). Изменить форму элемента достаточно просто, подводя курсор к линии и оттягивая ее. Заливка для этого элемента - белая.

 

 рис.6

 Пузырек готов!

 

7) Нашим следующим шагом будет создание еще одного символа. Нажимаем Ctrl+F8, назовем его bubbleMC, Тип - Фрагмент ролика. Откроем дополнительные поля в этой таблице нажав кнопку Дополнительно. В поле Связывание > Идентификатор > впишем bubbleMC; поставим галочку на Экспортировать для ActionScript.

 

 рис.7

 

8) Переименуем этот слой в path. Нарисуем инструментом Карандаш этот путь, установив для инструмента режим Сглаживание. Кривая должна быть зигзагообразная в нижней части и длина не должна превышать 350 пикс.

 

рис.8

 

9) Создайте новый слой, переименуйте его в bubble и переместите под слой path. Из библиотеки перетащите графический символ bubble (пузырек). Перейдите на слой path, клик по названию правой кнопкой мыши и выберем Направляющий (Guide).

 

 рис.9

 

10)  На слое bubble создадим анимацию движения. На 50-ом кадре нажмем F6 (ключевой кадр). Для продления жизни нашей кривой, на слое path, также на 50-ом кадре нажмем F5 (вставить кадр).

 

 рис.10

 

11) Теперь поработаем с объектом Bubble. Перейдем на первый кадр. В панели свойств (Ctrl+F3) удостоверимся в правильности настроек, установим галочки на Синхронизировать символы(Sync) и Привязать  к направляющей(Snap).

 

рис.11

 

12) После этого перейдем на 50-ый кадр и перетащим bubble в самый верх кривой. Перейдем на 8-ой кадр и создадим ключевой кадр(F6). Перетащим этот ключевой кадр на 15-ый фрейм

 

рис.12

 

13)  И на этом фрейме изменим свойства : Замедлить -100 и в поле Преобразование (с правой стороны окна программы) установим масштаб 50%. Рисунки 13, 14

 

 рис.13

 

рис.14

 

14) Теперь перейдем на первый кадр и изменим масштаб bubble на 10%

 

15) Создадим новый слой над слоем path и назовем его actions. На этом слое перейдем на 51 фрейм и создадим пустой ключевой кадр (правая кнопка мыши).

 

 рис.15

 

16) Теперь оставшись на этом кадре, откроем панель ActionScript  (F9) и вставим следующий код:

---

           removeMovieClip(this);

---

 

 17) Создание пузырька закончено. Вернемся к нашей сцене (под панелью слоев кликнем Scene 1). Там у нас всего один слой bg. Создадим над ним новый слой с именем actions. Перейдем на панель ActionScript (Действия) и вставим следующий код:

---

                this.createEmptyMovieClip("holderMC", this.getNextHighestDepth());

      holderMC.onEnterFrame = function() {
    //if (random(20) < 5) return;
    var bubbleName:String = "bubble" + random(1000);
    var bubbleX:Number = random(Stage.width);
    var bubbleY:Number = random(Stage.height);
    var bubbleScale:Number = random(6) * 10 + 50;
    var bub:MovieClip = this.attachMovie("bubbleMC", bubbleName, random(1000), {_x:bubbleX, _y:bubbleY, _xscale:bubbleScale, _yscale:bubbleScale});
  }

18) На этом все. Нажимаем Ctrl+Enter и смотрим результат.