WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Pages:     || 2 | 3 | 4 | 5 |   ...   | 7 |
1 Санкт-Петербургский государственный университет информационных технологий, механики и оптики Кафедра компьютерных образовательных технологий Д.Г. Штенников Эффективная работа в Adobe Flash CS3 Учебно-методическое пособие Санкт-Петербург 2008 2 УДК 681.3 Штенников Д.Г. Эффективная работа в Adobe Flash CS3.

Учебно-методическое пособие. – СПб., 2008. – с.

Рецензенты: Л.С. Лисицына, к.т.н., доцент, зав. каф. КОТ СПбГУ ИТМО А.В. Белозубов, к.т.н., доцент каф. КОТ СПбГУ ИТМО Учебно-методическое пособие предназначено для использования в учебном курсе «Информатика» по ряду специальностей и направлений подготовки студентов университета, а также для поддержки курсов повышения квалификации работников образования по программе «Основы ИКТ для применения в образовательной деятельности» по заказу Комитета по образованию Санкт-Петербурга.

Печатается по решению УМС факультета ИТиП СПбГУ ИТМО © Санкт-Петербургский государственный университет информационных технологий механики и оптики, 2008 3 Оглавление Оглавление 3 Символы 5 Кадры и ключевые кадры _11 Простая анимация движения (Motion) _12 Простая анимация формы _14 Экземпляры символов15 Вложенная анимация 18 Анимация фильтров _21 Флеш для СД и ДВД 23 Интерфейс в силе Хай Тек 26 3Д кнопка 30 Интерактивные галереи _32 Придание динамики графическим изображениям35 Создание баннера для Веб с использованием готовой графики 36 Кэширование растровой графики _36 Размытие при движении _36 Анимированный переход между экранами37 Лого _38 Создание металлического интерфейса с бликом 39 Имитация написания рукой 40 Движение по траектории 41 Разворачивание рисунка. _42 Эффект векторного рисунка _43 Эффект с контуром _44 Эффект с контуром 2 _44 Оптимизация растровой графики_45 Псевдо 3Д во Флеш 46 Дым и туман _47 Отражение_48 Использование управляемого замедления или ускорения анимации 48 Катящийся шар _51 Падение предмета Движение персонажа Продвинутые кнопки Прелоадер Пользовательский курсор Перетаскивание объектов _Фото галерея _Сайт на Флеш Создание графической оболочки для загрузки страниц _Использование фокуса _Слайдер Выпадающее меню Работа с видео Видео эффект Векторное видео Эффект старого кино _Здание внешнего вида для компонент _Добавление звука к кнопке _Зацикливание музыки Использование переменных_Кнопки с запоминанием действий _XML фотогаллерея Прокрутка для текста MP3 проигрыватель _Форма для отправки e-mail _Использование AS3 Связь с ФР Использование функций События на мышку События на клавиатуру _Действия на кадр _Действия на кнопкие Таймер _Классы _Использование условий _ЦиклыСимволы Для начала необходимо разобраться с таким основополагающим понятием, как символы. Откройте файл 001.fla, расположенный в папке Lessons. Файл, Открыть, найти папку Lessons и найти в ней файл 001.fla Выбрать файл 001 (в зависимости от настроек ПК рядом с названием может отображаться расширение.fla) На экране отображаются три заготовки под символы. Во Flash существуют три основных типов символов – Графика (Г), Кнопка (К), Фрагмент ролика (ФР) (в различных вариантах можно встретить перевод как Ролик, Муви Клип).

Каждый из типов символов представляет из себя объект, обладающий набором свойств и обладающий специфичными возможностями.

Выделите первый круг, для этого щелкните по нему левой клавишей мыши (лкм) (поскольку у данного объекта отсутствуют линии контура, если бы контуры присутствовали, пришлось бы щелкнуть лкм 2 раза). Выделенная часть объекта отмечается «сеткой» В меню Изменить, Преобразовать в символ, на экране появляется диалоговое окно, в котором можно выбрать тип символа и при необходимости задать параметры для совместного использования с ActionScript (AS) (встроенным языком программирования). Дополнительные параметры для использования с AS можно увидеть, если нажать на кнопку «Дополнительно» Переход в обратный режим осуществляется нажатием на кнопку «Основные». Также возможно выбрать точку регистрации, относительно которой, будет происходить изменение масштаба, поворотом и движение символов. Выберите «Графика» и нажмите Ок. При этом стоит обратить внимание, что, для символов типа Графика невозможно использование с элементами AS (видно, что заблокирован пункт Экспортировать для ActionScript) Таким образом, может быть получен символ типа Графика, просмотреть это можно в панели Свойства.

В данной панели виден тип символа – Графика, указано, то рисунок, отображаемый на экране, является экземпляров Символ 1 из библиотеки, там же в панели свойств можно увидеть ширину (Ш), высоту (В), координаты объекта X и Y, отсчитанные от левого верхнего угла сцены. Для символов типа Г доступна корректировка цвета:

Яркость – изменение яркости для объекта Тон – изменение оттенка для объекта Альфа – изменение прозрачности для объекта Дополнительно – комбинация эффектов В тоже время, видно, что Смешать – заблокирован и нет возможности использовать эффекты смешивания (как в Photoshop) так, же для объектов (символов) этого типа недоступны эффекты.

Изменилось и отображение объекта на экране:

Вместо «сетки» вокруг объекта появляется рамка, в верхнем углу крестиком отмечена точка регистрации.

Выделите второй круг и щелкните по нему правой клавишей мыши (пкм), Преобразовать в символ. Выберите «Фрагмент ролика» ФР, Новое название для помещения в библиотеку дается автоматически (Символ 2). Данный символ можно использовать совместно с AS. Если отметить пункт Экспортировать для ActionScript, то данному символу будет возможность задать еще одно имя для скриптового извлечения из библиотеки.



Для скриптового извлечения из библиотеки дается еще одно имя для ФР, которого может не совпадать с именем в библиотеке, также существует возможность для задания класса для создания программных элементов.

В панели свойств видно, что выбран ФР, он является экземпляром символа из библиотеки, экземплярам типа ФР можно задавать имена для более удобно работы с AS – «Имя экземпляра», также для ФР можно применять цветовые эффекты и режимы смешивания, а также фильтры.

Выделите третий круг, F8, и выберите Кнопка. Для кнопки возможны почти те же возможности, что и для ФР. К возможностям добавляется возможность создавать просто кнопки или создавать элементы меню Редактирование каждого из символов ограничено – им можно менять оттенки, задавать смешивание цветов, менять масштаб, но использовать новые градиентные заливки, редактировать контуры невозможно. Это можно делать только в режиме редактировании символов.

Отличия между ними значительнее, чем видимы на экране.

Каждый из созданный Вами символов, отображается в библиотеке.

Щелкните 2лкм по ФР, вы увидите новую линейку времени, которая находится внутри каждого ФР и может не совпадать с действиями, совпадающими на основной сцене.

В панели времени видно, что вы находитесь в режиме редактирования Символа 2, который находится на сцене 1. Перейти обратно на сцену можно щелкнув лкм по светло-голубой стреле рядом с названием сцены или 2лкм по фоновой части сцены. В режиме редактирования символов существует возможность редактировать конуры и заливки объектов, а также менять их позиционирование.

Вернитесь на сцену 1 и 2 лкм по кнопке, в символах этого типа отсутствует привычная временная линейка.

По умолчанию в кнопках присутствуют 4 состояния, и они все равны состоянию Вверх.

Вверх – состояние не нажатой кнопки Прохождений – курсор мыши наведен на кнопку Вниз – кнопка нажата Попаданий – область реакции кнопки Создайте все состояния индивидуальными (F6 3 раза или перетягиванием состояния с нажатой клавишей Alt), создать все состояния анимированными и разрывными, кроме того, эти состояния по местоположению могут не совпадать по местоположению друг с другом.

Вернитесь на сцену и сохраните файл: Файл, Сохранить.

Кадры и ключевые кадры Откройте файл 002.fla. На экране отображается панель времени, в которой присутствуют 2 слоя В слое waves присутствует один заполненный ключевой кадр (КК) – обозначенный черной точкой, содержимое этого кадра не меняется с 1 по кадры. Отмечается окончание этого статичного ключевого кадра белым прямоугольником. Для того чтобы случайно не переместить содержимое этого слоя или не создать в нем новых элементов слой заблокирован – об этом говорит значок в виде замка в атрибутах слоя. При необходимости можно этот слой можно сделать невидимым – для этого щелкнуть лкм по черной точке, находящейся под символом «глаз».

В слое Finnie находятся 2 КК, в первом КК располагается первое положение рыбки, во втором КК располагается конечное положение рыбки.

Для того чтобы продлить время существования нижнего слоя (waves) необходимо или щелкнуть лкм по 40 кадру и нажать клавишу F5 (Вставить, Временная шкала, Кадр), можно пкм по 40 кадру, вставить кадр. С экрана рыбка пропадает, т.к., рыбка существует 35 кадров, а море 40 кадров. Чтобы вставить КК на слое Finnie, щелкните лкм по 40 кадру данного слоя и нажмите F6 (можно, Вставить, Временная шкала, Ключевой кадр) или пкм, Вставить ключевой кадр.

Над временной шкалой находится ползунок красного цвета, передвигая который можно увидеть, как меняется содержимое на сцене.

Перейдите в 1КК слоя Finnie, Выберите рыбку и в панели Свойства, в которых, задайте параметр Альфа 0% или 18% Перейдите во 2КК этого слоя и обратите внимание, что во 2КК рыбка непрозрачна, передвигая ползунок времени, можно увидеть, как рыбка не только меняет свое положение, но и меняет прозрачность.

Щелкните лкм по 19 кадру слоя Finnie, нажмите F6, создавая новый КК, выберите рыбку и в панели Свойства задайте Тон, цвет тона и процентное применение этого эффекта, например синий цвет и 100% эффекта.

Посмотрите, как меняется рыбка со временем. Вернитесь во 2КК, выберите рыбку и задайте применение эффекта 10%. Инструмент «Свободное преобразование», поверните рыбку на 45 градусов и снова посмотрите на результат анимации.

Дополнительно хотелось бы отметить, что не только применение того или иного эффекта и местоположение объектов может быть различно в разных КК, но и программные действия могут быть различны.

Сохраните файл.

Простая анимация движения (Motion) Откройте 003.fla. посмотрите, на временной линейке отображаются параметры времени для данного проекта:

1 – номер кадра, в котором Вы находитесь 12.0 кадров/с – скорость проигрывания анимации (задается в свойствах документа) 0.0 с – время, прошедшее со времени анимации Создайте 2КК в слое Finnie через 3 секунды после начала анимации, для этого щелкните лкм по 36 кадру в слое Finnie и нажмите FПрокручивая ползунок времени, обратить внимание как меняется время в панели времени. Необходимо создать море по всему времени существования верхнего слоя с рыбкой. Если просто взять мышкой за 1КК в слое waves и перетянуть его на 36 кадр(лкм по кадру, а затем нажать на выделенный кадр и перетянуть его правее), то в панели времени появится:

Видно, что вид 1КК изменился – в нем пропала черная точка – такая форма говорит о том, что данный КК пустой, передвигая ползунок времени, можно это проверить. По этому, этот способ не подходит, отмените действие(я) Ctrl+Z или Редактирование, Отменить Переместить кадры.





Щелкните лкм по 36 кадру waves и нажмите FПерейдите во 2КК слоя Finnie (а 2КК есть только в нем), выберите рыку и передвиньте ее по горизонтали (удерживая клавишу Shift). Таким образом, в 1КК:

А во 2КК:

Перейдите в 1КК слоя с рыбкой и в панели Свойства, выберите Анимация, Движение Панель Свойств изменят свой вид:

Кадры в слое Finnie, так же меняют свой вид:

Стрелка в кадрах показывает, что анимация с точки зрения программы, задана, корректна, сиреневый цвет кадров – о том, что задана анимация Движения.

Аналогично, можно было добавить анимацию движения:

Пкм по кадру, расположенному между двумя ключевыми кадрами, Создать анимацию движения Или: Вставить, Временная шкала, Создать анимацию движения.

Сохраните файл.

Простая анимация формы Файл, Создать, //Инструмент Овал, задать параметры лини окантовки и заливки, Проверить, чтобы не рисовались примитивы Инструмент текст, Статик текст, цвет, тип шрифта, размер 96, лкм, по сцене, написать букву, выделить ее посмотреть различные размеры для буквы, вернуться к размеру 96, для большего увеличения размера ввести значение 160 в качестве размера буквы.

Разбить букву на кривые, снять с нее выделение и инструментом Стрелка модифицировать одну из сторон буквы, затем выделить букву и перенести ее в другую часть листа. Отменить изменения контуров и положения на сцене.

Лкм по 5 кадру, F6.

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

Лкм 1КК – панель Свойств Tween Shape. Ползунком времени проверить, что переход из буквы в прямоугольник происходит равномерно.

Лкм 10к, F6. Изменить цвет прямоугольника на зеленый (это можно сделать заливкой или в панели свойств). Выберите инструмент Эллипс и нарисуйте эллипс поверх прямоугольника. Лкм 2кк, Свойства, Tween Shape, Просмотреть, что анимация происходит плавно.

Сохранить файл с называнием 004.fla Экземпляры символов Создайте новый файл, назовите его 005.fla в этом файле создайте несколько одинаковых объектов при помощи инструмента Овал. Выдержать одинаковые размеры затруднительно. Один из способов получать одинаковые по размеру объекты – использовать экземпляры символов.

Выделите один из объектов, нажмите F8 и выберите Кнопка.

Нажмите Ок, Символ помещается в библиотеку, и внешний вид объекта меняется – появляется рамка вокруг объекта, в точке регистрации помещается крестик, в центре символа – окружность.

Нажмите Delete, удаляя объект со сцены, но данный объект остается в библиотеке. Перетащите символ из библиотеки на сцену.

В панели свойств будет указано Экземпляр: Символ 1 – т.е. - экземпляр символа 1, находящегося в библиотеке. Выберите Символ 1 в библиотеке, щелкните пкм и выберите Переименовать, после чего введите название Ball.

(или нажмите на кнопку Свойства в панели Библиотека, после чего переименуйте символ).

После этого, символ в библиотеке меняет название и в панели свойств меняется информация:

Из библиотеки перетащите несколько экземпляров символа Ball и расположите их на сцене.

Войти в режим редактирования символа (2лкм по символу), после чего получаете возможность редактировать контуры и цвет заливки символа.

Задайте новый цвет заливки для символа Автоматически с этим все символы, находящиеся на сцене меняют цвет.

Вернитесь на сцену. Выберите один из символов и разбейте его на части (Ctrl+B или Изменить, Разделить). Таким образом, объект снова преобразуется в кривые. Выберите один из символов, войдите в режим редактирования и измените цвет. Все экземпляры изменят цвет, кроме того, который был разбит на части и перестал ассоциироваться с символом из библиотеки.

В панели Свойств, можно изменить свойства символа.

Измените объект на ФР, и задайте Имя Экземпляра ballИзменил состояние только один из экземпляров, все остальные объекты продолжают оставаться кнопками. Но если поменять заливку одного из экземпляров, то изменится и заливка ФР, поскольку все экземпляры ссылаются на символ в библиотеке. Выберите символ в библиотеке и выберите его свойства при помощи одноименной кнопки. Поменяйте тип объекта на ФР.

После чего символ в библиотеке приобретает иную пиктограмму Все дальнейшие объекты, которые будут перенесены из библиотеки - ФР.

Разнообразить внешний вид символов можно при помощи применения фильтров, эффектов цвета или смешивания.

Вложенная анимация Откройте 006.fla. В библиотеке 3 символа, все они являются ФР.

Перенесите chopper на сцену Затем перенесите rotor и tail-rotor. Выделите все символы, находящиеся на сцене и выберите инструмент Свободное преобразование. Удерживая клавишу Shift, за угловой маркер отмасштабируйте объекты.

Для более удобной работы приблизьте объекты при помощи инструмента Масштаб. Инструментом Стрелка выберите ротор (rotor).

2лкм по ротору на сцене или в библиотеке – зайдите в режим редактирования символа. Рассмотрите не то, как создан объект. Щелкните лкм по 5 кадру и нажмите F6. Между двумя ключевыми кадрами щелкните пкм и выберите Создать анимацию движения.

Ротор вертолета автоматически преобразовался в символ Графика, это можно проверить в панели Свойства. Перейдите во 2КК, Инструмент Свободное преобразование, уменьшить размер ротора по горизонтали.

Лкм по 10 кадру, F6, создавая 3КК, между 2КК и 3КК создайте анимацию движения.

Pages:     || 2 | 3 | 4 | 5 |   ...   | 7 |










© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.