Содержание

InfoNET

Список использованых источников

Уважаемые знатоки и умельцы по Macromedia Flash!

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

Форма предоставления информации

Так как у многих существуют некоторые проблемы или даже отвращение к MS Word, я советую статьи для правильной передачи и последующего воспроизведения составлять в Блокноте (есть альтернативы - Патриот, Иероглиф, Bred). Кодировка исходных текстов - Windows-1251. При подкреплении текста иллюстрациями, в тексте указывать местоположение изображения (напр."Рисунок-file_1.gif"). Требования к изображению: размеры - максимально высота и ширина (300х600 пикселей), объем - не более 20Кб. Желательно готовить иллюстрации в формате GIF, но если не получится приму такие форматы: PNG, JPG, BMP, TIFF, WMF.

При ссылках на другие источники указывать польностью название и адрес в Сети, если это отдельный автор - его электронный адрес e-mail.

При комплектации статьи и всех прилагающихся к ней материалов упаковывать архиватором ZIP или RAR (самораспаковывающиеся архивы будут сразу удаляться!)

Успехов Вам, удачных статей и разработок!

ОСТАВЬТЕ ВАШ СЛЕД В ИНТЕРНЕТЕ!


Авторам

Macromedia Flash 5. Анимация

Введение

Данная статья полностью посвящена анимации во Flash 5. Я попытался, насколько это возможно в статье, раскрыть эту тему. О результатах судить вам.

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

Для людей незнакомых с базовыми приемами компьютерной анимации (или просто - чтобы было понятнее) поясню на примере. Скажем, у вас есть зеленый квадрат, который нужно переместить из левой части экрана в правую. И сделать это надо в течение 25 кадров. В случае первого "покадрового" способа анимации вам придется нарисовать все двадцать пять кадров, и в каждом последующем кадре чуть-чуть сдвигать ваш квадрат, чтобы он оказался справа на 25-м кадре. А если вам нужно будет сделать так, чтобы квадрат потихоньку исчезал, двигаясь вправо? А если вдруг понадобится, чтобы он исчезал (увеличивался атрибут прозрачности) экспоненциально? Что, придется все это считать вручную и присваивать нужное значение прозрачности на каждом кадре?

Вовсе нет. Для этого существует второй способ анимации - с помощью промежуточных отображений (tweening animation). В этом случае вы только задаете ключевые кадры (keyframes), а промежуточные Flash просчитывает автоматически. Вам понадобится только задать только 2 кадра: начальный и конечный. По умолчанию Flash рассчитает промежуточные кадры по линейному закону, но можно задать возрастающую или затухающую экспоненту. Это нужно, чтобы отразить какие-нибудь процессы, происходящие в реальном мире. Например, движения мяча. Мы еще вернемся к этой теме.

Кадры, слои, символы, временная шкала

Мы досконально разберем все способы создания анимации, но сначала определимся с некоторыми базовыми понятиями. Этими понятиями являются кадры (frames), символы (symbols), слои (layers) и временная шкала (timeline).

Временная шкала

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

Рис. 1 - Временная шкала

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

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

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

- Шкала кадров - поле, где вы можете добавлять и удалять простые и ключевые кадры. Если вызвать контекстное меню (нажать на правую клавишу мыши) на каком-либо кадре, вы увидите перечень действий, которые можно совершить. На шкале отображается информация о кадрах, которые являются ключевыми (такие кадры помечаются черными кружочками), содержат действия (буковка "а" над кружочком) или метку (красный флажок, после которого идет название метки). Цвет тоже говорит о типе кадров. Серый цвет - это кадры, которые в точности повторяют ключевой кадр (keyframe). Синеватая или зеленоватая подсветка говорит о том, что кадры сгенерированы Flash (о различиях я расскажу ниже). И, наконец, белое или "пустое" полосатое пространство говорят о том, что на этих кадрах ничего нет.

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

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

Слои

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

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

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

Кадры

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

В компьютерной анимации существует понятие - ключевые кадры (keyframes). Их название говорит само за себя. Это кадры, которые Flash не вправе изменять в процессе создания анимации. Вы задаете эти ключевые кадры, а промежуточные кадры между ними выстраивает Flash. Существует два типа промежуточных кадров - кадры, построенные на основе изменения геометрии (shape tweening) или кадры, построенные на изменении символов (motion tweening). И, конечно же, кадры могут быть пустыми, т.е. ничего не содержать.

Элементарные операции с кадрами:

Вставить пустой ключевой кадр - Insert->Blank keyframe, F7
Ключевой кадр, повторяющий содержание предыдущего - Insert->Keyframe, F6
Очистить ключевой кадр - Insert->Clear keyframe, Shift-F6
Вставить обычный кадр - Insert->Frame, F5
Удалить кадр - Insert->Remove Frames, Shift-F5

Символы

Символы - одно из ключевых понятий во Flash. Символом может быть, как простейшая геометрия или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций во Flash.

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

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

Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):

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

- Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

  • Up - обычное состояние кнопки.
  • Over - когда курсор мышки находится над кнопкой.
  • Down - когда курсор находится над кнопкой и нажата клавиша мыши.
  • Hit - обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.

- Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).

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

Символы можно создавать как "с нуля" (Insert->New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert->Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изменять под нужный размер.

Для управления символами используется так называемая библиотека (Library), описание которой, к сожалению, не входит в рамки данной статьи. Окно библиотеки находится по адресу Window->Library (или Ctrl-L). Я надеюсь, вы легко разберетесь с библиотекой символов.

Анимация

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

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

Покадровая анимация

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

На временной шкале покадровая анимация выглядит следующим образом:

Рис 2. - Покадровая анимация

Достоинства:

  • Покадровая анимация дает вам, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться.
  • Это единственный способ организовать смену абсолютно независимых изображений - слайд шоу (например, создавая обычный баннер средствами Flash).
  • И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.

Недостатки:

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

Анимация с построением промежуточных кадров (tweened motion)

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

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie). Скорость фильма можно изменить здесь: Modify->Movie:, Ctrl+M - там параметр Frame Rate задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.

Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 30 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 2.5 секунды, то на это движение вам нужно отвести 75 кадров.

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

Shape tweening

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

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

После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), и выбираете на панели Frame (Windows->Panels->Frame, Ctrl+F) в списке Tweening строку Shape:

Рис 3. - Shape tweening

Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка (см. Рис. 4).

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

Рис. 4 - Анимация на основе Shape tweening

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

Немного о параметрах shape tweening. Вы, наверное, заметили, что появилась пара других параметров, когда вы выбрали shape tweening в панели Frame - Easing и Blend (см. Рис. 3). Поле Label содержит метку кадра. О метках мы поговорим в статье, посвященной анимации с помощью ActionScript.

Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться (см. Рис. 5). И наоборот, если easing будет положительным, анимация будет замедляться (см Рис. 6).

Рис. 5 - Easing: -100

Рис. 6 - Easing: +100

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

И, наконец, последний инструмент в анимации shape tweening - контрольные точки (shape hints, дословно - подсказки для форм). Это точки, с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм. Пользоваться ими очень легко:

На первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (Modify->Transform->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.

Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.

Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27.

На рисунках (Рис.7 и Рис.8) вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и с использованием таковых.

Рис. 7 - Shape tweening без использования контрольных точек

Рис. 8 - Shape tweening c использованием контрольных точек

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

  • форма
  • расположение
  • размер (любые пропорции)
  • цвет
  • угол поворота

Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None.

Motion Tweening

И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ.

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

Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:

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

Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening - с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:

Рис. 9 - Motion tweening

Easing - обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.

Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.

Orient to path - поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей. (см. ниже)

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

Направляющие слои

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

Скажем, вам нужно анимировать самолетик, который выписывает виражи по небу. У вас уйдет уйма времени и сил, на создание этого движения. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.

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

Для того, чтобы добавить направляющий слой, вам нужно выбрать слой, на котором находится ваш символ, и, нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.

Рис. 10 - Направляющий слой

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

Рис. 11 - Анимация, с использованием траектории

Теперь, чтобы использовать этот слой, вам нужно взять ваш символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening: Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней (как на рис. 11), то на панели Frame нужно включить флажок Orient to path.

Цветовые эффекты

Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening.

Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows->Panels->Effects), выбрать нужный эффект (см. Рис 9-12).
Рис. 12 - Установка яркости | Рис. 13 - Цветовое смещение, оттенок
Рис. 14 - Точная установка всех атрибутов | Рис. 15 - Установка прозрачности

Заключение

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


Основные типы графики

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

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

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

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

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

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

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

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

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

Далее


Чем питается Flash?

Для создания Flash-ролика нередко приходится использовать различные векторные и растровые картинки из всевозможных клипартов. Сегодня настало время более подробно поговорить о том, как наиболее рационально и с наименьшими потерями предоставить их в распоряжение Flash-редактора.

Импорт растровых изображений

Итак, рассмотрим достаточно распространённую задачу. Предположим, требуется импортировать во Flash-редактор какую-либо растровую картинку, к которой впоследствии вы захотите подрисовывать какие-либо объекты или осуществлять с ней некоторые манипуляции, связанные с её перемещением, вращением, наложением другого изображения и т.д. С картинкой, имеющей формат gif на прозрачном фоне, работать значительно проще, нежели, чем с jpg-изображением. Однако, с gif-ом тоже есть свои трудности. Если фон, куда будет наложена картинка, неоднородный, то это означает, что для gif-а очень трудно подобрать цвет прозрачности. Если его не указывать вовсе, то картинка может получиться рубленной. Ещё большие озадачить создателя Flash-сцены способен jpg-формат, т.к. jpg-картинку вообще проблематично наложить как прозрачное изображение на неоднородный фон. Если вы попытаетесь с помощью ластика убрать лишние элементы картинки, то ничего не получится. Что же делать?

На этот случай во Flash предусмотрена великолепная возможность, позволяющая автоматически переконвертировать любое растровое изображение в векторное (трассировка) – Modify/Trace bitmap. При переводе растрового изображение в векторное происходит объединение пикселей, расположенных вблизи друг от друга, в векторные объекты. В результате такого преобразования возможна потеря качества. Если попытаться переконвертировать фотографическое изображение, то потеря качества будет очень существенной, а такое преобразование совершенно нецелесообразным, т.к. для того, чтобы качество фотографии было хоть сколько-то приемлимым, потребуется огромное количество векторных объектов, которые сделают размер swf файла значительно больше, чем размер jpg-файла. При этом с таким числом объектов будет практически невозможно работать. Использовать возможность трассировки имеет смысл лишь тогда, когда имеете дело с изображением, содержащим однородные области.

Импорт векторных изображений

Таким образом, мы пришли к выводу, что гораздо рациональнее использовать импортирование во Flash именно векторных изображений, к которым относятся, например, продукты, создаваемые с помощью наиболее известных инструментов, таких как Corel Draw и Adobe Illustrator. Существует немалое количество векторных клипартов для этих программ. Безусловно, картинки из таких клипартов можно использовать и во Flash. С Аdobe Illustrator дело обстоит значительно проще, нежели, чем с Corel Draw, т.к. Adobe Illustrator позволяет экспортировать файлы в формат swf. А swf-файлы могут быть использованы во Flash-редакторе. При этом разбиение изображения на отдельные объекты сохраняется. Небольшие трудности возникают при экспорте изображения из Corel Draw во Flash, где нет прямой возможности такой операции. Некоторые объекты можно перенести через буфер обмена, однако могут возникнуть проблемы с градиентом. Более-менее гарантированный результат можно получить, если сначала файл cdr сохранить в cdr версии 7.0, затем открыть его Adobe Illustrator и экспортировать оттуда его во Flash.

Импорт музыкальных файлов

Если вы хотите использовать во Flash звук, то неизбежно придётся импортировать звуковые файлы. Flash версии 5.0 великолепно поддерживает импорт файлов в формате mp3. Использование именно этого формата позволяет уменьшить максимальным образом размер выходного swf-файла. Однако, вовсе не обязательно импортировать во Flash-редактор mp3-файлы. Можно благополучно импортировать файл в стандартном формате wav, а затем указать в настройках publish программу сжатия mp3 с приемлимыми параметрами. Во Flash существует неплохой встроенный конвертер в формат mp3.

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


Терминология и интерфейс

Часть 1

Сегодня мы перейдем от теоретической части, к работе с программой - редактором Flash4. Разумеется, прежде чем начать изучение программы, ее необходимо установить на Ваш компьютер. :-)
Где взять программу
Фирма Macromedia свободно распространяет полнофункциональную 30-ти дневную версию редактора Flash. После окончания демонстрационного времени, программу необходимо зарегистрировать.
Не составляет труда приобрести Flash на дисках с графическими системами или в сборниках программ для Интернет. Flash, можно скачать с сайта http://www.macromedia.com или найти с помощью систем поиска файлов на ftp серверах, могу порекомендовать российскую поисковую систему http://www.filesearch.ru

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

Ну вот, когда со всеми формальностями покончено и программа установлена, можно приступать к ее изучению.
Как и любой графический редактор, Flash содержит:
панель инструментов - с их назначением и способами использования мы познакомимся позже
рабочей зоны - во 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.

Назад:::Далее


Терминология и интерфейс

Часть 2

Продолжаем изучать команды меню.

Меню 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 (Разбить) - разбивает текст на отдельные символы или преобразует растровое изображение. Но помните, - "что разбито то уже не склеишь"!

Назад:::Далее


Терминология и интерфейс

Часть 3

Меню 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.

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

Что-то я увлекся романтическими мечтаниями. :-) Да и как иначе, если мы с Вами подошли к более интересной теме - к инструментам рисования.

Назад:::Далее


Инструменты рисования

Часть 1

Сегодня мы приступим к изучению инструментов рисования. Конечно, каждый из Вас уже рисовал в других графических редакторах и знает основные инструменты и их назначение. Хоть, инструменты и похожи, но как в любой программе есть свои особенности и дополнения.
Пора переходить от теории к практике. Запустим программу и начнем рисовать, а точнее знакомиться с инструментами. Посмотрим, чем же нас может порадовать 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, теперь можно закрашивать градиентной заливкой.
Немножко отдохнем до следующего выпуска, в котором научимся работать с оставшимися инструментами и познакомимся с режимами редактирования рисунка.

Назад


Flash

Часть первая.

Широко открытые глаза

Все нижесказанное ни в коей мере не претендует на полноту и достоверность.

Любое распространение и изменение этого документа без ведома автора только приветствуется.

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

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

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

Вот эта вот белая область в центре рисунка это как раз то место где располагаются всяческие рисунки, и все остальное, что будет видно доверчивым и беззащитным посетителям вашей домашней странички. Только что-то эта область как-то великовата и вообще слишком квадратная какая-то... Ради такого случая давайте сходим в раздел меню Modify/Movie и вот в этом окошке

выставим ширину нашего меню в 400 пикселей, высоту в 50, поставим галочку в окошке "показывать сетку" и выставим ее шаг, к примеру, в 10 пикселей (сеточку в конечном продукте нашего труда видно не будет, но жизнь она нам обещает облегчить :) и выберем какой-нибудь зелененький фон для нашего ролика (да нажмите же на эту белую кнопку - не стесняйтесь :) (тут я выбрал 5-е сверху окошечко в правом столбце выпавшего меню из цветных квадратиков). Как вы уже наверное догадались что кнопка левее зеленоватой означает цвет вспомогательной сеточки, а цифра 15 в самом верху это число кадров в секунду в нашем ролике. Кроме сеточки, Flash облегчает нашу жизнь градуированными полосами прокрутки (Rulers) сверху и слева рабочей области и это слово в самом низу означает в чем эти полосы будут проградуированы - в нашем случае в пикселях. Теперь давайте нажмем OK и, зайдя в меню View, поставим галочку около слова Rulers. После этих несложных манипуляций в центре экрана должно появится что-то вроде вот этого

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

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

Давайте нажмем на нее и в появившихся ниже панелях выберем жирный шрифт "Arial Cyr" , размером 16, к примеру синего цвета. Нетрудно видеть что буква "I" рядом с "B" означает наклонный шрифт, левая из кнопок во втором снизу ряду определяет по какому краю будет выравниваться текст состоящий из нескольких строк, кнопка правее этой позволяет задать отступы слева-справа и расстояние между строками, а самая нижняя кнопка позволяет создавать в конечном ролике поля для ввода текста прямо в броузере. Следует иметь в виду что для изменения параметров уже созданного слова, нужно его выделить. Теперь у нас уже есть первое слово - давайте попробуем взять из панели инструментов стрелку и подвигать это слово по рабочей области.

Кроме перемещения мышкой, выделенные объекты можно двигать и стрелками вправо-влево. Странный красный символ сверху ниже панели инструментов это "Магнит" (давайте в дальнейшем эту область экрана называть панелью свойств инструмента - т.к. у каждого инструмента свои свойства, эта панель будет изменяться при переходе, например от инструмента "Лупа" к инструменту "Стрелка")
О магните мы поговорим чуть позже, а пока давайте поисследуем две самые нижние кнопки в панели свойств инструмента Стрелка - это вращение и изменение размеров объекта. Постарайтесь добиться поворота объекта ровно на 42 градуса по часовой стрелке и увеличения его размера на 119% (шутка :)(хотя это легко можно сделать нажав Ctrl+Alt+S :) Попробуйте в режиме поворота воздействовать не только на угловые, но и на средние белые квадратики. А при "изменение размеров" воздействие на угловые точки сохраняет масштаб, а на все остальные - нет. Покрутили ? Поизменяли? А теперь попробуйте снова взять инструмент "текст" и щелкнуть на объект - да, и в таком искаженном виде текст можно редактировать. Ну ладно, побаловались и хватит, теперь давайте несколькими нажатиями Ctrl+z (Undo) вернемся к первоначальному горизонтальному и ровному тексту. Хватило уровней undo ? Если не хватило просто щелкните на объекте стрелкой, потом правой кнопкой, выберите "cut" и наберите текст по новой :). Даже если вам хватило уровней отмены давайте все равно зайдем в меню File/Preferences и сделаем картину похожей на вот эту

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

Давайте будем для простоты в дальнейшем называть эту область нерусским ругательным словом "Тайм-лайн" (синий прямоугольник появился с том месте куда я ткнулся мышкой :). Как легко заметить она состоит из нескольких слоев (Layer), причем в каждом горизонтальном слое есть место для множества кадров. В нашем случае мы используем один единственный кадр (он обозначен черным кружком) в слое под названием Layer 1. Давайте два раза щелкнем мышкой на названии нашего слоя и заменим "Layer 1" на что-то более понятное например "Slova". Значок карандаша справа от названия слоя говорит о том мы рисуем или создаем объекты именно в этом слое. Чтобы жизнь не казалась медом давайте тыкнемся мышкой в белый прямоугольник со знаком "плюс" чуть ниже названия слоя. После этих действий картина должна слегка измениться

Теперь в нашем ролике появился новый слой под названием "Layer 2", который автоматически стал активным (карандаш справа от названия), а наш родной слой "Slova" стал неактивным и значок карандаша рядом с его названием пропал. Теперь все новые рисунки будут появляться у нас в новом слое. Интересно что активный слой со знаком карандаша всегда только один, поэтому в любым инструментом можно изменить за один раз содержимое только одного слоя. Кроме того, при внимательном рассмотрении нового слоя можно заметить что черный кружок в первом кадре нового слоя не заштрихован - это говорит о том что никаких объектов в этом кадре этого слоя нет.
Да :) Я понимаю что пока у нас появляется слишком много новых понятий и слишком много слов, но в дальнейшем нам это сильно пригодится. А пока чтобы не заскучать давайте-ка возьмем из панели инструментов кисточку и зачеркнем нафиг слово "Ссылки". Вот так

Незаштрихованный кружок в первом кадре нового слоя сразу же стал заштрихованным - в этом кадре этого слое появился какой-то объект (красный крестик). Что же у нас такое получилось? Крестик это конечно дело хорошее, но за ним совершенно не видно надписи которую мы так долго и упорно создавали и перемещали... А давайте-ка схватимся мышкой за слово "Layer 2" и попробуем перетащить весь этот слой в самый низ? Надо же ! Получается!

При внимательном рассмотрении этого рисунка можно заметить что первый кадр слоя "Layer 2" заштрихован и черный кружок на его фоне стал белым Это говорит о том что выделенный объект (красный крестик) лежит именно в этом слое. В отличие от активного слоя (со значком карандаша), слоев с выделенными кадрами может быть несколько - это произойдет если выделить несколько объектов лежащих в разных слоях. Теперь, когда нам стало ясно в какой последовательности Flash прорисовывает слои в своей рабочей области (хотя в принципе порядок прорисовки слоев в конечном счете можно изменить и к тому же в каждом слое может быть несколько объектов и порядок их наложения можно задавать из Modify/Arrange), давайте попробуем удалить этот красный крест, который нам в принципе и не очень-то нужен. Для этого возьмем инструмент "Cтрелка" и щелкнем по выступающей, за рамки объекта "Ссылки", части объекта "Крестик". Если после щелчка правой кнопкой выбрать "Cut" и крестик пропадет.

После пропадания крестика, выделение первого кадра Layer 2 пропало (слой теперь не содержит выделенных обьектов) и черная точка в этом кадре стала не заштрихованной (в этом кадре этого слоя теперь вообще нет обьектов). Ну вот, после поверхностного знакомства со слоями давайте попробуем проиграться с кадрами и создать наконец кое что. Давайте щелкнем правой кнопкой мышки на 10-м кадре слоя "Slova" и выберем "Insert Keyframe" (в дальнейшем будем использовать для этого F6)
Теперь у нас в слое "Slova" появилось 2 заштрихованных точки - в 1-м кадре и в 10-м - это говорит о том что в этом слое у нас есть 2 ключевых кадра и 8 простых кадров между ними. Ключевой кадр отличается от простого (который кстати можно вставить нажатием F5) в основном тем, что в ключевом кадре содержание слоя может изменяться. Кроме того ключевому кадру можно назначить какое-либо действие, метку и т.д. При вставлении в какой-либо слой ключевого кадра, все объекты из предыдущего ключевого кадра автоматически вставляются в этот новый кадр, если вставить в слой пустой ключевой кадр (Blank Keyframe), это приведет к уничтожению всех обьектов слоя во всех кадрах после Blank Keyframe. Чтобы закруглиться наконец с понятием кадров, отметим что каждый слой всегда начинается с ключевого кадра (он может быть и пустой как в нашем нижнем слое),но может заканчиваться простым кадром и повторим еще раз что содержимое простого кадра всегда совпадает с содержанием того ключевого кадра после которого расположен этот простой кадр.
Уффф...:) Устали? Я тоже :) Тогда давайте напоследок сделаем что-нибудь веселенькое и не требующее разных там непонятных слов ? Для этого нужно просто перейти мышкой в 10-й кадр (если вы уже успели что-то там наизменять после вставки ключевого кадра :) , схватить инструментом "Стрелка" наше слово "Ссылки" и перетащить его немного вправо.

Потом давайте щелкнем правой кнопкой мыши на первом кадре слоя "Slova" и выберем Properties/Tweening/Motion.

В этом окошке выберем Clockwise и 1 (один поворот по часовой стрелке). В тайм-лайне у нас должна появится примерно вот такая картина

О том что это такое мы поговорим чуть попозже, а пока можете нажать Enter или, хуже того, Ctrl+Enter и полюбоваться на продукт своего труда :) (вы не поверите но окошко открывшееся по Ctrl+Fnter закрывается крестиком в правом верхнем углу - это ведь практически внешняя по отношению к Flash которая служит для отладки и проверки.

Дальше


Flash

Часть вторая

Теория - что б она провалилась!

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

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

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

Эх ! Был у меня соблазн написать весь прошлый абзац в виде одного предложения - отговорили :) А вообще не пугайтесь - в только что сказанном ничего страшного нет.

Пришла пора поподробнее остановится на понятии "объект". Не отходя далеко от принятого в самом начале этого текста принципа "упрощения", можно с уверенностью заявить что Flash оперирует с тремя типами обьектов. Это:

Текст
Рисунок и
Символ

Эти три типа очень сильно связаны между собой и иногда могут быть преобразованы друг в друга (а иногда не могут :) Например Текст можно легко превратить в Рисунок, а вот наоборот - не получится...). На прошлой странице мы уже имели дело с двумя типами обьектов - Текст (слово "Ссылки") и Рисунок (красный крестик). Так давайте же наконец познакомимся с немного странным объектом под названием Символ (Symbol).

Давайте-ка щелкнем на десятом кадре слоя "Slova" правой кнопкой и выберем Clear Keyframe, после этого войдя в свойства (Properties) 1-го кадра этого же слоя присвоим параметру Tweening значение None. Если у вас в тайм-лайн не получилась картинка похожая вот на эту

сходите и почитайте еще разок первую страничку :) Итак сейчас наш ролик состоит из 2-х слоев, причем слой Layer 2 не содержит никаких обьектов, а в первом ключевом кадре слоя "Slova" содержится объект типа "Текст" этот объект у нас сейчас выделен (где там у нас выделенный кадр ? :) Давайте превратим выделенный объект в Символ. Для этого можно просто нажать F8.

Из появившегося диалога легко узнать что символы бывают трех видов - рисунок, кнопка и клип. Хотя это разделение весьма условно, давайте выберем клип и назовем новый символ к примеру "Links". Жмем OK и что? Вроде бы ничего не изменилось ? Хотя стойте - на палочке от "ы" появился какой-то крестик! Он обозначает центр нашего нового символа. А если теперь взять на панели инструментов букву A (инструмент для создания текста) и попробовать изменить надпись, ничего не получится. Ну а если пойти дальше и щелкнуть правой кнопкой на объекте, который мы только что превратили из текста в символ, то можно увидеть в самом низу выпавшего меню что у этого объекта появились какие-то еще свойства (Properties).

Если открыть панель свойств объекта типа Символ под названием "Links"

можно с удивлением обнаружить что теперь этому объекту задать какие-нибудь цветовые эффекты (изменить цвет, прозрачность и т.д.) перейти к его редактированию (это значок карандаша внизу, но пока жать его не нужно :), размножить (правее карандаша) или присвоить какое-нибудь имя (Instance Name).Кстати тут никакой путаницы нет - "Links" это имя символа, а задать можно имя объекта. И вообще говоря в одном слое и в одном ключевом кадре могут находится несколько обьектов с разными именами или вообще без имен сделанных из одного и того же символа.
Ну вот - теперь мы умеем создавать символы из обьектов. Все изготовленные нами символы хранятся в библиотеке символов. Войти в эту библиотеку можно из меню Window/Library (Ctrl+l). Давайте закроем окошко свойств объекта и нажмем эту комбинацию клавиш. Из этого нового окошка легко увидеть что пока в нашей библиотеке всего один символ

Прямо из этого окошка можно создать новый символ (значок в левом нижнем углу), насоздавать папок для символов и рассортировать символы по папкам (это как раз то что желтеется чуть правее значка "создать", изменить имя или тип значка (буква i в синем кружке) и наконец уничтожить выбранный символ (отгадайте каким значком ? :). Кроме того можно переключиться в развернутый режим показа значком правее слова "Links" и значком который чуть выше изменять режим сортировки символов. Все это (и еще кое что ) можно сделать нажав на слово "options" в самом верху окошка Library.
Теперь, когда мы умеем создавать из обьектов символы, давайте попробуем создать из символа объект. Для этого можно например щелкнув на слове "Layer 2" ухватится мышкой за изображение символа в окошке Library и просто перетащить его в область рисования. Вот так

Если вы точно следовали инструкциям, то новый объект из библиотеки символов вставился в слой Layer 2 , потому что значком карандаша был помечен именно этот слой (где там у нас выделенный кадр и заштрихованный кружок? :) Возникает вопрос - зачем нужно делать из обьектов символы, если в конечном итоге в ролике который мы создаем будут принимать участие только объекты ? Главных причин две: во первых созданный один раз символ (который может состоять из множества кадров и быть довольно сложным) можно использовать много раз в разных частях ролика, а во вторых "свойства" в контекстном меню имеют только символы, поэтому задать имя или сделать прозрачным можно только символ, а текст и рисунок нельзя. Flash имеет свою собственную встроенную библиотеку символов (меню Library) которые можно вставлять в любое место создаваемого ролика. Эту библиотеку можно легко пополнить самому (например попробуйте положить вот этот вот простенький .fla в папку Flash4/Libraries и войти еще раз в этот пункт меню :) Кроме уже рассмотренных символов типа рисунок, кнопка и клип, могут быть символы которые содержат только звук. Все символы можно рассмотреть или послушать прямо из окошка Library.

Даа... Что-то эта страничка получается еще скучнее чем даже первая, но хотите верьте, хотите нет, а дальше у нас без четкого понимания разницы между например Символом и Объектом ничего не получится. Пришла пора сказать пару слов о переводе терминов. Вообще-то в самом Flash иногда словом Object называются разнообразные включения файлов всяческих посторонних стандартов, которые не могут быть напрямую импортированы в ролик. Но я взял на себя смелость эти "Object" перевести как "Включение", а словом "объект" стал с самого начала называть элементы ролика. Каюсь :) Это не совсем правильно, но на первых порах такое допущение вполне можно сделать.

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

Назад::::Дальше


Flash

Часть третья

Пора подвигать мышкой

Все ! Хватит делать лишние телодвижения ! Давайте наконец сделаем хоть что-то. (Кстати как там ваша почта ? Все еще лежит непроверенная и нечитанная ? :)

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

Как видите картина почти не изменилась - разве что название символа появилось в самом верху тайм-лайн и масштаб снова стал 100% (а вы до этого вообще хоть раз до этого заглядывали в правый верхний угол ? :) потому что в лупу этот символ мы еще на рассматривали. Так давайте же рассмотрим :)

Сразу бросается в глаза что у символа есть центр - он обозначен крестиком. Теперь давайте кнопкой F6 сделаем кадры 5, 10, 15 и 20 ключевыми. И заменим ни о чем не говорящее слово Layer 1 к примеру на Work. Потом вставим в наш символ еще один слой, назовем его к примеру Metki, и снова используем F6 в кадрах 5, 10, 15 и 20

Кроме символа Links у нас будет еще 2 символа с похожей структурой и чтобы не делать одни и те же действия можно например размножить этот символ например в окне Library. Хотя конечно размножать такой простой символ это неспортивно, поэтому попробуем сделать по другому. Давайте перейдем в 20-й кадр слоя Metki и потом удерживая кнопку Shift щелкнем по первому кадру слоя Work. Теперь все кадры всех слоев символа у нас выделены

и если теперь выбрать из меню правой кнопки Copy Frames (Ctrl+Alt+c), все эти кадры у нас окажутся в буфере обмена. Если теперь из меню Insert выбрать New Symbol (Ctrl+F8) типа клип и назвав его к примеру "News" щелкнуть на его первом кадре (автоматом произойдет переход к редактированию только что созданного символа) и из меню правой кнопки выбрать Paste Frames, мы должны получить символ полностью (вплоть до названия слоев) повторяющий символ Links. Поняли чего-нибудь ? :) Честно говоря я тоже, но все равно не удержался от написания целого абзаца одним предложением - виноват :) Ну ничего - ведь это самые простые действия и разобраться в них совсем несложно :)
В принципе тоже самое получилось бы и при простом, размножении символа, но иногда таким способом можно скопировать только часть кадров, или вставить их в середину какого-нибудь сложного символа - результат в таком случае получился бы более неожиданным :)
Давайте возвратимся к нашему новому символу и уничтожим кнопками Shift+F6 ключевые кадры 5, 10, 15 и 20 слоя Work, а в первом кадре этого слоя слово ссылки заменим на слово "Новости" (да, и при редактировании символов инструмент текста (и все остальные работают точно так же :) и снова сделаем ключевыми кадры кадры 5, 10, 15 и 20. Можно было и просто заменить слово на другое в каждом ключевом кадре слоя Work, но это было бы дольше нажимания на F6 :) Теперь давайте вернемся в символу Links (все тем же значком в правом верхнем углу) и заменим слово "Ссылки" в 10-м кадре слоя Work на слово "Линки". Это же можно сделать и в 15-м кадре, а можно просто сначала стереть, а потом вставить туда ключевой кадр (сначала Shift+F6, а потом просто F6 :) Ну вот :) Теперь мы подошли вплотную к созданию анимированного символа. В самом конце первой странички мы уже пробовали создать анимацию (Tweening) типа "Движение" (Motion). Но об этом типе анимации мы поговорим чуть позже. Сейчас нас будет интересовать второй тип анимации - "Превращение" (Shape). Хорошо отработанным движением давайте сделаем свойства (правая кнопка\Properties) 5-го и 15-го кадров слоя Work примерно вот такими вот

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

Если теперь нажать Enter (тестирование) можно посмотреть как работает превращение. Ну как ? :) Не работает? А если ткнуться мышкой к примеру на 8-й кадр слоя Work ? Вообще ничего нет на этом зеленом фоне? Ну это в принципе не удивительно. Анимация типа "Превращение" не работает с объектами типа "текст" (помните вторую страничку ? Не зря я типы обьектов красным выделял... :) Говоря по секрету этот тип анимации лучше всего работает с объектами типа "рисунок". А из текста легко можно сделать рисунок действием Modify/Break Apart (Ctrl+b) Давайте-ка превратим все наши объекты типа текст в рисунки в каждом ключевом кадре слоя Work. Только для этого текст должен быть выделенным стрелкой. После нажатия Ctrl+b такой вот объект

превращается вот в такой

Как уже говорилось выше такое превращение необратимо - превратить рисунок обратно в текст можно только используя Undo. Но тут с первым кадром у нас получается интересная ситуация с одной стороны если мы захотим изменить слово Ссылки на какое-нибудь другое мы можем сделать это в первом ключевом кадре, уничтожить все другие ключевые кадры этого слоя и вставить их снова (содержание их тогда будет совпадать с содержанием измененного первого кадра) и опять в каждом ключевом кадре сделать Ctrl+b. Но с другой стороны если оставить в первом кадре объект типа текст, то этот слой у нас будет содержать уже 2 разных типа обьектов (рисунок и текст) и соответственно размер конечного ролика (который мы собираемся выложить в интернет) будет больше, что не есть хорошо :) Может возникнуть мысль сделать Ctrl+b на всех кадрах, а при желании изменить что-то, стереть их все и напечатать по новой. Но тогда придется принимать специальные меры по сохранению координат размещения текста на рабочей области (предположим в каком-то сложном ролике все объекты типа Символ расположены строго на своих местах, тогда если изменить координаты обьектов из которых состоит символ, изменятся и координаты этого символа в конечном ролике).
Кстати вы заметили что мы попутно подошли к очень интересной вещи - Символ точно так же как и конечный ролик, состоит из обьектов этих же самых трех типов. Т.е. при создании отдельно взятого символа мы можем использовать и другие символы.
Ну вот :) И к концу этой сугубо практической странички снова пришлось скатиться в теорию ... Виноват :) C этим пора кончать. Давайте нажмем Enter и снова полюбуемся на продукт своего труда. Шевелится ? И мне тоже этот эффект нравится :)
Похоже на этой страничке уже сказано все что нужно. А прежде чем перейти на следующую попробуйте самостоятельно сделать то же самое еще в 2-х символах (два у нас уже есть, а третий создайте дублированием второго). В символе News сделайте превращение слова Новости в слово News и наоборот, а в третьем (назовем его к примеру Mail) те же самые действия со словами Письма и Контакты. Ну и после завершения этого каторжного труда смело жмите дальше.

Назад::::Дальше


Flash

Часть четвертая

Цели, действия и метки

Итак теперь у нас с вами есть 3 готовых символа в которых происходит все что нужно для нашего навигационного меню. Осталось немного отвлечься (:), потом разместить все эти символы на своих местах, и заставить их соответствующим образом реагировать на перемещение и щелчки мышкой.
Давайте для начала займемся размещением. Для этого можно просто щелкнуть на слове Scene 1 вот тут

или тут

Для начала давайте удалим вот этот вот выделенный объект из слоя Layer 2 (помните про правую кнопку/Cut ?)

И вставим в этот слой (где там у нас значок карандаша ?) Символ News из окошка выпавшего после нажатия Ctrl+L. После этого давайте создадим еще один слой (черным крестиком на белом фоне ?) И в этот новый слой (успеваете отслеживать перемещение значка карандаша по слоям ? :) вставим символ Mail. Если после этого у вас не получилось что-то вроде вот этого,

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

(я же говорил что сеточка нам пригодится :) Помните как вставлять в тайм-лайн ключевые кадры ? Кстати простые вставляются точно так же, но не кнопкой F6, а кнопкой F5. Давайте для разнообразия вставим несколько кадров сразу. Щелкнем мышкой на 20-м кадре слоя Slova и удерживая кнопку Shift еще раз щелкнем, но у же на 20-м кадре самого нижнего слоя.

После нажатия F5 мы увидим что простыми кадрами заполнились первые 20 кадров в каждом слое. Это приходится делать довольно часто, а пока давайте попробуем нажать Ctrl+Enter и посмотреть что у нас такое получилось. Ага ! Уже что-то... Пришла пора познакомиться с еще одним типом символов - Кнопкой (Button). Помните как создается новый символ ? Правильно :) Жмем Ctrl+F8

и называем наш новый символ Knopka :) Картина которая откроется после этого будет слегка отличаться от привычной

В тайм-лайн окошка редактирования символа у нас имеются 4 фиксированных отсека.

Up - начальное положение (мышка в стороне)
Over - мышка наведена на активную область кнопки
Down - щелчок мышкой
Hit - активная область кнопки

В любой из этих отсеков кроме Hit можно вставить ключевой кадр в котором могут содержаться довольно сложные анимированные символы. Переход между этими ключевыми кадрами будет зависеть от положения и поведения мыши.
Весьма любопытная область Hit задает активную область кнопки, т.е. область при наведении на которую указателя мыши будет осуществляться переход между ключевыми кадрами символа типа кнопка. Такой областью может быть область занимаемая любым объектом, который лежит в ключевом кадре отсека Hit. Обьектов может быть несколько, они могут лежать вообще где-нибудь в углу рабочей области, но тем не менее при наведении мыши в этот угол, будет что-то происходить :) В последнее время появилось много страничек в которых объекты их которых состоит символ типа кнопка имеют совершенно произвольные и отличные друг от друга координаты. Можно например легко сделать ролик в котором при наведении мыши в один угол, что-то изменится в другом углу, а при щелчке что-то произойдет в третьем. Совсем не обязательно заполнять ключевыми кадрами и объектами все ячейки символа типа кнопка - давайте например вставим объект только в отсек Hit. Помнится все наши объекты из остальных символов можно уместить с прямоугольник 7 клеток шириной и 2 высотой. Попробуем нарисовать такой прямоугольник в отсеке Hit. Для начала конечно же нужно вставить ключевой кадр (F6) в этот отсек. Для рисования прямоугольников у нас есть специальный инструмент (под буквой A).

В панели свойств этого инструмента можно изменить толщину и цвет линий, заливку скругление углов и т.д. Постарайтесь добиться картины близкой к той, что показана на рисунке. Отгадайте какого типа объект появился у нас в ключевом кадре отсека Hit? Да это действительно объект типа рисунок. Только их здесь 5 штук :) Каждая линия в отдельности является объектом и заливка это тоже Рисунок. Теперь давайте возьмем инструмент "стрелка" проведем им мимо черной линии, о тех значках что появляются ниже собственно стрелки и об искажении стрелкой символов типа рисунок мы поговорим (я надеюсь) следующей главе, а пока нас будет интересовать только то, что при одиночном щелчке на линии выделится только одна, а при при двойном щелчке все линии нашего рисунка. Давайте выделим их и удалим нафиг :) У нас остался только желтый прямоугольник - именно он и будет играть роль области отслеживающей положение мыши. Хорошо отработанным движением вернемся к редактированию сцены (помните как ? :) и вставим в нее еще один слой. Назовем его Mouse и передвинем в самый низ тайм-лайн. Затем вставим в этот слой 3 обьекта сделанных из символа Knopka. Каждый из этих обьектов совместим со словами нашего меню. В конце этой титанической работы у нас должно получится что-то вроде вот этого.

Не нужно пугаться что в окошке Library не видно нашего желтого прямоугольника :) Хватайтесь за крестик и тащите его в рабочую область. Легко заметить что области реакции на действия мыши имеют голубоватый цвет. Осталось назначить действия этим областям. Вот и прозвучало слово "Действия".
Это понятие является одним из самых важных и часто используемых при создании cтраниц с применением Flash-технологии. Действия являются одним из свойств объектов сделанных из символов типа Кнопка (правая кнопка/Properties). Кроме этого некоторые действия можно задать и ключевым кадрам. Давайте прямо сейчас этим и займемся. Перейдем к редактированию символа Links и в тайм-лайн выберем свойства первого ключевого кадра слоя Metki

После этого присвоим этому кадру метку "Start"

и в разделе Действий щелкнув на "+" выберем Stop

Это значит что в самом начале загрузки объекта сделанного из этого символа, вся его анимация прекратится остановившись в самом первом кадре. Теперь давайте присвоим метку "1-2" кадру номер 5 слоя Metki, метку "2-1" 15-му кадру и действия Stop без меток кадрам 10 и 20

Легко заметить, что кадры с действием помечаются буквой "a", а кадры с меткой красным флажком (это же в принципе можно было бы сделать и в слое Work, но здесь мы выделили действия и метки в отдельный слой исключительно для наглядности). А А теперь попробуйте самостоятельно выставить все те же самые действия и метки в слое Metki символов News и Mail. После выполнения этих несложных действий давайте вернемся к редактированию основной сцены и присвоим имена (Instance Name) объектам участвующим в нашем ролике. Сделать это легче всего из меню правой кнопки/Properties обьектов типа Символ.

Назовем к примеру самый левый объект Linki, средний - Novosti, а правый - Pochta. Хотя в этом меню отображаются все символы из нашего ролика, для каждого из них нужно задавать имя по отдельности (т.е. правой кнопкой на слове Ссылки - Свойства - задаем имя - Ok - правой кнопкой на слове Новости - Свойства и т.д.). Кроме этого необходимо очень внимательно следить за выделением кадров какого-либо слоя в тайм-лайн. Если после очередного щелчка правой кнопкой окажутся выделенными кадры из слоя Mouse, значит вы промахнулись (да, я специально посоветовал вам выбрать область реакции на мышь, очень похожего на остальные объекты размера - тренируйтесь :) Ну что ж... Будем считать что вы успешно справились и с этой задачей (но все равно проверьте правильность еще разок :) Кстати предполагается что к этому моменту вы уже хорошо освоились в среде Flash, поэтому инструкции все короче а картинок все меньше.
Пришла пора закончить наконец подготовительные работы и приступить к заданию действий для областей реакции на мышь. Для этого давайте войдем в меню свойств полупрозрачного голубого объекта под словом Ссылки (точно выделены кадры нижнего слоя в тайм-лайн ?:). Т.к. это объект типа кнопка у него имеется закладка действий точно такая же как и в свойствах ключевых кадров (хотя действия немного другие - для кадра нельзя задать реакцию на события мыши). Вошли? Теперь знакомым движением жмем на "+" , выбираем "On MouseEvent" (это наверное понятно почему :) и ставим галочку в окошке Roll Over (указатель мыши на объекте). Только что мы сказали когда нужно выполнить действие, теперь нужно определить какое действие и с каким объектом. Сначала определим второе. В тот момент когда выделена верхняя строка с окне списка действий, нажмем снова "+" и выберем "Tell Target" (задать цель)и в правом окошке два раза щелкнем на слове "Novosti"

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

О ней мы поговорим позже(если только у меня хватит времени и терпения :), пока там все должно быть именно в таком положении в каком показано на рисунке. И теперь (выделена именно 2-я строка) нажмем еще раз "+" чтобы наконец определить какое действие будет выполнено. Выбираем Go To и делаем картину похожей на вот эту

Из списка действий можно легко понять, что при наведении мыши на область под словом Ссылки задается цель (объект сделанный из символа News) и т.к. этот объект у нас содержит несколько кадров происходит переход к метке "1-2" этого символа и проигрываются все следующие кадры после этой метки пока в каком-либо кадре не встретится действие Stop. Если заглянуть в тайм-лайн символа News, можно убедится что после наведения мыши на эту активную область слово Новости превратится в News и остановится на этом слове. В принципе можно было в действиях указать не метки в тайм-лайн символа News, а конкретный номер кадра - 5, но мы ведь тут учимся и я вам специально обещал массу лишних телодвижений :)
И так мы определили какие действия произойдут при наведении мыши на эту область экрана, теперь давайте определимся что случится в момент ухода мыши из этой области. Постарайтесь сами придумать последовательность действий, которая приведет вас примерно вот к такой картине

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

При наведении мыши на эту область изменяться будут сразу 2 объекта. А для области под словом Письма задайте те же самые действия что и для области под словом Ссылки. Это действительно сложная работа для начинающих, поэтому не торопитесь, почаще сверяйтесь с рисунками и после того как все закончите, можете полюбоваться на практически законченный ролик нажав Ctrl+Enter. Теперь можно на него не только любоваться тут , но проэкспортировать его в .swf файл (File/Export Movie) и вставить в интернет страничку. Правда толку от такого ролика будет мало...

О том как его сделать более функциональным а так же еще о некоторых вещах мы поговорим во второй главе. А пока начинайте чувствовать себя уже слегка знатоком и поэкспериментируйте с этой замечательной программой сами :)

P.S.Или наконец почитайте хелп :)


Macromedia Flash

Подборка 1

  • Введение
  • Основные типы графики
  • Терминология и интерфейс. Часть 1
  • Терминология и интерфейс. Часть 2
  • Терминология и интерфейс. Часть 3
  • Инструменты рисования. Часть 1
  • Анимация
  • Чем питается Flash?
  • Flash. Часть 1. Широко открытые глаза
  • Flash. Часть 2. Теория - что б она провалилась!
  • Flash. Часть 3. Пора подвигать мышкой
  • Flash. Часть 4. Цели, действия и метки

InfoNET

Список использованых источников

Авторам

За следующими выпусками обращайтесь на сайт!


Введение

Интернет, существует уже достаточно давно. Вначале, это были простые странички текста, лишь слегка затронутые разметкой HTML и гипер-ссылками. Но, ничто не меняется так быстро как Интернет. Стали совершенствоваться и развиваться стандарты HTML, появляться новые форматы графических файлов и новые технические возможности. Значительно увеличилась пропускная способность каналов связи и возможности самих пользователей. Производители броузеров, тоже не оставались в стороне, совершенствуя свои детища и, добавляя порой ни с чем не совместимые, сервисы. Появилась относительная интерактивность, Java, VB, Perl, RealAudio и Video, mp3, mp4, QuickTime и т.д. и т.п. Но, до сих пор для создания качественного и красивого сайта было доступно немногочисленным магистрам-cкриптов и вершителям cgi, требовало значительных временных затрат и терпения посетителей сайтов на ожидания загрузки, зачастую простенького, спецэффекта.

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

Судя по скорости развития сайтов с Flash во всем мире, следует ожидать бурного наводнения данной технологией в Рунете в ближайшие полгода. Очень хочется надеяться, что не произойдет тогоже, что и с анимированным gif и Java. Сейчас, множество сайтов, особенно начинающих Web-мастеров, больше похожих на бразильский карнавал с фейерверками и хлопушками, чем на качественный web-ресурс. Не хочется, что бы Flash постигла та же участь.

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

Далее


Список использованных источников

Павел Лапин, E-mail:murmik@mail.ru, Россия, Мурманск
Сайт - Учебный курс Flash 4
Статьи: Введение, Основные типы графики, Терминология и интерфейс (ч.1,2,3), Инструменты рисования (ч.1)

Рубен Сардарян, rubencho@mtu.ru
Статьи:Анимация

Зольнов Алексей, sdfz@newmail.ru
Статьи:Чем питается Flash?