Текстовые блоки и компоненты
1. Ввод и редактирование текста
Для изменения текста используется выделение. Для трансформации текста используется инструмент трансформация или пункт меню изменить, трансформация – текст можно перемещать, поворачивать, сжимать, растягивать, отражать по вертикали и горизонтали.
2. Анимация текста
В окне свойств текста выбрать шрифт с кириллицей. Ввести любой текст.
Необходимо перевести текст в графический объект. Для этого выделим введенный текст, зададим его размер (с помощью ползунка в панели параметров) 60 или 50. Выведем окно выравнивания, щелкнем пункт по сцене, выравнивание по вертикальному и горизонтальному центру. Преобразуем текст в графический объект. Пункт меню изменить, разделить отдельно. Снова войти в меню изменить, группировать. Приступим к созданию анимации. Отметить 40 кадр и сделать его ключевым (меню вставка, ключевой кадр) или правый клик и выбрать ключевой кадр. При этом автоматически заполнятся все промежуточные кадры. С помощью инструмента трансформация уменьшить текст примерно в три раза. Выровнять надпись по вертикальному и горизонтальному центру. Меню окно, панель, контроллер
В панели контроллер нажать кнопку назад, чтобы перейти к первому кадру. Выделить текст. Меню вставить, создать двойное движение. Проиграть.
3. Выпадающий список
Для создания выпадающего списка в меню выберем окно компоненты, выделим файл ComboBox и перетащим его на рабочий кадр. Зададим параметры компонента. Параметр Editable задает возможность редактирования списка. Параметр Labels позволяет задать элементы списка. Для вызова окна редактирования списка нужно нажать изображение лупы, появится окно, в верхней части которого расположены следующие кнопки: плюс – добавить элемент, минус – удалить элементы, стрелки – сортировка элементов. Параметр Row Count указывает сколько элементов списка отображается при его раскрытии.
Создание анимации
1. Анимация движения по направляющей
В качестве объекта анимации будем использовать графический объект.
Выберем инструмент прямоугольник
Нарисовать небольшой закрашенный прямоугольник. Выделить его
В пункте меню вставить выбрать создать двойное движение, появится помеченная крестиком регистрационная точка в центре фигуры
Добавить направляющую движения, щелкнув по соответствующему значку в нижней части шкалы времени – появится выделенная строчка нового слоя в окне шкалы времени
Выбрать инструмент карандаш и в опциях – размыть
Нарисовать линию через весь кадр, по ней будет перемещаться объект, при этом в качестве траектории может использоваться любой контур
Прямоугольник переместить в начало линии.
Теперь создадим все кадры фильма, для этого перейдем на слой направляющей и, щелкнув по 30 кадру, перетащим выделение на слой прямоугольника
В пункте меню вставить, выберем ключевой кадр, появится крестик в центре фигуры и выделится направляющая движения
Будет создан последний ключевой кадр и все промежуточные кадры создадутся автоматически
Снять выделение с объекта (щелчком мыши на поле)
Перетащить прямоугольник в конец линии, опять появится регистрационный крестик
Для просмотра анимации вызвать панель контроллер с помощью пункта меню окно и нажать кнопку проиграть (или нажать CTRL+ENTER)
Для движения объекта по прямой делается все точно так же, но без создания направляющей движения.
Если необходимо просмотреть промежуточные кадры, то нажмем отметку 30 на шкале времени, для того чтобы сделать последний кадр текущим. Нажмем кнопку луковая кожура в нижней части шкалы времени. При этом по обе стороны от указателя текущего кадра появятся ограничители области видимых кадров, а рядом с прямоугольником отобразятся смежные кадры, при чем их прозрачность тем больше, чем дальше они отстоят от текущего кадра. Поместим указатель мыши на красный маркер текущего кадра, нажав и удерживая левую кнопку мыши переместим маркер в центр шкалы времени, при этом переместится и изображение со смежными кадрами.
2. Настройка параметров анимации
Для настройки используется панель кадр.
Вызовем панель контроллер и нажмем кнопку назад для перемещения объекта к началу фильма. Выделим (щелчком на нем) прямоугольник. При перемещении указателя мыши на шкалу времени появится панель кадр (при невыбранном инструменте выделение), в которой отобразятся текущие параметры анимации движения.
При установленном флажке в пункте направляющая движения объект, двигаясь, будет ориентирован по направлению движения в каждой точке траектории.
В окне вращать выберем пункт CCW, а в окне раз, напишем цифру 4 – объект будет вращаться при движении против часовой стрелки.
Пункт CW – вращение по часовой стрелке.
None – без вращения.
3. Управление кадрами
В программе Macromedia Flash существуют разные настройки для выделения кадров. По умолчанию выделяются обычные кадры вместе с ключевыми кадрами. Щелкните в середине шкалы времени (двойной щелчок в нашей программе) первого слоя – выделятся все слои кадра вместе с крайними, которые являются ключевыми. При нажатии на строку направляющей движения на ней так же выделятся все кадры. Для того, чтобы выбрать способ выделения войдите в пункт меню редактировать, настройки и в появившемся окне поставьте флажки в пунктах сдвинуть выбор и показать подсказки, нажмите ОК. Теперь при нажатии на строку кадров выделяются только отдельные кадры (в нашей программе так происходит и без флажков) Для вставки ключевого кадра используется пункт меню вставить, ключевой кадр, при этом в ключевой кадр копируется содержимое ближайшего ключевого кадра, расположенного слева. Если необходимо создать в кадре новое изображение, то используется пустой ключевой кадр. Создайте новый слой, для этого нажмите кнопку вставить слой у нижнего левого края шкалы времени. Теперь подведите указатель к кадру верхнего слоя под отметкой 41. Нажав и удерживая кнопку мыши, выделите кадры во всех слоях. Выберите команду пустой ключевой кадр в пункте меню вставить, при этом будут созданы пустые ключевые кадры в конце фильма. Добавьте пустые ключевые кадры во все слои 20 кадра фильма. Вертикальная черта между 19 и 20 кадрами в слоях направляющей первого слоя указывает левую границу ключевого кадра. Все кадры после нее во всех слоях пустые. В первом слое первые 19 кадров отмечены пунктирной линией. Это означает ошибку анимации.
Перемещение, копирование и удаление кадров
Для копирования кадров выделите нужные кадры и вызовите контекстное меню щелчком по выделению. Выберем команду вырезать кадры. При этом кадры будет удалены и помещены в буфер обмена. Выделите тот кадр, куда нужно переместить вырезанные кадры, вызовите контекстное меню выберите команду вставить кадры. Для переноса выделенной группы кадров достаточно щелкнуть на ней мышью и удерживая кнопку переместить кадры. Выделенные кадры можно таким же способом удалить или скопировать.
4. Преобразование кадров
В Macromedia Flash используются два типа кадров обычные и ключевые. Для их удаления используется пункт меню вставка, удалить кадры. Выделить любой кадр, удалить его и отменить удаление. Преобразуем ключевой 20 кадр слоя 1 в обычный. Для этого выделим его и выберем команду очистить ключевой кадр пункта меню вставка, при этом его содержимое будет удалено и в слое появится пунктирная линия обозначающая ошибку анимации.
5. Цветовые эффекты
Можно изменять яркость цвета объекта при движении. Для этого выделим первый кадр созданного фильма, затем выделим прямоугольник и в параметрах стили цвета зададим Brightness. Значение яркости зададим –60%, прямоугольник стал темнее. Выделим последний кадр, объект переместиться в конец движения, выделим его и в стилях цвета значение яркости зададим 100%. Теперь при движении объект будет светлеть и исчезать.
6. Комбинированные эффекты
Для того чтобы изменять одновременно и прозрачность цвета и его оттенки служит эффект Advanced, выберем его в списке стили цвета и нажмем расположенную рядом кнопку настройка. Появится окно Расширенные эффекты, в первом столбике которого указаны начальные параметры, во втором указывается, на сколько они должны изменяться в процессе анимации. Любой из параметров можно задать с помощью ползунка. Первые три параметра – процентное содержание красного, зеленого и синего цветов, последний параметр – прозрачность Для последнего кадра. задать значения в первом столбце = 100% и в правом 255, -255, -255, 0. Для первого кадра соответственно -100%, 100%, -100%, 100% - в первом столбце и все нули во втором столбце.
7. Анимация формы
Нарисовать маленький зеленый круг в верхнем левом углу, вставить пустой ключевой 40 кадр. Нарисовать в правом нижнем углу зеленый квадрат. В 20 кадре вызвать контекстное меню и задать свойства анимации в открывшемся окне параметров кадра.
Рис. 6
В поле пара выбрать Shape – появится объект промежуточной анимации. Можно задать скорость движения и перекос или оставить эти значения по умолчанию. При проигрывании зеленый кружочек плавно перетекает в красный квадрат. Можно не менять местоположение объекта. Для выравнивания рисунков нужно чтобы их части пересекались.
8. Создание слоя – маски
Создайте слой, содержимое которого будет просвечивать сквозь отверстия в маске. Добавьте новый слой, который в дальнейшем будет преобразован в маску, он должен находиться непосредственно над тем слоем, к которому применяется маска. Нарисуйте любой объект, например круг, его цвет не имеет значения, так как будет прозрачным. Выделите круг и сохраните его в буфере обмена. Вставьте пустой ключевой кадр напротив отметки 40 в обоих слоях. Вставьте круг из буфера обмена в 40 кадр 2 слоя. Выделите 20 кадр во втором слое щелчком правой кнопки мыши и в появившемся окне параметров, в пункте пара задайте Shape. Щелкните правой кнопкой по имени 2 слоя и задайте его как маску, слои свяжутся.
Работа с фильмом
1. Автономный проигрыватель
Готовые фильм можно просмотреть, кроме браузеров, средствами Microsoft Office и Macromedia Direct. Программа позволяет при воспроизведении фильма вызывать при помощи команд функции среды, в которой воспроизводится фильм. Так, если фильм запущен в браузере есть возможность вызвать функцию JavaSсript. Создадим любой графический объект (прямоугольник без контура, выделить, группировать, создать ключевой 30 кадр). Добавить новый слой, в который мы поместим команды скрипта, нажмите правую кнопку мыши на первом кадре нового слоя и вызовите команду Действия на появившемся контекстном меню, при этом откроется окно Действия – Кадр, предназначенное для создания и редактирования кода скрипта (Рис. 8). Нажмите на кнопку плюс и в появившемся меню выберите Actions, Browser\Network, fscommand – в правом окне появится оператор скрипта, а в нижней его части элементы управления для выделенной команды. Для управления проигрывателем используются команды, расположенные в списке Команда для отдельного проигрывателя. Выберите в этом списке команду fullscreen, в поле команда появится название команды, а в поле параметры – его аргумент, по умолчанию в нем стоит значение true. При этом параметре фильм будет воспроизведен в полноэкранном режиме.
Рис.7
2. Переход между кадрами
Откроем файл, созданный при изучении пункта анимация движения. Сделаем так, чтобы при прохождении половины пути объект остановился. Для этого вставим 15 ключевой кадр в слой с объектом, откроем с помощью контекстного меню окно Действия - Кадр для этого кадра. В этом окне слева находится список доступных команд, а справа – назначенные этому кадру команды. Теперь протестируйте фильм. Щелкните два раза на команде stop, чтобы переместить ее в правое окно (Actions, Movie Control, stop). Для того чтобы перейти к какому-либо кадру при проигрывании фильма используется команда goto. Удалите команду stop из окна панели нажатием кнопки минус. Дважды щелкните на команде goto, в нижней части панели отобразятся параметры команды. В поле кадр стоит значение 1 – это номер кадра, к которому отсылает данная команда. Протестируйте фильм командой проверить фильм, теперь объект проходит только половину траектории и возвращается в ее начало.
3. Управляемые переходы
Для того чтобы во время просмотра можно было контролировать перемещение к кадру необходимо вставить интерактивные элементы. Добавьте еще один слой в предыдущем фильме. В качестве переключателей используем кнопки стандартной библиотеки программы. Первая кнопка будет возвращать фильм к началу, вторая – в середину, третья кнопка – стоп. Войдите в меню Окно и в пункте Основные библиотеки выберите библиотеку buttons. Из открывшегося окна перетащите элемент с любой кнопкой в кадр. Проделайте эту операцию еще два раза, для того чтобы добавить в новый слой еще две кнопки. Расположим кнопки так, чтобы они не перекрывали объект при движении. Теперь возле каждой расположим название выполняемой команды. Выберем инструмент Текст и в панели параметров зададим шрифт Arial Cyr и небольшой размер шрифта. Нанесите названия на кнопки. Теперь приступим к назначению команд кнопкам. Выделите 15 кадр слоя объекта и удалите команду скрипта, для этого достаточно вызвать панель Действия – Кадр и удалить кнопкой минус заданное действие, предварительно его выделив.
Рис. 8
Теперь щелкните правой кнопкой мыши на изображение первой кнопки в кадре фильма и в появившемся окне выберите пункт Действие. Откроется окно Действия – Кадр. Дважды щелкните на команде goto. В нижней части правого окна появятся две строчки параметров. Первая определяет при каком действии с кнопкой производить выполнение команды. Вторая содержит команду перехода. Выделите первую строчку скрипта on (press). Уберите флажок Выпуск (Рис. 9) и поставьте флажок Печать, при этом указанное нами действие будет производиться при нажатии кнопки. Проделайте аналогичную операцию со второй кнопкой. Только в параметрах команды goto в поле кадр укажите 15 кадр. Для задания остановки фильма снова используем команду stop, назначим ее последней кнопке, эта команда не имеет параметров.
Рис. 9
4. Создание движения анимированного объекта.
I. Покадровая анимация рисунка
1. Нажать CTRL+f8 (создать символ) – появится окно
Рис. 10
Выбрать поведение: фильм, задать имя – man, нажать ОК. Символ будет помещен в библиотеку и программа перейдет в режим редактирования символа: появится окно редактирования символа. Под шкалой времени появится следующая надпись:
1. Нарисовать человечка
2. Щелкнуть по 1 кадру – выделится весь рисунок
3. F6 – скопировать кадр
4. Убрать выделение
5. С помощью черной стрелки изменить позу человечка
6. Повторить несколько раз копирование кадра и изменение рисунка (не выделять рисунок – F6, изменение; F6, изменение; F6, изменение и так далее)
7. Щелкнуть правой кнопкой по последнему кадру и выбрать действие в списке – появится окно Действие – кадр. Два щелчка по goto – появится gotoAndPlay(1) и буква a над кадром. Закрыть окно
8. Щелчок по синей стрелке или по подчеркнутому слову сцена – выход из режима редактирования символа.
9. Переходим к созданию промежуточной анимации движения
II Промежуточная анимация движения
1. Открыть библиотеку CTRL+L и перетащить человечка в кадр
2. Выделить 1 кадр
3. Создать двойное движение через меню вставить
4. Выделить 30 кадр
5. Создать ключевой кадр – появятся промежуточные кадры (фиолетовые, с идущей через все кадры стрелкой)
6. Перетащить рисунок в конец пути
7. CTRL+ENTER – проиграть фильм
Для изменения поз – щелкнуть по нужному кадру и внести изменения. Можно добавить число кадров в покадровой анимации. Для этого нужно, щелкнув дважды по рисунку, вернуться в режим редактирования. Убрать a из последнего кадра, удалив gotoAndPlay(1). Нажать F6 - cкопировать последний кадр в следующий и изменить позу и так далее. Пример man
5. Движение анимированного объекта с анимированными вставками
(объект – велосипед, вставки – колеса)
I Объект с промежуточной анимацией
1. CTRL+F8 – создать клип (фильм) kol (колесо)
2. Нарисовать колесо велосипеда
3. Щелкнуть по 1 кадру, вставить, создать двойное движение
4. Задать вращение в параметрах 1 кадра: Motion, CW
Рис. 11
5. Создать ключевой 40 кадр
6. Щелчок по синей стрелке
II Анимированный объект
1. CTRL+F8 – создать клип velosiped
2. CTRL+L – открыть библиотеку и перетащить колесо два раза
3. Создать второй слой для велосипеда и нарисовать его, а 1-ый слой временно заблокировать
4. Создать покадровую анимацию (прыгающие колеса) – щелчок по 1 кадру, F6, изменить положение колес и так несколько раз, goto в последнем кадре – возврат к 1 кадру
5. Выход из редактирования клипа
III Движение по направляющей
1. CTRL+L – открыть библиотеку и перетащить машину на основную сцену
2. Создать слой направляющей, нарисовать направляющую движения
3. Поставить объект в начало движения
4. Cоздать двойное движение
5. Выделить оба слое на кадре 40
6. Вставить ключевой кадр в кадре 40
7. Щелчок по последнему кадру
8. Перетащить объект в конец пути
9. Для первого слоя задать Действие – stop
10. Добавить слой и вытащить кнопку из библиотеки для управления проигрыванием – play. Для этого правым кликом по кнопкам вызвать окно Действия.
Создание кнопок
1. Создание формы
В программе определено четыре положения кнопки в зависимости от расположения мыши (Рис. 12):
Вверх – при отсутствии указателя над кнопкой
Над – при расположении указателя над кнопкой
Вниз – при нажатии на кнопку
Нажатие – вид области
Создайте новый фильм. Кнопка является эталоном нового типа и для ее создания необходимо воспользоваться специальной командой. Войдите в пункт Вставить и выберите пункт Новый символ (или нажать CTRL+F8). При этом символ будет помещен в библиотеку. В появившемся окне выберите пункт Кнопка и нажмите ОК. В шкале времени появятся кадры редактирования кнопки. В первом кадре нарисуйте прямоугольник с произвольным цветом заливки. Так будет выглядеть кнопка в обычном состоянии. Выделим изображение обведя его рамкой, скопируйте изображение в буфер обмена с помощью контекстного меню. Для того, чтобы создать изображение в кадре Над сделаем его ключевым. Для этого щелкнем правой кнопкой по второму кадру и в контекстном меню выберем пункт Пустой ключевой кадр. Теперь поместим в него изображение. Нажмите правую кнопку мыши в кадре и в контекстном меню выберите Вставить на месте при этом объект будет помещен в то же место. Выберите в палитре цветов зеленый цвет заливки, сделайте теперь пустым ключевым кадр Вниз и вставьте в него изображение кнопки. Выберите другой цвет заливки, например, красный, в последний кадр Нажатие объект поместите без изменений. Кнопка готова.
Другой способ копирования кадров кнопки: нажать F6, изменить цвет, размер, конфигурацию, можно написать текст, снова нажать F6 и так далее.
Или: выделить весь объект обводкой (текст на кнопке тоже), скопировать его в буфер обмена, перейти на следующий кадр, вставить Ключевой кадр.
Для ее просмотра необходимо перенести созданный эталон в фильм. Щелкните на подчеркнутой надписи Сцена1 или синюю стрелку в левом верхнем углу окна фильма – изображение кнопки исчезнет, в пункте меню Окно выберите Библиотека и перенесите кнопку в кадр, при этом на экране появится ее изображение. Выберите в пункте Управление команду Проверить фильм, при этом откроется окно просмотра с созданной кнопкой. При помещении указателя мыши на кнопку он приобретает вид руки и цвет или вид кнопки меняется. Нажмите на левую кнопку мыши – созданный эталон работает.
3. Звуковой сигнал для кнопки
Можно добавить звуковой сигнал, который прозвучит, например, при нажатии на кнопку. Перейти в режим редактирования. Создать новый слой для звука. Создать ключевой кадр в кадре 3.
Вызвать окно Основные библиотеки, Sounds и выбрать, при выделенном 3 кадре нужный звук, перетащить его на сцену. Изображение звука появится на шкале кадров в кадре Вниз.
Рис. 12
4. Кнопка-ссылка на Web-страницу
Для того чтобы созданная кнопка была гиперссылкой, нужно сначала выделить объект, а не кадр, затем для первого кадра в окне Действия – Кнопка нажать Actions, Browser\Network, выбрать двойным щелчком getURL и в экспертном режиме (рис. 13) записать полный путь к нужной Web-странице. Для перехода из нормального режима в экспертный или обратно нужно нажать синюю стрелочку в верхнем правом углу окна Действия – Кнопка.:
on (release) {getURL("C:\\flash\\str1.html", "_self");}или так:
on (release) {getURL("admin. html", "mainFrame");}, если ссылка на файл в этой же папке
· _blank – открывается новое окно
· _parent – в главном окне
· _self – в своем окне
· _top – в верхнем окне
Признака действия (буквы a) в кадре не должно быть.
Рис. 13
5. Пример создания кнопки-гиперссылки для Web-страницы
1. Задать размер документа 100х20 пикселей и масштаб=200%
2. Нарисовать прямоугольник со скругленными краями (радиус 10) на весь экран выбранным цветом и заливкой
3. Написать в нем текст, например – Кнопка 1 (13 размером шрифта)
4. Выделить все с помощью обводки
5. Нажать F8 – Преобразовать в символ. Появится окно, в котором зададим пункт – Кнопка. Объект преобразуется в тип Button, появится регистрационный крестик в центре кнопки
6. Выделить объект двойным щелчком. Программа перейдет в режим редактирования кадров кнопки. Первый кадр уже создан.
7. Сохраним его в буфере обмена любым способом
8. Щелкнем по второму кадру и вставим Ключевой кадр
9. Изменим заливку или цвет текста или форму объекта
10. Сохраним его в буфере обмена и создадим 3 и 4 кадры. Вид кнопки в 4 кадре можно не изменять.
11. Кнопка готова. Выйдем из режима ее редактирования.
12. Вызовем окно Действия – Кадр при выделенном объекте и зададим кнопку как гиперссылку. Задать цвет фона, в режиме редактирования документа соответствующий цвету фона Web-страницы. (Например, #663300)
13.Сохраним файл и опубликуем его. Кнопка готова для Web-страницы.
6. Трехмерная кнопка
1. Задать размер документа 50х50 пикселей и масштаб=100%
2. Выбрать инструмент Эллипс
3. Выбрать любой цвет заливки, и отсутствие цвета контура
4. Активизировать инструмент Заливка и вызвать окно Микшер цвета
5. Выбрать Linear (линейный градиент). Зададим цвета двух порогов градиента, от темного к светлому, щелкнув по порогу и выбрав цвет для каждого порога.
6. Залить окружность, преобразовать ее в символ (выделить и нажать F8) и перейти в режим редактирования символа (двойной щелчок)
7. Нажать F6 для копирования ключевого кадра из первого положения кнопки во второе при выбранном инструменте Указатель
8. Изменить цвет заливки – это вид кнопки при наведении мыши
9. Нажать F6 для копирования ключевого кадра из второго положения кнопки в третье
10. Нарисовать внутри круга круг меньшего размера и, задав радиальную заливку, залить кнопку с другой стороны для получения эффекта нажатия. Пример – файл «3-х мерная кнопка. fla». Можно использовать для внутреннего круга инструмент <трансформация заполнения>
– после того как зальем его тем же линейным градиентом, что и наружный круг, повернуть заливку на 180 градусов.
