Учебник по Flash'у

n          В поле Command вводим  имя команды, которое будет  использоваться  для идентификации 

n          В поле Arguments указываем передаваемые данные 

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

Существует еще выпадающее  меню For  standalone player, которое  используется для управления Flash проектором  при публикации в независимом приложении. 

  fullscreen - в  полный экран  при значении True

  allowscale - включает режим изменения размера  при  True

  showmenu - разрешить показ меню при  нажатии  правой кнопкой мыши (True)

  guit - выход и закрытие проектора

  exec - запускает внешнее  приложение

в  нашем случае скрипт будет следующим: 

On (Release) 

    FS Command ("dates", text1) 

End On

    Необходимо  немного  поработать с html кодом страницы. В тег  EMBED добавьте  имя проекта  например

NAME="FlashToJava"

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

swLiveConnect="true"

    Обмен  данных с JavaScript происходит с помощью  функции  Name_DoFSCommand, где Name

имя  присвоенное Flash проекту. Для выполнения  задачи поставленной в начале описания  потребуется следующий скрипт:

<SCRIPT  LANGUAGE="JavaScript">

    function  FlashToJava_DoFSCommand(command,  argument) {

       if  (command=="dates")  document.FlashToJava.SetVariable("text2", argument) 

} 

</SCRIPT>

Корректная  обработка данного скрипта  происходит  в Netscape, в моем EI5 обмен данными стал  возможен, только после  добавления  дополнительного скрипта на VB:

<SCRIPT  LANGUAGE=VBScript>

    Sub FlashToJava_FSCommand(ByVal  coms, ByVal arg) 

      call FlashToJava_DoFSCommand(coms,  arg)

    end sub 

</SCRIPT>

    Но  сюрпризы различия броузеров на  этом  не заканчиваются! Русский текст передается  только в EI, поэтому применять  обмен  данными без дополнительных ухищрений  реально для числовых и англоязычных  данных.

Домашнее задание: 

    Основываясь на  материале предыдущих  выпусков, проиллюстрируйте знаменитое  историческое событие  ставшее в мире  Интернет частым явлением "Преподнесение  в дар  Троянского коня"

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

Любая картинка на компьютере может быть представлена в двух графических режимах:



в векторном и растровом виде.

Растровая графика

Изображение в растровой графике состоят из отдельных точек различных цветов образующих цельную картину, наподобие мозаики. Типичными примерами растровой графики могут служить отсканированные фотографии или изображения созданные в PhotoShop или Paint.

Применение растровой графики позволяет добиться качественного изображения, фотографического качества. Но за все нужно, платить в данном случае - объемами файлов и трудоемкостью редактирования изображения, приходиться каждую точку подправлять вручную. Даже если Вы при редактировании используете инструменты типа линии или примитивов (овалов, квадратов), то результат представляет собой изменение затронутых данными инструментами пикселей. При изменении размеров, качество изображения ухудшается: при уменьшении - исчезают мелкие детали, а при увеличении картинка может превратиться в набор неряшливых квадратов (увеличенных пикселей). При печати растрового изображения или при просмотре его на средствах имеющих недостаточный разрешающую способность значительно ухудшает восприятие образа.

Векторная графика

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

Подобные изображения обычно занимают, значительно меньший объем и более легки в редактировании. Любой элемент картинки может быть изменен отдельно от других. Изображение, безболезненно меняет свои размеры, не теряя при этом четкости и общего расположения элементов. Оно более пластично, что позволяет отображать его на устройствах с различной разрешающей способностью одинаково качественно.

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

Помните, как в детстве мы прикладывали понравившуюся картинку к стеклу и наложив сверху лист бумаги рисовали ее копию? В данном случае, оригинал является растровым изображением, а наша копия, типичный пример векторной графики.

Во Flash можно использовать оба типа графики, как растровой - готовые графические объекты, так и векторной - созданной непосредственно в редакторе или импортированной из других векторных форматов. Кроме того, есть возможность преобразования растровой графики в векторную и наоборот. Создавать любую необходимую графику для Вашего сайта в любом формате, или презентаций в формате exe, или mov.

Сегодня мы перейдем от теоретической части, к работе с программой - редактором Flash4. Разумеется, прежде чем начать изучение программы, ее необходимо установить на Ваш компьютер. :-)

Где взять программу

Фирма Macromedia свободно распространяет полнофункциональную 30-ти дневную версию редактора Flash4, объем программы около 8 Мб. После окончания демонстрационного времени, программу необходимо зарегистрировать.



Не составляет труда приобрести Flash4 на дисках с графическими системами или в сборниках программ для Интернет. Flash4, можно скачать с сайта http://www.macromedia.com или найти с помощью систем поиска файлов на ftp серверах, могу порекомендовать российскую поисковую систему http://www.filesearch.ru

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

Ну вот, когда со всеми формальностями покончено и программа установлена, можно приступать к ее изучению.

Как и любой графический редактор, Flash4 содержит:

панель инструментов - с их назначением и способами использования мы познакомимся позже

рабочей зоны - во Flash она называется Stage, именно здесь мы и будем создавать произведения, которые потрясут весь Интернет своей гениальностью :-)

в верхней части экрана расположены слои - позволяющие создавать сложное многоуровневое изображение (приятное совмещение векторного редактора и программы обработки растровой графики PhotoShop)

Timeline - как только не переводят данный термин и линейка времени, и хронометрическая шкала, на мой взгляд правильнее будет назвать ее - кинолентой. Визуально timeline действительно напоминает киноленту, содержащую кадры - Keyframe нашего Flash фильма, отдельную для каждого слоя.

Познакомимся подробнее со строкой меню. Узнав назначение команд, можно начать, пробовать создавать свой фильм самостоятельно, не дожидаясь, когда ленивый автор рассылки пришлет очередной выпуск :-)

Начнем с самого начала, с File:

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

Revert (Возврат) - позволяет вернуться к предыдущей версии сохраненного проекта (а проектом мы будем называть файл с нашей работой).

Import (Импорт) - добавление в проект готовых графических и звуковых объектов.

Export Movie (Экспорт фильма) - соответственно сохранение нашего проекта в необходимом нам формате, например gif или клип QuickTime т.е в любой формат анимации.

Export Image (Экспорт изображения) - то же, но только в виде обычной статической картинки.

Publish Settings (Настройка публикации) - позволяет настроить все необходимые параметры для сохранения проекта в готовом для публикации в интернет (и не только) виде.

Publish Preview (Предпросмотр публикации) - можно проверить как на самом деле выглядит готовый проект и не стоит ли, изменить настройки публикации.

Publish (Публикация) - наконец, когда все проверено можно и опубликовать (сохранить в необходимом виде) проект.

Далее следуют команды, содержащиеся в большинстве программ Windows - Page Setup, Print Preview, Print и Send их назначение вполне стандартно и не нуждается в дополнительном описании.

Preferences (Настройки) - позволяют настроить Flash на Ваш вкус.

Assistant (Помощник) - не будем путать его с помощником из Office, от нашего значительно больше пользы, он предназначен для настройки инструментов рисования.

Список последних четырех открытых файлов - Recent file List.



И! Exit (Выход) - Как Вы думаете, для чего? :-)

Edit:

Остановимся только на тех командах, которые отличаются от команд меню Edit других программ.

Paste in Place (Вставить на место) - Вставляет копию из буфера обмена с сохранением относительно расположения, которое было при помещении объекта в буфер.

Paste Special (Специальная вставка) - Вставка из других программ

Copy Frames (Копировать кадры) - Копирует выделенные на Timeline кадры в буфер.

Paste Frames (Вставить кадры) - Соответственно, наоборот. Вставляет скопированные ранее кадры в Timeline.

Edit Symbols (Редактирование символов) - Не будем путать символы во Flash c обычными буквами или знаками препинания, хотя буквы и знаки, тоже могут быть символами. Символ это любой самостоятельный графический объект, преобразованный в символ. Символом может быть неподвижная картинка, кнопка или клип. При работе с символом изменяется на Edit Movie.

Insert Object, Link, Objects (Вставка объекта ссылки или объектов) позволяет вставить перечисленное, относится к самому Windows.

Меню View:

Goto (Идем к :-) ) - переход по кадрам и сценам.

100% - реальный размер нашего фильма. Более быстро размер можно изменить в выпадающем меню масштаба изображения, как и в других программах.

Show Frame (Показать кадр) - показывает весь кадр на экране.

Show All (Показать все) - все, что есть то и покажет :-)

Outlines (Контуры-границы) - включает режим отображения объектов в контурном виде (для быстрой прорисовки на медленных компьютерах) без заливки.

Fast (Быстро) - режим отображения объектов с заливкой, но без сглаживания (для тех же целей).

Antialias (Сглаживание) - нормальное отображение объектов со сглаживанием, не считая текста.

Antialias Text (Сглаживание текста) - загладит все, что есть на сцене.

Timeline (Шкала времени) - показать или убрать киноленту.

Work Area (Рабочая зона) - отображение рабочей зоны (удобно отключать при больших размеров фильма).

Rulers (Линейки) - включает линейки для удобства позиционирования объектов.

Grid (Сетка) - где линейка, там и сетка. Очень удобно при рисовании.

Snap (Магнит) - притягивание объектов друг к другу и к сетке. Об использовании данной команды читайте в следующих выпусках.

Show Shape Hints (Показывать магнитные отметки) - включает режим отображения магнитных отметок с помощью, которого например, можно проконтролировать соединение объектов между собой.

Меню Insert:

Практически одно из основных меню, с которым мы будем работать в дальнейшем.

Convert to a Symbol (Преобразование в символ) - применяется при преобразовании выделенных объектов Stage в символы.

New Symbol (Новый символ) - создать новый символ.

Layer (Слой) - добавляет новый, пустой слой.

Motion Guide (Путеводитель) - тоже слой, но предназначен для задания произвольной траектории движения объектов.

Frame (Кадр) - создать новый, пустой кадр.

Delete Frame (Удалить кадр) - и правильно! Долой лишние кадры :-)

Keyframe (Ключевой кадр) - создает новый ключевой (определяющий) кадр с тем же содержимым, что и предыдущий Keyframe в этом слое.



Blank Keyframe (Пустой Keyframe) - иногда возникает необходимость вставки пустого, ключевого кадра.

Clear Keyframe (Очистить Keyframe) - превращает выделенный Keyframe в обычный.

Create Motion Tween (Создать преобразование перемещения) - вот та волшебная команда, которая заставит перемещать и трансформировать Ваши объекты.

Scene (Сцена) - вставить новую сцену в фильм.

Remove Scene (Удалить сцену) - но для такого "зверства" необходимо иметь более одной сцены в проекте.

Меню Modify:

Служит для изменения объектов, свойств и т.д.

Instance (Экземпляр) - запускает окно Instance Properties для задания свойств выделенному объекту.

Frame (Кадр) - свойства кадра.

Layer (Слой) - свойства рабочего слоя.

Scene (Сцена) - нет это не свойства сцены, а всего лишь возможность изменения ее имени :-)

Movie (Фильм) - параметры фильма (размер, кадры и т.д.).

Далее идут команды работы с текстом.

Font (Шрифт) - работа с выделенным текстом.

Paragraph (Абзац) - свойства выделенного текстового блока.

Style (Стиль) - работа со стилем выделенного текста.

Kerning (Кернинг) - плотность выделенного текста.

Text Field (Текстовое поле) - параметры выделенных текстовых полей (открывает широкие возможности при написании интерактивных сцен).

После издевательства над текстом, можно заняться творчеством с другими объектами.

Transform (Преобразование) - трансформация объектов (повороты, изменение размеров и др.).

Arrange (Упорядочить) - позволяет изменять уровень наложенности объектов и блокировки.

Curves (Кривые) - работа с кривыми, позволяет добиться хороших результатов при правильном подходе.

Frames (Кадры) - синхронизация кадров, или их реверс.

Trace Bitmap (Трассировка растровой графики) - перевод обычной графики в растровую, для дальнейшей работы во Flash.

Align (Выравнивание) - удобная функция для установки объектов относительно друг друга.

Group (Группировка) - "склеивание" различных объектов в одну фигуру.

Ungroup (Разгруппировка) - как склеили, так и разорвем на части :-)

Break Apart (Разбить) - разбивает текст на отдельные символы или преобразует растровое изображение. Но помните, - "что разбито то уже не склеишь"!

Меню Control:

Служит для управления просмотром и проверки нашего фильма. Многие команды аналогичны командам управления любого плеера.

Play (Проиграть) - показывает фильм с текущего кадра.

Rewind (Обратная перемотка) - переход на первый кадр сцены.

Step Forward (Шаг вперед) - переход на следующий кадр.

Step Backward (Шаг назад) - переход на предыдущий кадр.

Test Movie (Тест фильма) - проверка фильма в тестовом режиме.

Test Scene (Тест сцены) - не путать с Test Movie, ведь наш фильм может состоять из отдельных эпизодов и можем проверить их отдельно.

Далее идут установочные режимы просмотра, которые при необходимости можно включить, установив на них галочку.

Loop Playback (Зациклить) - бесконечное проигрывание фильма.

Play All Scenes (Проиграть все сцены) - если не установить функцию, то вы увидите только текущею сцену.



Enable Frame Action (Включить действия в кадрах) - позволяет реагировать на все установленные действия.

Enable Buttons (Включить кнопки) - разрешает работу кнопок при просмотре и редактировании.

Mute Sound (Выключить звук) - чтоб соседям не мешать :-). Отключает звуки в фильме, полезна при работе с фильмом, в котором предусмотрена звуковая реакция на действия.

Меню Libraries:

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

Меню Window:

Кроме работы с различными окнами, как в других программах, позволяет вызывать инспекторов (не пугайтесь, не налоговых :-) ) и для управления дополнительными возможностями.

New Window (Новое окно) - открытие сцены в новом окне.

Arrange All (Упорядочить все) - расставляет все окна по вертикали.

Cascade (Каскадом) - тоже, но одно над другим.

Toolbar (Панель инструментов) - устанавливает режимы отображения рабочей панели.

Inspectors (Инспекторы) - вывод на экран инспекторов объектов, кадров, сцен и т.д.

Controller (Управление) - вывод панели управления воспроизведения фильма.

Colors (Цвета) - выводит панель, для управления цветом и создания градиентных заливок.

Output (Вывод) - окно Output предназначено для контроля за выводом переменных генератора, помогает при проверки корректности работа интерактивных форм.

Generator Objects (Генератор объектов) - используется при работе с содержимым генератора.

Library (Библиотека) - хранилище объектов (символов) текущего проекта.

Далее следует список открытых в данный момент проектов.

И завершает список меню Help:

Как следует из названия, оно предназначено для помощи. Тут можно найти справку по работе с редактором Flash4 и даже пройти несколько интерактивных уроков (написанных на Flash) дающих основные навыки работы с программой. Посмотреть примеры проектов и узнать возможности Flash.

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

Пора переходить от теории к практике. Запустим программу и начнем рисовать, а точнее знакомиться с инструментами. Посмотрим, чем же нас может порадовать Flash?

При выборе любого инструмента автоматически появляется панель с его модификаторами, т.е. дополнительными параметрами настройки. Выбирать нужный инструмент можно не только мышкой, но и нажатием на "горячую" клавишу (только не замеряйте клавиатуру градусником в поисках горящей клавиши :-) ), договоримся указывать сочетания клавиш в квадратных скобках.

Line [N] - линия: как вы уже поняли предназначен для рисования прямых линий.

Модификаторы:

Line Color (цвет) - выбор цвета из представленной палитры. Можно выбрать произвольный цвет или даже ввести значение цвета вручную - параметрами RGB. Достаточно нажать на кнопочку с цветными квадратиками над основной палитрой цветов. Есть возможность использования режима прозрачности: не только для линий, но и для любых объектов закраски. Выбор прозрачности задается в процентах Alpha, при выборе цвета вручную, т.е. сначала выбираем цвет, а затем в поле Alpha указываем необходимую прозрачность.



Line Thickness (толщина) - выбор толщины линии. Позволяет выбрать как предложенные параметры, так и ввести толщину вручную.

Line Style (стиль) - выбор стиля. Как и все во Flash, можно настроить, так и стиль линий поддается изменению, если Вас не устроит те стили, которые уже есть в выпадающем списке.

Применение:

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

Oval [O] - овал: рисование кругов и овалов.

Модификаторы:

Кроме модификаторов, которые есть у Line, присутствует еще один - Fill Color (цвет заливки). Его применение ничем не отличается от выбора цвета для границы (цвета линии), кроме того, что можно отказаться от заливки овала (или от цвета границы) - выбрав пустой квадратик сверху от основной палитры.

Применение:

Установив необходимые модификаторы, рисуем овал в нужном нам месте. Для рисования идеального круга, достаточно при рисовании удерживать клавишу Shift.

Rectangle [R] - прямоугольник: рисует квадраты и прямоугольники.

Модификаторы:

На этот раз к стандартным модификаторам (таким же, как у Oval), добавлен еще один.

Round rectangle radius (закругление углов) - устанавливает радиус закругления в points (точках).

Применение:

Принцип рисования прямоугольников не отличается от рисования кругов. Есть маленькая хитрость - правильный квадрат, рисуется при удержании клавиши Shift, а вот если Вы рисуете прямоугольник или квадрат с закругленными углами, то можно контролировать радиус угла в момент рисования, клавишами стрелок - вверх или вниз. Для маленьких квадратов задание радиуса, более 50 не приводит, к каким бы то ни было заметным визуальным изменениям. Вообще, чем больше прямоугольник, тем больший радиус для закругления нужен и наоборот.

Ну, хорошо. Вот мы нарисовали наш первый, пока еще очень простой рисунок, использую только те инструменты, о которых Вы сегодня прочитали. И вдруг поняли, что что-то не так. Как же можно исправить неточности? Часто возникает необходимость подправить линию или перенести объект в другое место. Воспользуемся инструментами выделения и коррекции.

Arrow [A] - стрелка: служит для выделения, выбора и изменения формы объектов графики.

Модификаторы:

Snap (Магнит) - включает притягивание к другому объекту или к месту (в зависимости от выбранного шага сетки).

Smooth (Сглаживание) - делает линии и кривые более плавными, убирает дефект "дрожания руки".

Straighten (Выпрямление) - выпрямляет неровности, отличие от предыдущего модификатора в том, что повороты кривых будут угловатыми.

Rotate (Вращение) - выбрав этот режим, Вы можете повернуть любой выбранный объект.

Scale (Масштаб) - изменение размеров выбранного объекта.

Применение:

Выделение объектов во Flash происходит несколько иначе, чем мы привыкли при работе на компьютере.

Если щелкнуть на нарисованном объекте левой кнопкой мыши, то выделится только его заливка или граница, так как заливка и граница любого объекта это самостоятельные графические фигуры. А если быть более точным, то это самостоятельные математические формулы, описывающие нарисованный объект. Вы ведь помните, что мы работаем в программе векторной графики, и вся информация о нашем рисунке и всем фильме представляет собой набор формул, из которых потом компьютер зрителя создаст единое целое. По этой причине, если мы щелкнем на отрезке кривой, то выделится только короткий отрезок (до ближайшей неровности). Однако, при выделении отрезка нарисованного в режиме сглаживания - будет выделена вся кривая. Как Вы думаете, почему это происходит? Понимание принципов работы программы, поможет создавать красивые фильмы с лучшей производительностью и небольшие по занимаемому объему.



Самый простой способ выделить объект, состоящий из контура и заливки (например: круг или квадрат) - дважды щелкнуть на нем левой кнопкой мыши при выбранном инструменте Arrow.

Для выделения сложных объектов, состоящих из набора кривых, разных заливок и других объектов или для выбора сразу нескольких объектов - "провести контур" вокруг этих объектов, либо поочередно выделить объекты, удерживая нажатой клавишу Shift.

Кроме выделения объектов, Arrow позволяет изменять их форму. Подведя указатель мыши к любому нарисованному объекту, (именно нарисованному, а не выбранному из библиотеки) Вы увидите, что пунктирный квадратик рядом с указателем изменит свою форму на уголок или окружность: в зависимости от характера объекта. Ухватив объект (нажав левую кнопку мыши), измените рисунок по своему желанию.

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

Lasso [L] - лассо: в отличие от Arrow выделяет объекты произвольной формы, т.е. вы можете обрисовать объект, или несколько объектов по контуру не затрагивая при этом другие объекты. Можно вырезать часть заливки объекта или нужную форму градиента.

Модификаторы:

Magic Wand (волшебная палочка) - позволяет вырезать область по выбранному цвету.

Magic wand Properties (настройка волшебной палочки) - определяет режимы настройки.

Polygon (многоугольник) - выделение с использованием обрисовки прямыми линиями.

Применение:

О выделении объектов мы говорили, чуть выше. Скажу лишь, что для закальцовки Lasso при произвольном выделении достаточно отпустить левую кнопку мыши, а с включенным Polygon - дважды щелкнуть на последней точке многоугольника.

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

Хоть использование градиентных заливок для линий и границ невозможно, но можно обойти и это препятствие, если превратить линию в поле заливки: выделяем линию, кривую или границу объекта, и производим преобразование Modify / Curves / Lines to Fills, теперь можно закрашивать градиентной заливкой.

Pencil [P] - карандаш: рисование произвольных кривых, вот уж где Вы можете показать свой талант великого художника :-)

Модификаторы:

Pencil Mode (режим карандаша) - содержит три варианта выбора;

Straighter (выпрямление) - "волшебная" возможность рисовать идеальные фигуры: все что вы нарисуете будет, по усмотрению Flash, доведено до идеала. Но, помните - "нечего на зеркало пенять, коль..." :)

Smooth (сглаживание) - еще одна удачная находка для тех у кого после "вчерашнего" дрожат руки. Нарисованные кривые получаются на удивление аккуратными и профессиональными.

Inc (чернила) - этот режим для "крутых" художников: все, что Вы нарисуете будет оставлено без каких бы то ни было преобразований.

Line Color (цвет) - выбор цвета, кроме градиентов.

Line Thickness (толщина) - размер линии.



Line Style (стиль) - режим выбора, определяющий как будут выглядеть нарисованные кривые.

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

Применение:

Ну, как пользоваться карандашом, думаю Вас учить не нужно. Берем карандаш, т.е. мышку (хомяки не подходят :-) ) кликаем по кнопочке с карандашиком, выбираем нужные режимы модификаторов и начинаем творить…

Brush [B] - кисточка: рисование мазками, хотя как правило используется для ручного закрашивания объектов.

Модификаторы:

Brush Mode (режим кисти) - включает в себя набор возможностей, которые делают кисть очень удобным инструментом. Рассмотрим их.

Paint Normal (обычный) - закрашивает все без разбору, как кисть маляра закрашивает надписи на заборах :-)

Paint Fills (закраска) - закрашивает поля для заливки, оставляя при этом линии и границы нетронутыми. Вот где простор для халтурщиков, прикидывающимися детьми с книжкой раскраской :-)

Paint Behind (закраска позади объекта) - можно закрасить фон за объектом, но не сам объект. Обычно применяется для создания теней или приданию объекту объема.

Paint Selection (закраска выделений) - нет не тех выделений о которых Вы могли подумать :-) : ох уж этот русский язык. На самом деле, этот режим предназначен для закрашивания выделенной закрашенной области.

Paint Inside (внутренняя закраска) - хитрый метод закраски внутри объектов. Для начала необходимо сделать первый мазок внутри закрашенного объекта, иначе ничего не выйдет.

Fill Color (цвет) - выбор цвета кисти.

Brush Size (размер) - в вашем арсенале большой выбор самых разных кисточек!

Brush Shape (форма) - когда выбран размер, можно подобрать и форму кисточки, или все наоборот.

Lock Fill (блокировка) - этот замочек блокирует градиентную закраску. При нажатом состоянии маски кисти как бы докрашивают градиентную заливку, а если кнопка не нажата - то каждый мазок является отдельным градиентом.

Есть еще один модификатор, но его могут увидеть только счастливые обладатели графических планшетов.

Use Pressure (нажим) - включает режим нажатия пера. Вот когда открываются дополнительные возможности…

Применение:

Как можно использовать кисточку? Конечно, рисовать! Так не будем ждать и начнем экспериментировать с этим инструментом. Чем лучше Вы узнаете возможности, предоставляемые программой, тем легче Вам будет добиться желаемого результата.

Далее следуют инструменты предназначенные, в основном для редактирования уже нарисованных объектов.

Ink Bottle [I] - чернильница: изменение линий.

Содержит уже знакомые Вам модификаторы, устанавливающие цвет, толщину и стиль линий.

Применение:

Выбираем необходимые параметры модификаторов и "капаем" из чернильницы на линию.

Paint Bucket [U] - заливка: закрашивание фигур и изменение уже имеющийся заливки.

Модификаторы:

Fill Color (цвет) - выбор цвета заливки.

Gap Size (зазор) - установка возможных зазоров при заливки не полностью замкнутых объектов.

Lock Fill (блокировка) - служит для определения способа заливки.



Transform Fill (изменения) - изменение направления градиентов, их размера и наклона.

Применение:

Не представляет сложностей, но дает широкие возможности для творчества.

Dropper [D] - пипетка: копирование цвета.

Модификаторов не имеет.

Применение:

Просто указываем пипеткой на нужный нам цвет в рабочей области (Scene). При указании на градиентную закраску, будет скопирован весь градиент, а не его отдельный цвет.

Eraser [E] -ластик: стирание нарисованных элементов.

Модификаторы:

Eraser Mode - режимы: содержит набор режимов ластика.

Normal - обычный: стирает все.

Erase Fills (заливка) - стирание заливки, линии отдыхают :-)

Erase Lines (линии) - стирает только линии.

Erase selected (выделения) - затирание выделенной заливки.

Erase Inside (внутреннее стирание) - оригинальный метод стирания, только той заливки с которой начали.

Faucet (кран) - удаление линии или заливки (целиком).

Erase Shape (форма) - выбор формы ластика, аналогично выбору формы кисти.

Применение:

Берем ластик, выбираем необходимый режим и подчищаем рисунок.

Hand [H] - рука: перемещение рабочей области.

Модификаторы отсутствуют.

Применение:

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

Magnifier [M] - лупа: изменение масштаба изображения.

Модификаторы:

Enlarge (увеличение) - приближает рисунок.

Reduce (уменьшение) - удаление рисунка.

Применение:

Кроме обычных методов изменения масштаба, можно провести диагональную линию по нужному фрагменту изображения и он будет увеличен.

Конечно, помимо рисования очень часто возникает необходимость во вводе текста.

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

Познакомимся с самим инструментом и его модификаторами.

Text [T] - текст: ввод текста

Модификаторы:

Font list (шрифты) - выбор шрифтов из тех, что установлены на Вашем компьютере. Если Вы создадите проект с использованием нестандартных шрифтов и пошлете его своему другу, то он не увидит того, что Вы задумали. В этом случае, отправляйте и сам шрифт, а еще лучше - пошлите проект после его перевода в публикацию, т.е. в формате swf. Этим Вы значительно сократите его объем, и будете уверены в достоверном восприятии.

Font size list (размер) - установка размера шрифта. Выбирается из списка или вводится вручную.

Font color (цвет) - выбор цвета, кроме градиентов.

Bold (полужирный) - утолщает шрифт.

Italic (курсив) - наклонный шрифт.

Alignment (выравнивание) - доступен полный набор выравнивания шрифта.

Paragraph (абзац) - установка свойств абзаца.

С установочными режимами:

Margins - поля, Indentation - отступ и Line space - интервал.

Editable text field (редактируемое поле) - включает возможность изменять значение поля в процессе работы фильма. Мы не раз будем пользоваться этой кнопочкой при создании проектов.

Применение:

Вообще, кроме редактируемого поля, о котором вы прочитали выше, во Flash существует еще два термина, которые относятся к тексту. В принципе они очень похожи и различаются способом ввода. Первый из них - текстовая метка: достаточно щелкнуть перекрестьем мышки в нужное место и начать вводить текст. Строка будет автоматически увеличиваться по мере ввода текста. Для перехода на другую строку необходимо нажать Enter, т.е. Вы сами контролируете перенос предложения. Второй - текстовый блок. Сначала Вы показываете, какой длинны будет ваш блок, а затем вводите текст, который будет автоматически переноситься по мере заполнения блока.



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

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

Если щелкнуть по текстовому блоку правой кнопкой мышки и выбрать Font, то Вы можете установить дополнительные параметры: например надстрочное написание или ввести значение кернинга (расстояния между буквами).

Теперь, когда мы узнали, для чего служит каждый инструмент рисования, познакомимся с некоторыми приемами рисования. Казалось бы, какие могут быть приемы у инструментов - бери и рисуй. Конечно, это так, но любого начинающего художника, перед тем как учить рисовать, учат держать в руках карандаш: и должен сказать это не так просто как может показаться. Всем Вам, дорогие мои подписчики не терпится поскорее заставить Flash двигаться, но я еще немного помучаю Вас. Положите гнилые помидоры и тухлые яйца обратно, я вовсе не собирался учить Вас держать в руках мышку :-) просто отработаем те навыки, которые помогут более быстро добиться желаемого результата.

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

Из предыдущих выпусков вы узнали, что у Flash есть возможность работать с разными слоями (как работать со слоями и как использовать разные типы слоев Вы узнаете из следующих выпусков), но и работая только в одном слое мы имеем дело с несколькими уровнями. Хотя разделения нет, но необходимо отчетливо представлять, с каким уровнем мы имеем дело.

Так называемый рабочий уровень (stage-level): к нему относится все, что мы создаем в процессе работы, т.е. то, что создали с использованием инструментов рисования. Все объекты этого уровня оказывают непосредственное влияние друг на друга (об этом чуть ниже).

И второй уровень (overlay-level) - наложенный: его отличие от предыдущего состоит в том, что ему принадлежат все самостоятельные объекты. Такие как; готовые символы библиотек - кнопки, анимационные клипы, импортированная графика, неразбитый текст и преобразованные в группы объекты рабочего уровня. Любой объект наложенного уровня располагается над объектом рабочего уровня, но в тоже время может быть на разных уровнях к объектам своего уровня. Кажется, я понял, что Вы поняли, что я понял, что Вы не поняли :-) Говоря проще, любой объект наложенного уровня можно расположить таким образом, чтобы он находился над другим объектом наложенного уровня, либо под ним. Достигается это следующим образом: выделяем объект наложенного уровня и удерживая клавишу Ctrl, нажимаем на клавиатуре стрелку вниз или вверх в зависимости от того где хотим расположить объект. Любые попытки проделать тоже самое с объектами рабочего уровня не приведут к успеху. Здесь мы встречаемся с основным отличием от других векторных программ.



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

Итак, рассмотрим данные особенности.

Объединение - любая фигура с однотонной заливкой и не имеющая границ, наложенная на другую фигуру с теми же характеристиками, после снятия выделения, образует единое целое.

Используя данный прием можно составить сложные фигуры из готовых объектов. Почему же происходит склеивание фигур? Ответ прост. Как я уже писал в одном из выпусков - все, что создано во Flash хранится в виде математических формул описывающих объект. Таким образом, налагая одну фигуру на другую с теми же характеристиками, в одном слое, мы производим сложение формул, в результате которого образуется новая формула описывающая получившуюся фигуру.

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

Теперь небольшое задание. Используя полученные знания, нарисуйте шестеренку, пользуясь всего двумя окружностями разного диаметра. Надеюсь, у Вас это не вызвало затруднений? А, теперь попробуйте нарисовать тоже самое, но обычными средствами. Сколько времени у Вас займет подобное творчество и каким будет результат? Кстати, подобный прием во Flash дизайне называется cookie-cutter (форма для нарезки печенья).

Еще один вариант использования разделения. Нарисуем любую замкнутую фигуру с однотонной заливкой. Теперь, пересечем ее карандашом или прямой линией. В результате, части заливки разделенные чертой, стали самостоятельными фигурами, с которыми можно работать отдельно. После изменения самостоятельных заливок, черту можно убрать и получить фигуру с новыми характеристиками закраски. Этот прием называется slicing (деление на части).

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

Любые элементы рабочего уровня легко превратить в объекты наложенного уровня, достаточно их сгруппировать - выделить элементы инструментом Arrow, и сгруппировать Modify / Group [Ctrl+G]. Сгруппированные элементы, можно располагать так же, как и объекты наложенного уровня над, или под другими объектами. Следует учесть, что для изменения группы можно использовать только инструмент Arrow с его модификаторами (поворот, изменение размера и перемещение), другие инструменты не оказывают на группу никакого влияния.



Группу можно разгруппировать Modify / Ungroup [Ctrl+Shift+G]. При этом все элементы группы становятся объектами рабочего уровня и доступными для изменения любыми инструментами.

Раз уж речь зашла об инструменте Arrow, с помощью которого можно изменять размеры объектов, поговорим о другой возможности влиять на размер (Размер имеет значение… :-) ).

Итак. Изменять размер фигуры можно двумя способами. Изменением масштаба и заданием точного размера.

Изменения масштаба: Window / Inspectors / Transform, в появившемся окне в полях Scale вводим значение размера в процентах (меньше 100 - уменьшить, больше 100 - увеличить), в поле Rotate угол поворота. Галочка Uniform отвечает за изменения масштаба по обеим координатам, если ее снять, то можно задавать масштаб, как для ширины, так и для высоты объекта. У галочки Skew, те же функции, но для поворота. Преобразовать объект после задания характеристик кнопка Apply, Copy - копирует редактируемый объект, а кнопка Reset - возвращает исходные значения установок.

Точный размер: Window / Inspector / Object [Ctrl+Alt+I], открывает уже знакомое нам окно, но на закладке объекта. Вообще данный инспектор позволяет не только задать точный размер объекта, но и указать его точное местоположение на сцене, что немаловажно при дизайне. В полях W и H мы задаем ширину и высоту объекта, а в полях X и Y его месторасположение с верхнего левого угла. Галочка Use Center Point позволяет переместить начало координат в центр.

Следует отметить одну особенность. Когда мы работаем со сгруппированными объектами, то все изменения параметров сказываются индивидуально на каждом элементе группы, а не на объекте в целом. Однако если мы применяем изменения к символу, взятому из библиотеки или преобразованным (не путать с группировкой) в символ объектам, то мы работаем именно с этим символом, а не с его составляющими.

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

Нарисуем любой рисунок, использую приемы cookie-cutter и slicing.

nЩелкнем на первом кадре Timeline, прямоугольник символизирующий кадр станет черного цвета с белым кружочком, а нарисованная фигура будет выделена.

nЗададим начало анимации Insert / Create Motion Tween, штриховка символизирующая выделение нарисованных фигур будет снята, а вокруг объекта появится общая рамка выделения. Следует заменить, что нарисованный нами рисунок в этом слое автоматически будет преобразован в символ и помещен в библиотеку (о работе с библиотеками в следующих выпусках).

nЩелкнем на любом кадре Timeline (например на 30-ом), кадр станет синего цвета.

nСоздадим ключевой кадр Insert / Keyframe [F6], выбранный кадр станет черного цвета с белым кружочком, т.е. он станет ключевым (кадром в котором задаются параметры изменения анимации), а между предыдущим и созданным кадром будет нарисована стрелочка на голубом фоне символизирующая анимацию.

nОставаясь в последнем кадре, перенесем нарисованный объект, в другое место.



Все! Ваш первый фильм готов. Братья Люмьер будут кусать локти от зависти :-)

Посмотрим его Control / Test Movie [Ctrl+Enter].

А теперь, немного усложним анимацию.

Находясь в последнем кадре, измените размеры объекта, а при желании и его наклон. И больше от вас ничего не требуется, все преобразования между кадрами Flash выполнит автоматически.

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

Проиллюстрируем выражение - "Идти на все четыре стороны" :-)

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

Продолжим знакомство с приемами рисования и в конце выпуска нарисуем маленький мультфильм.

Использование заливки имеет свои маленькие хитрости: впрочем, как все во Flash. Наверняка Вам знакома ситуация когда, рисуя что-либо в другом графическом редакторе, Вы решили закрасить, как Вам казалось, замкнутую область и вдруг закраска залила все вокруг? Да, критические дни бывают у всех :-) Не стоит отчаиваться! Если в других редакторах помогала только отмена предыдущего действия, то во Flash этого можно избежать, задав величину зазора Gap Size (см. пред. выпуски).

Если Вы решили применить градиентную заливку, то можно несколько ускорить этот процесс. Как правило, после заливки, градиент требует дополнительной трансформации (изменения размера, положения и угла наклона). Если во время заливки, щелкнуть внутри замкнутой фигуры и провести диагональную черту, то градиент будет расположен под углом этой линии. При использовании радиальным градиентом, его центр будет там, где мы щелкнем мышкой.

Но и это еще не все! А, что если в качестве заливки применить не цвет или градиент, а фотографию или рисунок? Нет ничего невозможного!

nДостаточно импортировать изображение во Flash - File / Import [Ctrl+R],

nа затем его разбить Modify / Break Apart [Ctrl+B].

nТеперь "скопируем" изображение пипеткой (Dropper), и оно станет текущей заливкой, которой можно закрасить необходимую нам фигуру, а текущим инструментом автоматически станет Paint Bucket.

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

Вы конечно, обратили внимание на то, что любое изображение созданное во Flash выглядит очень четко (я не имею в виду крутость картинки :-) ). Как бы Вы не изменяли размеры и трансформацию, картинка будет нарисована строгими линиями. Но очень часто, при создании Web-дизайна необходимо добиться размытия контуров (надо же напустить тумана в глаза

заказчика :-) ).

Размытие очень популярный в дизайне прием, дающий возможность придать большую глубину и позволяющий добиться профессионального вида Вашим работам. Данный эффект можно получить используя соответствующую градиентную заливку, но это не всегда возможно на практике, особенно есть фигура требующая "затуманивания" имеет сложные очертания. Гораздо эффективнее использовать встроенную команду размывки во Flash.



nВыделим необходимую фигуру.

nОткроем окно параметров размытия Modify / Curves / Soften Edges.

nУказываем необходимые параметры: в поле Distance (расстояние) вводим расстояние размытия от границы фигуры, в поле Steps (шаги) мы задаем плавность размытия (не рекомендуется указывать число более 10), Direction (направление) выбираем одно из двух значений; Expand - наружу, Inset - внутрь.

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

Если Вы выполнили последнее задание, то Вы уже знаете, как можно добавить новый слой в Timeline. Для тех, кто не понял, как это делается, подскажу Insert / Layer. Есть еще один способ создания слоя. Посмотрите внимательнее на два значка под названиями слоев: оба значка похожи на листик бумаги с загнутым уголком, на первом нарисован плюс (добавление нового слоя), на втором - волна с маленьким плюсиком (добавление направляющего слоя).

Использование слоев дает большие возможности при создании фильма. Кроме того, что объекты, помещенные на разные слои можно накладывать или скрывать, что создает имитацию объема сцены, правильное применение слоев может заметно уменьшить размер готового файла. Любой объект, который предстоит анимировать нужно, помещать на собственный слой, так Вы значительно быстрее добьетесь нужных Вам эффектов и сократите загрузку процессора.

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

Слои можно перемещать относительно друг друга, выводя на первый план их содержимое, или наоборот скрывая его. Достаточно перетащить мышкой выбранный слой выше или ниже в списке слоев на Timeline.

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

Когда содержимое слоя доведено до совершенства и больше не требует редактирования, заблокируйте слой, щелкнув на точке соответствующей выбранному слою под изображением замка.

А, если содержимое слоя мешает в работе - отключите его, щелкнув на этот раз под изображением глаза на выбранном слое.

Но это все было быстрое задание параметров. Если же Вы хотите почувствовать полную власть над слоем, тогда добро пожаловать Layer Properties - щелкнем правой кнопкой мыши и выберем Properties, или другой способ (для любителей бродить по меню) Modify / Layer.

Значения пунктов Layer Properties:

Слой

Name - имя слоя,

Show - показывать слой,

Lock - блокировка.

Тип

Normal - обычный слой,

Guide - направляющий. Должен содержать траекторию движения объекта,

Guided - направляемый. Напрямую связан с предыдущим слоем и должен содержать те самые объекты, которые необходимо переместить.

Mask - маска. - "Да, я шут я циркач! Так, что же? Пусть меня так зовут вельможи. Всегда быть в маске - судьба моя…" :-) Ой! Я снова отвлекся. Прошу прощения, но Вы читаете рассылку безнадежного почитателя оперетты. Если серьезно, то данный пункт задает режим маскирования объектов расположенных на подчиненных ему слоях.



Masked - маскированный слой.

Следует заметить, что подчиненные слои должны находится, непосредственно под управляющими слоями.

Outline Color - цвет контура объектов слоя (для идентификации объектов на разных слоях).

Layer Height - задает высоту слоя (возможные значения - 100%, 200%, 300%).

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

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

Пусть это будет не просто мультик, а настоящий боевик! :-) Дадим ему условное название - "Выстрел из Царь-пушки".

nНа одном слое нарисуем пушку,

nвыберем любой кадр на Timeline (например 20)

nи создадим ключевой кадр (см. прошлый выпуск), задав тем самым длительность фильма.

nВернемся на первый кадр, щелкнув на соответствующий прямоугольник или передвинув полоску на шкале кадров.

nДобавим новый слой, на котором нарисуем снаряд.

nВыделим снаряд и перетащим его на изображение пушки. Перемещать объекты во Flash можно не только мышкой, но и стрелками клавиатуры. Причем, за одно нажатие клавиши выделенный объект переместится на один пиксель, а если при нажатии на клавишу удерживать Shift, то сразу на восемь. Как позиционировать объект с точность до пикселя, читайте в предыдущем выпуске.

Конечно то, что мы видим на экране неправильно. Ведь снаряд должен располагаться в самой пушке.

nПоменяйте расположение слоев, и все встанет на свои места.

nЧто бы изображение пушки не мешало при анимации, отключите режим отображения слоя.

nПроверьте, что текущим является слой со снарядом, а сам снаряд выделен.

nВыделите первый кадр данного слоя на Timeline.

nВключите режим анимации Insert / Create Motion Tween.

nТеперь выделите заключительный кадр фильма (например 20) на данном слое.

nИ вставьте ключевой кадр Insert / Keyframe [F6].

nПереместите снаряд в то место, куда он должен упасть.

nОсталось, только указать по какой траектории будет лететь наш снаряд.

nВставим управляющий слой Insert / Motion Guide или просто щелкните на соответствующем значке на панели слоев.

nПоявится новый слой, который и является управляющим.

nВозьмем карандаш и нарисуем в нем траекторию движения снаряда.

nОбратите внимание, что линия траектории будет видна, только пока мы работаем над фильмом.

nПри необходимости совместим начало и конец траектории с положением снаряда в первом и последнем кадрах.

nЕсли все сделано правильно, то можно посмотреть готовый фильм Control / Test Movie, не забыв включить режим отображения слоя с пушкой.

Попробуйте усовершенствовать фильм, добавив взрыв снаряда при падении. Небольшая подсказка - используйте новые ключевые кадры и слои.

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



Те, из Вас кто работал в профессиональных графических редакторах, конечно, знают этот прием. Во Flash тоже, можно выделить объект, а затем его продублировать Edit / Duplicate [Ctrl+D], но есть более быстрый способ. Если во время выделения и последующего перетаскивания объекта удерживать клавишу Ctrl, то будет перемещен не сам объект, а его копия.

А теперь, сменим тему и поговорим не о рисовании, а об анимации. Разумеется, анимации не может быть без рисования (имеется в виду Flash), хотя само рисование вполне может быть не анимированное. Итак, что такое анимация? Вопрос насколько сложный настолько и простой. Анимация это оживление. А оживлять можно практически все. К сожалению, зачастую то, что нам кажется вполне живым, на деле оказывается обыкновенным наваждением. Мы очень часто сталкиваемся с тем, что наша жизнь протекает в сплошной череде обыденности. Почему это происходит? Я думаю, все из-за того, что в какой-то момент мы становимся бездушными созерцателями собственной жизни. А, без души жить невозможно! Так давайте узнаем, как вдохнуть душу в то, что мы делаем. В данном случае в анимацию Flash.

Во Flash нам доступны два вида анимации:

Tweened animation - трансформация отдельных объектов с целью создания сложной анимации.

Frame- by-frame animation - покадровая анимация. Именно так создаются традиционные мультфильмы.

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

Понятие трансформации делится на две части:

Motion tweening - трансформирование движения,

Shape tweening - трансформирование формы.

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

Самый простой способ влиять на скорость, а значит на длительность фильма или эпизода, использовать разный интервал кадров между Keyframe. В этом случае событие будет происходить быстрее, если между Keyframe меньше кадров, и соответственно медленнее, если больше. Но это никак не скажется на динамику самого движения между ключевыми кадрами. Если Вам необходимо, что бы объект двигался с ускорением или замедлением, воспользуйтесь настройкой параметров анимации.

Учится лучше всего, что то делая, а не просто читая материал. Смоделируем движение игрушки Yo-Yo.

Итак, по порядку:

nНарисуйте круг с точкой ближе к краю окружности (что бы можно было следить за вращением).

nВыделите первый кадр на шкале Timeline.

nВключите режим анимации Insert / Create Motion Tween .

nВставьте ключевой кадр (например 15) Insert / Keyframe [F6].

nНаходясь на 15-ом кадре, переместите нарисованную игрушку вниз, создав тем самым первый эпизод движения.



nВставьте ключевой кадр (например 30) Insert / Keyframe [F6].

nПереместите игрушку в исходное положение.

Мы нарисовали основу фильма, т.е. показали нашему актеру, куда он должен двигаться. Теперь научим его тому, как он должен это делать.

nДважды щелкнем на первом кадре, вызвав панель настроек кадра Frame Properties.

nВыберем закладку Tweening - настройки параметров движения между ключевыми кадрами.

Познакомимся с их назначением:

Tweening - тип преобразования. В выпадающем меню можно выбрать Motion - движение, Shape - морфинг объекта, None - без трансформации. Дальнейшие пункты зависят от выбранного Вами режима. Сейчас, нас интересует - Motion.

nВ выпадающем меню Rotate (поворот) - выберите направление вращения - Clockwise (по часовой стрелки) или Counterclockwise (против часовой стрелки), если выбрать Automatic - то вращение будет выбрано автоматически в зависимости от положения объекта в следующем ключевом кадре.

nВ поле times - указываем количество оборотов (например 3).

Настройка ускорения задается положением ползунка Easing. In - ускоряет движение, а Out - замедляет его.

nУстановим параметр ускорения равным -40.

nНажмем ОК.

nПроделаем подобные операции со следующим ключевым кадром (в нашем случае с 15). Но выберем противоположное вращение и параметр ускорения 40.

Все, фильм готов! В результате игрушка не просто двигается вверх-вниз, но делает это с соответствующим изменением скорости и, вращаясь, как положено Yo-Yo.

А, теперь домашнее задание. В прошлый раз мы создавали боевик :-) Так, почему бы теперь, не сделать фильм-катастрофу под названием "ДТП"?

Вам понадобятся все Ваши знания, полученные за все выпуски рассылки. Примерный сценарий следующий:

Идет девушка, нет - она бежит. У нее длинные волосы, она блондинка... Ой! Это уже кто-то снял в своей рекламе :-)

Мы снимем другое:

По лесу, между деревьев едет автомобиль. У него на пути крупный камень. Авария! (ужас прямо). Автомобиль перелетает через препятствие, совершив в полете двойное сальто. И… продолжает свой путь.

Уточню задание:

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

Деревья должны быть на двух слоях, между которых будет слой с автомобилем.

При подъезде к камню машина должна двигаться с замедлением. При перелете через препятствие, задайте траекторию (см. пред. выпуск) и вращение машины. Отъезд от камня сделайте с ускорением.

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

Посмотрим, чем нас может порадовать Flash и как применить к тексту уже полученные знания.



Текст с границами, или очерчивание букв.

nНапишите Ваше имя, используя размер кегля более 50-ти с включенным режимом Bold, черного цвета.

nРазобьем текст Modify / Break Apart [Ctrl+B].

nВыберем инструмент Ink Bottle [Ctrl+I].

nУстановим цвет, например красный и толщину линий 2.

nВыделим текст, если он до сих пор не выделен и применим к нему чернильницу.

Текст приобрел границу. Удалив сами буквы, вы можете оставить только их очертание, полученное в результате использования Ink Bottle.

Интересный эффект получится, если разбить границу и применить Ink Bottle еще раз, но другого цвета. После разбивки границ Вы можете применить к ним градиентную заливку.

Очень популярен эффект "хромирования" текста.

nПосле того как Вы написали текст и разбили его, возьмите карандаш (того же цвета) и нарисуйте волнистую линию вдоль текста.

nВыделите верхнею часть текста и закрасьте ее градиентной заливкой, при необходимости измените направление градиента - на вертикальное.

nПроделайте то самое с нижней частью текста.

nВозьмите инструмент Arrow и двойным щелчком выделите нарисованную ранее линию.

nУдалите ее.

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

А, какие еще варианты можно придумать при работе с текстом? Присылайте Ваши примеры.

После того, как Вы научились вдыхать душу в свои рисунки, анимирую их, используя трансформацию движения - Motion Tweening, настала пора научиться замечательному чуду - Shape tweening (трансформация фигуры).

Что же такое Shape tweening?

- "Легким движением руки, брюки превращаются... превращаются брюки...".

Вот этим мы сейчас и займемся :-) Нет, я не имел в виду, что мы станем сейчас немножечко шить. Таки совсем нет! Мы научимся преобразовывать одну фигуру в другую. Несомненно, Вы не раз видели подобные эффекты в интернет. Морфинг объектов замечательная вещь, если применять ее в разумных пределах. Как уже стало традицией, не будем заниматься тратой времени, а возьмем в руки верную мышь, пахнущую порохом после былых сражений, и приступим.

Прежде чем, что-то начать нужно знать, что нам предстоит делать. На этот раз, мы займемся волшебной геометрией. Превратим треугольник в квадрат, а его в свою очередь в круг и завершим чудеса возвращением треугольника.

nВ первом кадре нарисуйте инструментом Line [L] треугольник.

nСоздайте пустой ключевой кадр (например 20) Insert / Blank keyframe [F7].

nНарисуйте в нем инструментом Rectangle [R] квадрат без заливки.

nВновь, создайте пустой ключевой кадр (например 40) Insert / Blank keyframe [F7].

nНарисуйте в нем инструментом Oval [O] круг, тоже без заливки.

nСоздайте еще один пустой ключевой кадр (например 60) Insert / Blank keyframe [F7].

nИ нарисуйте в нем последнею фигуру - треугольник.

Теперь начинается самое интересное! Осталось немного поворожить и показать изумленным глазам своих домашних, Ваше новоиспеченное чудо.

nДважды щелкнем левой кнопкой многострадальной мышки на первом кадре Timeline. Откроется окно Frame Properties


(параметры кадра).

nВыберем уже знакомую нам закладку Tweening.

nВ выпадающем меню tweening, выбираем Shape (фигура). Кроме знакомой вам по прошлому выпуску шкалы Easing (ускорение), появится пункт Blend type (тип преобразования) с двумя параметрами: Distributive - для плавных линий и Angular - для более жесткого преобразования.

nВыберем второе значение.

nНажмем ОК.

На Timeline появится стрелка к следующему ключевому кадру, на этот раз на зеленоватом фоне, символизирующем анимацию Shape tweening.

nПовторите пункты с заданием параметров трансформации для каждого следующего ключевого кадра (кроме последнего). Экспериментируя с разными значениями Blend type и Easing.

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

Если применить морфинг к фигурам с разным цветом, то во время трансформации будет происходить изменение цвета.

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

Маленькая хитрость: в том случае, если Вам необходимо преобразовать один объект наложенного уровня в другой, то их необходимо предварительно разбить и при необходимости разгруппировать.

Домашние задание:

Проиллюстрируйте пословицу - "Делать из мухи - слона".

Работа с текстом во Flash не ограничивается только простым выводом или затейливым оформлением. Возможности использования текста значительно шире и позволяют достичь желаемого результата гораздо быстрее и проще, чем при использовании таких средств, как Java или DHTML.

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

Те из Вас кто создавал различные интерактивные формы для Web, знают, что для проверки введенных данных необходимо хотя бы элементарное владение Java или применение cgi. Flash позволит осуществить проверку непосредственно после ввода. Используя редактируемые текстовые поля, можно создавать эффектные формы, которые уже начали появляться в отечественном интернете.

Есть несколько типов редактируемых полей:

Поля для ввода - позволяют не только собирать информацию, например, для отправки через почтовую систему, но и управлять ходом фильма.

Обновляемые поля - служат для отображения текущей информации или для ответной реакции на введенную информацию.

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

Редактируемое текстовое поле создается из обычного - текстового (при создании блока включите модификатор Text Field), достаточно щелкнуть на нем правой кнопкой и выбрать Properties.

Появится окно Text Field Properties.

Рассмотрим его параметры:

Variable - переменная: задает имя поля для дальнейшей идентификации.

Пункт Options (опции) содержит следующие режимы:

Draw border and background (граница и фон) - включает режим отображения границы в виде тонкой рамки и фона поля. При отключенной галочке, в режиме редактирования будет присутствовать пунктирная граница.



Password (пароль) - преобразует введенные символы в звездочки.

Multilines (многострочный) - включает режим переноса при нажатии Enter.

Word Wrap (перенос по словам) - автоматический перенос слов.

Restrict text length to (ограничение длинны) - позволяет установить длину вводимого текста.

Disable editing (отключение редактирования) - полезно в том случае, если поле служит не для ввода, а для вывода текста.

Disable selection (отключение выделения) - жестокая возможность запретить копировать информацию с данного поля через clipboard (работает совместно с предыдущей функцией).

Пункт Outlines (написание шрифтов) содержит следующие режимы:

Do not include font outlines - не включать контуры шрифтов.

Include all fonts outlines - включить контуры всех шрифтов.

Include only specified font outlines - включает контуры выбранных шрифтов.

Решая включать или нет контуры шрифтов, Вы попадаете в положение осла меж двух стогов. Извините за сравнение, но так оно и есть. Если выбрать первый пункт, то исходный файл будет значительно меньше, но внешний вид текста может быть не совсем гладким. Если добиваться идеальной красоты текста, то размеры файла могут вас сильно огорчить. С другой стороны, далеко не у всех пользователей большие мониторы с идеальной четкостью и зачастую отличить, какой пункт Вы выбрали, может только специалист, но не стоит на это надеется - уважайте посетителей Ваших сайтов и не надейтесь на авось.

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

Очень часто приходится применять кернинг (менять межсимвольное расстояние). У каждого шрифта свои особенности и порой, для достижения наилучшего результата приходится изменять межсимвольное расстояние для нескольких букв в слове (о текстовом дизайне в следующих выпусках).

Быстрый кернинг:

nВыделяем необходимый текст.

nДля увеличения межсимвольного расстояния Ctrl+Alt+стрелка вправо.

nДля уменьшения межсимвольного расстояния Ctrl+Alt+стрелка влево.

Если сразу видно, что нужно большое расстояние, то к сочетаниям клавиш добавьте Shift. В этом случае изменение размера будет происходить по два пикселя.

nБывает так, что поиграв с кернингом, Вы решаете вернуть все на круги своя - достаточно нажать Ctrl+Alt+стрелка вверх.

Перейдем к анимации. До сих пор, при создании своих фильмов Вы работали с нарисованным объектом, трансформируя его или перемещая. Несколько раз я упоминал, что при анимации любой графический объект помещается в библиотеку символов проекта. Так, что же такое библиотека и сами символы?

Библиотека символов, позволяет использовать созданные образцы символов, в различных кадрах фильма не создавая их (символы) заново. Кроме того, есть прекрасная возможность переносить ранее созданные библиотеки или их составляющие в новые проекты.

Символы существуют трех видов: графические - любые рисунки или импортированная статичная графика, клипы - анимированная графика (по сути дела - самостоятельные фильмы) и кнопки.



Для чего же нужны символы? Создав символ его можно многократно использовать, как в разных кадрах (или в одном), так и в качестве элемента (например - анимированного) более сложного символа. Есть одно замечательное свойство символов. Используя многочисленные экземпляры одного символа в фильме, Flash хранит информацию, только об его оригинале и параметрах преобразований его копий, что значительно сокращает объем рабочего файла.

Есть два способа создания символов. Первый, заключается в преобразовании нарисованного объекта в символ.

nВыделите объект инструментом Arrow.

nПреобразуйте объект в символ Insert / Convert to Symbol [F8].

nПоявиться окно, в котором необходимо указать имя символа и его тип: Graphic - графический символ, Button - кнопка, Movie clip - анимированный символ.

После преобразования, символ всегда доступен через библиотеку Window / Library [Ctrl+L].

Для вставки символа из библиотеки, просто перетащите его из окна библиотеки в рабочую область Stage.

Преобразование вещь, конечно хорошая, но более правильным является создание символов Insert / New Symbol [Ctrl+F8]. При создании нового символа, мы попадаем в режим редактирования символа. Его признаком служит "безразмерное" рабочее поле и имя символа над перечнем слоев, слева от имени находится имя сцены, в которой мы до этого работали. Для выхода из режима редактирования символа, щелкните на имени сцены. Для редактирования уже используемого в сцене символа - щелкните на нем правой кнопкой мыши и выберите Edit. Учтите что, изменив рисунок одного символа, вы измените рисунок всех его экземпляров.

Про работу с кнопками мы поговорим в следующем выпуске, а пока освоим еще один прием анимации - исчезновение и появление объектов.

nСоздайте новый символ (см. выше).

nУстановите его в первый кадр.

nВставьте ключевой кадр (например 15) Insert / Keyframe [F6].

nУстановите для первого кадра режим анимации - Motion.

nПерейдите в конечный кадр анимации (в нашем случае в 15-й).

nДважды щелкните на символе левой кнопкой мыши.

nОткроется окно Instance Properties (свойства экземпляра).

nВыберем закладку цветовых эффектов - Color Effect.

Данная закладка содержит эффекты, управляющие яркостью, цветом и прозрачностью экземпляра символа.

nВыберем эффект прозрачности - Alpha, в выпадающем меню - Color Effect.

nПеремещая ползунок, установим нулевую прозрачность.

Если теперь посмотреть ваш фильм, то мы увидим постепенно исчезающий рисунок. Поэкспериментируйте с различными цветовыми эффектами, попробуйте применить их для движущихся символов. Не сдерживайте свою фантазию, Вы уже владеете Flash в той мере, когда можно реализовать очень многое.

И как всегда, домашнее задание.

Создайте фантастический фильм, точнее его эпизод - "Телепортация киборга".

Сценарий фильма таков:

На экране две кабины для телепортации (с мигающими лампочками и индикаторами).

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

Киборг выходит из второй кабины.



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

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

Просто, зачастую необходимо, что бы при анимации по заданной траектории, символ изменял угол вращения в соответствии с направлением движения. Добиться этого очень легко, достаточно в ключевом кадре задающим анимацию движения - Tweening Motion, установить галочку Orient to path direction (ориентация по направляющей). В этом случае, при движении символа по траектории заданной в направляющем слое - Guide Layer, будет происходить поворот символа в соответствии с траекторией движения.

Проверим это на практике.

nСоздадим новый символ New / Symbol [Ctrl+F8], назовите его Car - гоночный автомобиль формула-1 (вид сверху).

nПоместите машину в первый кадр.

nВставьте ключевой кадр (например 45) Insert / Keyframe [F6].

nЗадайте для первого кадра режим анимации Motion.

nУстановите галочку Orient to path direction.

nВставьте направляющий слой Insert / Motion Guide.

nНарисуйте в нем незамкнутую траекторию движения.

nВ первом кадре установите автомобиль на начало траектории, а в последнем кадре на ее конец.

При просмотре Вы увидите, что Ваш гонщик точно следует всем поворотам трассы.

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

Сегодня мы научимся создавать кнопки.

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

Timeline кнопки содержит всего четыре кадра:

Up - обычное состояние кнопки.

Over - изменение кнопки при нахождении над ней мыши.

Down - нажатая кнопка.

Hit - задание области реагирования.

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

Как работать с последним параметром, мы научимся в одном из следующих выпусков, а пока пара советов. Если у вас будет несколько одинаковых кнопок, достаточно создать только один образец кнопки, накладывая на него необходимые надписи, меняя цвет или размер экземпляров. Если предполагается, что на кнопках будут анимированные объекты, создайте заранее символы Movie clip, а затем просто разместите их в соответствующем кадре кнопки.

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



Конечно, это не столько гонки, сколько квалификационный заезд одной машины, но зато от нас будет зависеть, станет она двигаться или стоять на месте.

nОткройте файл с предыдущим проектом (надеюсь, Вы сохраняете свои работы?).

nДобавьте в него слой, в котором нарисуйте пульт с двумя кнопками - "старт" и "стоп".

nДважды щелкните левой кнопкой мыши на кнопке "старт", именно на кнопке, а не на ее надписи.

nОткроется уже знакомое Вам окно Instance Properties (свойства экземпляра) с новой для Вас закладкой Actions (действия).

nВыберем данную закладку,

nнажмем на кнопку с изображением плюса и посмотрим, какие типы действий может предложить Flash:

Go To - переход к заданной сцене или кадру.

Play - запуск остановленного фильма.

Stop - остановка фильма.

Toggle High Quality - переключатель качества отображения фильма (режим сглаживания).

Stop All Sounds - выключение звука.

Get URL - переход по указанному адресу.

FS Command - передача проигрывания фильма другим приложениям.

Load/Unload Movie - простейший вариант использования данной команды, это загрузка фильма с указанного адреса.

Tell Target - выбор фильма для дальнейшего управления (задание цели).

If Frame Is Loaded - выполнение команды в случае загрузки указанного кадра.

If - проверка на истинность.

Loop - цикл.

Call - вызов.

Set Property - задание свойств фильма.

Set Variable - значение переменной.

Duplicate/Remove Movie Clip - создание или удаление экземпляра клипа

Drag Movie Clip - включает режим перетаскивание клипа

Trace - вывод сообщений при выполнении действий

Comment - комментарии.

Как вы видите, большинство действий похожи на команды языка программирования. По сути дела, так оно и есть это язык сценариев - ActionScript. Постепенно мы изучим все его возможности, а пока продолжим работу с кнопкой.

nВыберите команду Play.

nВместо панели предлагаемых действий откроется окошко с микрокомандой производящей запуск ранее остановленного фильма.

On (Release)

Play

End On

nЩелкнем на первой строчке, справа появится параметры реагирования - Event:

Press - нажатие кнопки,

Release - отпускание кнопки,

Release Outside - отпускание кнопки мыши за границей кнопки,

Roll Over - указатель мышки над символом,

Roll Out - перемещение указателя мышки за границу объекта,

Drag Over - перемещение мышки при нажатой кнопке над символом,

Drag Out - перемещение мышки при нажатой кнопке и ее уход за границу символа,

Key Press - нажатая клавиша клавиатуры.

nУстановим режим реагирования - Press и снимем галочку с Release.

nВключите Key Press, установите курсор в появившемся поле и нажмите на клавиатуре клавишу "p".

В результате скрипт примет следующий вид:

On (Press, Key: p)

Play

End On

Т.е. воспроизведение будет продолжено, только в том случае, если пользователь нажмет мышкой на данную кнопку или на клавишу "p" на клавиатуре.

Запрограммируйте самостоятельно вторую кнопку на остановку фильма. Как это делается, Вы наверняка уже поняли. Кнопка должна реагировать на нажатие мышки и на клавишу "s".



Посмотрите получившийся фильм. Если все сделано правильно, то при нажатии на пульте кнопки "Стоп" машина остановится, после нажатия "Старт" - возобновит свое движение.

Один очень полезный совет и даже не совет, а скорее жесткое требование: при работе с кнопками всегда используйте возможность управления с клавиатуры. Тем самым, Вы значительно улучшите навигацию на вашем сайте или расширите управление фильмом, но и увеличите доступность вашего проекта для различных групп пользователей.

В качестве домашнего задания, создайте Ваш вариант квалификационного заезда.

Научившись создавать кнопки Вы, несомненно, примените свое умение при создании навигационных меню для Вашего сайта. И тут Вас может подстерегать сложность с точным размещением кнопок. На самом деле, как поставить кнопки именно так, как нам это необходимо? Можно применить уже знакомое Вам по одному из прошлых выпусков точное позиционирование с использованием инспектора объектов Window / Inspector / Object. В этом случае, Вам придется самостоятельно рассчитать необходимое положение и координаты. Но есть еще пара удобных приемов - "Что, печенье? Нет, лучше - Твикс. Две палочки хрустящего ..."

(упоминание торговой марки не является рекламой и не преследует коммерческой цели :-) ).

Выравнивание объектов:

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

nСоздадим кнопку или любой другой символ.

nРазместите несколько экземпляров символа в рабочей области, так чтобы они напоминали пункты вертикального меню или горизонтальный ряд объектов.

nВыделите все объекты необходимые для выравнивания.

nВызовем панель параметров выравнивания - Modify / Align [Ctrl+K], для этих же целей можно нажать кнопку Align на панели инструментов.

nОриентируясь по изображениям на кнопках панели, установите горизонтальное и вертикальное выравнивание, а также варианты выравнивания - по краям объектов, по центру или по расстоянию между ними.

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

Второй способ более простой, но требующий приложения ручной деятельности. Помните, когда я рассказывал Вам о командах меню, то упоминал об удобной возможности, включения отображения направляющей сетки View / Grid [Ctrl+Alt+Shift+G]? Если при этом включить режим Snap (магнит) - View / Snap [Ctrl+Alt+G], то можно размещать объекты в соответствии с сеткой, ориентируясь при этом на магнитные метки (черные кружечки возникающие, при ручном перемещении объекта, над узлами притягивания), которые должны быть Вам знакомы по выпускам с уроками анимации по заданной траектории.

Использовать сетку удобно, если Вы не очень хорошо рисуете, или необходимо добиться высокой точности графики. Умелое сочетание притягивания и размещения поможет не только при создании меню, но и просто при рисовании. Многие из нас умеют переносить рисунок, используя рисование по клеткам, одним из вариантов, может быть перенос наброска во Flash. Но, если подходить к этому вопросу более профессионально, то удобнее отсканировать Ваш рисунок и перевести его в векторный формат. Об импорте графики в одном из будущих выпусков.



Вполне возможно, что тот шаг сетки, который предлагает Flash по умолчанию, Вас не устроит, да и размер необходимого рабочего поля далеко не всегда совпадает с тем, который нам необходим. Все поправимо! Достаточно задать параметры фильма перед его созданием, или изменить в процессе работы.

Начальные установки фильма:

Откроем окно Movie Properties (параметры фильма ) - Modify / Movie [Ctrl+M].

Установим необходимые значения:

Frame Rate - скорость фильма задается в количестве кадров в секунду

Dimensions - размеры фильма (минимальные - 18х18 пикселей, максимальные 2880х2880).

Match - автоматическая установка размеров в зависимости от Вашего принтера (кнопка "Printer" - максимальный размер, "Contents" - минимальный).

Grid Spacing - задает шаг сетки и режим ее отображения.

Color - цвет сетки и рабочего фона.

Ruler Units - выбор единицы измерения линейки (пиксели, дюймы, миллиметры и т.д.).

Если уж мы умеем выравнивать объекты и учились это делать на примере кнопок меню, то нужно научится открывать необходимую HTML страницу.

nДважды щелкните левой кнопкой мыши на экземпляре кнопки в рабочей области, для открытия окна Instance Properties.

nВыберите закладку Actions и нажмите кнопку с изображением плюса, для отображения списка возможных команд.

nЩелкните на команде Get URL, в окошке появится скрипт команды:

On (Release)

Get URL ("")

End On

nВыделите вторую строку.

nЗаполните поля в правой части окна:

nURL - адрес сайта или HTML страницы.

nWindow - фрейм, имеется в виду не кадр Flash, а имя фрейма в котором броузер откроет заданный ресурс. Есть возможность, выбрать из выпадающего списка стандартные значения:

_self - текущее, т.е. тот фрейм, в котором находится Flash.

_blank - открытие в новом окне.

_parent - в родительском фрейме

_top - открытие страницы в текущем окне броузера.

Несомненно, эти значения Вам знакомы, если Вы создавали свои HTML проекты для Web.

Variables - переменные. Устанавливает способ передачи данных в интерактивных фильмах или формах. Содержит следующие варианты:

Don't sent - не посылать. Используется для простого открытия HTML страницы или сайта.

Send using GET - передает данные по методу GET. Добавляет переменные к адресу.

Set using POST - передача по методу POST. Применяется для передачи данных для cgi.

Использование возможности передачи данных, мы изучим, когда станем создавать интерактивные проекты. А пока введите адрес вашего любимого сайта (например http://www.rambler.ru), выберите новое окно для открытие "_blank".

Скрипт примет значение:

On (Release)

Get URL ("http://www.rambler.ru", window="_blank")

End On

Теперь осталось задать режим срабатывания при нажатии на кнопку.

nВыделите первую строку скрипта.

nВключите режим нажатия, установив галочку "Press" и снимите ее с "Release", задайте горячую кнопку "r".

Окончательный вид скрипта:

On (Press, Key: r)



Get URL ("http://www.rambler.ru", window="_blank")

End On

nНажмите ОК.

Следует отметить, что задание режима срабатывания "Press" приводится в основном для того, что бы Вы лучше и быстрее освоили установку различных параметров ActionScript. В большинстве случаев удобнее использовать "Release": параметр по умолчанию, его отличие от "Press" состоит в том, что "Press" - выполнение действия сразу после нажатия, а "Release" - только в том случае, если после нажатия кнопка мышки будет отпущена в районе действия нарисованной кнопки или заданного района реагирования.

Теперь Вы без проблем, можете создать меню для своего сайта.

Создавая фильмы, Вы не могли, не обратить внимание на то, что происходит непрерывное проигрывание фильма - закольцовка. Такое поведение, не всегда оправданно, а иногда и противоречит замыслу, особенно если в фильме несколько сцен. Что же делать? Применить управление кадрами! Смысл, которого состоит в том что, доходя до ключевого кадра содержащего перечень необходимых команд на языке ActionScript, будет выполнена их управляющая последовательность. В прошлом выпуске Вы освоили две команды - Play и Stop, когда задавали действие кнопкам пульта управления. Давайте, заставим наш фильм остановиться на последнем кадре.

nОткройте любой из ранее созданных проектов.

nДважды щелкните левой кнопкой мыши на последнем ключевом кадре.

nОткроется окно Frame Properties.

nВыберем закладку Actions и нажмем на кнопку с изображением плюса, для отображения списка возможных команд.

nЩелкнем на команде Stop.

nНажмем ОК.

Обратите внимание на изменение отображения ключевого кадра - появилась маленькая буква "а", обозначающая о наличие в данном кадре команд ActionScript.

Запустите фильм. Он остановится на том кадре, где Вы установили команду Stop.

А, теперь проверим, чему Вы научились за все прошедшие выпуски.

Создадим научно-популярный фильм "Запуск ракеты".

Сценарий:

На старте стоит ракета-носитель, рядом с ней машина техобеспечения.

Машина отъезжает за кадр.

Все ждут Вашей команды.

Нажимаем на кнопку "Пуск".

Зажигание… Ракета взлетает по дуге, уменьшаясь и растворяясь в небе, пока не исчезает совсем.

Задание слою индивидуального имени очень помогает при работе, особенно если слоев очень много. Но имя может быть не только у слоя, но и у кадра, только называется оно - меткой. Кроме того, у кадра может быть и комментарий. Метки и комментарии тоже помогают при работе с проектом. Но если имена слоев необходимы создателю фильма для более простой ориентации между ними то, комментарии кадров помогают разобраться при сложном сценарии, а метки просто незаменимая вещь, когда Вы применяете ActionScript. Давайте научимся создавать метки и комментарии, а затем применять еще одно действие языка скриптов.

Что же такое комментарии и метки кадров:

Комментарии - описывают назначение ключевого кадра или фрагмента сценария, для лучшего понимания последующего действия. Необходимы, главным образом, для автора.



Метки - предназначены для удобства программирования и служат своеобразными точками вызова, т.е. идентификаторами кадра. Поясню на примере: если, создавая свой фильм, Вы задали для одной из кнопок, или действию на ввод информации пользователем, переход на какой-то кадр, например 162, а затем отредактировали предыдущие кадры таким образом, что данное действие передвинулось, например на 173-й кадр, то Вам придется искать все места в скрипте где упоминался 162-й кадр. Программисты знают, что самый простой выход в данном случае - использование имени функции или подпрограммы. Метка, как раз и является своеобразным именем подпрограммы. Если в скрипте будет фигурировать имя метки, то где бы ни был кадр с данной меткой, Flash передаст управление именно на него.

nОткройте любой ранее созданный проект.

nНа любом ключевом кадре дважды щелкните левой кнопкой мыши.

nОткроется окно Frame Properties.

nВыберете закладку Label - метка.

nУстановите значение Behavior - поведение: Label для метки. Или Comment для комментария.

nВ поле Name введите имя метки или комментарий, в зависимости от выбранного значения Behavior.

nНажмите ОК.

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

Хочу обратить Ваше внимание, на тот факт, что комментарии не компилируются в рабочий файл, а метки да. Поэтому, давайте меткам имена покороче, лучше из одного слова. Еще один совет: используйте для меток эпизодов отдельный слой.

А теперь, как обычно, закрепим знания на практике.

nСоздайте новый проект, как это Вы уже неоднократно делали.

nПодготовим к работе символ кнопки

nПеренесите на сцену Вашу кнопку два раза, создав тем самым два ее экземпляра.

nНа одной кнопке напишите - кубик.

nНа второй - шар.

nВставьте новый слой Insert / Layer или щелкните на кнопке нового слоя, под списком слоев на Timeline

nНарисуйте кубик.

nВставьте ключевой кадр (например 10) Insert / Keyframe [F6].

nНарисуйте круг, закрасив его круговой градиентной заливкой придав ему форму шара.

nВставьте ключевой кадр (например 20) Insert / Keyframe [F6]

nДважды щелкните левой кнопкой мыши на ключевом кадре с кубом и задайте метку "куб".

nЗадайте таким же образом ключевому кадру с изображением шара, метку - "шар"

Теперь назначим управление для кнопок.

nДважды щелкните левой кнопкой мыши по кнопке с надписью "Шар".

nНажав на закладку Action, откроем ее.

nЩелкнув на кнопке с изображением плюса, откроем список действий.

nВыбираем команду Go To (перейти к…).

Появится следующий скрипт:

On (Release)

Go to and Stop (1)

End On

Обратите внимание, полное написание команды - "Go to and Stop", т.е. перейти и остановиться.

В правой части, как всегда, дополнительные настроечные параметры:

В выпадающем меню Scene, можно выбрать сцену перехода - текущую, предыдущую, следующую или сцену с собственным именем (о сценах в следующих уроках).



Кроме сцены мы можем задать переход по:

Frame - кадру, в поле Number - введите номер кадра.

Label - метке, в выпадающем меню будет список установленных Вами меток.

Expression - объекту, станет доступным поле с одноименным названием, в котором задается управление объектами (в следующих выпусках).

Next Frame - следующему кадру.

Previous Frame - предыдущему кадру

Кроме того, есть еще одна галочка Control, которая меняет команду с "Go to and Stop" на "Go to and Play".

nУстановите переход по метке "Шар".

nЗадайте реагирование на нажатие мыши и клавиши "О".

Окончательный вид скрипта:

On (Release, Key: o)

Go to and Stop ("Шар")

End On

Для второй кнопки создайте аналогичным образом переход на метку "Куб" и реагирование на нажатие мыши и клавиши "С".

Запустите Ваш фильм - Control / Test Movie [Ctrl+Enter].

Если все сделано правильно, то Вы увидите сменяющие друг друга фигуры шара и куба. При нажатии на одну из кнопок, на экране появится именно та фигура, на которую ведет управление с кнопки, нажатие на другую кнопку покажет другую фигуру.

Остался еще один тип слоя, о котором мы пока ничего не знаем - маскированный слой. Замечательным качеством маскированного слоя заключается в том, что изображения на подчиненных ему слоях будут видны только через маску слоя. Что бы, было легче, понять принцип его действия представьте, что у Вас на столе лежит открытка, но смотрите Вы на нее через лист плотной бумаги, в котором вырезано отверстие произвольной формы. Лист с отверстием, можно перемещать, просматривая тем самым другие фрагменты изображения.

Давайте посмотрим, как работать с анимированным, маскированным слоем. Для этого используем простейший прием - сканирование надписи.

nНапишите крупными буквами Ваше имя в первом кадре.

nЧто бы, задать длительность будущей анимации, создайте заключительный кадр Insert / Frame [F5] (например 25).

nВставьте новый слой Insert / Layer или щелкните на кнопке нового слоя, под списком слоев на Timeline.

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

nЗадайте для данного кадра анимацию движения Insert / Create Motion Tween.

nВставьте ключевой кадр Insert / Keyframe [F6], в нашем случае 25-й.

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

nЩелкните правой кнопкой мышки на названии слоя содержащего движение маски.

nВ появившемся списке выберем - Mask. Данный слой станет маской, а слой, расположенный под ним - маскированным. Кроме того, оба слоя автоматически будут заблокированы от изменений, обратите внимания на замочки, справа от названия слоя. Исчезнет изображение прямоугольника (нашей маски), а возможно и надписи (если маска находится не на надписи). Это не страшно. Достаточно посмотреть фильм в тестовом режиме Control / Test Movie, или ухватив шкалу кадров (красный прямоугольник с уходящей вниз вертикальной чертой на Timeline), перемещать ее влево-вправо, просматривая анимацию.



Домашнее задание - индийский фильм ужасов

"Жуткое прошествие в джунглях или удав разбушевался".

Сценарий:

На полянке мирно пасется животное - типа слон. Большой такой, с ушами и все дела.

Вдруг, выползает крутой змей (прям удав какой-то).

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

Следующий эпизод трагического фильма.

Удаву нездоровится, он на приеме у врача - ему делают рентген.

И мы изумленно видим, в проходящем по удаву луче, нашего любимого слоника!

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

Вся полнота возможностей Flash открывается при использовании ActionScript. В предыдущих выпусках мы узнали, какие действия можно применять в проектах и даже попробовали некоторые из них на практике. Не сомневаюсь, что большинство из Вас не стали останавливаться на приведенных примерах, об этом свидетельствуют и присылаемые работы.

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

А, пока немного отвлечемся и вспомним материал предыдущего выпуска: нам это очень пригодится сегодня. Как, Вы знаете, при работе с кадрами, мы можем задавать определенные имена-метки, используя их в дальнейшем для переходов к различным эпизодам: метки кадров могут служить не только для перехода, но и содержать подпрограммы на ActionScript выполнение которых, возможно без перехода на данный кадр (в будущих выпусках). Метки могут (и должны) быть заданы для экземпляров символов из библиотеки и для текстовых редактируемых полей.

Посмотрим, как это сделать.

Имена редактируемых полей:

nщелкните правой кнопкой мыши на поле

nвыберите Properties

nоткроется окно Text Field Properties: со значениями его пунктов мы знакомились в одном из выпусков

nв поле Variable введем имя поля

nосталось нажать ОК

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

Применим полученные знания на практике. Создадим поле, в котором текст будет меняться в зависимости от нажатой кнопки:

Для работы необходимо создать текстовое редактируемое поле с именем (например pole) на сцене и символ кнопки в библиотеке.

nперенесем кнопку на сцену и напишем на ней "Имя"

nдважды щелкните левой кнопкой мыши на этой кнопке

nв появившемся окне выбираем закладку Action

nуказываем действие Set Variable - значение переменной

nв поле Variable вписываем имя поля (в нашем случае pole)

nв поле Value укажите свое имя (надеюсь, при создании текстового поля Вы выбрали русский шрифт?)

nв итоге скрипт должен быть похож на:

On (Release)

Set Variable: "pole" = "Павел"

End On

nнажмите ОК

Осталось только посмотреть, что получилось. Запустите тестовый просмотр Control / Test Movie, при нажатии на кнопку в поле появится Ваше имя. Если теперь сделаете несколько кнопок с разными значениями, содержание поля будет менятся в зависимости от нажатой кнопки. Обратите внимание на то, что символ кнопки мы берем из библиотеки, а конкретные действия задаем для его экземпляров на сцене.



Для дальнейшего изучения ActionScript следует твердо усвоить, что переменные могут быть нескольких типов:

Числовые переменные - содержат числовые значения, например:

Set Variable: "year" = 2000 или

Set Variable: "temp" = 36.6

Символьные переменные - как, Вы догадываетесь, содержат символы, текст и заключены в кавычки

Set Variable: "name" = "Павел"

Set Variable: "dr" = "The best teacher" :-)

Логические переменные - могут быть только двух типов True (1) - ИСТИНА или False (0) - ЛОЖЬ

Set Variable: "cool" = True

и

Set Variable: "cool" = 1

означают одно и тоже

Переключение типа переменной производится кнопкой расположенной справа от поля Value: если на кнопке написано abc (String Literal), то это будет символьная переменная, а если знак = (Expression), то числовое, но если при выборе типа переменной нажать на символ с изображение квадрата с = (Expression Editor), то мы попадем в святая святых ActionScript в редактор выражений.

Давайте узнаем назначение предлагаемых элементов выражений (нет, мы не станем учить использование особенностей русских идиоматических выражений периода матриархата, хотя иногда, при работе с ActionScript так и тянет ими воспользоваться :-).

Вот их перечень:

Операторы

Основные

() - Группировка

Числовые

= - Равно

<> - Не равно

< - Меньше

> - Больше

>= - Меньше или равно

<= - Больше или равно

Символьные

"" - Строка символов

& -Объединение

eg - Равно

ne - Не равно

lt - Меньше

gt - Больше

le - Меньше или равно

ge - Больше или равно

Логические

and - Логическое И

or - Логическое ИЛИ

not - Логическое НЕ

Функции

Основные

Eval - значение переменной, заданной выражением

True - логическое ИСТИНА (1)

False - логическое ЛОЖЬ (0)

Newline - перевод строки в выражении

GetTimer - определяет время, в миллисекундах, прошедшее с начало запуска фильма.

Числовые

Int - выделение целого числа

Random - случайное число до от 0 до заданного числа.

Символьные

Substring - "вырезание" фрагмента из символьной строки

Length - определяет количество символов в строке

Chr - преобразование числа в символ в соответствии с кодом ANSII

Ord - обратное преобразование: символа в код ANSII

Параметры

GetProperty - получение значений объекта (клипа)

_x - положение объекта по горизонтали

_y - положение объекта по вертикали

_width - ширина объекта

_height - высота объекта

_rotation - вращение объекта

_target - путь к объекту

_name - в отличие от _target возвращает только имя объекта

_url - определяет полный URL файла swf

_xscale - изменение масштаба объекта в процентах, по горизонтали

_yscale - изменение масштаба объекта в процентах, по вертикали

_currentframe - текущий номер кадра

_totalframes - количество кадров в фильме (клипе)

_framesloaded - количество уже загруженных кадров



_alpha - прозрачность объекта

_visible - отображение объекта

_droptarget - путь к объекту, над которым перетаскивают в данный момент (клип)

Глобальные

_highquality - качество воспроизведение фильма

_focesrect - режим фокусной рамки

_sounbuftime - значение настройки буфера текста в секундах

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

Приведу пример.

Х=5+6

На ActionScript это можно записать так

Set Variable: "x" = 5 + 6

Тут нет ничего сложного, так ведь?

Set Variable: "y" = 5

Set Variable: "z" = 6

Set Variable: "x" = y + z

Результат будет тот же, а вот если нам необходимо "сложить" из двух слов-предложений одно то запись

Set Variable: "b" = "Action"

Set Variable: "c" = "Script"

Set Variable: "a" = c + b

будет ошибочной, вернее, только последняя строчка. Так, как мы в данном случае, имеем дело с символьными переменными, то вместо знака сложения (+), мы должны использовать знак объединения (&) или, если говорить правильно - конкатенации.

Set Variable: "a" = c & b

В результате а будет равен ActionScript

В следующем примере, показано объединение символьной и числовой переменной

Set Variable: "month" = "September"

Set Variable: "last" = 1999

Set Variable: "year" = last + 1

Set Variable: "now" = month & " " & year

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

Домашнее задание:

Реализуем эмулятор пейджинговой станции.

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

Уточнение задания:

Весь фильм состоит из одного кадра, на котором расположен и терминал и пейджеры.

Работая над заданием, Вы могли обратить внимание, на необходимость прокрутки больших сообщений на дисплее пейджера. Конечно, можно просто щелкнуть мышкой на нужном текстовом поле и нажимаю кнопки перемещения курсора, прокрутить текст. Но, часто приходится отключать доступ пользователя к тексту, блокировать выделение и копирование текста (об этих возможностях рассказано в 12 выпуске).

Тем не менее, необходимо обеспечить комфорт для пользователя при просмотре Вашего сайта. Создавая любой проект, помните, что человек может просто не догадываться о тех возможностях, которые Вы использовали. Самый простой способ обеспечить прокрутку текста - создать клип с этим проплывающим текстом (Вы уже можете без проблем это сделать). Но у посетителя Вашего сайта есть полное право, требовать от вашей работы удобства. Основное правило, которым следует руководствоваться при создании собственного сайта:



- "Все, что Вы делаете, Вы делаете не для себя, а для тех, кто будет смотреть ваше произведение и если Вы не можете обеспечить простоты и удобства для клиента, то это Ваши проблемы и никогда не нужно обвинять клиента в глупости".

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

Как же заставить текст в поле перемещаться в зависимости от нажатой кнопки? У текстовых полей есть два замечательных параметра:

scroll - определяет номер верхней строки в поле

maxscroll - вычисляет номер последней верхней строки, т.е. номер строки, которая будет верхней в поле после прокрутки всего текста

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

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

Предположим, что у нас есть пейджер с текстовым полем "pole" в качестве дисплея, которое может вместить в себя 2-3 строки: надеюсь, при создании текстового поля Вы не забыли включить режим многострочности и переноса по словам?

Добавим к нему две кнопки прокрутки. Для одной из них зададим прокрутку текста вниз, т.е. мы будем увеличивать значение номера верхней строки для свойства scroll, а второй кнопкой - его уменьшать.

Скрипт для первой кнопки, в нашем случае, будет выглядеть так:

On (Release)

Set Variable: "pole.scroll" = pole.scroll + 1

End On

Осталось, назначить второй кнопке аналогичный скрипт, но уменьшающий значение "pole.scroll".

Не станем останавливаться на достигнутом, и усовершенствуем терминал. До этого, для оправки сообщения на нужный пейджер, Вы нажимали на соответствующую кнопку. Но ведь на настоящих пейджинговых станциях нет пультов с перечнем всех номеров абонентов. Не должно быть их и у нас! Добавим к терминалу еще одно редактируемое текстовое поле, в которое будем вводить номер нужного пейджера и отправлять сообщение нажатием на одну-единственную кнопку. Если с окошком для номера у нас проблем не должно возникнуть, то как определить на какой же пейджер оправлять сообщение, даже если введен его номер? В этом нам поможет действие "If".

If - условный оператор, определяющий последовательность действий в зависимости от истинности заданного условия.

Полностью выглядит следующим образом:

If (условие)

Действие (одно или несколько), если условие верно.

Else

Если нет, то выполняется данное действие



End If

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

Типичным примером реализации алгоритма выбора является фрагмент сказки знакомой нам с самого раннего детства:

…"И остановился Иван царевич (Илья Муромец, добрый молодец и др.) перед камнем, а на камне том надпись; на право пойдешь - деньги найдешь, налево пойдешь - красну девицу встретишь, а прямо пойдешь - голова с плеч".

На ActionScript это можно записать так:

If (Ivan eq "Right")

Go to and Stop ("Money")

Else If (Ivan eq "Left")

Go to and Stop ("PrettyGirl")

Else If (Ivan eq "Forward")

Go to and Stop ("Death")

Else

Go to and Play ("GoBack")

End If

Обратите внимание на используемый символьный оператор "eq", который мы применяем в данном случае для проверки переменной "Ivan". Если бы мы записали:

If (Ivan = "Right")

это было бы неправильно, т.к. мы в данном случае проверяем переменную на соответствие символьному значению.

Else If используется, если необходимо проверить переменную на соответствие нескольким значениям. Включается "Else" или "Else If" в действие "If", следующим образом:

nВключите действие "If"

nПосле введения условия проверки и действия выделите строку с действием "If"

nНажмите кнопку "Add Else/Else If clause"

nПеред завершающей командой "End If" появится "Else", когда вы выделите строку "Else", то сможете изменить ее на "Else If"

Теперь можно легко проверить какой номер введен и отправить сообщение на нужный пейджер. Попробуйте, сделать это самостоятельно.

Использование условного оператора "If" дает большие возможности в реализации задуманных проектов. Кроме решения чисто технических вопросов при работе над проектом, условные операторы можно применить для большей интерактивности сайтов. Теперь, без сложных запросов cgi и перепроверки администратором сервера, Вы можете организовать "вход по пропускам", т.е. по паролю к различным частям Вашего сайта. Конечно, это не обеспечит полной защиты данных html страниц, но обеспечить запрет перехода на следующие сцены посторонним, вполне возможно.

Элементарнейшим образом решаются вопросы создания сайтов по прохождению различного рода тестирования и т.д. без знания JavaScript.

Домашняя задание:

До сих пор, Вы работали по моему сценарию, но на этот раз я решил не сдерживать Вашу фантазию. Принимаются любые Ваши работы, но только при условии, если они содержат материал последних двух выпусков:

Необходимо придумать собственный сценарий и осуществить его. При реализации проекта, обязательное использование ActionScript - действий Set Variable, If и режима ручной прокрутки текста.

Желаю удачи!

Работы принимаются до 19-го сентября 2000 года



В завершении выпуска, еще несколько слов:

Создавая любой проект и используя при этом ActionScript, стремитесь максимально оптимизировать и универсализировать код скрипта.

Есть простое правило, определяющее уровень работы любого программиста

- "код программы хорош, только в том случае если его можно использовать без переделки в другой программе".

ActionScript не является исключением. Старайтесь писать скрипт, так чтобы при изменении проекта не приходилось заново переписывать все подпрограммы.

Например, Вы написали скрипт, определяющий введенный номер и посылающий сообщение на нужный пейджер. Но вот вы решили добавить еще пару пейджеров, Вам придется дописывать новые строки "Else If", хотя можно всю эту подпрограмму заменить одной единственной строкой и в дальнейшем Вы сможете добавлять или удалять пейджеры без изменения самого скрипта.

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

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

Пришло несколько писем, с просьбой объяснить, каким образом можно реализовать возможность отправки сообщения на необходимый пейджер, всего одной строкой (материал предыдущего выпуска).

В этом нам поможет, возможность задания комбинированных параметров (в том числе и имен полей, объектов) с использованием объединения.

Предположим, что у Вас несколько пейджеров, с именами следующего вида "pager321", а номер необходимого пейджера вводится в поле с именем "number", поле для ввода текста "text", тогда весь скрипт, сводится к одной строчке:

Set Variable: "pager" & number = text

Подобным образом, можно использовать комбинирование и объединение для создания динамических массивов (наборов данных имеющих один тип и общее имя).

Сегодня мы научимся управлять экземплярами символов непосредственно ActionScript.

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

Подготовим необходимый минимум. Для работы нам понадобятся: два текстовых поля для ввода координат, два символа находящихся в библиотеке - кнопка и объект для перемещения.

nРазместите на цене редактируемые текстовые поля с именами "х" и "у"

nПеренесите из библиотеки символы кнопки и перемещаемого объекта



nОсталось задать имя объекта (например, toy), над которым мы будим ставить наши жуткие эксперименты.

Имена экземпляров символов:

nдважды щелкните левой кнопкой мыши на символе находящемся на сцене

nоткроется окно Instance Properties

nустановите поведение символа (Behavior) - Movie Clip, даже если это статичное изображение

nв поле Instance Name указываем имя экземпляра (желательно покороче, латинскими буквами)

nнажмите ОК

Управление объектами осуществляется с помощью действия Set Property.

nУстановите его для кнопки, как Вы уже не раз это делали с другими действиями.

nВ правой части окна станут, доступны следующие пункты:

nSet - в этом выпадающем меню, мы выбираем необходимое свойство объекта, (перечень ниже).

nTarget - указываем имя объекта (в нашем случае - toy), если объект находится на другом уровне, клипе и т.д., необходимо указать путь к нему (в будущих выпусках).

nValue - указываем задаваемое значение

Установите присваивание значений заданных в текстовых полях для координат перемещаемого объекта.

В результате скрипт будет следующим:

On (Release)

Set Property ("toy", X Position) = x

Set Property ("toy", Y Position) = y

End On

Если во время тестирования проекта, вы укажите нужные значения в полях и нажмете кнопку, то объект переместится в заданные координаты. Чтобы изучить все возможные варианты управления объектом, добавьте отдельные поля для каждого значения и установите для кнопки соответствующие действия Set Property:

X Position - положение объекта по горизонтали

Y Position - положение объекта по вертикали

X Scale - ширина объекта в процентах по отношению к установленному ранее значению

Y Scale - высота объекта в процентах по отношению к установленному ранее значению

Alpha - прозрачность объекта; диапазон значений от 0 - прозрачный, до 100 - непрозрачный)

Visibility - включение/выключение объекта; True - включен, False - выключен (в этом случае другие параметры изменить невозможно)

Rotation - вращение объекта; значения задают в градусах (положительные - вращение по часовой, а отрицательные - против)

Name - определяет имя объекта

Далее следуют параметры, изменение которых управляет всем фильмом:

High Quality - установка качества показа; 0 - низкое, 1 - нормально, 2 - качественное

Show Focus Rectangle - включает рамку при переходе по кнопкам при нажатии [Tab]; True - показывает рамку, False - рамка скрыта.

Sound Buffer Time - установка размера буфера звука в секундах, при использовании потокового звука (в будущих выпусках)

Обязательно, проверьте все параметры, так Вы сможете освоить управление объектами значительно лучше, чем просто читая об их назначении. И помните - "Тяжело в учении, а ... дальше будет не легче" :)

Домашнее задание:

Теперь, когда у Вас есть достаточные познания в ActionScript, создайте компьютерную игру "Путешествие таракана" или аналогичную с перемещением объекта. Конечно, это будет довольно примитивный вариант, но так Вы научитесь реализовывать задачи, поначалу кажущиеся очень сложными.



Уточнения к заданию: управление тараканом происходит с помощью специального пульта, реагирующего не только на нажатия виртуальных кнопок, но и клавиш клавиатуры, таракан должен двигаться в соответствии с нажатой кнопкой, его координаты и угол поворота отображаются на дисплее пульта.

После начала выхода серии выпусков посвященных изучению ActionScript стало поступать много писем с просьбой помочь разобраться, почему у них ничего не получается. Во всех случаях оказывается, что результатом ошибок является простое невнимание при чтении выпусков или при работе со скриптом, а порой и недостаточное желание разобраться самому. Разумеется, начав, учится Flash, и без особых проблем освоив принципы анимирования, могло создаться ощущения простоты в реализации любого сценария. В большинстве случаев так оно и есть, но если Вы действительно хотите создавать серьезные работы, Вам просто необходимо научится писать скрипты. Это не так сложно, достаточно понять основной принцип построения команд и их синтаксис. Именно поэтому, я стараюсь подробно описать, что нужно сделать, что бы добиться поставленной задачи.

Начиная с этого выпуска, Вы можете не только прочитать, но и посмотреть приведенные примеры в авторском (т.е. моем) варианте. В настоящий момент на сайте выложены материалы данного выпуска и пример скроллинга текста (именно он вызвал наибольший поток писем), каждая работа имеет комментарии, которые помогут разобраться со скриптом. Все примеры доступны в разделе "Скачать".

Большинство из Вас имеет собственный сайт, а зачастую и не один. Любой кто создавал свой сайт сталкивался со сложностями имеющихся на нем кнопок 88х31. Размещение кнопок крайне неудобно с точки зрения дизайна сайта, большое количество установленных кнопок сильно замедляет общую загрузку страниц, что вызывает раздражение посетителей и может даже привести к их уходу с сайта.

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

В результате был разработан MbA модуль использующий возможности Flash технологии.

MbA модули основаны на едином универсальном принципе, который позволяет обеспечить максимальные удобства как для Web мастера, так и для посетителей сайта.

Web-мастер получает в свое распоряжение удобное средство, избавляющее его от необходимости решения проблем, размещения большого количества кнопок на сайте. Случайный выбор демонстрируемой кнопки и ее текстовое описание гарантирует справедливое распределение площади при большем рекламном эффекте. Отсутствие необходимости применения JavaScript и cgi избавляет от зависимости размещения на конкретном сервере.

Индивидуальная гибкая настройка, обеспечивает идеальное внедрение MbA модуля в дизайн любого сайта и каждой страницы в отдельности.

Вся универсальность MbA модуля открывается при размещении всех рекламных компонентов (кнопок, текстов) на одном сайте, а использовании модулей на различных сайтах. В этом случае, при добавлении или любом изменении в рекламном наборе, автоматически произойдет изменение на всех Ваших сайтах. Таким образом, Вы можете организовать собственную систему обмена кнопок по единой тематике сайта и пригласить для участия в ней всех у кого тематика сайтов совпадает с Вашей.



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

"Самый простой способ увеличить посещаемость Web-ресурса - создать для его посетителей максимальные удобства и сервис".

Более подробную информацию о MbA модулях Вы можете найти на странице "MbA".

Создавая проект с ActionScript, часто требуется получить случайное числовое значение. Это позволяет внести элемент неожиданности в развитие происходящего на экране действия, без этого практически невозможно создать интересную игру. Однако, реализуется данное решение, элементарно просто. Достаточно, включить в скрипт функцию "Random"

Случайное числовое значение:

Random (number)

Определяет (если следовать терминологии программистов - возвращает) число от 0 до указанного числа - number, например:

Set Variable: "rnd" = Random (20)

Присвоит переменной "rnd" случайное число от 0 до 19. Если нам необходимо, сгенерировать число в диапазоне от 300 до 400 то это указывается следующим образом:

Set Variable: "rnd" = Random (101) + 300

Применив данную функцию, Вы сможете без проблем создать игру "Угадайка".

Все, что для этого необходимо: два редактируемых текстовых поля, пара кнопок и максимум 4 кадра:

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

Уверен, что с этой работой Вы справитесь за 10-15 минут, ну а если возникнут сложности, посмотрите на мой вариант в разделе "Скачать". Самый лучший способ научится программированию - разобрать код скрипта с комментариями, поэтому предложенный для скачивания проект содержит комментарии практически к каждой команде и кнопке.

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

Дублирование - создание копии имеющегося на сцене символа клипа. Как мы берем символы из библиотеки и устанавливаем их в необходимое на место на сцене, так и дублирование копирует те символы, которые есть на сцене или удаляет уже скопированные символы.

Действие Duplicate/Remove Movie Clip - создание или удаление копий экземпляров символов.

Давайте посмотрим, как использовать данное действие.

Разместите на сцене символ, задав ему режим Movie Clip и присвоив имя "copy", так как было описано в предыдущих выпусках. Нам еще понадобится кнопка, которую мы заставим работать ксероксом, копируя символы.

Выберите из списка действий Duplicate/Remove Movie Clip. В правой части появятся режимы выбора действия Action:

Duplicate Movie Clip - создать копию

Remove Movie Clip - удалить копию

В поле Target указывается путь к копируемому образцу, для этого нажмите кнопку, справа от поля и выберите значение Target Editor, в открывшемся окне появится список доступных символов (объектов), часто при работе со сложными проектами необходимый символ отсутствует в списке, такое может происходить по разным причинам (действие устанавливается в кадре, до появления символа на экране, символ может быть вложенным в другой символ или его имя генерируется автоматически), в этом случае вы указываете путь к имени символа вручную (например /NameClip).



В поле New Name - указывается имя создаваемой копии, при этом могут задаваться, как произвольные имена, в случае с индивидуальным копирование, так и генерируемые скриптом, в случае многократного копирования.

В поле Depth - указываем номер уровня, на котором будет находиться наша копия.

Рассмотрим следующий скрипт:

On (Release)

Duplicate Movie Clip ("/copy", "second", 1)

End On

Тем самым мы создадим копию символа "copy" с именем "second" на первом уровне. Но новый символ будет расположен в том же место, что и старый, и мы можем просто не увидеть, что копирование произошло.

Давайте укажем, где должен находится скопированный символ:

On (Release)

Duplicate Movie Clip ("/copy", "second", 1)

Set Property ("/second", X Position) = 200

Set Property ("/second", Y Position) = 50

End On

Конечно, Вы узнали изученное в прошлом выпуске действие Set Property.

Попробуйте усовершенствовать действия для кнопки, пусть при каждом нажатие создается новый символ, с разными координатами и степенью прозрачности. Небольшая подсказка: перед дублированием создайте имя, образованное путем объединения текстового значения и счетчика копий.

Домашнее задание:

На этот раз, снова сочинение на вольную тему.

мы продолжим изучение ActionScript на примерах, которые Вы сможете, включить в своих работы.

От чего больше всего устают во время работы?

Нет! Не от самой работы :-) От однотипных и монотонных действий.

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

Цикл - Loop While

Команда Loop While выполняет последовательность входящих в нее действий, только в случае, если заданное для проверки условие верно.

Рассмотрим конкретный пример:

Set Variable: "cikl" = 0

Loop While (cikl < 5)

Set Variable: "cikl" = cikl + 1

End Loop

В результате, увеличение переменной "cikl" будет продолжаться до тех пор, пока ее значение меньше 5. Когда нам необходимо выполнить ряд однотипных операций, данное действие просто незаменимо, еще одним его преимуществом является скорость выполнения, она не зависит от установленного значения Frame Rate (скорость показа фильма задается в Modify/Movie) в интернет обычно говорят - "значение FPS".

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



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

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

Для случайного определения положения звезды применяйте "Random"

Чтобы придать звездному небу более реальный вид добавьте установку прозрачности "Alpha"

Не забудьте изменять значение счетчика, иначе Ваш цикл никогда не будет завершен и фильм просто остановиться.

Пример реализации данного сценария доступен в разделе "Скачать"

Рассмотрим реальную ситуацию: Вы в поле лица трудились, аж целых два дня, создавали свой шедевр, который, несомненно, заставит ваших конкурентов лопнуть от зависти, импортировали все красивые картинки, которые были в наличии и ко всей этой радости записали голосовой комментарий. Получилось несколько тяжеловато (мегобайта 2-3), ну да это ерунда, зато круто! Закачали свое чудо на любимый сайт и решили посмотреть, как все это "идет" а "идет" плохо, кадры загружаются рывками, прорисовка странная и голос обрывается, но самое досадное, куда-то пропала вся крутость.

Я сейчас не буду рассуждать о целесообразности импортированной графики или советовать использовать потоковый звук, все это будет позже.

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

Тестирование скорости загрузки:

Во время обычного тестового просмотра Control/Test Movie откройте меню "Control", установите скорость загрузки, например - 14,4 (1,2 Kb/s) и выберите Show Streaming. Фильм начнет проигрываться с самого начала и эмулировать загрузку с выбранной скоростью. Вы можете получить множество полезной информации о времени загрузки кадров, их объеме, если включите окно информации - View/Bandwidth Profiler.

Вы, несомненно, не раз видели сайты, на которых процесс загрузки сопровождается выводом информации о загруженном объеме. Это так называемые предзагрузчики. Они просто незаменимы при размещении своих работ в интернет. Имеет смысл использовать предзагрузчики во всех случаях, когда объем swf файла более 10-15 кб.

Предзагрузчик:

Какие данные нам нужны для определения загруженного объема фильма? Разумеется, мы должны знать, сколько кадров всего в фильме. Можно указать это вручную, но ведь мы хотим создать универсальный загрузчик, который будет работать независимо от того в каком проекте, мы станем его использовать, в этом нам поможет параметр "_totalframes". А еще нам нужно знать, сколько кадров загружено на данный момент "_framesloaded". Этих двух параметров достаточно для вычисления загрузки в процентах, как это принято в интернет.

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



В первом кадре вставим следующий скрипт:

Set Variable: "load" = Int ( _framesloaded / _totalframes * 100)

Т.е. присваиваем переменной "load" значение загруженного фильма в процентах. Для этого разделим количество уже загруженных кадров на их общее количество и умножим на сто. Но, полученное значение желательно округлить (не будем же мы утомлять зрителя докладами о тысячных процентах загрузки :), для округления служит функция "Int", которая просто отбрасывает все цифры после запятой.

Во втором кадре поместим проверку и вывод информации:

Set Variable: "showtext" = load & "%"

If (load < 100)

Go to and Play (1)

End If

В первой строке выводится информация о загрузки в процентах, для этого необходимо, что бы на сцене было текстовое поле с именем "showtext". Далее идет проверка на полную загрузку и если загружено менее 100% то переходим на первый кадр, для получения нового значения.

Это типичный вариант предзагрузчика, но далеко не единственный. Если проект более 500 Кб, то смотреть на медленно ползущие проценты, не доставит большого эстетического удовольствия. В этом случае, гораздо привлекательнее использование пошаговой загрузки, т.е проверить загруженность первой, небольшой части фильма, начать его показ и пока идет проигрывание данной сцены броузер продолжит загрузку, по окончании сцены проверяется загрузка следующей, если еще не загружено, то попросить подождать. В этом случае необходимо рассчитать возможное время загрузки и проигрывания сцен. Для реальной проверки, используйте тестирование с разными значениями скорости загрузки. Для пошагового предзагрузчика, конечно можно использовать описанный выше метод вычисления загрузки, но эффективнее, особенно если у Вас фильм состоит из нескольких сцен, делать проверку на загрузку определенного (конечного) кадра.

Проверка загруженного кадра - If Frame Is Loaded (FrameNumber)

Это уже знакомый Вам условный оператор "If", но в данном случае в качестве условия проверки, служит указание конкретного кадра "FrameNumber". Рассмотрим его параметры:

Выпадающее меню "Scene" - сцена в которой мы будем делать проверку, по умолчанию стоит значение <current scene> - текущая сцена, т.е. если у Вас весь фильм состоит из одной сцены то значение менять необязательно.

Frame - здесь мы указываем номер конкретного кадра, имя метки кадра "Label" (что, разумеется удобнее) или, если выберем вариант "Expression", вычисляемое условие (применяется при создании проектов построенных по модульному принципу). В рабочем виде данный условный оператор, может выглядеть следующим образом:

If Frame Is Loaded (Scene 2, "end")

Go to and Play (Scene 2, "start")

End Frame Loaded

Go to and Play (25)

Предположим, данный скрипт находится на сцене "Scene 1" в конечном, 30-ом кадре. После того, как закончится проигрывание первого эпизода, т.е. фильм дойдет до 30-го кадра первой сцены, произойдет проверка - "а не загрузилась ли вторая сцена?". Если нет, то фильм перейдет на 25-й кадр текущей сцены и после того, как условие станет истинным, т.е. вторая сцена будет загружена, произойдет ее запуск.



Пошаговые загрузчики, можно применять, как для маленьких проектов. Например, Вы создали меню для сайта и хотите, чтобы зритель не видел, как оно прорисовывается, а появлялась уже нарисованная картинка. Так и для очень больших проектов, каждая часть которых длится долго сама по себе (презентации, мультфильмы и т.д.) и возможна загрузка следующей сцены во время проигрывания текущей.

Домашнее задание:

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

Ваша задача создать заставку для предзагрузчика.

Основные требования: небольшой объем, оригинальный подход (песочные часы, термометры и летящие в папку бумажки не принимаются), возможна привязка к загруженному объему.

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

Разделение проекта на сцены очень помогает при работе с большими по продолжительности эпизодами, особенно это чувствуется при необходимости проверить, как работает тот или иной отрезок фильма, Вам достаточно запустить тестирование не всего фильма, а только данной сцены Control/Test Scene [Ctrl+Alt+Enter]. Большинство из Вас, уже давно используют подобную возможность. Я вижу это по Вашим работам, но пришло несколько писем, в которых меня просили объяснить, как создавать новые сцены, их назначение и т.д. Что же, рассылка и существует для того, что бы Вы могли научиться всем приемам работы во Flash.

Работа со сценами:

Создание, редактирование и определение порядка следования сценами происходит через инспектора сцен Window/Inspectors/Scene. Инспектор представляет собой окошко, со списком имеющихся сцен в левой части и кнопками управления в правой.

Назначение кнопок инспектора сцен:

Add - добавить новую сцену. При нажатии, будет добавлена новая сцена. Изменение порядка сцен, а значит и их проигрывания, происходит так же, как мы меняем расположение слоев - перемещаем мышкой название сцены выше, или ниже по списку.

Delete - О! Эта страшная кнопка, способна одним нажатием уничтожить всю Вашу работу, хорошо, что Flash перед этим убедится в Вашем душевном здоровье :-)

Properties - Вы можете, изменить название выбранного слоя.

Duplicate - дублирование сцены со всем ее содержимым, бывает очень полезной, когда необходимо решить какой вариант эпизода оставить в проекте или, когда нужно добавить похожий по содержанию эпизод с небольшими изменениями.

Быстрый переход между уже существующими сценами, возможен без вызова инспектора: нет, конечно, инспектор человек хороший, но лучше с ним не встречаться - особенно на дорогах :-). Над шкалой TimeLine, справа находятся две кнопки: одна для перехода по сценам, вторая для быстрого перехода в режим редактирования символа.

Сегодня, мы научимся созданию, такого популярного в интернет элемента - выпадающего меню.

С меню подобного рода, работая на компьютере, мы сталкиваемся постоянно - достаточно нажать кнопку "Пуск" и появится список возможных подменю, которые в свою очередь открывают другие и так далее, пока не будет выбрана необходимая программа.



В свое время, решив сэкономить на площади пространства одного из своих сайтов, я применил стандартный прием, написал простенький JavaScript и был доволен. Но, делая работу для одной фирмы, которая впоследствии так и не была востребована из-за сложности поддержки, я решил уйти от стандартных элементов управления, выбор пал на dhtml. После нескольких дней мучений со слоями и изучению подобных, выпадающих меню, был создан вариант отдаленно напоминающий задуманный. Но, выяснилось, что в разных броузерах мое творение выглядит совсем по-разному. Был решен и этот вопрос, но потом оказалось, что в результате код вырос до жутких размеров, а добавление новых пунктов было очень проблематичным. Зачем я все это пишу? Просто хочу, что бы Вы могли реально оценить преимущества использования Flash в своих работах и не боялись воплощать самые смелые фантазии.

Выпадающее меню:

Давайте, научимся делать выпадающие меню на простейшем примере. У нас будет кнопка, нажав на которую, пользователю открывается еще три кнопки, отвечающие за вызов определенной им html страницы на сайте с фреймами. Это наиболее типичное использование Flash для большинства сайтов.

Для работы нам необходимо два символа кнопок. Одна - основная, открывающая меню и другая, которую мы будем использовать для вызова html страниц. Еще нам понадобится заготовка сайта с двумя фреймами. Пример доступен в разделе "Скачать".

nСоздайте новый символ (клип), например с именем "Menu"

nВ первый кадр поместите открывающую кнопку

nЗадайте ей действие "Play"

nУстановите в первом кадре действие "Stop"

nСоздайте новый ключевой кадр

nУстановите для него действие "Stop"

nПоместите под открывающей кнопкой, три кнопки (это должны быть экземпляры одной кнопки из библиотеки)

nЗадайте для них открытие html страниц во фрейме с именем "framepage":

nДважды щелкните левой кнопкой мыши на выбранной кнопке

nВ открывшемся окне Instance Properties выберите закладку Actions

nНажмите на кнопку с плюсом для открытия списка действий

nВыбираем Get URL

nВ поле URL укажите адрес необходимой страницы, например page1.html

nВ поле Window указываем способ открытия страницы (выбор из списка) или вводите имя фрейма (не путать с именами фреймов-кадров во Flash), например framepage

В нашем случае скрипт будет следующим:

On (Release)

Get URL ("page1.html", window="framepage")

End On

nНе забудьте для каждой кнопки сделать поясняющую надпись, например "Фото моего кота".

nТеперь осталось перенести получившийся клип выпадающего меню на сцену, размеры рабочей области которой, должны быть не меньше размеров нашего меню в открытом виде.

Если Вы предполагается использование выпадающего меню на сайте с фреймами - размер рабочей области должен соответствовать ширине фрейма в случае с вертикальным расположением или его высоте - при горизонтальном, но в любом случае не менее размеров открытого меню. Напоминаю, что размер проекта устанавливается в Modify/Movie [Ctrl+M]



Домашнее задание:

Пришлите собственный вариант выпадающего меню.

Основные требования: желателен оригинальный подход в оформлении и способе открытия, должно быть не менее пяти элементов кнопок в выпадающем списке, хорошо, если будет предусмотрена возможность вложенных меню.

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

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

Добавление звука в Timeline
Лучше всего, если Вы создадите для звука отдельный слой. Так будет легче впоследствии с ним работать и синхронизировать с изображением.

·         Создайте новый слой, как Вы уже не раз это делали.

·         Определите, с какого кадра должно начаться звучание и создайте ключевой кадр.

·         Откройте окно свойств кадра Frame Properties.

·         Выберите закладку Sound.

·         В выпадающем меню Sound найдите нужный звуковой файл.

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

Рядом с выпадающем меню Sound, отображается информация о выбранном звуке - частота, режим звучания, разрядность дискретизации и др.

Выпадающее меню Effect:
None - без эффектов,
Left Channel - звук только в левом канале
Right Channel - звук только в правом канале
Fade Left to Right - движение звука с левого в правый канал
Fade Right to Left - движение звука с правого в левый канал
Fade In - воспроизведение с увеличением громкости
Fade Out - воспроизведение с затуханием
Custom - ручное создание звуковых эффектов с использованием графического представления звука, и регулировки линии звуковой огибающей.

Выпадающее меню Sync:
Event - полное воспроизведение звука с начала до конца. Рекомендуется для: фонового звучания при зацикливании, или коротких звуковых эффектов
Start - если выбранный звук еще не закончился, то повторного воспроизведения не будет. Очень полезная функция, особенно при длительных звуковых эффектах у кнопок. Например, для предотвращения нежелательного эха, если пользователь проведет мышкой несколько раз над кнопкой, в которой звук приписан к событию Over.


Stop - используйте этот параметр, когда необходимо выключить определенный звук. Например, в десятом кадре, в результате определенного действия началось воспроизведение звука bumbum.wav общей длительностью в 15 кадров, но пользователь, после проигрывания 8 кадров, нажал кнопку перехода на другую сцену, следовательно, необходимо отключить проигрывание данного звука.
Stream - режим синхронизации. Включите данный параметр, когда хотите обеспечить привязку изображения к звуку (именно так, а не наоборот). В этом случае, фильм будет жестко привязан к воспроизводимому звуку, т.е. если по каким то причинам, проигрыватель Flash не успеет обработать графику она будет пропущена. Обычно это проявляется в менее плавном отображении анимации. Чтобы предотвратить подобное явление, рекомендую увеличить параметр fps: скорость воспроизведения кадров в секунду - Modify/Movie.
В поле Loops, Вы можете задать количество повторов выбранного звукового файла.

Замена и компрессия звука
Представим такую ситуацию. В процессе работы над проектом Вы импортировали звук, который использовали для озвучивания различных ситуаций (например, при нажатии множества разных кнопок и объектов). А, в последствии решили заменить звук, на более подходящий. Конечно, можно импортировать новый звук и последовательно заменить его во всех используемых случаях, но как Вы понимаете, это не самое лучшее решение. Flash позволяет работать над уже импортированным звуком, непосредственно из библиотеки проектов. При этом любое изменение параметров импортированного звукового файла автоматически отразится на всех объектах, которые и его используют.

Откройте библиотеку Windows/Library [Ctrl+L]
На выбранном звуковом файле щелкните дважды, левой кнопкой мыши - откроется окно Sound Properties.
В данном окне можно не только заменять звук на другой (кнопка Import), в том случае, если Вы отредактировали исходный звук, и он находится в той же папке и под тем же именем, что и используемый ранее для импортирования - нажмите кнопку Update.
Существует прекрасная возможность выбрать тип сжатия звука, что позволяет оптимизировать объем готового проекта. Какие же типы компрессии нам доступны?
Default - по умолчанию: использует параметры заданные по умолчанию. С дефолтом мы очень хорошо знакомы и не станем плыть по течению, а попробуем самостоятельно установить необходимые параметры.
Mp3 - очень популярный тип сжатия: порой позволяет уменьшить размер звукового файла в 10-15 раз без больших потерь в качестве звука. Варьируя параметры разрядности уровня качества, постарайтесь выбрать наиболее подходящий результат, как по звучанию, так и по занимаемому объему (вся информация отражается в нижней строке окна). Но, я рекомендую использовать этот формат, только для фоновой музыки или голосового сопровождения достаточной длительности. Дело в том, что на декомпрессию mp3 требуется некоторое время (хотя и очень небольшое) и если звучание mp3 всего пару секунд, то возможны несинхронные задержки в момент распаковки звука.


ADCPM - этот формат наибольшим образом подходит для небольших по длительности звуков (бипов, пиков, бумпов и пуков). Именно этот формат я рекомендую для коротких звуковых эффектов (нажатий кнопок, открывании меню и т.д.).
Есть еще один формат позволяющий изменить частоту дискретизации - это формат Raw.

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

Как видите, все зависит от вашей фантазии и знаний. На западе, фирмы занимающееся Flash дизайном, состоят из команды, в которую обязательно входит художник, дизайнер, Web-мастер, программист и конечно звукорежиссер, т.е. по сути это небольшие мультипликационные студии.

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

Разумеется, это не происходит автоматически и если Ваша работа с программой сводится к бездумным попыткам сделать "как у того парня", можете не рассчитывать на успех. Нужно научится анализировать чужые работы, а не слепо их копировать. Увидев интересный Flash сайт, старайтесь думать, не как это сделано (хотя это тоже важно), а постарайтесь понять, почему автор выбрал именно это решение, чем обусловлен тот или иной эффект. Научившись анализировать, Вы незаметно для себя сможете, в зависимости от поставленной задачи, выбрать наиболее рациональное решение. Настоящий Мастер ценится, прежде всего, способностью мыслить и аргументировать выбранный вариант. Flash, пожалуй как никакая другая технология позволяет простыми способами получить желаемый результат. Конечно, умение логически мыслить и философствовать не избавляет от необходимости владения Flash, именно этим мы и займемся в наших следующих выпусках.



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

Если у Вас сложный проект с множеством подгружаемых частей, содержащих собственные объекты, которыми необходимо управлять или обеспечить необходимую последовательность воспроизведения. Даже если у Вас нет подгружаемых частей, но в проекте имеются клипы, содержащие кнопки, которые управляют объектами, находящимися в других клипах, или их параметрами и данными, то необходимо каким-то образом это осуществить. Говоря официальным языком программистов "Необходимо осуществить обращение к Timeline дочерних объектов и их данным из других дочерних объектов или родительского проекта". Но прежде, чем это сделать на практике, познакомимся с действием Tell Target.

Определение клипа для его управления и изменения его данных.
Предположим, что у нас на рабочей сцене имеется кнопка и клип, состоящий из 40 кадров, в первом кадре которого стоит действие Stop (т.е. клип остановлен на первом кадре). При нажатии на кнопку клип начинает проигрываться. Назначим кнопке скрипт производящий запуск клипа.
Для этого, как обычно, откроем окно Instance Properties и щелкнем на закладке Actions.

n      Из списка действий выберите Tell Target.

n      В правом части появится поле со списком имеющихся на сцене клипов. Если Вы задали данное действие уже находясь в клипе, то при наличии в нем других клипов, они будут отражены. Если же Вы хотите обратиться из клипа к другому клипу, но находящемуся на основной сцене или в другом клипе, Вам придется самостоятельно указать его местонахождения -путь (см.ниже).

n      Выберете необходимый объект, дважды щелкнув по нему правой кнопкой мыши.

n      В поле Target появится его название, а точнее путь к данному объекту (клипу), например
/MovieClip

Теперь Вам будет доступно управление проигрывания клипа или его данными. В нашем примере, для запуска клипа movie скрипт будет выглядеть следующим образом:
On (Release)
Begin Tell Target ("/movie")
Play
End Tell Target
End On

Очень удобно применять Tell Target, когда нужно показывать поочередно, по одному местоположению, множество различных клипов. В этом случае достаточно все клипы разместить в одном, но в разных кадрах и управлять именно им, например, задавая в команде Go to and Stop необходимый кадр.

Впрочем, если вы хотите изменить какие то параметры объекта, то прибегать к Tell Target не обязательно. Действия, требующие указания пути, уже содержат необходимый пункт, в котором Вам необходимо его указать. Например, изученное в прошлом выпуске действие Load/Unload Movie или Set Property.

Пути к объектам
К сожалению, далеко не всегда есть возможность указать объект (клип) просто щелкнув мышкой. Очень часто нужно самостоятельно вводить путь к объекту. Если у Вас есть опыт создания сайтов с несколькими папками, то Вы знаете принцип ссылок на страницы находящиеся в других папках. Во Flash указание пути происходит подобным образом. Что бы, не говорить понапрасну давайте, рассмотрим несколько возможных ситуаций:



Указание пути со сцены к клипу Movie:
/Movie

Указание пути со сцены к клипу Happy находящемуся в клипе Movie:
/Movie/Happy

Указание пути к сцене из клипа Movie
./

Указание пути к клипу Table из клипа Movie
./Table

Указание пути к клипу Happy находящемуся в клипе Movie из клипа Table:
./Movie/Happy

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

Домашнее задание
На сей раз, сделайте - телевизор с видеомагнитофоном. Проигрывание фильма производится с дистанционного пульта, на котором имеются кнопки перехода по эпизодам. В видеомагнитофоне стоит кассета с фильмом-сказкой "Приключение Колобка".
Сценарий фильма:
Жил, да был лысый выпускник ПТУ, прозванный Колобком. И решил он уйти от своих стареньких предков в поисках легкой наживы. И первое, что пришло в его стриженую голову - стать виртуальным наркобароном.
И встретился ему крупный специалист по втягиванию в сети криминала - Заяц, больше известный под страшной кличкой Косой, которая приводит всех работников уголовного розыска и защитников авторского права в священную ярость.
И начал он свой черный бизнес - сбывая самый жуткий наркотик именуемый в официальных рекламных проспектах "время доступа в интернет". Но не сладко жилось Колобку. Матерый провайдер "Серый Волк" придушивший за свою деятельность немало колобков, мешал ему развиваться.
Но не только сбытчики "ВДИ" (время доступа в интернет) мешали Колобку развернуться во всю силу, но и профессиональный рэкетир - налоговый инспектор Медведь Бурый в униформе, старался наложить свою мохнатую лапу.
Долго ли, коротко ли существовало частное предприятие "KolobokNet" никто не знает. Но за свою деятельность оно подсадило на сеть не одну сотню наивных владельцев компьютеров. Так и процветал бы Колобок, так бы и румянились его щечки, и толстел кошелек, если бы не пришла однажды Лиса из министерства связи, и не рассказала бы всем о том, как замечательно будет жить при поминутной оплате. И начались тогда ломки страшные, и взбунтовались сетяне...
А чем закончилась сказка, милый внучек, никто не ведает, потому, как и не сказка это, а страшная правда.

Технические требования:
Пульт и телевизор - клипы. Показываемые сцены могут быть загружаемыми или находится непосредственно в проекте. Допускается применение звукового сопровождения.
Сегодня мы займемся переноской тяжестей, а конкретно будем брать то, что плохо лежит, и нести туда, где это будет лежать хорошо, т.е. делать - Drag and Drop. Практическое применение подобный прием находит в различных играх, которые на Flash сделать значительно быстрее и проще, чем другими средствами.

Что Вы делаете, если Вам нужно перенести иконку на рабочем столе компьютера из одного угла в другой? Берем иконку нажатием левой кнопки мышки и не отпуская кнопку перемещаем на необходимое расстояние, ставим иконку простым отпусканием кнопки. Таким образом, выполняется целый ряд операций над объектом (иконкой): выбор объекта, его фиксация относительно курсора мыши, перемещение и установка объекта при отпускании кнопки. За все эти операции отвечает действие Drag Movie Clip.



Drag Movie Clip - перетаскивание клипов
Данное действие имеет целый ряд настроечных параметров, используя которые, можно создавать самые разнообразные проекты:
Start Drop Operation - начать перетаскивание. Включив этот пункт, мы должны указать какой объект будет выступать в качестве груза для переноски.
Target - имя целевого объекта, или говоря проще имя экземпляра клипа который мы станем перемещать.
Constrain to rectangle - включив этот пункт, мы можем указать размеры области для перетаскивания. Размеры задаются в полях: Left, Top, Right и Bottom, значения указываются в пикселях Влево, Верх, Вправо и Вниз от центра того объекта в котором находится перетаскиваемый клип. Таким образом, можно ограничить возможные перемещения внутри определенной части проекта.
Lock Mouse to Center - центровка перетаскиваемого клипа относительно курсора мыши. Этот параметр удобно включать, если перетаскиваемые клипы небольшого размера.
Stop Drag Operation - отключение режима переноски клипа.

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

·         Разместите на сцене экземпляр клипа из Вашей библиотеки

·         Укажите в Instance Properties имя клипа, например Baloon

·         В первом кадре проекта разместите скрипт следования клипа за курсором мыши, для этого после выбора действия Drag Movie Clip, введите имя клипа (в нашем случае /Baloon) и отметьте Lock Mouse to Center.
В результате мы получим:
Start Drag ("/Baloon", lockcenter)

Используя этот прием, можно получить интересные результаты, например во Flash5 добавлена команда отключения стандартного указателя мыши, таким образом, появилась возможность создавать собственные мышиные курсоры для своих проектов.

Следует уточнить, что Lock Mouse to Center позиционирует клип относительно его реального центра. Поэтому, если в самом клипе рисунок находится не точно по центру (о позиционировании объектов рассказывалось в 8 выпуске), то и при перемещении будет создаваться ощущение, что рисунок находится в стороне.

После того, как Вы поняли принцип работы действия Drag Movie Clip, научимся не только перемещать клип, но и предварительно его брать и ставить. Получается, что нам необходимо контролировать кнопку мыши, как Вы помните, для этого служит действие On Mouse Event, которое появляется только на кнопках.

Здесь приходится применять следующую хитрость:

·         нужно создать клип, в котором будет располагаться кнопка с необходимым рисунком или без него, но с указанием области срабатывания (кадр кнопки Hit),

·         создать для этой кнопки скрипт управления клипом расположенным на сцене,
а этот клип не что иное, как экземпляр того клипа над которым мы сейчас и работаем.



Получилось несколько запутанно, но надеюсь, дальше все станет на свои места.

Для работы нам нужен любой символ (рисунок или клип).

n      Создайте новую кнопку

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

n      Создайте новый Movie Clip

n      В него из Вашей библиотеки скопируйте, только что созданную кнопку

n      Задайте для кнопки следующий скрипт:
On (Press)
Start Drag ("/dragclip", lockcenter)
End On
On (Release)
Stop Drag
End On

Осталось только, скопировать созданный таким образом клип на сцену и указать в Instance Properties имя указанное в скрипте (в данном примере dragclip).
Но применение действия Drag Movie Clip можно найти не только для перетаскивания объектов. Бывают случаи, когда нужно узнать координаты курсора мыши. В этом случае необходимо создать "приклеенный" к курсору пустой символ и определять именно его координаты.
Домашнее задание
На этот раз я не стану давать Вам конкретный сценарий, а предложу принять участие в "Новогоднем проекте".
 Требования к сценарию:
Разумеется, необходимо придерживаться новогодней тематики. Реализация фильма должна быть достаточно простой, но в тоже время не примитивной. Сценарий может быть будущим мультфильмом или новогодней игрой, все зависит от Вашей фантазии.

---

---