Macromedia FlashMX для поздравлений -НАЧИНАЮЩИМ- продолжение

[rvm1455]

8. Пример 4. Создание разноцветного мигающего круга – «солнце»
Этот пример покажет эффект переливающегося к5руга, который может быть использован, например, в качестве солнца на картинке.
8.1. Загружаем пакет Macromedia Flash MX/ Выбираем размер документа 550х400, фон документа задаем темно-синий (Modify – Document – Background Color)
8.2. Выбираем инструмент «круг» на левой верхней панели инструментов Tools (Oval Tool)
8.2.1. На левой панели Color цвет границы (значок карандаша) выбираем «никакой» (белый квадратик, перечеркнутый красной диагональю).
Цвет заливки (Fill Color) выбираем из нижней части цветов кружок с красно-черным заполнением).
После этого на правой панели инструментов Color Mixer (включение/выключение с помощью комбинации Shift+F9) вид заполнения указан Radial
8.3. C помощью мыши рисуем круг.
В левой верхней точке размещения будущего объекта нажимаем левую кнопку мыши и, не отпуская ее, тащим мышь вправо вниз. На экране появляется овал, который иногда превращается в правильный круг, о чем говорит появляющийся в этот момент маленький кружок возле курсора мыши. В один из таких моментов отпускаем кнопку мыши.
На экране появился круг выбранной нами расцветки.
8.4. Если размер полученной фигуры не устраивает, его можно исправить с помощью панели инструментов Info (Ctrl+I)/ Здесь W и H – ширина и высота объекта, X и Y – расположение его в документе.
8.5. выбрав инструмент «стрелка» на левой панели Tool, можно фигуру перенести также мышкой в нужное место.
8.6. Превращаем нарисованную фигуру в объект Move.
8.6.1. Выбираем инструмент «стрелка» на панели Tools, выделяем нарисованный объект и жмем кнопку F8. В появившемся окне “Convert to Symbol” выбираем переключатель в положение Move Clip, в строке Name указываем Sun. Щелкаем кнопку Ок.
Вокруг нашего круга появилась рамка с обозначенным внутри центром.
8.7. Щелкаем по объекту двойным щелчком левой кнопки мыши и этим переходим в режим редактирования этого объекта.
8.8. Меняем расцветку объекта с помощью панели инструментов Color Mixer (Shift+F9).
8.9. Вначале на строке палитры слева видим стилизованное изображение банки с красной краской, а справа – с черной краской.
8.9.1. Щелкаем по правой черной банке мышкой. Теперь она открыта для изменения. Переходим на банку над этой строкой (ColorProxy) и меняем черный цвет на желтый.
Цвет нашего объекта поменялся в соответствии с новой раскраской.
8.10. Выделяем мышкой 10й кадр и делаем его ключевым (кнопкой F6). Выделяем 20й кадр и тоже делаем его ключевым.
8.11. Снова выделяем мышкой 10й кадр. Затем щелкаем мышкой один раз по объекту и меняем его цвет.
Для этого на панели Color Mixer мышкой меняем местами левую и правую банки с краской. Так, чтобы слева была желтая банка, а справа – красная.
8.12. Для плавной замены цветов – эффекта переливания – делаем раскадровку.
8.12.1 Выделяем 1й кадр. Внизу в панели Properties в окошке Tween выбираем Shape. Между кадрами 1 и 10 появляется стрелка на зеленом фоне. Непрерывность стрелки показывает, что раскадровка прошла успешно.
8.12.2. Выделяем мышкой 10й кадр и, как в п.8.12.1 устанавливаем раскадровку Shape.
8.13. Все. Сохраняем под именем summer, публикуем (Ctrl+Shift+F12), проверяем.

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

9. Пример 5. Добавление земли и неба к примеру 4.
9.1. Создаем документ размером 550х400 с белым фоном.
9.2. Создаем три слоя (сверху вниз) с именами:
солнце
небо
земля
9.3. Слой земли. Блокируем все слои кроме слоя «земля».
Землю вместо однотонного фона выберем также градиентный, как в предыдущем примере. Обычно, чем ближе к горизонту, тем и небо, и земля светлее и наоборот. Однако градиент во Flash изменяется в горизонтальном направлении. Чтобы создать вертикальный градиент нашего фона, делаем так.
9.4. Открываем панель Color Mixer (Shift+F9). В окне Fill style выбираем опцию Linear.
9.5. Левую банку краски на этой панели (черную) меняем на зеленую.
9.6. На левой панели Tools выбираем инструмент прямоугольник. С помощью панели Colors (слева) для цвета контура (границы) -инструмент Stroke Color - выбираем пустую – белый квадратик, перечеркнутый красной линией.
9.7. На документе рисуем прямоугольник примерно на половину его нижней площади.
9.8. Теперь нам нужно изменить его размер и выровнять. И повернуть градиент так, чтобы темная часть была внизу, а светлая – внизу.
9.8.1. Переключаем инструмент на «стрелку» из панели Tools.
Щелкаем правой кнопкой мыши по прямоугольнику и выбираем Free Transform.
Наш прямоугольник оказывается заключен в рамку с метками по краям и выделенным центром. Подводим мышку к одному из углов так, чтобы указатель мыши превратился в дуговую стрелку. И с помощью него поворачиваем прямоугольник на 90 градусов так, чтобы темная часть оказалась внизу, а светлая – вверху.
9.8.2. Переходим на панель Info (Ctrl+I). Изменяем параметры на W=550, H=200, X=0, Y=225.
9.9. Слой солнца. Солнце можно создать, как было указано ранее в п.8, а можно прямо импортировать уже созданный объект. Так и сделаем.
9.10. Блокируем два нижних слоя, а слой солнца разблокировать. Выбрать первый кадр верхнего слоя.
9.11. Выбираем в верхнем меню File – Open as Library – читаем сохраненный файл summer.fla
В результате получаем панель Library (библиотека) с сохраненным объектом Sun
Панель Library включается/выключается с помощью комбинации Ctrl + L.
9.12. Выбираем мышкой объект sun и переносим его в правый верхний угол нашего документа.
С помощью панели Info (Ctrl+I) можно изменить размер и положение солнца.
9.13. Все. Сохраняем под именем frei и публикуем (Ctrl+Shift+F12).

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

[rvm1455]

10. Пример 6. Работа с текстом.
Добавим в предыдущий пример переливающуюся надпись “Copyright © 2005”.
10.1. Здесь проще всего открыть сохраненный файл frei.fla и все изменения делать в нем.
10.2. Открываем файл frei.fla. C помощью команды меню File – Save as сохраняем его с новым именем copir.
10.3. Добавляем над слоем солнца еще один слой и называем его «надпись»
10.4. Запираем все слои кроме верхнего замочком.
10.5. выделяем первый кадр верхнего слоя.
10.6. На левой панели Tools выбираем инструмент Text Tool (обозначен буквой А).
10.7. В нижней панели Properties в окошке Font выбираем нужный шрифт, в остальных окошках – размер шрифта (скажем, 25), вид шрифта – жирный, наклонный, подчеркнутый.
10.8. Щелкаем мышкой слева внизу – там будет начало нашего текста.
10.9. Набираем текст “Copyright © 2005”. Для набора символа копирайта нажать клавишу Alt и, не отпуская ее, на цифровой части клавиатуры набираем код символа – 0169.
10.10. ПРИМЕЧАНИЕ. Вместо выбора конкретного шрифта можно взять одну из двух первых строчек: _suns или _serif. Это универсальный выбор шрифта с засечками (типа Times) или без засечек (типа Arial). Это всегда работает на текстах, набранных по-английски, но не всегда на других языках.
Я рекомендую не использовать эту опцию, а воспользоваться любым из установленных у вас на компьютере шрифтом, а потом превратить надпись в графику (дальше будет показано, как это сделать). Это гарантирует, что при воспроизведении вашей флэш-анимации на любом компьютере текст будет отображен точно на том языке и точно в том виде, как у вас при создании поздравления. И хотя такой вариант несколько увеличивает размер итогового файла, я рекомендую именно такой вариант работы. Зато вы сможете использовать самые красивые шрифты, какие только найдете, например, в Сети.
10.11. Превращаем набранный текст в графический объект.
Выбираем на левой панели инструментов Tools инструмент «стрелка» и выделяем мышкой весь набранный текст. Жмем левой кнопкой мыши слева сверху от текста и, не отпуская кнопку, ведем мышь правее и ниже текста. Отпускаем кнопку. На экране наш текст выделен голубой рамкой.
10.12. Превращаем в графику – нажимаем Ctrl+B. Каждая буква превратилась в отдельный графический объект, обведенный своей рамкой.
10.13. В принципе, теперь можно работать с каждой буквой отдельно. Однако, сейчас нам это не нужно и мы будем весь набранный текст рассматривать в качестве единого объекта.
Для этого снова нажимаем комбинацию клавиш Ctrl+B.
10.14. Превращаем весь текст в объект типа Movie. Для этого нажимаем клавишу F8. Устанавливаем переключатель в положение Movie Clip и меняем имя на «копи». Жмем Ок.
10.15. Дважды щелкаем мышкой по нашему объекту и входим в режим его редактирования.
10.16. Делаем ключевым 3й кадр (через кнопку F6), выделяем его и мышкой вновь обводим весь текст.
С помощью ведра с краской – инструмент Fill Color на левой панели Colors меняем цвет текста.
10.17. Выделяем 1й кадр и в нижней панели Properties делаем раскадровку (Tween – Shape)
11. Все. Сохраняем, публикуем, проверяем.
Примечание. Пункты 10.16 и 10.17 можно повторить, сделав еще несколько ключевых кадров и задавая несколько разных цветов надписи.
Можно также увеличить или уменьшить расстояние между ключевыми кадрами – поэкспериментируйте.

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


12. Пример. 7. Текст поздравления.
Теперь добавим текст поздравления на нашу открытку.
Текст будет проявляться в три приема на фоне неба и состоять из трех строк:
Поздравляю
с праздником
8 марта
12.1. Открываем сохраненный в предыдущем примере файл copir.fla и с помощью команды File – Save as сохраняем его под именем 8marta.
12.2. Добавляем сверху еще три слоя (сверху вниз):
текст3
текст2
текст1
12.3. Добавляем простые (неключевые) кадры в нашу ленту. Выделяем мышкой 20й кадр слоя «текст3», нажимаем клавишу Shift и, не отпуская ее, выделяем 20й же кадр слоя «земля». Отпускаем мышку и Shift и нажимаем клавишу F5.
На всех слоях кадры с первого по двадцатый окрасились в серый цвет.
Это сделано для синхронизации, то есть каждый слой нашего фильма будет «играть» на протяжении всей анимации. Иначе, слои без кадров будут исчезать время от времени.
12.4. Запираем все слои кроме «текст1».
12.5. выделяем 5й кадр на слое и делаем его ключевым (F6).
12.6. C помощью инструмента «текст» (буква А на левой панели Tools) набираем сверху на фоне неба текст «Поздравляю» шрифтом нужного вида, цвета и размера, как указано в п.10.7
12.7. Превращаем текст в графику. Как указано в п.п. 10.11 – 10.13.
Выбираем инструмент «стрелка» из панели Tools, обводим текст и ДВАЖДЫ нажимаем комбинацию клавиш Ctrl+B.
Это гарантирует нам, что в итоговом фильме текст будет именно таким, как у нас в исходном виде.
12.8. Запираем слой «текст1» и отпираем слой «текст2». Выделяем 10й кадр и делаем его ключевым.
Инструментом «текст» пишем вторую строку в этом десятом кадре, располагая ее непосредственно под первой строкой поздравления.
12.9. Аналогично пишем третью строку текста в 15м кадре слоя «текст3», не забыв сделать его ключевым и заперев предварительно остальные слои во избежание возможного их повреждения.
12.10. Все. Сохраняем, публикуем, проверяем.

Примечание. Обратите внимание на итоговые размеры полученных нами флэш-анимаций. Самый последний пример занял всего чуть больше 8 килобайт. А пример 4 (солнце) – 384 байта.

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


13. Пример 8. Движение объекта.
13.1. Последний раз усложним нашу открытку эффектом движения.
Пусть первая строка поздравления «падает» сверху, вторая строка – «въезжает» слева, а третья строка – «впрыгивает» снизу.
13.2. Открываем файл 8marta.fla. Сохраняем под именем 8martadv.
Выделяем двадцать пятые кадры всех слоев, как указано в п.12.3 и добавляем в них еще по пять пустых кадров.
13.3. Задаем масштаб 50%, чтобы видеть пустые поля сверху, снизу и с боков – туда мы будем помещать наши объекты.
13.4. Запираем все слои кроме слоя «текст1». Выделяем в нем 10й кадр и делаем его ключевым (F6).
13.5. Выделяем 5й кадр слоя «текст1» и в нижней панели Properties делаем раскадровку (Tween – Shape).
13.6. Теперь снова инструментом «стрелка» обводим в этом пятом кадре наш текст и этой же стрелкой поднимаем его вверх так, чтобы он целиком ушел за края нашего документа.
Это же можно сделать с помощью панели Info (Ctrl+I), изменив координату Y на отрицательную величину.
13.7. запираем слой и отпираем слой «текст2».
13.8 Выделяем в этом слое «текст2» 15й кадр и делаем его ключевым (F6).
13.9. Повторяем процедуру, описанную в п.13.5 и 13.6 с той лишь разницей, что текст второй строки поздравления «утаскиваем в 10м кадре влево за левую границу документа. Или меняем координату X на панели Info.
Раскадровку (Tween – Shape) делаем также в 10м кадре.
13.10. Аналогично поступаем с третьей строкой поздравления, вставив ключевой кадр в кадр 20, а текст «утаскиваем» в 15м кадре вниз за границу документа.
13.11. Все. Сохраняем, публикуем, проверяем.

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

14. Примечание. Если вы не хотите, чтобы появившееся поздравление снова исчезало и появлялось, следует вставить команду остановки (stop) в последний кадр любого слоя, сделав его предварительно ключевым.
14.1. Запираем все слои, отпираем верхний слой «текст3». Выделяем последний кадр и делаем его ключевым (F6)
14.2. Выделяем этот кадр и открываем панель Action (F9)
14.3. Щелкаем по значку Actions
Потом по значку Movie control
И два раза по значку stop
Справа от списка команд появится команда
stop();
А в 25м кадре слоя «текст3» буква «а». Это означает, что в кадре есть команда встроенного алгоритмического языка Action Script
14.4. Теперь после однократного появления текста поздравления, оно (поздравление) больше не будет ни исчезать, ни появляться.
При этом солнце и подпись копирайта будут мигать по-прежнему. Потому что они размещены в своих лентах, независимых от основной ленты.
15. Результат – файл 8martds.fla и 8martds.swf

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


16. Еще один интересный эффект можно получить, если устанавливать строку не сразу на свое место, а вначале немного ее унести дальше, чем нужно, а уже потом вернуть на место. То есть строка будет прыгать как бы на резинке. Сверху вниз, а потом немного поднимается вверх на свое место. Для этого надо добавить еще по одному ключевому кадру при движении строки. Можно пойти еще дальше и заставить каждую строку прыгать на свое место после некоторого колебания с постепенным уменьшением амплитуды. Попробуйте.
17. Падать может не только текст, но и какой-то предмет. Скажем, букет цветов или въезжающий автомобиль. Только не забудьте перед раскадровкой предварительно превратить его в графику (Ctrl+B), если импортируете готовый рисунок.

18. Однако, СЛЕДУЕТ ИМЕТЬ В ВИДУ, что превращение сложного рисунка формата типа jpg или gif в графический объект увеличит размер флэш-анимации.
18.1. Здесь можно посоветовать уменьшить размеры этой импортируемой картинки предварительно любой графической программой. Пусть даже с некоторой потерей качества.
Потому что уменьшение размеров вставленной картинки непосредственно в пакете Macromedia Flash не уменьшит результирующий файл.

19. Пример 9. Эффект прозрачности.
Это еще один эффект, который можно использовать в поздравлениях.
19.1. Создаем новый документ с голубым фоном (Modify – Document – Background Color – нужный цвет).
19.2. С помощью инструмента Text Tool с левой панели Tools (буква А) набираем текст «ПОЗДРАВЛЯЮ!»
19.3. Превращаем текст в графику, выделив его (инструментом «стрелка» с левой панели Tools) и дважды нажав Ctrl+В.
19.4. Снова выделяем текст и нажимаем клавишу F8. Выбираем переключатель на позицию Graphic.
19.5. Выделяем 50й кадр и делаем его ключевым (F6).
19.6 Выбираем 1й кадр и выделяем наш объект мышкой.
19.7. В нижней панели инструментов Properties в строке Color выбираем опцию Alfa (прозрачность) и устанавливаем 0%.
19.8. Снова выделяем мышкой первый кадр на ленте и в нижней панели Properties делаем раскадровку Tween-Motion. В результате на ленте между первым и пятидесятым кадром появится непрерывная стрелка на голубом фоне.
Непрерывность стрелки показывает, что раскадровка проведена успешно.
19.9. Все. Сохраняем под именем prozr, публикуем, проверяем.

20. После проявки текста можно остановить ленту. Так, как указано в п.14.

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

[palmitos]

rvm1455, :D

[tasha25]

rvm1455, обалденное обьяснение :D

[leon125]

rvm1455, спасибо!

[rvm1455]

tasha25, leon125,
всегда пожалуйста.
Скажите, нужны еще уроки или нет. И если да, то какие конкретно вещи вы хотите использовать?
"ну а нет - так нет" ("Иван Вас. меняет профессию" ©)

[tasha25]

rvm1455, обьясняй все что счетаешь интересным(лично мне интересны все возможности макромедии)результат урока на аватаре