Уроки Macromedia Flash MX от rvm1455-для начинающих

[rvm1455]

1. В связи с несколькими поступившими в последнее время просьбами, я хочу рассказать немного о возможностях и способах использования пакета Flash MX фирмы Macromedia.
Коротко говоря, этот пакет предназначен для создания небольших плоских красочных мультипликаций.
Однако, он идеально подходит также для создания анимационных картинок. Например, анимированных .gif
2. Итак, загружаем программу Macromedia Flash MX.
Сразу видим пустой бесконечный слой (Layer 1) кадров для размещения нашего фильма или анимации. Вверху над слоем идет нумерация кадров – 1 5 10 15 и т.д.
Достаточно разместить в нескольких кадрах разные картинки или разные варианты одной картинки и результатом компиляции их (здесь это называется Publish – Публикация) мы как раз и получим анимированную (движущуюся или изменяющуюся) картинку.
3. Отметим, что изображение может меняться в так называемых ключевых кадрах - Keyframe.
При этом простые и ключевые кадры меняют друг друга в произвольном порядке.

4. Пример 1. Эффект игры света.

4.1. Подготавливаем заранее две статические картинки. Берем любую .gif или .jpg картинку. Эффектно будет смотреться, например, изображение рядом с окном девушки, букета цветов на столе, котенка.
Пусть картинка называется, к примеру, ris.jpg
Загрузим ее в любую графическую программу (например, входящую в пакет MS Office XP программу Microsoft Office Picture Manager) и увеличив яркость, так, как картинка выглядела бы при освещенном окне. Сохраним ее под именем mod.jpg
4.2. Изготовление анимации.
4.2.1. Входим в открытую программу Macromedia Flash MX.
Подгоняем размер нового документа под выбранную картинку:
Modify – Document – Dimensions – указывается ширина и высота итогового документа. В нашем случае 90х90. Жмем кнопку Ok.
Здесь же можно изменить и цвет фона – опция Color
4.2.2. Выделяем второй кадр слоя Layer 1 левой кнопкой мыши. Превращаем этот кадр в ключевой – нажатием клавиши F6. На втором кадре на ленте увидим сразу кружок – обозначение, что кадр стал ключевым.
Возвращаемся в первый кадр, щелкнув мышкой по нему на ленте фильма. И импортируем в него первый вариант картинки:
File - Import… загружаем первую картинку ris.jpg
При необходимости, выравниваем ее по краю кадра через панель Info (Информация), которая включается/выключается комбинацией клавиш Ctrl + I
В этой панельке значки W и H – высота и ширина объекта, X и Y – координаты. Между ними нарисованы девять квадратиков. Если метка стоит на левом верхнем квадратике, то координаты указаны по верхнему левому краю, если щелкнуть мышкой по среднему квадратику – координаты, соответственно, будут ориентированы на центр.
В нашем случае должно быть выравнивание по левому верхнему краю и значения икс и игрек равны нулю.
4.2.3. Cнова переходим во второй кадр нашего фильма, щелкнув по второму кадру ленты мышкой один раз.
Импортируем вторую картинку:
File – Import… загружаем вторую картинку mod.jpg
Подправляем вновь координаты X и Y, если необходимо (ставим их в нули).
4.2.4. Все. Анимация готова. Осталось ее опубликовать.
4.3. Публикация результата.
4.3.1. Вначале сохраним исходный файл:
File – Save As… и сохраняем наш файл в нужном каталоге и с необходимым именем, например, kart
4.3.2. Нажимаем ладно Ctrl + Shift + F12
В закладке Format ставим птички только напротив строк Flash и GIF
Переходим на появившуюся вкладку GIF
В Playback отмечаем Animated (анимация, а не статичная картинка) и Loopcontinuously (воспроизводить непрерывно)
Жмем кнопку Publish
ВСЕ. Осталось сохранить исходные данные. Жмем OK и закрываем программу. На вопрос сохранения отвечаем утвердительно.
Исходные данные и результат можете посмотреть здесь
http://friends-forum.com/modules/My_...vm1455/ris.jpg
http://friends-forum.com/modules/My_...vm1455/mod.jpg
http://friends-forum.com/modules/My_...m1455/kart.fla
http://friends-forum.com/modules/My_...m1455/kart.swf
http://friends-forum.com/modules/My_...m1455/kart.gif

5. ПРИМЕЧАНИЕ.
На любом этапе работы с программой Macromedia Flash MX можно посмотреть, что у нас получилось на данный конкретный момент работы.
Для этого нажимаем комбинацию клавиш Ctrl + Enter
Возврат в программу Ctrl + W

[rvm1455]

6. Пример 2. Подмигивание
Очень популярная в последнее время идея. Берем картинку девушки (можно даже взять собственное фото) и изменяем так, чтобы она подмигивала одним глазиком (или мигала двумя глазами, хотя это не так сексуально).

6.1. Открываем программу. Подгоняем размер, как указано в п.4.2.1
Загружаем в первый кадр слоя Layer 1 исходную картинку
File – Import – deva.jpg
Подгоняем размер документа под размер объекта – в нашем случае 145х178
И выравниваем картинку по верхнему левому краю документа (0х0)
6.1.1. Переименовываем слой, например, в «основная». Для этого делаем двойной щелчок по имени слоя и набираем новое имя. Нажимаем Enter.
6.2. Добавляем второй слой.
Для этого выделяем мышкой слой «основная» и нажимаем на значок плюсик с листочком под именем слоя (Insert Layer)
Над первым слоем появится верхний слой Layer 2.
Аналогично переименовываем его с именем «глазик»
6.2.1. Опытным путем установлено, что эффект подмигивания выглядит удачно, когда глаз «закрыт» на протяжении пяти кадров и «открыт» на протяжении 10 кадров.
6.2.2. Выделяем 6й кадр второго слоя (глазик) и делаем его ключевым:
Выбираем мышкой 6й кадр на ленте на втором слое и нажимаем F6.
6.2.3. Добавляем простые (неключевые) кадры для нашей анимации.
Выделяем 15й кадр первого слоя («основная») и нажимаем F5.
Выделяем 15й кадр второго слоя («глазик») и нажимаем F5.
В результате видим, что по пятнадцать кадров в обоих слоях будут закрашены для исполнения.
6.2.4. Запираем нижний слой (основная), чтобы случайно его не испортить.
Для этого справа от имени нижнего слоя под значком замочка щелкнуть мышкой по черной точке. На ее месте появится свой замочек.
6.2.5. Выделяем первый кадр второго слоя. В этом месте мы сделаем рисунок закрытого глаза.
Поскольку второй слой находится под первым, то все, что будет на втором слое изображено, имеет приоритет в итоговой картинке.
Для рисования закрытого глаза используем инструмент Brush Tool (кисть), расположенный в панели Tools в левой верхней стороне.
Его можно выбрать нажатием клавиши B.
6.2.6. Затем из цветной палитры панели Color выбираем подходящий цвет. Здесь есть возможность, нажав клавишу палитры, переместить указатель мышки на нашу картинку и выбрать нужный оттенок цвета непосредственно на картинке, щелкнув мышкой на нужном ее участке.
6.2.7. Смело закрашиваем выбранный глаз или оба глаза подходящим цветом.
6.2.8. Выбираем инструмент Pencil Tool (карандаш) из той же панельки Tools и черным цветом рисуем несколько полосок, изображающих ресницы.
6.2.9. ВСЕ. Картинка готова. Сохраняем ее под именем murk.fla
Публикуем, как указано в п.4.3.
ПРИМЕЧАНИЕ 1: Здесь стандартной цветовой гаммы (так называемая «безопасная палитра») может не хватить. Для увеличения цветовой гаммы в закладке GIF в ее нижней части есть опция Palette Type. По умолчанию там выставлено Web 216, которую надо сменить на Adaptive до 255 или 256 цветов.
Следует помнить, что эта операция (добавление цветов) существенно увеличивает результирующий размсер файла, поэтому не рекомендуется ее использовать без необходимости.
ПРИМЕЧАНИЕ 2: В опубликованном здесь примере добавлен еще и третий слой – «ротик». Сделан по тому же принципу, что и «глазик», но второй ключевой кадр для правдоподобия перенесен на 10ю позицию.

Исходные данные и результат можете посмотреть здесь
http://friends-forum.com/modules/My_...m1455/deva.jpg
http://friends-forum.com/modules/My_...m1455/murk.fla
http://friends-forum.com/modules/My_...m1455/murk.swf
http://friends-forum.com/modules/My_...m1455/murk.gif

ПРИМЕЧАНИЕ.
На любом этапе работы с программой Macromedia Flash MX можно посмотреть, что у нас получилось на данный конкретный момент работы.
Для этого нажимаем комбинацию клавиш Ctrl + Enter
Возврат в программу Ctrl + W

[rvm1455]

7. Пример 3. Вспыхивающая звезда.
Очень эффектно выглядят в поздравительных открытках вспыхивающие на общей картинке в разных местах звездочки.
Сделаем три вспыхивающих звезды.

7.1. Для работы нам понадобится фигура звезды любой конфигурации и круг.
Круг можно нарисовать встроенными средствами флэш, а звезду – следует нарисовать с помощью инструмента «карандаш» или «линия». Однако, можно использовать любую графическую программу с готовыми заготовками.
7.2. Открываем программу Flash.
Меняем фон всего фильма:
Верхнее меню : Modify – Document – Background Color – выбираем фиолетовый цвет #0000FF
Создаем три слоя, щелкая по кнопке Insert Layer (слева и чуть ниже от имени слоя листочек с плюсиком).
Переименовываем слои снизу вверх под названиями: «звезда1», «звезда2», «звезда3».
7.3. Запираем слои «звезда2» и «звезда3» замочком.
Выделяем мышкой первый кадр первого слоя («звезда1»)
7.4. Создаем новый объект – прообраз звездочки.
7.4.1. Выбираем на панели Tools инструмент Oval Tool (круг)
В панели Colors:
- для рисования границы Stroke Color выбираем отсутствие цвета (белый квадратик, перечеркнутый красной полоской по диагонали)
- для заливки Fill Color выбираем радиальную заливку (кружок с белым центром и черными краями). Меняем цвет в панели Color Mixer справа вверху.
Вместо номера цвета #000000 исправляем на #1C35E3.
Сохраняем документ под именем stars.fla.

7.4.2. Инструментом Oval рисуем круг в месте расположения первой звезды на первом кадре первого слоя:
нажимаем левую кнопку мыши в месте левого верхнего края и, не отпуская кнопку, ведем мышь до места правого нижнего края.
При рисовании указатель мышки превращается в крестик. Когда фигура правильный круг, возле этого крестика появляется кружок.
Для уточнения расположения и размеров можно вручную исправить значения в панели Info (Ctrl + I).
В нашем случае получаем круг размером 14х14, и центр круга расположен в координатах 135х130.
Круг белого цвета внутри и слабо-фиолетовый снаружи.
7.4.3. Превращаем нарисованную фигуру в объект Move (фильм).
Для этого переключаемся в инструмент Arrow Tool (черная стрелка на панели Tools), выделяем нарисованный объект, нажимаем кнопку F8/
В открывшемся окне Convert to Symbol выбираем позицию Movie Clip, в поле Name вводим имя obj1, нажимаем кнопку OK.
Наш круг выглядит теперь заключенным в квадрат с помеченным центром.
7.4.4. Двойным щелчком мыши по этому объекту входим в новый независимый клип для его изменения.
Теперь на экране видим вновь только один слой Layer 1, а в строке названия объектов (между значками добавления/удаления слоев и собственно кадром) появилась надпись Scene 1 obj1
Это как раз и означает, что сейчас мы работаем с отдельным объектом obj1, изменяющимся независимо от движения на основной ленте нашего фильма.
7.4.5. Переименовываем слой – назовем его «круг».
7.4.6. Выделяем мышкой 5й кадр слоя и делаем его ключевым – F6
Выделяем мышкой 10й кадр слоя и тоже делаем его ключевым – F6
7.4.7. Снова выделяем мышкой 5й кадр, затем выделяем наш объект на этом кадре и в панели Info (Ctrl + I) меняем размеры круга на 50х50. Расположение центра (при выделенном среднем квадратике в панели Info) должно оставаться 0х0, т.е. не меняется.
В противном случае – исправьте эти значения вручную на нули.
Выделяем мышкой 10й кадр, аналогично выделяем наш объект на этом кадре и меняем размеры круга 36х36.
7.4.8. А теперь ОДИН ИЗ САМЫХ ВАЖНЫХ ЭЛЕМЕНТОВ программы FLASH – РАСКАДРОВКА.
Нам нужно сделать так, чтобы размер круга менялся не скачком, а плавно пульсировал в своих размерах.
Выделяем 1й кадр слоя. В самой нижней панели Properties позицию Tween выставляем в положение Shape.
В результате кадры с 1 по 5й окрасятся в зеленый цвет и между ними появится непрерывная стрелка, указывающая, что раскадровка выполнена успешно.
Выделяем 5й кадр слоя и выставляем ту же раскадровку Tween-Shape для кадров 5-10.
7.4.9.Добавляем слой собственно звезды.
Щелкаем по имени слоя и нажимаем значок добавления нового слоя (листик с плюсиком).
Получаем второй слой Layer 2 над слоем «круг».
Слой Layer 2 переименовываем в «звезда».
7.4.10. Запираем слой «круг», чтобы случайно его не испортить – нажимаем на точку справа от имени слоя и под значком замка. Точка превратилась также в замок.
7.4.11. Копируем рисунок звезды из графической программы стандартными средствами Windows в первый кадр слоя «звезда».
Выделяем мышкой первый кадр и вставляем скопированный объект из графической программы. Размеры нашей звездочки здесь укажем в панели Info 42х42, расположение 0х0, т.е. центры звезды и круга должны совпадать.
7.4.12. В слое «звезда» также делаем ключевыми кадры 5й и 10й
В 5м кадре размеры звезды делаем 146х146,
В 10м кадре – 64х64
7.4.13. Раскадровку делаем аналогично п.7.4.8.

7.5. Вставка второй звезды в основную ленту:
Возвращаемся в основную ленту нашего фильма, щелкнуть мышкой по слову Scene 1 на строке, расположенной между именами слоев и кадром.
7.6. Вставляем второй экземпляр готовой нарисованной нами звезды. Для этого запираем замочком первый и третий слои и отпираем слой «звезда2».
Выделяем мышкой второй кадр этого слоя и делаем его ключевым – F6.
Открываем нашу личную библиотеку, которая создалась за время нашей работы –
Ctrl + L.
Берем мышкой объект obj1 из библиотеки переносим на свободное место во втором кадре второго слоя.
7.6. Вставка третьей звезды в основную ленту.
Поступаем аналогично п.п.7.5 и 7.6, вставляя экземпляр obj1 в 3й кадр третьего слоя – звезда 3, предварительно вставив туда ключевой кадр – F6
7.8. Выравниваем количество кадров во всех слоях.
Выделяем 15й кадр во всех трех слоях и нажимаем F5 – вставка простых неключевых кадров.
7.9. ВСЕ. Можно публиковать результат.

Исходные данные и результат можете посмотреть здесь
http://friends-forum.com/modules/My_...1455/stars.fla
http://friends-forum.com/modules/My_...1455/stars.swf
http://friends-forum.com/modules/My_...1455/stars.gif

ПРИМЕЧАНИЕ.
На любом этапе работы с программой Macromedia Flash MX можно посмотреть, что у нас получилось на данный конкретный момент работы.
Для этого нажимаем комбинацию клавиш Ctrl + Enter
Возврат в программу Ctrl + W

[rvm1455]

21. Управление флэш-фильмом.
21.1. Для управления воспроизведением флэш-фильма я рекомендую использовать кнопки, которые создаются так же программой Macromedia Flash MX.
21.2. Создание кнопки.
21.2.1. Собственно, кнопка создается в пакете за две секунды. На лист помещается любой рисунок:
- готовый из библиотеки,
- с помощью инструмента
- круг,
- квадрат
- карандаш
- кисть
- текст
21.2.2. После чего этот объект выделяем, например, с помощью стрелки или прерывистой рамки и нажимаем клавишу F8
21.2.3. В открывшемся меню устанавливаем переключатель на Button
Здесь же, по желанию, в поле Name указываем имя вновь создаваемого объекта-кнопки.
И все.

21.2.4. Однако, сама по себе кнопка ничего не значит, и ей нужно сопоставить какое-то событие, которое бы совершалось при нажатии на нашу кнопку. Например, переместиться на следующий кадр нашего фильма при его заданной остановке.
Это не только очень удобное средство для размещения флэш-поздравления в наших постах на форуме, но и хороший стиль, когда вы посылаете свое поздравление по e-mail.
21.2.5. Идея здесь вот в чем.
В первом ключевом кадре флэш-анимации вы пишете команду остановки – stop, как было указано в п.14 второго урока. А именно:
Выделяем первый кадр
Открываем панель Action (F9)
Щелкаем по значку Actions
Потом по значку Movie control
И два раза по значку stop
Справа от списка команд появится команда
stop();
А в 1м кадре слоя буква «а». Это означает, что в кадре есть команда встроенного алгоритмического языка Action Script
21.2.6. Сам флэш-фильм начинаем со 2-го кадра.
Для этого объекту «кнопка» ставим в соответствие команду перехода на 2й кадр:
21.2.6.1. Выделяем кнопку на листе и в панели Actions в строке Movie control дважды щелкаем по позиции goto
21.2.6.2. В результате на этой же панели справа появится три окна с указанием, куда осуществить переход):
- имя сцены (оставляем в позиции текущей сцены - < current scene >)
- тип указателя (оставляем «номер кадра»)
- кадр перехода (здесь ИСПРАВЛЯЕМ на 2)

ПРИМЕЧАНИЕ. Слой кнопки рекомендую располагать по возможности самым верхним слоем в фильме, чтобы она ничем не перекрывалась и была доступна пользователю в любой момент.

21.2.7. Теперь осталось замаскировать начало прокрутки нашего фильма.
Один из вариантов такой.
21.2.8. Под слоем кнопки, но над всеми другими слоями располагаем еще один слой, который будет играть роль крыши, закрывающей все нарисованные элементы фильма. Размещаем на этом слое объект – прямоугольник и раскрашиваем его как хотим (или берем любую картинку) и растягиваем прямоугольник (картинку) на весь размер кадра с помощью панели Info (Ctrl + I). В этой панели указываем и размещение левого верхнего угла картинки – х=0 и y=0
21.2.9. Второй кадр этого слоя крыши также делаем ключевым (клавиша F6). После чего удаляем из этого второго кадра наш прямоугольник (картинку).
21.2.10. Не забудьте, что все остальные ваши действия на других слоях должны начинаться со вторых кадров. Их (вторые кадры) тоже необходимо сделать ключевыми.
21.2.11. Теперь, после нажатия кнопки, фильм будет прокручен до конца и снова вернется в 1й кадр и остановится по вписанной в этот кадр команде stop()

22. А теперь давайте сделаем так, чтобы фильм прокручивался непрерывно, а останавливался с возвращением на 1й кадр только по нажатию пользователем другой кнопки – кнопки возврата.
22.1. На слое «кнопка» делаем 2й кадр ключевым.
22.2. Удаляем во 2м (именно во ВТОРОМ) кадре объект кнопку.
22.3. Создаем на 2м кадре новый объект кнопку так, как указано в п.п.21.2.1, 21.2.2, 21.2.3.

22.4. Выделяем кнопку на листе и в панели Actions в строке Movie control дважды щелкаем по позиции goto
22.5. В результате на этой же панели справа появится три окна с указанием, куда осуществить переход):
- имя сцены (оставляем в позиции текущей сцены - < current scene >)
- тип указателя (оставляем «номер кадра»)
- кадр перехода (здесь ОСТАВЛЯЕМ «1»)

Все. Можно проверять.

ПРИМЕЧАНИЕ. Если фильм достаточно длинный, то вторую кнопку (возврата) и команду stop() можно разместить в последнем кадре нашей ленты. Разумеется, нужно сделать его (последний кадр) предварительно ключевым (клавиша F6).
В этом случае фильм проиграет один раз до конца ленты и остановится. А по нажатии на новую (вторую) кнопку вернется в начало на 1й кадр, где снова все будет прикрыто рисунком «крыши» и изображением первой кнопки (начало запуска фильма). Это красивый стиль программирования.

23. Работа со звуком.
Ну, это совсем просто. Вставка звука в наш флэш-фильм осуществляется следующим образом.
23.1. Выбираем в верхнем меню команду File – Import – и находим на своем компьютере файл звука и щелкаем по нему мышкой.
Во флэш можно импортировать звуки с расширением wav, mp3, aif, mov и au.
23.2. Создаем в нашем фильме специальный слой с названием, например, sound.
Выделяем на ленте фильма ключевой кадр на этом слое.
23.3. В нижней панели Properties в раскрывающемся списке Source выбираем нужный звук.
В списке Sync (синхронизация) выбираем опцию Start, чтобы звук не накладывался сам на себя при повторном прохождении фильмом этого кадра. В числе повторов (Loop) можно оставить нуль – т.е. играть только раз без единого повтора.
В принципе, это все.

ПРИМЕЧАНИЕ.
Однако, с учетом нашего примера в п.п.21 и 22 с кнопками, рекомендую сделать следующее.
24. Разместим звук, начиная со второго кадра. В этом случае он будет начинаться только после того, как пользователь нажмет кнопку начала просмотра.
Это хороший стиль программирования. При загрузке страницы форума с вашим поздравлением звук не начнет грузиться сразу, забивая уши пользователя включенной заранее любимой мелодией из проигрывателя программы amp.
24.1. В первом ключевом кадре слоя «звук» разместим команду остановки всех звуков фильма.
В этом случае после того, как пользователь нажмет кнопку возврата, описанную в п.п.21 и 22, наш фильм не только «перемотается» в начало, но и будут остановлены все звуковые эффекты.
Делается это так.
24.2. Выделяем 1й кадр слоя звука.
24.3. В панели Actions в строке Movie control дважды щелкаем по позиции stopAllSounds.
В первом кадре слоя звука появится буква «а», обозначающая, что в этом кадре использована команда языка Action Script
24.4. выделяем 2й кадр слоя звука и через панель Properties вставляем импортированный нужный нам звук (мелодию), как указано в п.23.3

Вот теперь, действительно все.

[leon125]

rvm1455, спасибо! буду учиться! :D

[terkin]

rvm1455, Огромное спасибо!!! Жду продолжения!!! А можно как нить урок подкинуть, как делать web страничку с флэшкой

[Santanika]

rvm1455, огромное спасибо!!!

[rvm1455]

Сообщение от terkin

А можно как нить урок подкинуть, как делать web страничку с флэшкой

Это-то можно, но мне представляется, что это все же выходит за рамки темы "Для начинающих". Вставлять свои элементы в вэб надо уже тому, кто хорошо уже и вэб строит и флэшем достаточно овладел.
Мне представляется, что если человек хочет владеть флэшем на таком уровне, то следует уже приобретать специальную литературу. Просто так будет удобнее. Там все с картинками и подробно.
Вот в таком случае у тебя могут возникнуть какие-то отдельные вопросы и неясности и тогда милости прошу на форум с конкретной проблемой - поможем.
А здесь я старался ограничить намеренно только для тех, кто хотел бы рисовать открытки-поздравления.

Тем не менее, поясню, что для того, чтобы поместить на страничку флэшку, используются теги < OBJECT > и < EMBED >. Но без пробелов внутри, конечно. Это я так написал, чтобы пост в сторону не повело.

[rvm1455]

leon125, terkin, santanika,
не за что. Всегда пожалуйста.

[terkin]

rvm1455, Тогда всё!!!! сожусь за Macromedia Flash MX и Macromedia Dreamwaver MX!!! Буду учить