UMKD_KSIM
.pdf
<td bgcolor=«#FFCC33»>1x1</td> <td bgcolor=«#336699»>1x2</td> <td bgcolor=«#FFCC33»>1x3</td> </tr>
<tr>
<td bgcolor=«#336699»>2x1</td> <td bgcolor=«#FFCC33»>2x2</td> <td bgcolor=«#336699»>2x3</td> </tr>
</table>
Вот, что у нас получилось:
Высота и ширина ячеек таблицы
Вспомним о параметрах height и width. Их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
<table>
<tr>
<td height=«35» width=«50» bgcolor=«#FFCC33»> 1x1 </td> <td width=«50» bgcolor=«#336699»> 1x2 </td>
<td width=«50» bgcolor=«#FFCC33»> 1x3 </td> </tr>
<tr>
<td height=«35» width=«50» bgcolor=«#336699»> 2x1 </td> <td width=«50» bgcolor=«#FFCC33»> 2x2 </td>
<td width=«50» bgcolor=«#336699»> 2x3 </td> </tr>
</table>
Причем, высота задается только для одной ячейки в ряду, т.к. если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд – это не ячейка, поэтому я задала в нашем примере ширину для каждой ячейки (столбца)).
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
90
Теперь нам осталось лишь выровнять содержимое внутри таблицы: <table>
<tr>
<td height=«35» width=«50» bgcolor=«#FFCC33»> <center> 1x1 </center> </td>
<td width=«50» bgcolor=«#336699»> <center> 1x2 </center> </td> <td width=«50» bgcolor=«#FFCC33»> <center>1x3 </center> </td> </tr>
<tr>
<td height=«35» width=«50» bgcolor=«#336699»> <center> 2x1 </center> </td>
<td width=«50» bgcolor=«#FFCC33»> <center> 2x2 </center> </td> <td width=«50» bgcolor=«#336699»> <center> 2x3 </center> </td> </tr>
</table>
В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются – вложенные таблицы). И тэги, которые мы применяем для форматирования текста – все те же.
Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке.
Вертикальное выравнивание содержимого таблицы, т.е. не только ровно посередине ее (как по умолчанию), а еще вверху или внизу, задается аттрибутом – valign.
valign=«middle» – содержимое конкретной ячейки будет находится в середине ячейки;
valign=«top» – содержимое конкретной ячейки будет находится в наверху ячейки;
valign=«bottom» – содержимое конкретной ячейки будет находится в внизу ячейки.
Объединение ячеек
Параметр colspan – объединяет ячейки в ряду, а rowspan – объединяет ячейки в столбце. Эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда).
В этом примере мы использовали параметр colspan=2, прописав его
91
для ячейки 1х1. Код будет выглядеть следующим образом: <table>
<tr>
<td height=«35» bgcolor=«#FFCC33» colspan=«2»> <center>1x1</center> </td>
<td width=«50» bgcolor=«#336699»> <center>1x2</center> </td> </tr>
<tr>
<td height=«35» width=«50» bgcolor=«#336699»> <center>2x1</center> </td> <td width=«50» bgcolor=«#FFCC33»> <center>2x2</center> </td>
<td width=«50» bgcolor=«#336699»> <center>2x3</center> </td> </tr>
</table>
Обратите внимание, на то, что параметр width для ячейки 1х1 в нашем примере не указан, если вас так тянет задавать этот параметр, то в нашем примере для ячейки 1х1 его надо было бы прописать равным 100 пикселям, т.к. все-таки ячейка 1х1 длиннее других в два раза.
Обратите внимание, в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, т.к. ячейка 1х1 равна сама по себе двум ячейкам по длине (что мы и указали параметром colspan). Если бы мы прописали ячейку 1х3, тогда у нас получилась бы такая ерунда:
Теперь, когда мы разобрались с параметром colspan, разберемся с параметром rowspan. Например, надо создать следующую таблицу (обратите внимание, должна исчезнуть ячейка 2х3).
Принцип действия тот же: <table>
<tr>
<td height=«35» width=«50» bgcolor=«#FFCC33»> <center> 1x1 </center> </td>
<td width=«50» bgcolor=«#336699»> <center> 1x2 </center> </td>
<td width=«50» bgcolor=«#FFCC33» rowspan=«2»> <center>1x3 </center> </td>
</tr>
92
<tr>
<td height=«35» width=«50» bgcolor=«#336699» > <center> 2x1 </center> </td>
<td width=«50» bgcolor=«#FFCC33»> <center> 2x2 </center> </td> </tr>
</table>
Границы ячеек
Итак, мы остановились на такой таблице:
Для изменения ширины пространства между ячейками таблицы используется атрибут cellspacing.
Чтобы избавиться от пространства между ячейками cellspacing=0
<table cellspacing=0> <tr>
<td height=«35» bgcolor=«#FFCC33» colspan=«2»> <center>1x1</center> </td>
<td width=«50» bgcolor=«#336699» rowspan=«2»> <center>1x2</center> </td>
</tr>
<tr>
<td height=«35» width=«50» bgcolor=«#336699»> <center>2x1</center> </td> <td width=«50» bgcolor=«#FFCC33»> <center>2x2</center> </td>
</tr>
</table>
Можно наоборот, увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:
93
Рамки
Рамка вводится параметром border. Зададим рамку равную 3 пиксе-
лям:
<table border=«3»>
Выглядеть это будет вот так:
таблица с рамкой
Рамке можно задать цвет. Пусть он будет черный в нашем примере: <table border=«3» bordercolor=«#000000»>
таблица с рамкой
Лекция № 9. Введение во Flash технологии
Преимущества технологии и область использования
Все, кто так или иначе работает с компьютерной графикой, знают, что существуют два основных формата представления графических данных – растровый и векторный. Оба они по-своему хороши и имеют свои области применения, которые частенько пересекаются. При этом способы реализации растровой и векторной графики различны.
Растровая графика более проста в описании, поскольку является попросту набором цветных точек, расположенных в ячейках прямоугольной сетки координат. Объем информации пропорционален количеству точек, составляющих изображение, размеру картинки, количеству цветов в палитре. Причем нет особой разницы для картинки с большими сплошными цветовыми пятнами и картинки со сложными полутонами. Эти типы картинок допускают различные типы компрессии изображения, наиболее подходящие для каждого вида (здесь имеется в виду, скорее формат хранения картинки – Gif или Jpeg), но конечный результат отличается мало.
Масштабированию растровая графика поддается плохо. При увеличении картинки качество быстро ухудшается.
Векторная графика основана на совершенно иных принципах. В ее основе лежит отражение символьной стороны природы человеческого сознания. Векторное изображение строится из ограниченного числа сравнительно простых фигур. Кривые линии описываются простыми формулами.
Векторная графика масштабируется без особых ограничений и без потери качества. Однако с ростом детализации векторной картинки количество информации возрастает, и на определенном этапе векторная графика теряет свое преимущество компактности перед растровой графикой.
94
Еще сильнее это сказывается на анимации. Ведь алгоритмы обработки векторной графики требуют больше ресурсов компьютера и выполняются медленнее. С увеличением количества объектов скорость воспроизведения может начать уменьшаться. То есть объекты не будут успевать прорисовываться за время, отведенное для одного кадра.
Есть и еще один момент. Стандарты на векторную графику более сложные. Этот фактор наряду с другими всегда сдерживал развитие векторных форматов по сравнению с растровыми. И обычно новые технологические области осваивались сначала растровой графикой, а уже вслед за ней приходит вектор. Эта закономерность проявилась и в случае с Flashтехнологией. После появления в сети растра приход вектора в сеть был неизбежен. Также же неизбежно вслед за текстом в сеть пришла графика.
К чему же мы отнесем редактор Flash в свете выше изложенного? Если на время забыть об интерактивных и мультимедийных возмож-
ностях Flash, то с точки зрения работы с графикой можно сказать так: Flash – это прежде всего редактор двухмерной векторной анимации.
Именно для этого он изначально создавался и именно эта его функция реализована наилучшим образом. Без анимации Flash ничем особенно не выделялся бы на фоне других технологий. И анимационные возможности технологии Flash это как раз та область, в которой его преимущество не вызывает сомнений даже у оппонентов, например, у любителей Macromedia Director.
Векторная природа Flash-технологии не означает, что вы не можете использовать растровую графику. Можно использовать растровые изображения весьма гибко и удобно. Однако вы не можете их редактировать во Flash, кроме изменения некоторых параметров.
Редактирование растра Flash оставляет для других, более узко специализированных, профессиональных средств работы с растрами.
Вы можете использовать для ваших анимационных фильмов звук. Однако предварительную подготовку звуков лучше также выполнять в специализированных редакторах.
Сейчас уже наступил момент, когда Flash-анимации в сети можно найти очень много. Это могут быть анимационные фильмы с вполне проработанным сюжетом и длительностью до нескольких минут. Это могут быть небольшие анимированные Интернет-открытки. Все больше появляется анимационных фильмов с возможностью реакции на действия пользователя и нелинейным сюжетом.
Очень большие ожидания возлагаются на применение анимации для рекламы в сети. Исследования показывают, что анимированный баннер эффективнее аналогичной не анимированной версии. Flash позволяет создавать баннеры с великолепной анимацией, значительно превосходящей традиционную Gif-анимацию, оставаясь при этом в пределах принятых для баннеров ограничений на размер (для большинства баннерных сетей это
95
около 20 килобайт).
Не следует забывать про самое распространенное применение Flash в сети – множество анимированных элементов сайтов и целые сайты, построенные на Flash. Редкий Flash-сайт обходится без анимации.
Основные элементы интерфейса
Timeline (панель контроля времени)
Панель контроля времени – один из наиболее интенсивно используемых компонентов редактора. Он тем более важен при рассмотрении анимации. Однако мы пока не будем рассматривать особенности создания и управления фреймами (кадрами). Это будет рассмотрено позднее при разборе конкретных способов анимации на Flash. Для нас пока важнее то, как Flash работает со слоями, контроль над которыми также осуществляется в рассматриваемой панели.
Понятие слоя
Для многих понятие слоя (Layer) не является новым. Они есть во многих растровых и векторных редакторах. Назначение слоев состоит в разбиении общего изображения на отдельные части, которыми по отдельности управлять гораздо легче. В таких мощных пакетах как Adobe Photoshop даже цвета контролируются в отдельных слоях, называемых каналами
(Channels).
Это аналог калек в традиционной анимации. Также как кальки или листы целлулоида, слои накладываются один на другой и непрозрачные линии нижних слоев просвечивают сквозь прозрачный фон. Общее изображение содержит, таким образом, комбинацию изображений в разных слоях.
Для анимации слои важны еще и потому, что они позволяют создавать в каждом слое свою последовательность смены кадров. Например, если у вас есть фон в нижнем слое и персонаж в верхнем слое, то фон в нижнем слое может оставаться без изменений на протяжении всей сцены, в то время как персонаж будет обновляться в каждом кадре.
Если вы намерены нарисовать во Flash достаточно сложную картинку и хотите иметь возможность редактировать ее в любой момент без излишних нервных затрат, то вам не обойтись без слоев. Дело в том, что Flashредактор соединяет в себе свойства как векторных, так и растровых редакторов. И если в обычном векторном редакторе вы рисуете новую фигуру поверх другой, и они при этом сохраняют свою форму, то в редакторе Flash эти фигуры будут считаться отдельными объектами лишь до тех пор, пока вы не сняли выделение с последней рисуемой фигуры. После снятия выделения Flash соединяет линии всех пересекающихся фигур в одну и удаляет невидимые линии. Это действует при рисовании в одном слое.
Если вы рисуете новую фигуру в отдельном слое, то даже если под
96
ней в других слоях уже есть ранее нарисованные элементы, вы не рискуете тем, что они сольются помимо вашего желания в один элемент. Таким образом, слои в редакторе Flash играют гораздо более важную роль по сравнению с другими векторными редакторами графики.
Для эффективного рисования в редакторе Flash вам придется научиться пользоваться возможностями по изменению свойств слоя в окне контроля времени. Этих основных свойств всего три, но своевременное изменение их на разных этапах рисования позволит вам экономить много времени.
Видимость слоя
Для включения и выключения видимости слоя используется кнопка в виде точки, которая расположена под большой кнопкой в виде глаза. Глаз очень похож на аналогичную кнопку в Photoshop. Если нажатие на точку действует только на выбранный слой, то нажатие на кнопку со значком Глаза делает видимыми или невидимыми все слои в редактируемом элементе (сцена или клип). Если некоторые слои уже были невидимы, то невидимыми делаются все еще видимые слои.
Если у вас несколько слоев и некоторые элементы не видны за другими, расположенными в верхних слоях, то вы можете просто выключить любой из верхних слоев и спокойно работать с нужным вам элементом.
Следует сразу заметить, что при выключении видимости слоя объекты в нем никуда не исчезают из общей сцены. Они точно также будут видны при воспроизведении вашего фильма, как и раньше. Этот режим действует лишь во время рисования.
В выпадающем меню дублируются операции, привязанные к кнопкам, или вводятся некоторые дополнительные.
Например, команда Hide Others позволяет скрыть все слои, кроме выбранного. При выборе пункта меню Properties или при двойном клике на листок бумаги с завернутым краем на соответствующем слое можно открыть окно свойств слоя.
Блокировка слоя
Кнопка расположена во второй колонке свойств слоя. Эта функция запрещает редактирование выбранного слоя, но оставляет его видимым. Аналогично, как и с видимостью, вы можете выключать это свойство для каждого слоя отдельно или устанавливать сразу для всех слоев в окне редактирования.
На элементы в заблокированных слоях не действуют никакие операции выделения. Поэтому, если вы работаете с элементами одного слоя и хотите быть уверены, что при выделении не захватите объекты в других слоях, просто заблокируйте все слои нажатием на Замок, а потом разблокируйте нужный.
97
Режим отображения слоя
Контроль этого свойства имеет наибольшее значение для анимации. Это свойство переключает режим отображения слоя с нормального на контурный и наоборот.
Режим отображения без заливок может оказаться очень полезным. Он позволяет видеть насквозь весь стек объектов и лучше контролировать их взаимное расположение. Это полезно и при обрисовке по предварительно импортированному растровому изображению.
При анимации очень удобно видеть промежуточные фазы именно в контуре. Для каждого слоя можно установить свой цвет контура, что упрощает различение объектов в разных слоях в контурном режиме. Это делается в свойствах слоя..
Клипы и сцены
Если отдельный объект может представлять собой совокупность слоев, которые существенно упрощают редактирование, так и весь Flashфильм может быть логически разделен на совокупность сцен и клипов.
Понятие сцены
Сценой называется некая логически завершенная часть фильма, объединяющая в себе все необходимые для ее воспроизведения объекты. Метод разбиения фильма на сцены вовсе не является обязательным. Это удобно делать, если фильм достаточно длинный, чтобы не создавать нагромождение объектов в одной сцене.
Изначально в фильме есть только одна сцена. При необходимости добавления сцен, можно сделать это через меню Windows / Panels / Scene. При этом откроется окно со списком всех сцен фильма (вначале одна), рис. 2.5.
Тремя кнопками в нижней части окна можно сделать копию сцены, добавить новую сцену, удалить сцену. Мышью сцены можно перетаскивать и менять их порядок. Список сцен в окне Scene – это один из тех немногих списков, для которых порядок следования элементов имеет первостепенное значение. Двойным нажатием на строке с соответствующей сценой можно войти в режим переименования сцены. Имя может быть любым, состоящим из латинских букв и разрешенных для имен символов. Называть сцены лучше по смыслу, ориентируясь на их содержание. Это облегчает ориентирование, когда количество сцен становится существенным.
Для быстрого перехода между сценами можно использовать выпадающее меню в верхнем правом углу окна редактирования.
Понятие клипа (символа)
Если применять образное сравнение, то клип подобен кирпичу, из ко-
98
торого возводится все здание Flash-фильма. Именно на уровне клипов реализованы основные архитектурные решения технологии, отличающие ее от других.
Клипы существуют трех видов:
•Movie Clip;
•Button;
•Graphic.
Когда вы что-то рисуете в редакторе, то это еще не является клипом. Нарисованная фигура является просто объектом, состоящим из кривых и заливки. Это самый элементарный уровень иерархии Flash. И только на этом уровне можно свободно изменять форму фигуры путем редактирования кривых.
Для того чтобы превратить фигуру в клип, нужно выполнить операцию преобразования в символ (клип и символ – это синонимы одного понятия). Это делается через клавишу F8 или соответствующий пункт меню Insert / Convert to Symbol. В появившемся окне предлагается ввести имя нового клипа. Можно оставить имя, предлагаемое по умолчанию, и потом в любой момент его переименовать. Это имя не играет никакой роли и действует как метка клипа (ярлык). С другой стороны, могут возникнуть проблемы с переносом клипов из одного документа в другой, если их имена совпадают. Для избежания этих проблем нужно переименовывать клипы с одинаковыми именами и избегать имен, присваиваемых по умолчанию. Поэтому не ленитесь и всегда давайте клипу собственное имя. Кроме того, это поможет ориентироваться в библиотеке клипов.
Кроме имени требуется выбрать тип клипа.
Тип Movie Clip
Наиболее часто приходится иметь дело с типом Movie Clip. Это самый универсальный и элемент в технологии Flash. Клипы этого вида могут иметь уникальное имя для адресации из программы на ActionScript (язык сценариев технологии Flash). Эти клипы также являются одними из носителей кода. Они могут содержать в себе неопределенное количество клипов всех трех перечисленных видов. Степень этой вложенности также не ограничена.
Тип Button
Эта разновидность клипов служит для реализации интерактивности во Flash-фильмах. Если вы хотите создать кнопку для выполнения какого-то действия, то нужно выбирать именно этот тип. У кнопок довольно много ограничений по сравнению с типом Movie Clip. Нужную функциональность почти всегда можно получить помещением кнопки в клип типа Movie Clip и несложным кодированием.
99