Тег <EMBED> </EMBED> означает, что в это место на странице сайта будет помещена флэш-мультипликация.
Его параметры:
SRC="Untitled-002.swf" означает, что будет помещён файл Untitled-002.swf.
WIDTH=360 HEIGHT=288 означает, что для флэш-мультипликации выделена прямоугольная область размерами 360 точек по горизонтали и 288 точек по вертикали. Если размер Untitled-002.swf меньше или больше, чем 360 х 288 точек, мультипликация будет пропорционально увеличена или уменьшена. При этом, если соотношения сторон области, выделенной для мультипликации и файла Untitled-002.swf не равны, в область могут попасть элементы с рабочего стола.
play=false loop=true означает, что проигрывание мультипликации выключено, а зацикленность проигрывания включена.
quality=best означает, что включено высшее качество отображения мультипликации, когда сглажены края векторных объектов.
pluginspage="http://www.macromedia.com/go/getflashplayer" является приглашением на сайт компании Макромедия, если у вас не установлен проигрыватель флэшек. Зайдите на этот сайт и установите этот проигрыватель.
Как мы уже говорили выше, векторная графика имеет по сравнению с растровой как преимущества, так и недостатки.
Какие же преимущества и недостатки имеет векторная графика?
Из недостатков только один — неестественность. Все векторные объекты кажутся вырезанными из картона. Однако с этим можно бороться градиентными заливками. Можно также «скрестить» векторную и растровую графику, окрасив векторные объекты растровами картинками или, как говорят мастера трёхмерной мультипликации, «одеть векторыне объекты в растровые шкурки».
Преимущества же векторной графики над растровой такие:
Во-первых, масштабируемость. Объекты можно увеличивать или уменьшать до бесконечности, и они от этого не будут «портиться».
Во-вторых малый объём.
В-третьих, векторная графика уже в момент своего создания делится на объекты в соответствии с пожеланиями художника. Именно это обстоятельство и вызывает соблазн санимировать её, т. е. заставить объекты двигаться относительно друг друга.
Существуют и довольно широко распространены две программы создания двухмерной векторной мультипликации: Корел Рэйв и Макромедия Флэш. Ниже, начиная с этого момента, речь пойдёт о Макромедии Флэш.
МУЛЬТФИЛЬМ-ПЕРЕКЛАДКА,
НАЧАЛЬНЫЕ СВЕДЕНИЯ О МАКРОМЕДИИ ФЛЭШ:
РАБОЧЕЕ ПРОСТРАНСТВО ХУДОЖНИКА-МУЛЬТИПЛИКАТОРА
Макромедия Флэш моделирует процесс создания мультфильмов-перекладок. Естественно, здесь уместно рассказать о том, что такое мультфильм-перекладка (или просто перекладка).
Перекладка создаётся при помощи специального аппарата — фотокамеры (рис. 1-1-1) на штативе (рис. 1-1-2). Под штативом лежит площадка (рис. 1-1-3). Поле зрения фотокамеры равно этой площадке, и она называется сценой. На эту площадку помещают один или несколько листов прозрачной плёнки с нарисованными на них картинами. Ниже всех помещают фон (рис. 1-1-4), причём этот фон может также состоять из нескольких листов плёнки, например, из неба, леса и поля.
Далее на пленку-фон помещают плёнки с героями мультфильма (персонажами, рис. 1-1-5). Персонаж не обязательно должен быть живым существом. Это может быть дерево, пень, кастрюля, главное — чтобы он двигался в мультфильме. Каждый персонаж нарисован на отдельном листе прозрачной плёнки, чтобы его можно было перемещать отдельно от других персонажей. Из этого следует также, что, если два персонажа нарисованы на одном листе прозрачной плёнки, то с точки зрения технологии мультипликации это уже один персонаж.
Персонаж может быть простым и сложным. С простым персонажем ничего не происходит. А сложный персонаж в своём составе имеет движущиеся части, например, человечек имеет голову, ручки и ножки. Тогда художник-мультипликатор (а вы становитесь художниками-мультипликаторами, взяв в руки Макромедию Флэш) собирает сложного персонажа из нескольких листов прозрачной плёнки, и в состав персонажа-человечка будут теперь входить другие персонажи: голова, ручки, ножки и другие движущиеся части, каждая нарисована на своей плёнке.
Собирая мультфильм из плёнок, на каждой из которых нарисован один персонаж, собирая из простых персонажей сложные, художник-мультипликатор переходит из системы координат площадки под штативом фотокамеры (из системы координат сцены) в систему координат плёнки, которая движется по этой площадке (в систему координат персонажа), и, если эта плёнка содержит составного персонажа, перемещается дальше, в систему координат плёнки, на которой нарисована движущаяся деталь персонажа.
Но, вернёмся в начало. Начнём с того момента, когда на площадке под камерой свалены в кучу листы прозрачной плёнки с нарисованными на них персонажами. Каждая плёнка занимает свой слой.
Как анимируются персонажи?
Художник-мультипликатор сдвигает лист плёнки и делает кадр. И так до тех пор, пока не закончит весь мультфильм.
Рис. 1-1
Поскольку Макромедия Флэш моделирует создание перекладок, нам нужно в ней найти эти самые камеру, площадку под штативом (сцену) и листы прозрачной плёнки с нарисованными на них картинами.
Рис. 1-2
Площадка под штативом, на котрую вы можете в любой момент положить лист прозрачной плёнки, назвывается сценой (stage, стэйдж, рис. 1-2-1). В данном случае она черная. В принципе сцена может быть любого цвета, какой пожелаете, но в модели RGB. По всему периметру сцена окружена рабочим столом (рис. 1-2-2), на котором могут храниться детали мультфильма, которые не должны попасть в кадр.
В самом низу экрана находится линейка timeline (таймлайн) (рис. 1-2-5). Сразу обращаю ваше внимание на её левую сторону, там — слои (рис. 1-2-8). В данном случае там только один слой (layer, лэйер). Возьмите себе за правило помещать в каждом слое только по одному листу плёнки (по одному персонажу). Это сразу избавит вас от многих проблем («Почему у меня объекты не премещаются так, как я хочу?»). Справа — киноленты, которые состоят из отснятых кадров мультфильма. Легко заметить, что для каждого слоя существует своя кинолента (последовательность кадров). Эти ленты синхронно проходят через кинопроектор.
В ЭТОМ СОСТОИТ ПЕРВОЕ ГЛАВНОЕ ОТЛИЧИЕ ПЕРЕКЛАДКИ ФЛЭШ ОТ ДОКОМПЬЮТЕРНОГО СПОСОБА СОЗДАНИЯ МУЛЬТФИЛЬМОВ ТАКОГО РОДА.
Прочие элементы экрана Макромедии Флэш
Слева располагается панель инструментов (рис. 1-2-3). Под рабочим столом находится панель (рис. 1-2-4), на которой в зависимости от выбранной закладки можно видеть контекстное меню свойств инструмента, кадра, векторного объекта или всего мультфильма целиком (properties, про'пертис), меню численного задания трансформаций объекта (transform, трэнсфо'рм), информацию о положении объекта в координатах сцены (info, инфо), инструмент точного позиционирования объекта (align, элайн), и текстовый редактор для вставки команд на языке экшон скрипт (о нём позже). Сверху, как обычно, главное меню (рис. 1-2-6). Справа осталось место (рис. 1-2-7) для палитр: эпизоды (scene, син), история (history, хистори), цвет (color, колор) и библиотека плёнок с песонажами (library, лайбрэри).
Из всего вышесказанного следует, что задачу ОВЛАДЕНИЯ программой Макромедия Флэш можно разбить на этапы:
1. Сначала надо научиться РИСОВАТЬ на листе ПЛЁНКИ или, если вам неудобно
творить во Флэше, ЭКСПОРТИРОВАТЬ на ПЛЁНКУ графику из других программ.
2. Потом надо научиться анимировать артистов.
3. И в конце уже можно позаниматься языком Экшон Скрипт, чтобы добавить мультипликации интерактивности.
ОСНОВНЫЕ ХАРАКТЕРИСТИКИ МУЛЬТФИЛЬМА ФЛЭШ
Эти характеристики я рекомендую обдумать и задать в самом начале работы, чтобы потом их не менять:
1. Частота кадров мультфильма.
2. Размер и цвет сцены.
3. Уровень используемого языка Action Script (Экшон скрипт).
КАК СОЗДАТЬ ПЕРВЫЙ ПУСТОЙ ЛИСТ ПРОЗРАЧНОЙ ПЛЁНКИ И НАНЕСТИ НА НЕГО ИЗОБРАЖЕНИЕ?
1. Каким-либо способом нарисуйте изображение прямо на сцене.
2. Выделите все объекты, которые вы нарисовали и создайте символ. Символ — тот же персонаж в терминологии Флэш.
А где же здесь плёнка, спросите вы? Она образовалась, как только вы создали символ, но вы не видите её границ. Вы не можете ни увидеть её край, ни схватиться за неё в каком-либо неопределённом месте, разве только не схватившись за объект, который на ней нарисован. Я особо хочу обратить ваше внимание на то, что, когда вы перемещаете символ по сцене или деформируете его, на самом деле вы перемещаете или деформируете лист плёнки, на котором он находится.
КАК ДОРИСОВАТЬ ЧТО-ЛИБО НА ПЛЁНКЕ?
Войдите в символ и дорисуйте что-нибудь.
КАК УДАЛИТЬ ЛИСТ ПЛЁНКИ
Удалите символ.
ПЕРЕМЕЩЕНИЕ ЭКРАНА ЗА МОНИТОРОМ, НАЕЗД И ОТКАТ КАМЕРЫ ОТ ЭКРАНА, ЭКСПЕРТНЫЙ РЕЖИМ
Чтобы наехать камерой на сцену, нажмите «Ctrl+Space (контро'л спейс)» и щелкните мышкой.
Чтобы отъехать от сцены, нажмите «Ctrl+Alt+Space (контро'л олт спейс)» и щелкните мышкой.
Чтобы перемещать сцену и рабочий стол за монитором, удерживайте «Alt (олт)» и пермещайте мышку с нажатой левой кнопкой.
Чтобы убрать все панели с экрана, нажмите «F4». Чтобы вернуть убранные панели на экран, снова нажмите «F4».
НАСТРОЙКА ВИДА МОНТАЖНОЙ ЛИНЕЙКИ, ПЕРЕМЕЩЕНИЕ ПО МОНТАЖНОЙ ЛИНЕЙКЕ,
ОПЕРАЦИИ С КАДРАМИ
Для различных операций с кинолентами служит монтажная линейка (рис. 1-3) На ней можно стирать кадры, растягивать кадры, вырезать кадры, добавлять пустые кадры и переносить объекты из кадра в кадр. СЛЕДУЮЩЕЕ ВАЖНОЕ ОТЛИЧИЕ МУЛЬТФИЛЬМА ФЛЭШ ОТ ДОКОМПЬЮТЕРНОЙ ПЕРЕКЛАДКИ СОСТОИТ В ТОМ, ЧТО В КАДРАХ КОМПЬТЕРНОГО МУЛЬТФИЛЬМА НАХОДЯТСЯ НЕ ФОТОГРАФИИ ОБЪЕКТОВ СЦЕНЫ, А САМИ ОБЪЕКТЫ.
Рис. 1-3
1. Стирание кадра.
Предположим, вы хотите уничтожить персонаж в кадрах 2 и 3. Выделите кадры 2 и 3 и нажмите «Delete (дэли'т)» (рис. 1-4-1).
Рис. 1-4-1
2. Растяжение кадра.
Предположим, вы хотите растянуть первый кадр до позиции 4. Выделите первый кадр и 3 раза нажмите «F5 (эф файв)» или в контекстном меню операций с кадрами выберите «Insert frame (инсё'рт фрейм)» (рис. 1-4-2).
Рис. 1-4-2
3. Вырезание кадра.
Предположим, вы хотите вырезать кадр №3. Выделите кадр 3 и нажмите «Shift+F5 (шифт эф файв)» или в контекстном меню операций с кадрами выберите «Remove frames (риму'в фреймс)». Флэш сама склеит киноленту после вырезания (рис. 1-4-3).
Рис. 1-4-3
4. Добавление пустого кадра.
Предположим, вы хотите между кадрами 2 и 3 вставить 2 пустых кадра. Добавление пустого кадра из воздуха во Флэше невозможно. Сначала из любой другой киноленты вырежьте 2 пустых кадра. Для этого выделите пустые кадры и нажмите «Ctrl+Alt+X (контро'л олт экс)» или в контекстном меню операций с кадрами выберите «Сut frames (кат фреймс)». От этой команды Флэш из той киноленты, откуда Вы вырезали кадры, эти кадры не удалит, а удалит только их содержимое. Но в кармане появятся два пустых кадра. Далее выделите кадр №2 на той киноленте, куда будете вставлять кадры и растяните его на 1 кадр. Выделите кадр №3 и НА ЕГО МЕСТО поставьте два пустых кадра. Для этого нажмите «Ctrl+Alt+V (контро'л олт ви)» или в контекстном меню операций с кадрами выберите «Paste frames (пэйст фреймс)» (рис. 1-4-4).
Рис. 1-4-4
5. Перенос персонажа из кадра в кадр.
Предположим, Вы хотите перенести дачу из второго кадра в четвертый. Выделите второй кадр и нажмите «Ctrl+C (контро'л си)». Выделите четвертый кадр и нажмите «Delete (дэли'т)» и «Ctrl+V (контро'л ви)» (рис. 1-4-5).
Рис. 1-4-5
УРОК ВТОРОЙ
СОЗДАНИЕ ПЕРСОНАЖА. НАНЕСЕНИЕ МАЗКОВ КИСТИ
Рис. 2-1.
Рис. 2-2.
Рис. 2-3.
Рис. 2-4.
Вы заготовили лист прозрачной плёнки и захотели что-то на нём нарисовать.
Базовой фигурой во Флэше, аналогичной кривой Безье в Кореле или Иллюстраторе, является МАЗОК КИСТИ, который можно создать и расположить в любом месте экрана и рабочего стола двумя инструментами, вернее парой инструментов и инструментом:
1. ПЕРОМ (with Pen tool, уис пэн тул, им создаем контур так же, как в Кореле Дро кривую Безье, рис. 2-1-1) + ЗАЛИВКОЙ (with Paint Bucket tool, уис пэйнт бакет тул, рис. 2-1-2) и
2. КИСТЬЮ (with Brush tool, уис браш тул, чрезвычайно удобный инструмент в программе Макромедия Флэш, рис. 2-1-3).
Мазок кисти можно сравнить с кривой Безье в Кореле или Иллюстраторе. Подобно тому, как кривая Безье в Кореле или Иллюстраторе является простейшей фигурой, и все остальные фигуры могут быть преобразованы в кривую Безье, а обратное преобразование невозможно, точно так же мазок кисти является простейшей фигурой в программе Макромедия Флэш, и все другие фигуры также могут быть необратимо преобразованы в мазок кисти.
Здесь уместно подчеркнуть различие между мазком кисти во Флэше и кривой Безье в Кореле. Если в Кореле кривая Безье может иметь или не иметь обводку, то во Флэше мазок кисти обводки не имеет.
Создание МАЗКА КИСТИ парой инструментов ПЕРО + ЗАЛИВКА.
Этим способом вы сначала создаете замкнутый контур, потом заливаете его.
Но, перед тем, как начать построение (именно построение, а не рисование) контура МАЗКА КИСТИ, необходимо задать толщину и цвет контура. Цвет контура можно задать в палитре ЦВЕТ по трем каналам RGB, а также можно задать общее свечение трех каналов и прозрачность (альфа-канал). Толщину контура можно задать в точках экрана в контекстной палитре СВОЙСТВ инструмента. Имеются в виду точки монитора в масштабе 100%. Если, к примеру, вы отдалитесь от ЭКРАНА в 2 раза и потом уже проведете контур, его толщина не увеличится в два раза.
В отличие от Корела Дро перед построением контура надо заранее решить, будете ли вы замыкать контур. Советую ответить на этот вопрос положительно. В принципе контур может быть и не замкнут, но эти сведения уже относятся к следующим урокам не для самых маленьких. Если вы решили замыкать контуры при их построении, нажмите на магнит (рис. 2-1-4), котрый появляется при выборе инструмента ПЕРО. Нажав на этот магнит, вы включите привязку объектов друг к другу и к самим себе: теперь управляющие точки кривой будут притягиваться друг к другу. Когда последняя точка кривой притянется к первой, кривая замкнется. Построив контур, отключите привязку.
Теперь мы имеем контур, который можно залить инструментом ЗАЛИВКА. В палитре ЦВЕТ задайте цвет заливки и ткните инструментом ЗАЛИВКА внутрь контура. У нас появился новый объект МАЗОК КИСТИ, который, в отличие от Корела, находится на одном уровне с контуром. Контур же можно убить.
Создание МАЗКА КИСТИ инструментом КИСТОЧКА.
Этим инструментом вы сразу наносите МАЗОК КИСТИ.
Имеются 8 кисточек диаметром 2, 4, 6, 8, 10, 12, 14 и 16 точек монитора (рис. 2-5). Если вы желаете рисовать кисточкой диаметром 5 точек, возьмите кисточку диаметром 10 точек и увеличьте масштаб до 200%.
Рис. 2-5
Инструмент кисточка имеет регулируемую степень сглаживания. Cглаживание это позволяет убрать дрожание и мелкие перемещения ручки графического планшета. Здесь я попытался написать японскую букву «су» с разными степенями сглаживания (рис. 2-6). Видно, что сглаживание должно быть в пределах 50–70%.
Рис. 2-6
УРОК ТРЕТИЙ
РЕДАКТИРОВАНИЕ МАЗКОВ ПО УПРАВЛЯЮЩИМ ТОЧКАМ И ДРУГИМИ МАЗКАМИ КИСТОЧКИ
Редактирование мазков кисти по управляющим точкам.
В отличие от Корела при редактровании мазков в Макромедии Флэш по управляющим точкам приходится пользоваться не одним, а тремя инструментами:
В отличие от Корела Дро нельзя разбивать точки. Это объяснимо, потому что заливка разбитого контура невозможна.
1. Удаление точки.
Точку можно удалить инструментом УКАЗАТЕЛЬ УТ.
2. Добавление точки.
Только инструментом добавления УТ.
3. Конвертирование точек.
В отличие от Корела Дро, где УТ бывают следующих видов:
1. Точка без ручек (line, лайн) (рис. 3-1-1).
2. Точка с ручками на одной прямой (curve smooth, кёрв смут) (рис. 3-1-2).
3. Точка с ручками под углом (curve cusp, кёрв касп) (рис. 3-1-3).
4. Точка с симметричными ручками на одной прямой (curve symmetrical, кёрв симме'трикал) (рис. 3-1-4).
во Флэше отсутствует тип №4.
Естественно, у крайних точек не может быть двух ручек.
Рис. 3-1
1. Конвертирование из точки типа №1 в точку типа №2.
Возьмите инструмент КОНВЕРТИРОВАНИЕ УТ и вытяните из точки ручки.
2. Конвертирование из точки типа №2 в точку типа №3.
Возьмите инструмент УКАЗАТЕЛЬ УТ и с нажатой клавишей Alt переместите ручку.
3. Конвертирование из точки типа №3 в точку типа №2.
Инструментом УКАЗАТЕЛЬ УТ перемещайте ручку УТ, пока она не окажется на одной прямой с противоположной ручкой.
4. Конвертирование из точки типа №2 в точку типа №1.
Ткните по точке инструментом КОНВЕРТИРОВАНИЕ УТ.
6. Объединение точек.
Включите привязку объектов к объектам и УКАЗАТЕЛЕМ УТ переместите одну точку на другую. Кнопка с магнитом отсутствует, когда выбран инструмент УКАЗАТЕЛЬ УТ. Временно переключитесь на инструмент УКАЗАТЕЛЬ ОБЪЕКТОВ и включите привязку.
Редактирование мазков кисти другими мазками.
В отличие от Корела Дро все мазки кисти в программе Макромедия Флэш находятся на одном уровне, поэтому наложение их друг на друга невозможно. Новые мазки взаимодействуют со старыми. Мазки одного цвета объединяются в одну фигуру, а новые мазки другого цвета затирают старые мазки.
Чтобы увеличить мазок кисти, его надо дорисовать кисточкой той же краской.
Чтобы уменьшить мазок кисти или выполнить в нем отверстие, мазок надо затереть новым мазком другим цветом, а потом удалить новый мазок.
Вырезание и залатывание отверстий парой инструметов ПЕРО + ЗАЛИВКА.
1. Cоздайте контур будущего отверстия.
2. Если потребуется, отредактируйте его.
3. Залейте контур каким-нибудь цветом, отличным от цвета основной фигуры.
4. Убейте контур.
5. Убейте новый мазок кисти.
КОНТУР И ЗАЛИВКА
В этой части рассказа о Макромедии Флэш снова уместно сравнить её с Корелом Дро.
БАЗОВОЙ фигурой в Кореле является кривая Безье. Любая фигура (примитив) может быть превращена в кривую Безье. Обратное движение невозможно. Эта кривая Безье в Кореле может иметь или не иметь контур (обводку). А если имеет, то ЛЮБОЙ толщины.
В Макромедии Флэш БАЗОВОЙ фигурой является заливка (мазок кисти). Контур (обводка) в Макромедии Флэш является самостоятельной фигурой. В заблуждение вводит то обстоятельство, что:
1. Существует несколько способов создать заливку вместе с обводкой.
2. Обводка некоторое время может быть прилеплена к заливке.
Рис. 3-2
Как создать мазок кисти без обводки?
Инструментом «Кисточка» (рис. 3-2а).
Как создать обводку отдельно?
Инструментом «Перо».
Как создать мазок кисти с прилепленной к нему обводкой?
1. Создать предопределённую фигуру или примитив с заливкой и обводкой.
2. Создать обводку пером и залить обводку (рис. 3-2б).
Как отлепить обводку от заливки?
Два раза щёлкнуть по обводке и отодвинуть её в сторону. Или наоборот, отодвинуть заливку (рис. 3-2в, г).
Как прилепить к заливке обводку?
Поместить заливку в обводку (рис. 3-3, 3-4).
Как из обводки сделать заливку?
Modify - Shape - Convert Lines to Fills (Модифай - Шейп - Конверт Лайнс ту Филлз) (рис. 3-2д).