«TeachPro™ WEB-дизайн Мультимедиа Технологии и Дистанционное Обучение МОСКВА 2006 Мультимедийный самоучитель на CD-ROM: TeachPro™ WEB-дизайн/Под ред. Катхановой Ю.Ф., Гринберг Г.С., Антонова Г., Соловьева И., Суховерхова ...»

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

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

Например, звук, анимация, flash-ролики, целые программные модули и даже другие HTML-документы. До сих пор с подобным встраиванием царит некий сумбур, нет единого механизма, хотя по сути с точки зрения встраивания нет такой уж большой разницы между картинкой, звуком или ещё чем-то. Главное, чтобы браузер мог получить этот файл, понять, что это за файл и что с ним делать.

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

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

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

Это уже самое настоящее интерактивное "общение" с сервером, т.к. страницы с результатами поиска как таковой (в виде HTML-файла) не существует, а сервер создает её для вас в соответствии с тем, какой запрос был послан с помощью формы.

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

Как же работает механизм форм? На одном конце мы имеем клиента — веббраузер. В нём, собственно, и отображаются формы, которые мы заполняем.

На другом конце — сервер, на котором работает некая специальная программа, получающая информацию, присланную через форму. На основе этой информации программа выполняет какие-то действия. Например, формирует HTML-страницу и заставляет веб-сервер прислать её обратно клиенту. Или, как в случае с форумом, добавляет на сайт наше сообщение.

Или отправляет наше сообщение по e-mail'у и т.д. Серверная часть с программой нас сейчас интересовать не будет, нам важно научиться встраивать формы в страницы нашего сайта. Собственно форма определяется элементом. Элемент должен иметь как открывающий, так и закрывающий теги. Обязательным атрибутом элемента FORM является атрибут action. Этот атрибут задаёт URL-адрес, куда должны отправиться данные, введенные пользователем в форму. То есть, грубо говоря, расположение той самой программы на сервере, которая будет эти данные обрабатывать. Откуда же берутся эти программы?

Во-первых, провайдер, у которого будет размещён ваш сайт, как правило, предоставляет доступ к нескольким стандартным программам. Например, для отправки сообщения по e-mail'у. Соответственно, достаточно вписать адрес этой стандартной программы в атрибут action. Во-вторых, если провайдер позволяет, можно установить на сервере программу самостоятельно. В Интернете можно найти огромное количество готовых программ для самых разных задач. Наконец, в-третьих, вы можете освоить веб-программирование и писать программы самостоятельно.

FORM — атрибут method. Этот атрибут определяет способ, каким данные будут отсылаться на сервер и может иметь одно из двух значений: get или post.

Объяснение разницы между этими двумя методами выходит за рамки данного урока. Какое значение устанавливать — зависит от того, как написана программа. Соответственно, ответ нужно искать в документации к программе. Очень грубо можно сказать, что get больше приспособлен для передачи сравнительно небольших объёмов текстовой информации. Если же форма предполагает отправку более сложных данных, например, файлов, то это, скорее всего, post. Последний атрибут — enctype. Он устанавливается как раз при передаче через форму разных хитрых данных. О нём мы поговорим ниже. Элемент FORM как таковой в браузере не виден. В Dreamweaver'е форма обведёна пунктриной рамочкой, чтобы не потерять её. Элемент этот служит своего рода контейнером для других элементов, с которыми как раз и оперирует пользователь. Элементы эти соответствуют элементам интерфейса операционной системы. Это поля ввода текста, выпадающие списки, переключатели, кнопки и т.д. Кроме того внутри элемента FORM могут располагаться и другие элементы (блочные и текстовые). Мы можем заключить внутрь формы хоть всю нашу страницу.

Одним из основных органов управления, составляющих форму, является элемент. Этот элемент не имеет закрывающего тега. В зависимости от значения атрибута type этот элемент может отображаться в виде самых разных органов управления. Несколько особняком стоят элементы, которые дают команду браузеру начать отправку данных на сервер. Прежде всего это INPUT со значением атрибута type равным submit. Отображается в виде кнопки. Может иметь атрибут value, определяющий надпись на кнопке.

INPUT типа image создаёт графическую кнопку. То есть вместо стандартной кнопки мы можем подставить нарисованную нами красивую кнопочку. В этом случае элементу INPUT необходимо указать те же атрибуты, что присутствуют у элемента IMG, то есть src (с указанием пути к файлу картинки), ширину, высоту и даже alt-текст. Клик по этой картинке будет приводить к отправке данных на сервер.

INPUT типа text создаёт поле для ввода текста. Как раз такое, как в поисковых системах. Чтобы программа могла понять, к какому из элементов формы относится та или иная порция данных, каждый элемент должен иметь атрибут name с уникальным в пределах формы значением. Также элемент может иметь атрибут value. Если мы зададим его, то текстовое поле отобразиться не пустым, а с текстом, указанным в значении этого атрибута.

Атрибут size задаёт ширину поля. Однако единицы, в которых она задается, разнятся от браузера к браузеру и для точного указания ширины следует пользоваться таблицами стилей.

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

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

INPUT типа checkbox создает нечто наподобие выключателя: чекбокс работает по принципу вкл./выкл. Отображается обычно в виде квадратика:

пустого или с "галочкой", когда включён. Как и любой INPUT, чекбокс должен иметь атрибут name. А вот атрибут value работает несколько необычно. Можно было бы предположить, что определенные значения этого атрибута соответствуют его включенному или выключенному состоянию, однако это не так. Если чекбокс не включен, то он вообще ни в каком виде не передаётся программе. Для программы его как бы и не существует. А вот если включен, то передается переменная с именем из атрибута name и значением из атрибута value, т.е. как если бы у нас было текстовое поле, в которое мы ввели значение атрибута value. Отличие состоит в том, что пользователь это значение изменить не может. По умолчанию чекбокс появляется на странице в выключенном состоянии. Чтобы сделать его включенным по умолчанию, следует указать атрибут checked. Атрибуту этому значение не присваивается.

INPUT типа radio очень похож на checkbox, но состоит из нескольких переключателей (так называемых радиобАттонов) и напоминает кнопки на магнитофоне: одну нажали, другая выскочила. Т.е. фактически это группа переключателей: несколько элементов INPUT типа radio, имеющих одинаковое значение атрибута name (собственно, по этому признаку они и группируются) и разные значения value. В результате переменная с именем из атрибута name будет иметь значение из атрибута value того переключателя, который был включён пользователем. Как и в случае с чекбоксом мы можем указать атрибут checked, чтобы "включить" по умолчанию один из переключателей. Имеется ещё один хитрый INPUT типа hidden, который никак не отображается в браузере и не доступен пользователю. Он позволяет с помощью атрибутов name и value передать программе некие служебные данные, в которые не должен вмешиваться пользователь.

INPUT типа reset создаёт кнопку, при нажатии на которую форма "очищается", т.е. все данные, введённые пользователем сбрасываются, возвращаются в исходное состояние. Атрибут value, как вы могли догадаться, задает надпись на кнопке. INPUT типа button создаёт, так сказать, "просто кнопку". Она ничего не делает, чтобы её оживить, нужно написать так называемый "скрипт" — маленькую программку, встроенную прямо в HTMLдокумент, которая выполняется браузером. Но это мы сейчас не будем обсуждать.

INPUT типа file создаёт поле с кнопкой, позволяющее выбрать какой-либо файл для отправки его на сервер. Например, можно вообразить программу, которая анализирует каким-то образом картинку и осуществляет поиск на основе этих данных. Естественно, элемент должен иметь атрибут name. Если в форме используется данный элемент, то форме (самому элементу FORM) необходимо задать атрибут enctype (помните, мы упоминали его выше). При этом значение его должно быть "multipart/form-data".

Теперь переходим к органам управления, создаваемым с помощью других элементов, отличных от INPUT. Во-первых, это элемент. По сути это тот же самый INPUT типа text, т.е. поле для ввода текста, но, состоящее не из одной строки, а из нескольких. Количество строк задается атрибутом rows, а количество колонок, то есть ширина — атрибутом cols. Как и в случае с атрибутом size текстового поля ширину лучше задавать таблицами стилей. Синтаксис TEXTAREA несколько иной. Он, естественно, имеет атрибут name, но у него нет атрибута value, зато есть обязательный закрывающий тэг. А роль value выполняет текст, расположенный между открывающим и закрывающим тегами.

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

Может иметь атрибут size. Как ни странно, атрибут ведёт себя не так, как в текстовых полях. Он определяет не ширину меню, как вы могли подумать, а высоту. Если size не задан, меню будет выпадающим, а если задан, то отобразится список высотой как раз в кол-во строк, заданное атрибутом size.

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

Ещё один атрибут — multiple. Значение ему не присваивается. Если он указан, пользователь может выбрать одновременно несколько пунктов из списка. При этом нужно удерживать клавишу Ctrl. В противном случае, если multiple не указан, из списка можно выбрать только один пункт. Подобно элементу FORM, SELECT является лишь контейнером для элементов, определяющих сами пункты меню. Поэтому закрывающий тэг у него обязателен.

Ну а для определения пунктов меню предназначены элементы.

Имеет атрибут value. Т.е. после отправки формы в программу попадёт переменная с именем, заданным атрибутом name элемента SELECT и значением из атрибута value элемента OPTION того пункта, который мы выбрали. Ну а пользователь в меню увидит не значение атрибута value, а текст, заключенный между открывающим и закрывающим тегами элемента OPTION. Это важно запомнить: пользователю мы показываем одно, а в программу передается совсем другое.

Чтобы "включить" определенный пункт меню по умолчанию, соответствующему элементу OPTION следует задать атрибут без значения selected. Было бы, наверное, логичнее назвать этот атрибут checked, как в чекбоксе и радиобАттоне, но — се ля ви — HTML полон таких вот несуразностей. Как видите, функционально меню чем-то напоминает радиобАттоны: несколько переключателей (OPTION) каждый со своим значением value объединены в группу (SELECT) с одним именем (name).

Как сказал когда-то Якоб Нильсен, большой специалист в области вебюзабилити, т.е. удобства пользования сайтами, — "скажите фреймам НЕТ!".

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

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

Итак, что же это за такие страшные звери — фреймы? Это несколько окон браузера, определенным образом скомпонованных в одном "родительском" окне. Каждый из фреймов — это, можно сказать, отдельный браузер в том смысле, что в каждый из них загружается отдельный HTML-документ. Но смысл фреймов состоит в том, что между ними имеется связь: из одного фрейма мы можем ссылаться на другой. Наиболее распространённый пример:

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

Чем же тогда не угодили фреймы Якобу Нильсену и прочим сознательным веб-дизайнерам? Если вы помните, по задумке Тима Бернерса-Ли неким "атомом" веба является страница. Понятие страницы включает в себя и единицу просмотра (пользователь видит её в окне браузера), и единицу навигации (кликнув по ссылке, мы переходим на другую страницу), и единицу, образно говоря, географическую (URL-адрес ведёт на страницу), и, наконец, единицу физическую (страница лежит на сервере в виде файла). Последние пункта, прада, уже несколько размыты из-за динамических страниц, которые нигде не лежат, а создаются налету программой. Фреймы же вступают в противоречие с этой концепцией. К чему это приводит на практике?

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

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

Можно ли как-то обойти эти проблемы при использовании фреймов?

Можно. Как — обсудим ниже. Нужно ли оно нам? Это решать вам в каждом конкретном случае. Разрабатывать сайт с фреймами сложнее. Если эта сложность оправдана, то почему бы и нет? Как же создать фреймосодержащий документ? Очевидно, нам нужен набор обычных HTML-страниц, которые будут отображаться во фрейМАХ, а также нам нужна некая страница-каркас, описывающая расположение фреймов в окне браузера.

вложенные фреймсеты, но об этом — ниже. Размер фреймов (ширина для cols или высота для rows) может задаваться в пикселах, в процентах от размера окна или в долях так называемого "оставшегося" места. С первыми двумя пунктами, очевидно, всё ясно, тут всё аналогично таблицам.

А вот третий требует пояснения. Допустим, нам нужна колонка слева фиксированной ширины, скажем, 100 пикселей, а остальное пространство нужно разбить на 2 колонки одинаковой ширины. Как это сделать? Задать им по 50% будет некорректно, т.к. проценты — от ширины окна, а в нашем распоряжении уже не всё окно, а оставшаяся от колонки часть. Как покажет браузер эти якобы 50-процентные колонки — большой вопрос. Поэтому правильнее двум оставшимся фреймам поставить звёздочки, что будет означать, что оставшееся пространство нужно разделить пополам. К звёздочкам можно добавлять коэффициенты. Например, если написать вот так, то оставшееся пространство будет разделено в пропорции 1:2.

Как уже говорилось, фреймсеты могут вкладываться друг в друга.

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

Таким образом мы можем создавать сколь угодно сложные макеты. Как же теперь указать, какие HTML-файлы загружать в каждый из фреймов? Для этого в элемент FRAMESET вкладываются элементы, ответственные за каждый отдельный фрейм. Количество этих элементов, естественно, должно соответствовать количеству фреймов, созданных фреймсетом. Содержимое каждого фрейма задается с помощью атрибута src.

Его значение, как вы можете догадаться, — это URL загружаемой в данный фрейм страницы.

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

Атрибут frameborder определяет, будет ли эта самая граница фрейма видна или только "подразумеваться". Может принимать значения 1 — значение по умолчанию, когда граница видна, или 0, если границу нужно спрятать.

Атрибут scrolling определяет, видна ли линейка прокрутки в данном фрейме.

Может принимать значения auto(по-умолчанию) — прокрутки нет, но она появляется, если содержимое страницы не помещается во фрейм. Может принимать значение yes — в этом случае линейка прокрутки будет показываться в любом случае. И, наконец, значение no, когда прокрутка не появляется ни при каких обстоятельствах (даже если информация не помещается во фрейм). Атрибуты marginwidth и marginheight аналогичны таковым у элемента BODY, то есть устанавливают горизонтальные и вертикальные отступы от края фрейма до его содержимого. Обычно значения этих атрибутов обнуляют, а с отступами разбираются уже на самой странице.

И, наконец, один из самых главных атрибутов — name. Он задаёт имя фрейма, что, собственно, и позволяет нам ссылаться из одного фрейма на другой.

Итак, переходим к самому интересному. Возможно вы помните, когда мы изучали гиперссылки, был у элемента A такой атрибут target. Тогда мы рассмотрели только одно его значение — "_blank", которое позволяло открывать ссылку в новом окне. Так вот, в этом атрибуте как раз и следует указывать имя фрейма, в котором должен открыться документ, на который ведёт ссылка, то есть имя, заданное в атрибуте name целевого фрейма. Если в ссылке атрибут target не задан, то документ откроется в текущем фрейме (в котором находится ссылка). Если уж мы вспомнили про "_blank", то здесь же рассмотрим и другие "специальные" значения этого атрибута. Итак, кроме "_blank" это может быть "_self" — значение по умолчанию, когда ссылка открывается в текущем фрейме. Это может быть "_parent" — ссылка открывается в "родительском" окне. Что это значит? Фреймы — это как бы отдельные браузеры, вложенные в наш основной браузер. Если мы имеем дело с вложенными фреймсетами, то получается уже 2 и более уровня вложенности.

Так вот, мы можем обращаться к фрейму, в который вложен текущий, не по имени, а с помощью значения "_parent". Особенно это актуально для "главного" окна, которое не имеет имени. Таким образом мы можем выйти из фреймовой структуры и попасть на обычную страницу. Однако для обращения к окну самого верхнего уровня лучше использовать значение "_top". В отличие от _parent, оно не относительно текущего фрейма, а абсолютно и из любого уровня вложенности ведёт на самый верхний уровень — на главное окно браузера. И тут мы подходим к ответу на вопрос, как корректно разрабатывать сайт на фрейМАХ. Итак, если вы взвесили все "за" и "против" и решили, что без фреймов вам никак не обойтись, то нужно соблюдать, по крайней мере, одно правило: механизм URL должен работать. То есть при переходе по ссылке должен меняться адрес в адресной строке браузера.

Что для этого нужно? Для этого каждый документ, на который может вести ссылка, должен иметь свой отдельный фреймсет, а все ссылки должны вести не на документ, а на этот его фреймсет и загружать этот фреймсет в главное окно браузера, т.е. все ссылки должны иметь атрибут target="_top". Вот как это выглядит: каждая страница имеет "содержательный" HTML-файл, а также имеет документ с фреймсетом. И именно этот документ показывается по умолчанию. Содержание остальных фреймов (например, фрейма с навигационным меню) одинаково для всех страниц, поэтому навигационный HTML лежит отдельно и загружается во все фреймсеты. "Свой фреймсет для каждого документа?!" — ужаснётесь вы. А кто сказал, что будет легко? Зато так каждая страница будет иметь полноценный адрес — ведущий не на отдельную страничку, а на полный комплект фреймов.

Но остаётся проблема поисковых систем — в поиск попадает только "содержательная страница". Но и эта проблема решаема, правда, её решение уже не так просто и требует некоторого программирования, на чём мы здесь не будем останавливатсья. Теоретически же если мы наберем адрес "содержательной" страницы, то будем автоматически перенаправлены на страницу с соответствующим фреймсетом. И напоследок рассмотрим ещё один вид фреймов, достаточно радикально отличающихся от "обычных" фреймов. Это так называемые IFRAMES или inline-frames.

Как следует из названия, такой фрейм встраивается прямо в содержание страницы, подобно текстовым элементам. Никаких фреймсетов для него не надо, он создаётся с помощью элемента. Как и обычный фрейм, он имеет атрибут src, определяющий его содержимое, атрибут name, для использования в target'ах ссылок. Также от обычных фреймов он унаследовал атрибуты frameborder, scrolling, marginwidth и marginheight. Этот элемент чем-то похож на картинку: он так же имеет атрибуты width и height, задающие его размеры, а также атрибут align, управляющий выравниванием текста вокруг фрейма. Элемент должен иметь закрывающий тег, а то, что находится между открывающим и закрывающим тегами, будет показано в браузерах, не поддерживающих IFRAME.

На прошлом уроке мы с Вами изучили работу с картинками. На этом уроке мы попробуем задать цвета. Надо сказать, что многие авторы HTML любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Для того, чтобы задать эти цвета, мы включаем в тэг Body соответствующие параметры. С тэгом Body мы с Вами работали на прошлом уроке при включении фоновой картинки. Для того чтобы ввести цвет фона, мы пишем Background color, но только в сокращенном виде, то есть, пишем B COLOR.

Равняется. Здесь мы задаем цвет в шестнадцатиричном формате по схеме RGB. Что значит Цвет по схеме RGB?

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

Сначала ставим знак Диеза, чтобы указать, что мы начинаем изображение цвета. Первая составляющая R у нас равна двум нулям (то есть, этот цвет в общей сложности — нулевой). Далее.

Зеленый цвет тоже равен нулю. Синий — также. Дело в том, что каждый из цветов RGB кодируется одним байтом. Это означает, что максимальное значение этого кода может составлять 255 (от 0 до 255). Попробуем понять, что это значит на следующем примере. Итак, цвет фона мы задали черный.

Зададим точно таким же образом цвет текста... Сначала вводим знак Диеза.

Мы хотим задать для цвета текста белый цвет. Белый цвет является максимальным в палитре. То есть, для белого цвета и R — максимально, и G, и B. Все составляющие (красный, зеленый и синий) — максимальные.

Максимальный для шестнадцатиричных цветов — это FF, то есть, фактически, 255. Пишем 255, 255 и 255. Итак, мы с Вами получили белый цвет. Теперь — ссылки. Ссылки у нас должны быть в Link-е... Сейчас посмотрим... Диез. Составляющая красного цвета — 96, зеленого цвета — 90 и синего — СС. Посмотрим, что теперь у нас получилось. Сохраним этот файл и обновим его вот здесь. Что мы теперь имеем? Сейчас у нас текст изображен белым цветом, то есть, именно так, как мы с Вами планировали. Фон у нас черный, как мы и задавали. А ссылки имеют вот такой непонятный цвет.

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

Давайте сейчас попробуем поменять какую-либо из ссылок. Например, поставим что-то в этом роде вот сюда. А здесь, к примеру, поставим 4 или 5.

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

Прекрасно. Мы получили то, что и хотели получить.

А теперь попытаемся изобразить горизонтальную линию. Текст можно разделить горизонтальной линией, используя тэг, называемый Horizontal (HR).

Тэг Horizontal имеет следующие параметры. Один из параметров — Size. Это величина этой самой горизонтальной линии. Здесь мы ошиблись... Size.

Равняется. Величина линии означает ее толщину в точках.

Давайте, попробуем задать здесь, к примеру, 5 (вот такую толщину линии).

Затем зададим ее ширину. Ширина линии может быть задана в точках или в процентах (от ширины окна браузера). Зададим 50% от ширины окна браузера (можно задать и в точках). И, соответственно, у нас сейчас идет выравнивание, то есть, как конкретно расположить эту самую линию относительно экрана (ALIGN).

ALIGN у нас может быть равен, например, Left-у. Это означает расположение слева. Посмотрим, что при этом получится. Закроем этот тэг.

Сохраним и нажмем на кнопку Обновить. Теперь Вы видите на экране выровненную с левой стороны вот такую линию. Эту линию мы с Вами сумели отобразить здесь с помощью этого тэга, который называется HR. Мы теперь можем увеличить ширину этой линии. Например, сделаем ее вот такой, равной 10 пикселям. Сохраним и обновим изображение в браузере. Как видите, ширина линии соответственно увеличилась. Если мы зададим здесь 100%, то линия, фактически, займет собой весь экран. Проверим это.

Обновили — и линия, соответственно, увеличилась.

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

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

Bold (Жирный), Italic (Наклонный) и MonoSpaced (иногда его называют Type Writer). Это — с использованием фиксированных шрифтов. Стили, соответственно, можно комбинировать. Можно использовать жирный и наклонный шрифт одновременно.

Попытаемся сделать следующий эксперимент. Введем сюда, к примеру, следующий текст. Этот шрифт — жирный. Скопируем это предложение. Здесь Этот шрифт будет наклонный, здесь — фиксированный, а здесь — комбинированный. Посмотрим, что у нас получилось. Для того, чтобы изобразить этот шрифт с жирным начертанием, мы используем тэг, который называется Bold и обозначается строчной буквой b. Соответственно, здесь используется закрывающий тэг b. Сохраним этот текст и посмотрим, что при этом получается. Обновляем. Как видите, Этот шрифт у нас жирный. Здесь используется жирное начертание.

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

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

Это — фиксированный шрифт. Нам осталось рассмотреть комбинированный шрифт. Кстати, вот здесь нам был необходим закрывающий тэг. Вот так. Посмотрим. Теперь Вы видите, чем отличается фиксированный шрифт от комбинированного шрифта. Он отличается тем, что содержит буквы одинаковой ширины. Иначе говоря, и буква Т, и буква О, и буква Э имеют одинаковую ширину. Вернемся сюда и поработаем с комбинированным шрифтом. Дело в том, что тэги можно использовать во вложенном виде. Рассмотрим пример. Пусть это слово имеет жирное начертание. Вставим также и закрывающий тэг Bold. Далее. Здесь у нас будет Italic. А здесь у нас Italic заканчивается. Но слово Комбинированный, в свою очередь, также будет Bold. Вставим и закрывающий тэг Bold. Это означает, что слово Комбинированный в итоге окажется Bold и Italic. Убедимся в этом. Обновим. Мы убеждаемся в том, что так оно и есть. Слово Комбинированный оказалось изображенным жирным и наклонным.

Это произошло по той причине, что открывающий и закрывающий тэги Bold расположены внутри тэга Italic. Кроме того, имеются еще и дополнительные стили. Что они представляют собой? Имеются следующие дополнительные стили: Большой, Маленький, Подстрочник и Надстрочник.

Давайте, изобразим это здесь. Не забудем поставить BR и напишем: Этот текст большой... Затем напишем: Этот текст маленький...Здесь напишем:

Подстрочник... А здесь — Надстрочник. Прекрасно. Соответственно, сюда мы ставим тэг BIG... А здесь мы его закрываем. Сохраним и посмотрим, что у нас получилось. Сохранить. Обновить. Вы видите, что слово Большой заметно больше, чем стоящее рядом выражение Этот текст. А теперь поставим здесь Small, а здесь, соответственно, — тоже Small.

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

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

На этом уроке мы с Вами продолжим изучение форм и начнем изучение меню выбора в форМАХ. Под меню выбора в форМАХ понимают, например, такой элемент интерфейса, как LIST BOX. Существуют три типа тэгов меню выбора для форм. Один из таких тэгов называется SELECT. В этом случае пользователь выбирает одно значение с фиксированного списка значений.

Список значений представляется тэгами OPTIONS. Попробуем изобразить вот какой список. Сделаем это следующим образом. Откроем тэг и напишем здесь SELECT. Затем данному элементу даем имя. Заметим, что элементу всегда нужно присваивать имя. Каждый элемент формы имеет свое имя. Итак, мы задаем, например, имя MyList. Сейчас мы с Вами допустили здесь незначительную ошибку: мы начали писать это внутри тэгов INPUT.

Предварительно занесем это в буфер обмена, а затем удалим. Сделаем то, что мы делали ранее, вот здесь.

После этого закроем данный тэг и с помощью тэга OPTION заполним список этого LIST BOX. Первый элемент, который мы поместим сюда, так и назовем Первый Элемент. Закроем OPTION. Теперь вставим сюда. Второй элемент. Вообще-то, мы можем сейчас занести OPTION в буфер обмена, чтобы каждый раз не вводить его заново. Итак — OPTION. Затем — третий элемент. Три элемента нам достаточны. А теперь закроем тэг SELECT.

Сохраним все это и Обновим нашу страницу в браузере.

Как видите, у нас получился элемент, который содержит список из трех элементов. Мы сейчас можем выбрать любой из этих элементов. Вот так симпатично у нас все получилось. Прекрасно. А теперь вернемся на MyPage и попробуем поработать со вторым типом тэгов в меню. Второй тип тэга называется SELECT SINGLE.

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

Обычно по умолчанию количество этих элементов равно трем. Мы сейчас поступим следующим образом. Для начала вставим эти элементы после каждого элемента формы. Иначе говоря, мы хотим, чтобы данные элементы GUI располагались в столбик (друг под другом) для наглядности. Это мы расположим вот сюда. Этого будет достаточно. А теперь здесь мы создадим элемент типа SELECT SINGLE и посмотрим, в чем заключается разница. Для того чтобы не вводить все заново, мы скопируем эту группу вот сюда.

А здесь поменяем этот тэг на SELECT SINGLE...Здесь установим MyList2, а эти элементы оставим без изменения. Если сейчас мы сохраним данный файл и Обновим его здесь, то получим нечто вроде этого. Для того чтобы эти два элемента отличались друг от друга, нам необходимо в SELECT SINGLE вставить еще атрибут Size. Зададим Size, равным четырем. Сохраним и обновим данную страницу. Вы можете видеть, что теперь этот элемент определенно отличается от верхнего элемента.В тот момент, когда мы Size не устанавливали, они, практически, не отличались между собой.

И, последнее, это, так называемый, SELECT MULTIPLAY. От SELECT SINGLE он отличается только тем, что в этом случае пользователь может одновременно выбирать несколько элементов списка. Если, к примеру, мы поставим здесь атрибут MULTIPLAY и установим его, например, равным двум, то мы получим следующее. Сохраним и Обновим этот элемент. Теперь мы видим, что при нажатой клавише Ctrl пользователь может выбирать несколько элементов. На этом завершим наш урок. На следующем уроке мы с Вами научимся отправлять файлы.

На этом уроке мы с Вами попытаемся создать форму для отправки файлов.

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

Отправить данный файл... Итак, текст Отправить данный файл мы уже имеем. Далее. Что нам теперь нужно сделать? Method Post для данной формы мы оставляем. Action URL мы также оставляем. Продолжаем. Для начала мы создаем тэг INPUT для этого элемента GUI. Затем ставим его имя (это обязательно). Name — это обязательный атрибут. Зададим в качестве имени, например, MyFile. Закроем кавычку. Теперь мы выполняем Type. В данном случае для Type имеется элемент, который называется File. После того, как такой элемент был создан для посылки файла, мы с Вами должны еще создать кнопку для подтверждения отправки файла, так называемую, кнопку Submit.

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

Type. В данном случае имя его и будет Submit. Только в этом случае можно не ставить имя. Submit. Допустим, мы желаем, чтобы на кнопке имелась надпись Отправить файл. Для осуществления этого в тэге INPUT существует атрибут, который называется Value (Значение).

Если для кнопки в качестве такого значения мы напишем Отправить файл, то именно эта надпись и появится на кнопке Submit. Отлично. На этом мы завершаем создание своей формы. Правда, в данном случае здесь стоит поставить тэг PARAGRAPH, чтобы INPUT Type получился на новой строке.

Сохраним, Обновим и посмотрим, что же у нас получилось. Мы видим здесь кнопку Отправить файл. Элемент Отправить данный файл у нас находится вот здесь. И тут у нас имеется вот этот самый элемент для отправки файлов.

Если сейчас мы нажмем на кнопку Browse, то перед нами появится окно открытия файла. Мы можем выбрать здесь любой файл. Выберем, например, тот файл, который мы с Вами скачали ранее, то есть, ICQ Russian. Теперь, когда мы уже выбрали этот файл,мы видим здесь соответствующую ссылку на ICQ Russian. Если бы мы правильно указали путь к файлу в атрибуте Action, то при нажатии на кнопку Отправить файл, данный файл был бы скачан на наш сервер.

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

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

Вы щелкаете мышью на отдельных частях изображения — и можете переходить по той или иной ссылке на другие документы. Сначала мы с Вами создадим некоторое подобие картинки. Это, в общем-то, будет сама картинка, которую мы сейчас и разметим. Для этого в пункте Стандартные мы выберем Paint и создадим такую небольшую картинку. Вот так. Предположим, что у нас имеется такая небольшая картинка (вот она). В ней мы проведем вот такую линию. Верхнюю часть мы зальем красным цветом, а нижнюю часть — зеленым. На верхней части напишем: Переход на документ 3... Вот так. А в нижней части напишем: Переход на документ 4... Мы можем написать это, например, красным цветом... Вот так. А теперь сохраним этот рисунок.

Давайте, сохраним его в формате JPEG и поместим на Рабочий стол. Назовем этот рисунок Image.

Что теперь мы можем сделать? У нас тут при сохранении несколько испортился внешний вид данного рисунка. Дело в том, что JPEG является сжатым форматом, а при сжатии изображения иногда теряется его качество. В данном случае нам это не помешает. Изображение у нас так и останется. А теперь, давайте, определим координаты. Если мы установим курсор вот сюда, то увидим здесь внизу, что весь прямоугольник имеет размер 223 пикселя на пикселей. Эти данные нам пригодятся при создании карты этого рисунка. А сейчас мы с Вами создадим главный документ. Его мы будем создавать не с нуля, а создадим на основе документа 2, который мы создали на уроке при изучении фреймов. Главный документ мы создадим вот здесь. Для начала мы возьмем этот BASE TARGET (с фреймами мы сейчас не работаем) и вставим заголовок, назвав его, например, Picture1.

А сейчас мы здесь поставим картинку. Как Вы помните, это можно сделать посредством тэга IMAGE. Картинка находится прямо на нашем Рабочем столе, поэтому мы можем ее так и назвать, а именно, Image.jpg. Назвали ее.

Разумеется, здесь нужно указать SRC, затем знак равенства. И это мы должны указать в кавычках (это понятно). После того, как мы указали картинку, мы должны включить поддержку карты для данного изображения. Поддержка карты включается с помощью атрибута, который называется USEMAP.

Допустим, что USEMAP использует MAPNAME. В нашем случае MAPNAME — это MYMAP. А сейчас мы уберем эти ссылки и создадим синтаксис определения карты изображения. Создадим его где-нибудь здесь.

Синтаксис карты изображения создается с помощью тэга MAP, которому дается имя NAME (это его атрибут). А NAME у нас равен MYMAP-у (мы с Вами это уже определили — MYMAP). Мы это определили вот здесь:

MAPNAME — MYMAP.

Закроем тэг MAP. Сразу же поставим и завершающий тэг MAP, чтобы потом не забыть об этом. После того, как мы определили эти два тэга, мы начинаем описание самой карты. Описание карты осуществляется с помощью тэга, который называется AREA. Первый тэг AREA имеет атрибут, который называется SHAPE. Атрибутом SHAPE мы указываем на форму определяемой области изображения. Она может быть по умолчанию (Default) прямоугольником. Но мы можем задать также и другую форму. Например, можно задать в качестве такой формы или RECT (прямоугольник), или CIRCLE (круг) или Поле, то есть, многоугольник произвольной формы. В данном случае мы задаем RECT. Это — прямоугольник. Как Вы помните, наш рисунок имел две прямоугольные области: красную и зеленую.

координаты. Итак, для левого верхнего угла задаем (0;0). А для правого нижнего угла... Кстати, мы с Вами, к сожалению, забыли параметры нашей картинки. Для того чтобы вспомнить их, откроем нашу картинку в приложении Paint. Координаты мы можем определить здесь. Посмотрим вниз.

Мы видим 222 58. Прекрасно. Здесь так и пишем: 222 и 58. Это — первая координата. После того, как мы с Вами задали координаты (AREA COORDINATS), здесь мы ставим соответствующую ссылку. Ссылка ставится с помощью тэга HREF (это мы с Вами знаем). Пишем: HREF, равняется Doc3.htm.

Первый элемент мы уже создали. Аналогичным образом создается второй элемент. Также пишется AREA с закрывающимся этим, но координаты мы уже должны задать по-другому. Координаты в нашем случае (откроем Paint) уже будут определять вот этот угол, то есть, 0 58 до 223110. Так и задаем: 058 до 223110. А здесь, соответственно, задаем HREF, равняется Doc4. Посмотрим, что у нас получилось. Сохраним этот Doc2, свернем наш Блокнот и попробуем его запустить. Вы видите, что у нас имеется вот такая картинка. Если Вы обратите внимание вот сюда на строку состояния, то увидите, что каждая область представляет собой ссылку на соответствующий документ.

Вы видите, что сейчас здесь курсор мыши превратился в ладонь, а внизу имеется ссылка на Doc3. Здесь — ссылка на Doc4. Убедимся в этом. Нажали сюда — попали на третий документ. Вернулись сюда — попали на четвертый документ. Вы убедились в том, что нам с Вами удалось создать, хотя и не сложную, но, все же, карту нашего изображения.

На этом мы завершаем изучение языка HTML. Мы достаточно ознакомились со всеми основными тэгами этого языка и, в общем-то, научились с ним работать. На следующем уроке мы с Вами уже начнем постройку нашей веб-страницы, но будем пользоваться не ручным способом (не написанием HTML-тэгов), а уже будем пользоваться специальной программой, которая позволяет делать это более удобным способом. Это программа называется Composer-ом комплекса Netscape.

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

Первая слева позволяет свернуть окно программы.

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

Теперь вы сможете подобрать такой размер окна, чтобы его было удобно просматривать одновременно с окнами других приложений. Повторный щелчок на этой же кнопке вернет окно Flash в полный экран. Щелчок на кнопке-крестике завершит работу программы. Чего мы делать не будем и продолжим обзор интерфейса. Ниже находится три аналогичные кнопки, которые таким же образом воздействуют на окно открытого файла. Под строкой заголовка расположена строка основного меню, знакомая Вам по другим программам для Windows и Macintosh. Каждое из этих меню содержит список команд для управления редактором Flash. Меню — это весьма большая тема. Подробный рассказ о назначении всех этих команд вызвало бы у начинающих головную боль или в лучшем случае зевоту. Поэтому разбираться со всеми этими опциями мы будем постепенно, по ходу изучения программы. Сейчас я только обзорно познакомлю Вас с назначением основных команд меню поскольку они сгруппированы по тематическим признакам.

Меню File.

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

Меню Edit — Правка.

Обеспечивает доступ к командам отмены и повторения операций, а также копированию, вставки, удалению, выделению графических объектов и кадров фильма. Команда Preferences — Предпочтения в нижней части списка устанавливает глобальные параметры для текущего и всех последующих фильмов. Начинающим флэшерам лучше оставить эту команду до поры до времени в покое. Разработчики позаботились об эффективной работе программы при настройках заданных по умолчанию. Предпоследняя команда списка Keyboard Shortcuts — оперативные клавиши, устанавливает соответствие используемых в MX клавиш, тем клавишам, которые применяют обычно в других приложениях.

Кто ранее работал с предыдущей версией программы, т.е. с Flash 5 и не хочет менять свои привычки. Или имеет большой опыт работы с такими приложениями как: Freehand 10, Adobe Illustrator 10, или Photoshop 6, — могут воспользоваться этой командой. Кроме того здесь имеется возможность устанавливать свои собственные уникальные комбинации клавиш для выполнения различных команд. И последняя команда меню Edit, Font Mapping Соответствие шрифтов позволяет работать с файлами, содержащими шрифты, которые не установлены на Вашей системе и производить нужную Вам замену шрифтов. Эта команда появилась только в последней версии Flash. Меню View — Вид. Это меню управляет видом рабочего пространства, качеством графического изображения, видимостью и настройкой некоторых элементов интерфейса, таких как: линейка, сетка, направляющие и некоторых других. Меню Insert — Вставка. Содержит команды, которые используются для ввода в фильм новых элементов, таких как: символы, слои, кадры и сцены.

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

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

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

Дополнительные характеристики текста, в частности: цвет, абзацный отступ и другие устанавливаются с помощью специальной панели, о которой мы поговорим на соответствующем уроке. Меню Control — Управление. Не оказывает влияния на содержание ролика, а лишь служит для управления воспроизведением анимации. Меню Window — Окно.

С помощью команд этого меню можно отображать и скрывать вспомогательные панели, расположенные в правой части и внизу экрана, а также просматривать разные части фильма в отдельных окнах. Кроме того команда Common Libraries позволяет воспользоваться поставляемыми с программой библиотеками с кнопками, графикой и звуками. И наконец, меню Help — помощь. Команды этого меню предоставляют доступ к справочной системе Flash. С помощью команд Lessons и Samples можно посмотреть уроки и примеры, встроенные в программу.

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

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

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

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

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

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

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

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

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

Во Flash MX появилась новая панель Properties — Инспектор свойств, которая выполняет множество функций. Ее содержимое контекстно меняется в зависимости от выбранного инструмента или объекта.

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

Если же, например, выбрать текст, то на панели Properties появится множество кнопок и полей для редактирования текста. По сути эта панель заменила множество других панелей Flash 5, отвечающих за свойства звука, текста, символов, кадра и т.д. Кроме того во Flash MX появилось еще несколько новых панелей. Например, панель Components для быстрого создания элемента управления, например, прокручивающихся текстовых полей, списков и кнопок. Как я уже отмечал, все панели могут быть отображены или скрыты с помощью команд меню Window. Отобразим, например, панель Info — Информация, щелкнув на соответствующей строчке. Теперь появившуюся панель можно поместить в общий блок.

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

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

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

Уважаемые слушатели на этом уроке мы научимся изменять основные параметры фильма с установки которых обычно начинают создание нового ролика а также познакомимся с принципами настройки интерфейса редактора Flash MX Как я уже отмечал на предыдущем уроке каждый новый фильм имеет стандартные основные параметры белый фон, ширину в 550, высоту в 400 пикселов и частоту равную 12 кадрам в секунду. Но эти параметры легко изменить. Обратимся к команде меню Modify — Document или воспользуемся клавиатурной комбинацией CTRL+J. Перед нами появится окно свойства документа. В верхней части диалога находятся два поля, значения которых определяют ширину и высоту полотна. Flash MX позволяет устанавливать эти параметры в пределах от 1 до 2880 пикселов. Ниже расположено окно с помощью которого можно изменять цвет фона. При щелчке по нему появится палитра в которой можно выбрать любой из 256 так называемых безопасных WEB цветов.

Если вы раздумали менять цвет, то просто нажмите клавишу Esc — палитра закроется. Еще ниже находится поле, в котором устанавливается скорость воспроизведения фильма, заданная в кадрах в секунду. Для WEB сайтов обычно устанавливается частота от 8 до 18 кадров в секунду. Помните чем меньше частота кадров, тем меньше окончательный размер файлов фильма и меньше нагрузка на процессор компьютера.

С другой стороны увеличение этого параметра обеспечивает более плавную анимацию. В раскрывающемся списке Ruler Units — можно задавать единицы измерения. При работе с Flash практически всегда используются пикселы, но при желании здесь можно установить единицы измерения в миллиметрах, сантиметрах, пунктах и дюй МАХ.

А теперь давайте изменим некоторые из перечисленных параметров.

Установим размеры фильма равными, например, 500 на 200 пикселов. А цвет фона, скажем, светло-голубым. Остальные опции оставим без изменения.

Подтвердим выбор сделанных установок кликом на кнопке ОК. Вы видите, что у нас получилось. Вновь вернемся к диалогу Свойства Документа, но сделаем это по-другому. Если открыта панель инспектора свойств, то достаточно просто щелкнуть по кнопке Size, где отображается размер фильма. Появится знакомое окно. Здесь имеется еще ряд кнопок, о которых я еще не рассказывал. Щелчок по кнопке Default быстро восстановит все параметры принятые по умолчанию.

Если вы часто работаете над фильмом с другими параметрами, то после установок нажмите кнопку Make Default — Сделать по умолчанию. В этом случае программа будет создавать проекты с этими параметрами и вам не нужно будет заниматься рутиной в начале каждой работы. Кнопка Match Printer подгоняет размер фильма под максимально доступную область печати, в соответствии с установленным в системе принтером и выбранным размером бумаги. Кнопка Match Contents Подогнать под содержимое, устанавливает размеры полотна так, что вокруг содержимого остается свободное рабочее пространство с противоположных сторон. Точкой отсчета служит левый верний угол полотна Не трудно догадаться, что если фильм пустой как сейчас, то при щелчке по этой кнопке ничего не произойдет. Возможно не совсем понятно, ну что же давайте продемонстрируем работу этой установки. Закроем окно, щелкнув по кнопке ОК. И нарисуем что-нибудь на сцене. Например, овал. Снова вызовем окно свойств и нажав кнопку Contents, подтвердим установку. Я думаю, что комментарии больше не нужны. Очевидно, что эту опцию удобно применять в конце проделанной работы. Инструментом Стрелка выделим и удалим овал, нажав клавишу Delete.

Еще разок откроем окно свойств документа. Для этого можно воспользоваться другими двумя способами. Либо через контекстное меню, для чего нажмем правую кнопку мыши и выберем пункт меню Document Properties. Либо сделаем двойной щелчок в поле, где отображается скорость анимации. Установим, принятые по умолчанию параметры и закроем окно.

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

А теперь займемся настройкой интерфейса программы и сделаем его более удобным для последующей работы. Как вы уже заметили, Flash по умолчанию открывает в правой части экрана четыре вспомогательные панели. Но их в программе значительно больше. Для начала уберем некоторые панели, которые нам не понадобятся на ближайших уроках и вместо них установим другие. Щелкнем правой кнопкой мыши на заголовке панели Answers Ответы, предназначенной для получения справки, в том числе и с помощью интернета.

Кстати говоря, эта панель — новинка редактора MX. Закроем панель, выбрав команду Close Panel.

Аналогичным образом поступим с панелью Components. Далее выведем на свет Божий другие панели, которые будут нам нужны для освоения основ рисования во Flash-е. Обратимся к меню Window и отобразим на экране панель Align — Выравнивание. Подведем курсор к сетке, слева от заголовка и поместим панель в общий блок. Аналогичным образом откроем и разместим панель Info — Информация. И панель Transform — Трансформация.

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

А теперь давайте запомним это расположение панелей, чтобы в последующем заново не настраивать интерфейс. Выполним команды Window — Save Panel Layout Сохранить расположение панелей. В появившемся одноименном диалоговом окне, зададим имя заданной компоновке панелей. Например My и кликнем кнопку ОК. Теперь если в процессе работы мы будем перемещать панели, открывать и закрывать другие панели, то можно всегда вернуться к сохраненному расположению.

Посмотрим как все это работает. Вернемся к компоновке панелей заданных по умолчанию. Для чего выполним команду Window — Panel Sets — Default Layout. Затем попробуем установить ранее настроенный интерфейс. Для этого выполним те же операции Window — Panel Sets. А в списке настроек панелей выберем появившийся пункт My.

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

Но возможность удаления не встроена во Flash. Файл соответствующий набору панелей нужно удалять вручную. Он находится в папке с названием Panel Sets в каталоге Flash MX, куда вы установили программу. Правда возможны варианты. Если Ваш компьютер подключен к сети, то ищите этот файл в подкаталоге Application Date каталога Windows. Для увеличения рабочего пространства можно проделать еще некоторые действия. Уменьшим мышью ширину шкалы времени.

А затем с помощью окна под шкалой отмасштабируем размер полотна, выполнив команду Show Frame, которая точно впишет полотно в рабочую область. Эту же операцию можно произвести командой меню View — Magnification Масштабирование Show Frame, или, что быстрее нажав сочетание клавиш Ctrl+2. Теперь мы готовы к освоению основ рисования в редакторе Flash. В первую очередь вам необходимо научиться работать с панелью инструментов, с помощью которой создаются графические объекты.

Познакомимся с ней чуть подробнее. Панель инструментов разделена на четыре раздела. В верхнем разделе Tools Инструменты находятся средства для рисования и редактирования графических объектов.Во втором разделе View просмотр, расположены инструменты для управления отображением. Эта так называемая Рука Hand и инструмент Масштаба — Zoom. С подобными инструментами вы наверняка встречались в других графических редакторах.

Ниже в разделе Colors Цвета находятся инструменты выбора цвета контуров и заливок, которые составляют основу векторной графики.

И, наконец. в самом нижнем разделе Options Параметры, находятся модификаторы инструментальных средств, которые определяют конкретное поведение выбранного инструмента. Вы можете посмотреть как меняются пиктограммы этой группы при смене инструментов. Для тех кто уже работал с предыдущей пятой версией Flash, замечу, что панель инструментов претерпела мало изменений. И лишь в раздел Tools добавлено два новых средства, а именно, Free Transform Свободная трансформация и Fill Transform Трансформация заливки.

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

В первом ряду инструментов панели находится инструмент Arrow Стрелка, которая служит для выделения, перемещения и редактирования графических объектов. Однако прежде чем выделять и редактировать, наверное, нужно чтонибудь нарисовать, поэтому изучение панели мы начнем с инструментов рисования. Во Flash, как и в других редакторах векторной графики, существует два основных типа графических объектов — это линии, или контуры, и заливки. Линии создаются тремя инструментами панели: Line (Линия), Pencil (Карандаш) и Pen (Перо). Инструмент Pen наиболее сложен в освоении, учиться работать с ним мы будем несколько позже.

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

Если во время перемещения мыши удерживать клавишу SHIFT, то у вас получится либо строго горизонтальная линия, либо строго вертикальная, Нажмите клавишу на клавиатуре позволяющую рисовать линии под прямыми углами либо под углом 45 градусов, в зависимости от того, в каком направлении вы начнете перетаскивание в начальный момент. Вот, пожалуй, и все премудрости использования этого простого инструмента. Однако нарисованные линии вовсе не обязаны быть именно такими, как получились у нас на экране. Посмотрим, как можно изменять параметры нарисованной линии. Это делается с помощью панели Properties (Инспектор Свойств).

Замечу, что в 5-ой версии редактора для этого применялась отдельная вспомогательная панель Straight. Удалим нарисованные линии, чтобы они нас не отвлекали, для чего выделим их с помощью инструмента Arrow и нажмем клавишу DELETE. Теперь нарисуем 6 одинаковых горизонтальных линий.

Проще сначала с помощью инструмента Линия нарисовать одну, затем инструментом Arrow выделить её и удерживая клавишу CTRL создать пять её копий. Какой клавишей вместе с мышкой можно делать одинаковые копии Обратите внимание, что при перемещении выделенной линии рядом с курсором появился знак "+", что говорит о копировании объекта.

Почему я нарисовал 6 линий? Через пару минут вы увидите, что редактор предоставляет в ваше распоряжение именно 6 основных стилей контура.

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

Установим толщину всех линий равную, например, 5-ти пикселлам. Левее находится окошко,щелкнув по которому вы можете с помощью появившейся палитры выбрать необходимый цвет линии, ну, например, красный.

Разумеется, каждой линии вы можете задать свой собственный цвет и толщину. Для этого нужно предварительно выделить лишь одну из них и сделать соответствующие установки. Цвет линии также можно устанавливать с помощью окна в разделе Colors Панели инструментов. Правее расположено окно со списком выбора для стиля линии или контура. Как я уже отмечал, в редакторе имеется 6 основных стилей. Сейчас для всех линий установлен пункт Solid Сплошной, который предлагается по умолчанию. Выделим только одну — вторую линию.

На панели Properties установим для нее пункт Dashed Пунктир. Для третьей линии после ее выделения установим пункт Dotted Точечный, для четвертой Ragged — Рваный, для пятой Stipple- Мелкий пунктир,и наконец для последней — пункт Hatched Поперечные штрихи. Но это еще не все. Редактор предлагает дополнительные настройки для каждого стиля контура, за исключением сплошного, для которого можно изменять только толщину и цвет. Выделим, например, пунктирную линию и щелкнем по кнопке Custom Другой на панели Properties. Появится диалоговое окно, в котором можно определить длину пунктира и расстояние между черточками. Здесь также можно изменить толщину линии и ее стиль.

Введем, например, в правое поле, определяющее расстояние между пунктирами, цифру 12 и подтвердим установку. Вы видите, что расстояние между черточками увеличилось. Точно так же можно настраивать и другие стили. Так для точечной линии можно изменить расстояние между точками, для штриховой — длину и ориентацию штрихов и т.д. Поэкспериментируйте с этими настройками самостоятельно, иначе у нас останется мало времени для освоения остальных инструменто Другим средством для рисования контуров является инструмент Pencil Карандаш. В отличие от инструмента Линии он позволяет создавать контуры произвольной формы. Карандаш очень прост в использовании. Выбрал его, настроил параметры будущего контура, щелкнул на полотне и рисуй себе контур произвольной формы, удерживая нажатой левую клавишу мыши. Об этом инструменте не стоило бы больше и говорить, если бы некоторые его особенности. Обратите внимание, что при выборе инструмента карандаш в разделе Options — Модификаторы — появилась одна единственная кнопка.

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

Сглаживание, и Ink — Подпись. Выберем режим Сглаживание и рисуем. Как видите, программа сглаживает шероховатости, сохраняя кривизну линии оригинала. А в режиме Ink редактор старается отобразить любую проведенную кривую как можно точнее, хотя самые мелкие неровности тоже сглаживаются. Таким образом программа FLASH проявляет довольно-таки гибкий подход к пользователю как к рисовальщику. Ненужные неровности могут быть исправлены, а нужные сохранены. Разумеется, все контуры, нарисованные инструментом Карандаш, могут быть модифицированы с помощью панели Инспектора Свойств точно таким же образом, как я показывал на примере инструмента Линия. Не забывайте только выделять контур перед модификацией. Поехали дальше, и сейчас разберемся с такими инструментами рисования как Овал и Прямоугольник.

Пользоваться этими инструментами так же просто, как и инструментом Линия: следует перемещать мышь при нажатой левой кнопке. При этом вычерчивается соответствующая фигура. Если при рисовании удерживать нажатой клавишу SHIFT, Какой клавишей на клавиатуре можно добиться отрисовки правильных геометрических форм то создаются, соответственно, круг или квадрат. Особенность использования этих инструментов в том, что они создают не только контуры, но и заливки. Цвет заливки определяется соответствующей установкой в разделе Colors.

После создания фигуры можно с помощью инструмента Стрелка выделить только контур или только заливку, после этого их нужно перемещать или использовать самостоятельно. Цвет заливки или контура легко поменять. Для этого инструментом Стрелка выделите, например, заливку, а затем в разделе Colors щелкните по окну Цвет Заполнения и в появившейся палитре выберите подходящий цвет. Такую же операцию можно проделать и с помощью панели Properties. Если вы хотите создать прямоугольник или овал без заливки, необходимо после выбора инструмента сбросить цвет заливки, щелкнув по значку No Colors — Без Цвета.

Аналогичным образом можно сбросить цвет контура и создавать только заливки овальной или прямоугольной формы. У инструмента Прямоугольник есть еще одна особенность, о которой следует знать, а именно возможность создавать прямоугольники с закругленными углами. Для этого после выбора инструмента следует щелкнуть по кнопке модификатора Round Rectangles Radius.

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

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

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

Например, группирование объектов, размещение графики в разных слоях и некоторые другие, о которых мы поговорим позже. Ну и в заключение этого урока рассмотрим два вспомогательных инструмента раздела View — Просмотр, которые помогут нам более эффективно работать в программе. Это так называемая Рука — Hand и инструмент масштаба ZOOM. Пользоваться этими инструментами очень просто. С помощью руки можно перемещать всю рабочую область. Если выбран какой-либо другой инструмент, например, Стрелка, то при нажатии клавиши SPACE (ПРОБЕЛ) временно активизируется инструмент Рука. Как только клавиша ПРОБЕЛ отпущена, Какую клавишу нужно удерживать чтобы двигать все полотно то вновь активизируется ранее выбранный инструмент. С помощью инструмента ZOOM можно увеличивать масштаб рабочей области, а при нажатой клавише ALT уменьшать ее видимый размер. Какую клавишу нужно удерживать чтобы масштаб уменьшался.

Кроме того, при использовании инструмента Масштаб можно перетащить выбранный прямоугольник для указания участка фильма, который требуется сделать крупнее. Как только кнопка мыши будет отпущена, изображение увеличится до указанной степени. Замечу, что оба указанных инструмента никак не влияют на содержание ролика, а используются только для удобства просмотра Уважаемые слушатели, на этом уроке мы продолжим знакомиться с панелью инструментов редактора и научимся работать инструментами Заливка и TRANSFORM FIL (Преобразование заливки). Рассмотрим инструмент Заливка, который позволяет закрашивать замкнутые контуры любым цветом, а также изменять уже созданные заливки. Нарисуем фигуры, заливку которых мы будем изменять, пусть это будут прямоугольник и круг. Для того, чтобы поменять цвет заливки существующего объекта, выберем инструмент Paint Backet и щелкнем по окну выбора цвета заливки раздела Colors — Цвета.

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

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

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

Проведем маленький эксперимент:

нарисуем Карандашом замкнутый контур и с помощью инструмента Ластиксделаем в нем маленький разрыв. Выберем инструмент Заливка и попробуем закрасить этот контур в Ничегошеньки у нас не получилось.

Попробуем поставить режим закрывать малые зазоры — опять ничего. Ну что же, установим следующий режим — закрывать средние зазоры — и повторим попытку. "Ура, заработало! — как сказал бы кот Матроскин". Что касается конкретной величины допустимого зазора контура в различных режи МАХ заливки, то программа Flash, к сожалению, не дает на этот вопрос однозначного ответа, поэтому мой вам совет — при наличии разрывов в контуре подбирайте режим заливки опытным путем.

Пока я рассказал вам только о самом простом виде заливки, а именно о заливке одним цветом или так называемой сплошной заливке. К счастью, программа Flash предоставляет нам возможность использования и других, более интересных режимов заливок: градиентных и растровых. Чтобы создать эти виды заливок необходимо воспользоваться вспомогательной панелью Mixer. Здесь имеется раскрывающийся список, в котором можно выбрать вид заливки. Пункт Solid Сплошная означает сплошную заливку, с которой мы уже знакомы, при этом на панели отображается кнопка выбора цвета заливки, которая открывает знакомую палитру. Следующие пункты этого меню предназначены для создания градиентных и растровых заливок. Пункт Linear Gradient определяет линейную градиентную заливку, RADIAL GRADIENT — круговую градиентную, а пункт BITMAP — растровую заливку.

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

При выборе кругового градиента имеет значение место щелчка внутри контура фигуры, в этом месте располагается центр идеальной заливки. Однако черно-белый градиент — это несколько скучно. Чтобы выбрать, между какими цветами осуществляется переход, проделаем следующее: отметим один из маркеров линейки, щелкнем на окне выбора цвета и выберем в палитре подходящий оттенок. Затем настроим цвет второго маркера. Это можно сделать более гибким способом с помощью окна и ползунка в нижней части панели. Щелкнем по нужному оттенку, после чего можно подрегулировать его яркость с помощью ползунка. Теперь настроенный градиент можно применить к любому нашему объекту, щелкнув по нему инструментом Paint Backet.

Таким образом можно получить любые двухцветные градиенты. А что делать, если надо получить постепенный цветовой переход между тремя и более цветами? Все очень просто: подведите указатель по нижнюю часть линейки, рядом с ним появится знак "+", щелчок мыши создаст новый маркер, цвет которого можно настроить показанными ранее способами. Так создаются интересные многоцветные градиенты. Если вы ошибочно добавили новый маркер, то нажав левую кнопку мыши потяните его вниз — маркер исчезнет.

И еще одна замечательная возможность редактора по созданию заливок, а именно: цвет любого маркера можно сделать прозрачным или полупрозрачным. Для этого активизируем один из маркеров и в поле Alfa установим прозрачность около 40%. Применим полученный градиент к нарисованному кругу. Чтобы эффект прозрачности был больше заметен, выведем на свет божий вспомогательную сетку: для этого выполним команду VIEW, Grid, Show Grid. Теперь хорошо видно, что центральная часть круга является полупрозрачной. Собственно говоря, с помощью панели Mixer можно сделать полупрозрачной и сплошную заливку. Так в списке заливок выберем пункт, Solid — Сплошная, установим прозрачность около 50% и применим эту заливку к какой-нибудь фигуре. На фоне сетки хорошо виден полученный эффект.

Как я уже отмечал, редактор позволяет создавать еще один не менее интересный вид заливки — растровую заливку. Но прежде чем познакомиться с ней нам желательно освоиться с инструментом Transform Fill — Преобразование заливки. Этот инструмент применим только для градиентных и растровых заливок, на сплошную заливку он не оказывает никакого влияния. Инструментом Стрелка выделим нижние объекты и удалим их клавишей DELETE. Выберем инструмент Transform Fill, вид указателя мыши изменится. Щелкнем теперь по прямоугольнику с линейным градиентом. На экране появились три маркера. Круглый маркер в центре фигуры позволяет переместить центр заливки в нужную точку вот таким образом, квадратный маркер предназначен для изменения размера заливки, а с помощью круглого углового маркера заливку можно повернуть, тем самым задав ей необходимый наклон.

Если же щелкнуть инструментом Transform Fill по круговому градиенту, то появятся четыре маркера. Центральный маркер так же служит для перемещения центра заливки, средний круглый маркер позволяет изменить размер градиента, квадратным маркером можно задать отклонения от круговой формы, а с помощью еще одного круглого маркера заливку можно повернуть на любой угол. Таким образом, используя сочетания показываемых настроек, линейные и круглые градиенты можно изменить как только душе угодно. А теперь снова вернемся к инструменту Заливка и посмотрим, как в программе создаются растровые заливки. Если сейчас на панели Mixer установить пункт Bitmap, Растр, то этот выбор сам по себе ничего не даст, сначала нужно импортировать в файл проекта какое-нибудь растровое изображение. Это делается с помощью команд FILE, импорт или импорт в библиотеку.

Если все-таки щелкнуть по пункту Bitmap, то редактор сам предложит произвести импорт растра и откроет диалоговое окно импорт в библиотеку.

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

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

Она равномерно заполнится уменьшенными копиями растров. Затем используя инструмент Transform Fill изменим эту заливку по своему вкусу, например, следующим образом. Снова выберем инструмент Заливка и теперь обратим внимание на еще одну кнопку в разделе Options. Этот модификатор называется Lock Fill — Блокировать заливку, и применяется только для градиентных и растровых заливок. После активации этой кнопки закрашиваемая форма рассматривается редактором как часть текущей, которая редактировалась или создавалась последней. Этот параметр блокирует угол, размеры и исходную точку текущего градиентного или растрового заполнения.

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

Установим линейную градиентную заливку и настроим черно-белый градиент.

Выберем инструмент Paint Backet и закрасим нарисованные фигуры, начиная с самых маленьких. Теперь нажмем кнопку Lock Fill и повторно кликнем по маленьким прямоугольникам. Они заполнятся градиентом таким образом, как будто представляют собой единый объект — большой прямоугольник, который редактировался последним перед выбором модификатора. Я думаю, дополнительные комментарии излишни. Этот модификатор удобно использовать, например, при создании рисунка закатного неба с чередой облаков, где все облака должны быть закрашены одним общим последовательным градиентным заполнением.

Уважаемые слушатели, на этом уроке мы продолжим изучение панели редактора Flash MX и подробно познакомимся с такими инструментами, как Brush Tool — Кисть, Incle Boatle — Чернильница, Eyedropper — Пипетка и инструментом Eraser Ластик. С помощью инструмента Brush можно создавать заливки произвольной формы без контуров.

Он применяется для рисования мазков заливки и заполнения замкнутых фигур. При выборе Кисти в разделе Options появляется несколько модификаторов. Параметр BRUSH SIZE представляет собой раскрывающийся список из 10-ти раскрывающихся параметров кисти, начиная от самого маленького и заканчивая вот таким.

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

При использовании профиля отличного от окружности размер, определяемый установкой BRUSH SIZE, относится к самой широкой части профиля. Цвет мазков кисти устанавливается в разделе Colors панели инструментов. Можно также использовать градиентные и растровые заливки, для чего нужно будет сделать необходимые настройки на панели Mixer.

Например, если здесь установить линейную градиентную заливку, то получатся вот такие мазки. Щелчок по кнопке BRUSH MAUNT открывает меню из пяти возможных режимов работы инструмента Кисть. Чтобы проиллюстрировать эти режимы, нам понадобится какой-нибудь графический объект. Пусть это будет прямоугольник с черным контуром и красной заливкой. Нарисуем его, но сначала очистим экран. Выберем инструмент Прямоугольник, на панели Properties назначим цвет контура черным, толщину равной 4 пикселлам, а цвет заливки красным.

Теперь рисуем. Создадим пять копий этого прямоугольника. Какой кнопкой нужно воспользоваться, чтобы создавались копии Выберем инструмент Arrow, выделим прямоугольник двойным щелчком, нажмем клавишу CTRL и удерживая ее выполним перетаскивание копии. Этим же способом сделаем еще 4 копии нашей фигуры. Скопировать выделенный объект можно также командой EDIT Duplicate. Сделаем отмену.

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

Щелкнем по кнопке BRUSH MAUNT и выберем режим NORMAl, впрочем, его выбирать не надо, он стоит по умолчанию. Попробуем закрасить первую копию прямоугольника. Вы видите, что мазки кисти закрашивают все изображение: и заливку, и контур. Установим режим Paint Fills и повторим операцию. Как видите, закрашивается только заливка, а контур объекта сохраняется как ни в чем ни бывало. В режиме Раскраска сзади закрашивается только часть полотна, на которой ничего не нарисовано. Этот режим можно использовать, например, для ручного раскрашивания фона. Для демонстрации режима Paint Selection Раскраска по выбранному, необходимо выделить какой-либо объект или его часть. Для этого воспользуемся инструментом Arrow.

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

Теперь рассмотрим вспомогательные инструменты, которые часто могут существенно облегчить жизнь пользователю. Это инструменты Ink Boatle — Чернильница, инструмент Dropper Пипетка и инструмент Eraser — Ластик.

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

толщина 5 пикселлов, стиль точечный, цвет синий.

Выберем инструмент Чернильница и щелкнем в любом месте фигуры.

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

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

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

Таким образом можно с помощью пипетки перенести на любой другой объект нужную заливку или стиль контура, даже не глядя на их параметры. Вы можете заранее создать коллекцию собственных линий и заливок вне рабочего полотна, а затем использовать нужные стили при необходимости. Это значительно ускорит работу. У инструмента Пипетка есть еще одна особенность: если нажать клавишу SHIFT и навести инструмент на контур или заливку, то возле курсора появится крошечное изображение, напоминающее перевернутую букву U. Щелчок мышью приведет к одновременному изменению цвета всех инструментов рисования и окраски программы.

Какой клавишей нужно воспользоваться, чтобы рядом с пипеткой появилась буква U Ну и в заключение этого урока рассмотрим инструмент Eraser — Ластик, который предназначен для ручного стирания графических объектов.

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

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

С первым из них — NORMAL — мы уже познакомились, пункт — Стирание заливок — устанавливает режим, при котором под ластиком стираются только заливки, а контуры остаются нетронутыми, режим LINES, напротив, позволяет стирать только контуры, не затрагивая заливок. Щелкните на пункте включающем режим ластика — Eraser Lines Стирание контура Пункт Selected Fills предназначен для стирания только заливок или их частей, которые заранее были выделены, например, следующим образом. И, наконец, пятый пункт. Eraser Inside — позволяет стирать только заливки внутри замкнутого контура. Кроме того, при выборе инструмента Ластик, в разделе Options появляется кнопка Faucet Смывание.

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

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

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

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