Международный конкурс

Доступно для всех учеников
1-11 классов и дошкольников

Наградные документы для всех участников

Подать заявку

Оплата после прохождения

Инфоурок › Информатика ›Другие методич. материалы›Сборник практических заданий по дисциплине "Мультимедия технология"

Сборник практических заданий по дисциплине "Мультимедия технология"

Скачать материал

Министерство образования и науки Республики Казахстан

РГКП «Семипалатинский финансово-экономический колледж имени Рымбека Байсеитова»

Сборник практических заданий по учебной практике

Дисциплина: «Мультимедия технология»

Специальность: «Вычислительная техника и программное обеспечение (по видам)»

Подготовила: Капашева Ш.М.

2015-2016 учебный год

Рассмотрено и одобрено на заседании цикловой комиссии

Протокол №_____ «___»___________2015 г.

Председатель цикловой комиссии

специальных дисциплин - 1__________ Мукушева Л.А.

Введение

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

Бурное развитие компьютерных технологий в последнее десятилетие привело к появлению понятия «newMedia». К «новым носителям информации» относятся: Интернет, компьютерные игры, мультимедийные обучающие, развлекательные, рекламирующие и др. CD, интерактивное кино, интернет- телевидение и радио.

Это определяет актуальность введения дисциплины и изучаемых материалов. Отличительная особенность newMedia не только новые физические носители - CD, компьютерные винчестеры и т. п. Качественно новым свойством стала интерактивность - возможность работы пользователя в диалоговом режиме с разнородными данными.

Дисциплина “Мультимедиа технологии” занимает важное место в структуре учебного плана. Изучению дисциплины предшествует прохождение студентами дисциплины «Компьютерная графика», «Физика», изучение скриптовых языков программирования, основ создания сайтов и др. знание которых необходимо при ее прохождении. В свою очередь знания, приобретаемые при изучении дисциплины, используются в создании презентаций по преддипломной практике и дипломных работ, в дизайне веб-сайтов, в создании учебных и бизнес мультимедиа продуктов.

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

Дисциплина «Мультимедиа технологии», по возможности, учитывает эту специфику. Прежде всего, автор дисциплины исходил из понимания того, что студенты должны четко представить себе значение, место и взаимосвязь мультимедиа технологий в современном мире в целом и в области информационных технологий в частности. Вторым руководящим принципом было убеждение, что без знания аппаратной части мультимедиа и ясного понимания зависимости качества мультимедийных приложений от согласованности аппаратно-программной части. И, наконец, лейтмотивом всй дисциплины является возможность практического применения получаемых теоретических знаний при работе с реальными программными продуктами ведущих компаний разработчиков таких как Adobe, Macromedia, MicroSoft, Discreet, NewTek, Syntrillium software, Steinberg.

ПРАВИЛА ТЕХНИКИ БЕЗОПАСНОСТИ В КОМПЬЮТЕРНОМ КЛАССЕ

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

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

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

Требования безопасности перед началом работы

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

2. Запрещено входить в кабинет информатики в грязной обуви

3. Запрещается шуметь, громко разговаривать и отвлекать других учащихся

4. Запрещено бегать и прыгать, самовольно передвигаться по кабинету

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

6. Разрешается работать только на том компьютере, который выделен на занятие

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

8. Запрещается выключать или включать оборудование без разрешения преподавателя

9. Напряжение в сети кабинета включается и выключается только преподавателем

Требования безопасности во время работы

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

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

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

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

5. Контролировать расстояние до экрана и правильную осанку

6. Не допускать работы на максимальной яркости экрана дисплея

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

Запрещается

1. Эксплуатировать неисправную технику

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

3. Работать с открытыми кожухами устройств компьютера

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

5. Во время работы касаться труб, батарей

6. Самостоятельно устранять неисправность работы клавиатуры

7. Нажимать на клавиши с усилием или допускать резкие удары

8. Пользоваться каким-либо предметом при нажатии на клавиши

9. Передвигать системный блок, дисплей или стол, на котором они стоят

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

11. Брать сумки, портфели за рабочее место у компьютера

12. Брать с собой в класс верхнюю одежду и загромождать ею кабинет

13. Быстро передвигаться по кабинету

14. Класть какие-либо предметы на системный блок, дисплей, клавиатуру.

15. Работать грязными, влажными руками, во влажной одежде

16. Работать при недостаточном освещении

17. Работать за дисплеем дольше положенного времени

Запрещается без разрешения преподавателя

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

2. Использовать различные носители информации (дискеты, диски, флешки)

3. Подключать кабели, разъёмы и другую аппаратуру к компьютеру

4. Брать со стола преподавателя дискеты, аппаратуру, документацию и другие предметы

5. Пользоваться преподавательским компьютером

Требования безопасности по окончанию работы

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

2. Медленно встать, собрать свои вещи и тихо выйти из класса, чтобы не мешать другим учащимся

Ответственность за нарушение правил техники безопасности

1. При нарушении техники безопасности учащемуся будет объявлен выговор, взыскание вплоть до отстранения от работы за оборудованием

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

РАЗДЕЛ 1. ОСНОВЫ РАБОТЫ В HTML, CSS И XML. СПОСОБЫ СОЗДАНИЯ САЙТОВ.

ТЕМА 1.1 ЯЗЫК HTML

ПРАКТИЧЕСКАЯ РАБОТА №1

Теоретическая часть

Структура HTML-документа

<HTML>

<HEAD>

<TITLE> Моя домашняя страница </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Первый тег, который вы здесь видите, <HTML>, сообщает броузеру о том, что он имеет дело именно с документом в формате HTML. Тег <HTML> и парный ему закрывающий тег </HTML> можно считать как бы конвертом", в который помещается весь документ. Любой HTML -документ состоит из заголовка, который задается при помощи тега <TITLE>, и тела документа, который определяется тегом <BODY>. В заголовке документа размещается служебная информация, комментарии автора и заголовок страницы, заключаемый в теги <TITLE>. Заголовок, вписанный между тегами <TITLE>, в основное текстовое поле браузеру не попадает, а, как правило, размещается в заголовке окна браузера. HTML-документ - это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Большинство элементов языка HTML описывает части содержания документа и помещается между тегами <BODY> и </BODY>, то есть, внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста. Теперь можно сформулировать правила вложения элементов.

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

• Блочные элементы могут содержать вложенные блочные и текстовые элементы.

• Текстовые элементы могут содержать вложенные текстовые элементы.

• Текстовые элементы не могут содержать вложенные блочные элементы.

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

ПРАКТИЧЕСКАЯ ЧАСТЬ

Текстовое оформление страниц

С помощью тега <font> можно изменить параметры шрифта. Для тега используются следующие параметры: face, size и color.

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

Пример 1. Использование параметра face

<font face="Arial, Helvetica, sans-serif">Текст будет написан шрифтом

Arial.</font>

Size задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового.

Пример 2. Задание размера шрифта

<font size=1>Шрифт размера 1</font><br>

<font size=2>Шрифт размера 2</font><br>

<font size=3>Шрифт размера 3</font><br>

<font size=4>Шрифт размера 4</font><br>

<font size=5>Шрифт размера 5</font><br>

<font size=6>Шрифт размера 6</font><br>

<font size=7>Шрифт размера 7</font><br>

Шрифт размера 1

Шрифт размера 2

Шрифт размера 3

Шрифт размера 4

Шрифт размера 5

Шрифт размера 6

Шрифт размера 7

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

Пример 3. Изменение цвета текста <font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной.</font>

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

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

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

Пример 4. Создание нижнего индекса

<b>Формула серной кислоты:</b>

Формула серной кислоты:

H₂SO₄

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

Задание

Оформите текст, как показано ниже:

Октябрь уж наступил,

Уж роща отряхает

Последние листы

С нагих своих ветвей.

Дохнул осенний хлад,

~~Дорога промерзает,~~

Журча, ^еще бежит

За _{мельницу} ^ручей.

Вставка изображений в html-страницы

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

Файл с рисунком, изображенным ниже, называется sample.gif и размеща-ется в папке images корня сайта.

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

Пример 1 Вставка изображения в документ

<html>

<body>

<img src="http://www.htmlbook/images/sample.gif"> - это абсолютный адрес раз-

мещения изображения

<img src="/images/sample.gif"> - адрес размещения изображения относительно

корня сайта

<img src="images/sample.gif"> - адрес размещения изображения относительно

текущего HTML-документа

</body>

</html>

Выравнивание изображений

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные зна-чение этого параметра и результат его использования.

Наиболее популярные параметры – left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, реко-мендуется в теге IMG добавить параметр hspace и vspace, задающих расстоя-ние до текста в пикселах.

Пример 2 Обтекание текста вокруг рисунка

<html>

<body>

<img src="HLPBELL.GIF" width=50 height=50 hspace=10 vspace=10

align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy

nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad

minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat.

</body>

</html>

Задание

Выровняйте рисунки и текст так, как показано ниже:

ПРАКТИЧЕСКАЯ РАБОТА №2 СОЗДАНИЕ ГИПЕРССЫЛОК КАК ДЕЛАТЬ ССЫЛКУ

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

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

Пример 1. Использование абсолютных ссылок

<html>

<body>

<a href=www.yandex.ru>Поисковая система Яндекс</a>

</body>

</html>

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

1. /

2. /demo/

3. /images/pic.gif

4. ../help/me.html

5. manual/info.html

Первые две ссылки называются неполные и указывают веб-серверу за-гружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo ( пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш пе-ред адресом говорит о том, что адресация начинается от корня сайта (пример 3), двоеточие - перейти на уровень выше в списке каталогов сайта (пример 4).

Пример 2. Использование относительных ссылок

<html>

<body>

<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>

<a href=tip.html>Как сделать такое же фото?</a>

</body>

</html>

Ссылки внутри страницы

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

Пример 1. Создание внутренней ссылки

<html>

<body>

<a name=top></a> Друг уронил утюг в унитаз. И разбил его. Причем так раз-

бил, что по назначению унитаз и использовать никак нельзя. Мгновением назад толь-

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

кой предмет в доме. Махнул рукой нечаянно, а потом мучайся...

<a href=#top>Наверх</a>

</body>

</html>

Между тегами <a name=top> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке , находящейся внизу страни-цы. Имя ссылки на закладку начинается символом # , после чего идет название закладки. Название выбирается любое, соответствующее тематике.

Можно, также, делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.

Пример 2. Ссылка на закладку из другой веб-страницы

<html>

<body>

<a href=text.html#bottom>Перейти к нижней части текста</a>

</body>

</html>

Ссылка на новое окно

Если требуется сделать ссылку на документ, который открывается в но-вом окне браузера, используется параметр target=_blank тега А.

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

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

Пример 2. Создание ссылки на новое окно

<html>

<body>

<a href=www.bsu.edu.ru>Обычная ссылка на сайт www.bsu.edu.ru</a><br>

<a href=www.bsu.edu.ru target=_blank>Ссылка открывает новое окно на сайт

www.bsu.edu.ru</a>

</body>

</html>

Обычная ссылка на сайт www.bsu.edu.ru Ссылка открывает новое окно на сайт www.bsu.edu.ru

Задание

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

Словарь терминов

А Б В Г Д Е

АВТЕНТИЧЕСКИЙ КАДАНС

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

АЛИКВОТНЫЕ СТРУНЫ

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

игры

АТАКТА

гармонический элемент на басу нижнего или верхнего вводного тона

В начало

БАГАТЕЛЬ

небольшая нетрудная для исполнения пьеса

БАРТОКОВСКОЕ ПИЦЦИКАТО

сильный щипок струны с последующим ударом струны о гриф

БОНАНГ

набор из 10-12 гонгов разного размера

В начало

ПРАКТИЕЧЕСКАЯ РАБОТА №3 СОЗДАНИЕ СПИСКОВ НУМЕРОВАННЫЕ СПИСКИ

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

Ниже, в таблице приведены различные параметры тега OL и результат их применения.

Маркированные списки

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

Для установки маркированного списка используется тег UL и LI (При-мер 1)

Пример 1. Создание маркированного списка

<html>

<head>

<body>

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

<ul>

<li>работоспособность всех ссылок</li>

<li>поддержку разных браузеров</li>

<li>читабельность текста</li>

</ul>

</body>

</html>

Ниже показан результат примера 1.

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

• работоспособность всех ссылок

• поддержку разных браузеров

• читабельность текста

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

Пример 2. Создание маркированного списка без отступов

<html>

<head>

<body>

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

<li>работоспособность всех ссылок</li>

<li>поддержку разных браузеров</li>

<li>читабельность текста</li>

</body>

</html>

Ниже показан результат примера 2.

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

• работоспособность всех ссылок

• поддержку разных браузеров

• читабельность текста

Маркеры могут принимать один из трех видов: круг (по умолчанию), ок-ружность и квадрат. Для выбора типа маркера используется параметр type="..." тега UL. Вместо многоточия подставляется одно из трех значений указанных в таблице.

С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунок.

ПРАКТИЧЕСКАЯ РАБОТА № 4

СОЗДАНИЕ ТАБЛИЦ

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

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

Для добавления строк используются теги <tr> и </tr>. Чтобы разделить строки на колонки применяются теги <td> и </td>.

Параметры таблицы

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

<table параметр1=... параметр2=...>

Описание параметров таблицы и их свойств описано ниже.

Примечание

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

2. Параметр background, отвечающий за рисунок фона, своеобразно по-нимается в разных браузерах. IE вставляет картинку во всю таблицу, если таб-лица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscape добавляет фоновое изображение в каждую ячейку табли-цы;

3. По умолчанию, таблица выводится без рамки. Однако Netscape добав-ляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте пара-

метр border=0;

4. Если ширина таблицы не указана, она подгоняется под содержание яче-

ек.

Задание 1 Создать 3 таблицы, используя приведенный ниже листинг

1.1 Создание таблицы

<HTML>

<HEAD>

<TITLE>ТАБЛИЦА</TITLE>

</HEAD>

<BODY>

<TR>

<B>Заголовок Таблицы.</B>

</TD>

</TR>

<TR>

Первая ячейка первой строки

</TD>

Вторая ячейка первой строки

</TD>

</TR>

<TR>

Первая ячейка второй строки

</TD>

Вторая ячейка второй строки

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Тег <TABLE> задает таблицу

Атрибуты border="2" и align=center задают, сответственно, размер границ таблицы и выравнивание ее по центру страницы

Тег <TR> задает строку таблицы Тег <TD> задает ячейку таблицы

Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)

В результате получится следующая таблица, состоящая из двух столбцов

и двух строк:

1.2. Сложная таблица

<HTML>

<HEAD>

<TITLE>СЛОЖНАЯ ТАБЛИЦА</TITLE>

</HEAD>

<BODY>

<TR>

Две ячейки, объединенные по горизонтали

</TD >

</TR >

<TR >

Две ячейки, объединенные по вертикали

</TD >

по левому краю

</TD>

</TR >

<TR <

<TD width="33%" <

<P align="right" >по правому краю

</TD >

</TR >

</TABLE >

</BODY >

</HTML >

Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам) Атрибут rowspan=n объединяет n ячеек по вертикали (по строкам) Атрибут valign="middle" выравнивает текст в ячейке по центру ячейки

по вертикали В результате получается следующая таблица:

1.3. Более сложная таблица

<HTML>

<HEAD>

<TITLE>УЧЕБНАЯ ТАБЛИЦА</TITLE>

</HEAD>

<BODY>

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6"

CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"

BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">

<TR><TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</TH></TR>

</THEAD>

<TBODY>

<TR>

<TD WIDTH="33%">Это первая ячейка</TD>

<TD WIDTH="33%">Это вторая ячейка</TD>

<TD ROWSPAN="3">А это три ячейки третьего столбца

объединились в одну большую</TD>

</TR>

<TR>

<TD COLSPAN="2">Это единственная ячейка второй строки,

объединяющая оба столбца</TD>

</TR>

<TR>

<TD>Это первая ячейка третьей строки</TD>

<TD WIDTH="33%">А это вторая ячейка третьей строки</TD>

</TR>

</TBODY>

<SMALL>конец</SMALL></TD></TR>

</TFOOT>

</TABLE>

</BODY>

</HTML>

1.3. Более сложная таблица

<HTML>

<HEAD>

<TITLE>УЧЕБНАЯ ТАБЛИЦА</TITLE>

</HEAD>

<BODY>

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6"

CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"

BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">

<TR><TH COLSPAN="3">УЧЕБНАЯ ТАБЛИЦА</TH></TR>

</THEAD>

<TBODY>

<TR>

<TD WIDTH="33%">Это первая ячейка</TD>

<TD WIDTH="33%">Это вторая ячейка</TD>

<TD ROWSPAN="3">А это три ячейки третьего столбца

объединились в одну большую</TD>

</TR>

<TR>

<TD COLSPAN="2">Это единственная ячейка второй строки,

объединяющая оба столбца</TD>

</TR>

<TR>

<TD>Это первая ячейка третьей строки</TD>

<TD WIDTH="33%">А это вторая ячейка третьей строки</TD>

</TR>

</TBODY>

<SMALL>конец</SMALL></TD></TR>

</TFOOT>

</TABLE>

</BODY>

</HTML>

Атрибут CELLSPACING="6" задает свободное пространство между ячейками таблицы

Атрибут CELLPADDING="20" задает свободное пространство между данными в ячейке и ее границами

Атрибут BORDERCOLORLIGHT="Lime" задает цвет левого и верхнего углов таблицы

Атрибут BORDERCOLORDARK="Green" задает цвет правого и нижнего углов таблицы

Атрибут BGCOLOR="#DFFFDF" задает цвет фона таблицы В результате получается следующая таблица:

УЧЕБНАЯ ТАБЛИЦА


Это первая ячейка	Это вторая ячейка	А это три ячейки
		А это три ячейки
Это единственная ячейка второй строки,		третьего столбца
объединяющая оба	столбца	объединились в од-
		ну большую
Это первая ячейка	А это вторая ячей-	ну большую
Это первая ячейка	А это вторая ячей-
третьей строки	ка третьей строки

конец

Задание 2 Создать турнирную таблицу, представленную ниже на рисунке.

Для задания кавычек используйте специальные символы « ("«") и » ("»"), для создания длинного тире используйте специальный символ

— ("—").

ПРАКТИЧЕСКАЯ РАБОТА №5 СОЗДАНИЕ ФРЕЙМОВ

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

Для создания фрейма используется тег FRAMESET, который заменяет тег BODY в документе и используется для разделения экрана на области. Внутри данного тега находятся теги FRAME, которые указывают на HTML-документ, предназначенный для загрузки в область.

Пример 1. Создание простого фрейма

<HTML>

</FRAMESET>

</HTML>

В приведенном примере присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Вертикальное расположение устанавливается параметром cols="…", а для горизонтальных полос используют параметр rows="…". Параметр border="…" определяет границу между фреймами. Оп-ределение документа, изначально загружаемого при открытии этого файла (этот документ является HTML-страницей.), задается атрибутом тега <FRAME> src="…", при этом необходимо указать параметр name="…", позволяющий задать "имя" созданной области в виде последовательности ла-тинских букв и цифр, использованной как значение этого атрибута. Это имя можно использовать, чтобы загружать новые документы в ранее созданную об-ласть. Для этого в тег <A>, определяющий гиперссылку, необходимо добавить атрибут target="…", значение которого совпадает с ранее определенным име-нем области . При переходе по данной гиперссылке новый документ загрузится в указанный фрейм. Например, предположим, что начальная страница Web-узла состоит из двух фреймов: слева располагается навигационная панель, а справа - текущая страница. Если правой области присвоено имя, используемое во всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигацион-ной панели приведет к обновлению информации в соседней области, оставляя навигационную панель без изменений. В данном документе находятся только ссылки на другие (существующие) HTML-документы, которые будут загруже-ны броузером при открытии страницы с фреймами. Файл menu.html имеет сле-дующую структуру:

HTML>

<HEAD>

</HEAD>

<BODY>

<H1>Первый фрейм</H1>

</BODY>

</HTML>

Файл main.html также имеет указанную выше структуру. Следует сказать,

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

файл с фреймами.

Задание 1

Расположить эти фреймы по вертикали, используя атрибут rows="…". В результате у вас должно получиться следующее:

Задание 2

Распространенное явление - комбинация вертикальных и горизонтальных

фреймов.

<FRAMESET cols="*, 55%"> символ * означает все оставшееся место

</FRAMESET>

Используя вложенные теги FRAMESET, разбейте страницу следующим образом:

Задание 3

Используя атрибут target="…", сделать в фреймах гиперссылки, по нажатию на которые в эти же или в другие фреймы произойдет загрузка других страниц

ПРАКТИЧЕСКАЯ РАБОТА №6-8

ТЕМА 1.2 ТАБЛИЦЫ СТИЛЕЙ CSS

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег FONT, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

NC - Netscape Communicator, IE - Microsoft Internet Explorer; 4+ означает. что свойство поддерживается в браузере 4 версии и выше. 4W - работает только под Windows.

Замечание:

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

Пример 1. Задание свойств шрифта с помощью CSS

<html>

<style>

H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight:

light }

</style>

<body>

<H1>Заголовок</H1>

Обычный текст

</body>

</html>

Ниже приведен результат примера 1.

Заголовок

Обычный текст

В таблице Примера 2 даны некоторые параметры и результат их применения.

Пример 2. Результат использования различных параметров шрифтов

Свойства текста

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

NC - Netscape Communicator, IE - Microsoft Internet Explorer; 4+ означает, что свойство поддерживается в браузере 4 версии и выше. 4W - работает только

под Windows.

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

Пример 3. Результат использования различных параметров текста

Границы и рамки

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

означает, что свойство поддерживается в браузере 4 версии и выше. Типы рамок

Для управления видом рамки предоставляется восемь значений параметратborder-style.

Первые две - dotted и dashed стали поддерживаться браузерами Netscape

и Internet Explorer только со старших версий.

<p style="color: yellow;

background-color: deepskyblue;

text-decoration: underline;

text-transform: uppercase;

border: pink inset 25;

PADDING: 20;

font-size: larger;

line-height: 40px;

text-align: center;"> ... </p>

Первые две - dotted и dashed стали поддерживаться браузерами Netscape

и Internet Explorer только со старших версий.

<p style="color: yellow;

background-color: deepskyblue;

text-decoration: underline;

text-transform: uppercase;

border: pink inset 25;

PADDING: 20;

font-size: larger;

line-height: 40px;

text-align: center;"> ... </p>

Атрибут style="…" задает стилевое оформление абзаца

Атрибут color: yellow; задает цвет текста

Атрибут background-color: deepskyblue; задает цвет фона для абзаца

Атрибут text-decoration: underline; задает подчеркивание для текста

Атрибут text-transform: uppercase; задает режим заглавных букв для текста

Атрибут border: pink inset 25; задает рамку вокруг абзаца, соответственно, розовую выпуклую толщиной 25 пикселей

Атрибут PADDING: 20; задает

Атрибут font-size: larger; задает размер шрифта

АТРИБУТ line-height: 40px; задает межстрочный интервал

АТРИБУТ text-align: center; задает выравнивание текста внутри абзаца по центру

Задание 1

Создать в графическом редакторе Paint небольшой рисунок, который будет использоваться в качестве маркера списка. Создать маркированный список со своим маркером, используя стилевое свойство LIST-STYLE-IMAGE: url(имя_рисунка).

Например, <UL style="LIST-STYLE-IMAGE: url(star2.jpg)">

Задание 2

Используя свойства блоков текста, создать следующую страницу:

Задание 3

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

используйте контейнер <DIV> и свойства margin-top и margin-left.

ТЕМА 1.3 ЯЗЫК XML

ПРАКТИЧЕСКАЯ РАБОТА №9-12

Cтатическая и динамическая информационная модель. Основные конструкции языка XML.

Цель работы:

Изучение принципов построения статической и динамической информационной модели. Изучение основных конструкций языка XML и правил оформления XML-документов.

Результат:

Синтаксически правильные XML-документы для выбранной предметной области.

Задание для самостоятельного выполнения

Представьте в виде древовидной структуры данные выбранной по желанию предметной области. Примерами предметных областей могут служить, например, «Издательство» (выпускающее газеты и журналы), «Научная конференция», «Кафедра вуза» или «Составление букетов».

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

Методические указания

к первой части лабораторной работы

Моделирование данных и XML

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

Моделирование информации (понимание структуры и назначения информации, содержащейся в документах);

Проектирование документа (трансляция информационной модели в набор правил или схем для создания фактических документов);

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

Информационная модель — это описание используемой организацией информации, не зависящее от какой бы то ни было информационной технологии и определение таких моментов, как:

§ каким образом она структурирована;

§ что она означает;

§ кому она принадлежит, и кто отвечает за ее своевременность и качество;

§ откуда она берется и что происходит с ней в конце.

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

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

- Получение абсолютно точных определений

- Эффективная коммуникация с пользователями

Существуют два основных типа информационной модели: статическая и динамическая.

Статическая информационная модель

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

При построении статической информационной модели необходимо пройти следующие этапы:

Этап 1. Идентификация понятий, присвоение им имен и их определение

Этап 2. Организация понятий в иерархию классов

Этап 3. Определение связей, множественности и ограничений

Этап 4. Добавление свойств для конкретизации деталей значений, связанных с объектами

Именование понятий

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

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

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

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

В конце этого этапа мы получим список типов тех объектов с именами и определениями, для которых достигнуто соглашение.

Таксономия

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

Ключевой здесь является фраза, определяющая принадлежность (в английском языке — is или is kind of). Написав предложение вида "А есть разновидность В" или "Каждое А есть В", вы определили отношения подтипов в вашей таксономии.

Иногда эти действия называются тестом "is а" ("есть", "представляет собой"). Однако будьте внимательны, поскольку эта конструкция используется также и для описания отношений между конкретным экземпляром и его типом, безопаснее писать этот тест в форме "is a kind of" ("представляет собой разновидность").

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

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

Итак, этап 2 сводится к организации типов объектов в иерархию типов.

Поиск связей

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

Существует некая информация, которую надо знать о каждой связи:

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

Связи типа "один-ко-многим": одна глава содержит много параграфов, один человек покупает много туристических поездок.

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

Связи типа "один-к-одному".

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

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

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

Описание свойств

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

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

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

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

Динамическая информационная модель

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

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

Модели рабочих процессов

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

Модели потоков данных

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

Объектные модели

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

Жизненные циклы объекта

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

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

Варианты использования

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

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

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

Диаграммы взаимодействия объектов

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

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

Пример статической информационной модели

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

XML-документ должен содержать корневой элемент, который является родительским для всех остальных элементов. Любой элемент (кроме находящихся на самом нижнем уровне дерева) может иметь вложенные элементы (дочерние элементы).

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

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

09_01

Рисунок 1

<?xml version="1.0" encoding="windows-1251" ?>

<TITLE>The Adventures of Huckleberry Finn</TITLE>

<AUTHOR Born="1835">Mark Twain</AUTHOR>

</BOOK>

<TITLE>The Marble Faun</TITLE>

<AUTHOR Born="1804">Nathaniel Hawthorne</AUTHOR>

</BOOK>

<AUTHOR Born="1819">Herman Melville</AUTHOR>

</BOOK>

</INVENTORY>

Методические указания

ко второй части лабораторной работы

Синтаксис XML

Для ограничения тегов в разметке XML, так же как и в HTML, используются угловые скобки: тег начинается со знака "меньше" (<) и завершается знаком "больше" (>). Но необходимо помнить, что в отличие от HTML вся разметка XML чувствительна к регистру символов, это касается как имен тегов, так и значений атрибутов.

Имена

В языке XML все имена должны начинаться с буквы, символа нижнего подчеркивания (_) или двоеточия (:) и продолжаться только допустимыми для имен символами, а именно: они могут содержать только буквы, входящие в секцию букв кодировки Unicode, арабские цифры, дефисы, знаки подчеркивания, точки и двоеточия. Однако имена не могут начинаться со строки xml в любом регистре. Имена, начинающиеся с этих символов, зарезервированы для использования консорциумом W3C.

Структура XML- документа

Любой XML-документ состоит из следующий частей:

- Необязательный пролог

- Тело документа

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

Рассмотрим каждую из частей более подробно.

Пролог

Пролог состоит из нескольких частей:

Необязательное объявление XML (XML Declaration).

Объявление заключено между символами <?...?> и содержит:

пометку xml и номер версии (version) спецификации XML;

указание на кодировку символов (encoding), в которой написан документ (по умолчанию encoding="UTF-8");

параметр standalone, который может принимать значения "yes" или "no" (по умолчанию standalone="yes"). Значение "yes" показывает, что в документе содержатся все требуемые декларации элементов, a "no" - что нужны внешние определения DTD.

Все это вместе может выглядеть следующим образом:

<?xml version ="1.0" encoding-"windows-1251" standalone="yes"?>

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

Комментарии

Инструкции по обработке.

Назначение инструкций по обработке — сообщить информацию, передаваемую XML-процессором приложению. Инструкция по обработке имеет следующую общую форму записи:

<? Кому инструкция ?>

Здесь Кому есть имя приложения, которому адресована инструкция. Допускается любое имя при соблюдении следующих правил:

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

имя «xml», в любом сочетании строчных или прописных букв, зарезервировано («xml» строчными буквами используется в объявлении XML-документа, которое представляет собой разновидность инструкции по обработке).

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

Например, следующая инструкция по обработке предписывает браузеру использовать CSS-таблицу из файла styles.css:

<?xml-stylesheet type="text/css" rel="nofollow ugc" target="_blank" href=" styles.css"?>

Символы пустых пространств.

Необязательное объявление типа документа, DTD (Document Type Declaration), которое заключено между символами <!DOCTYPE...> и может занимать несколько строк. В этой части объявляются теги, использованные в документе, или приводится ссылка на файл, в котором записаны такие объявления.

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

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

Тело документа

Тело документа состоит из одного или больше элементов. В правильно оформленном XML-документе элементы формируют простое иерархическое дерево, в котором обязательно присутствует корневой элемент (root element), в который вложены все остальные элементы документа. Имена элементов должны быть уникальны в пределах документа. Имя корневого элемента считается именем всего документа и указывается во второй части пролога после слова Doctype.

Элемент начинается открывающим тегом, затем идет необязательное содержимое элемента, после чего записывается закрывающий тег (в отличие от HTML, наличие закрывающего тега обязательно, исключением являются элементы без содержания, так называемые пустые элементы, которые могут быть записаны в сокращенной форме: <имя_элемента/>). В качестве содержимого элемента могут выступать:

Другие элементы

Символьные данные

Ссылки на символы

Для того чтобы вставить в текст документа некоторый символ, который, например не присутствует в раскладке клавиатуры либо может быть неправильно истолкован анализатором, используют ссылки на символы. Ссылка на символ обязательно начинается со знака "&" (амперсанта) и заканчивается точкой с запятой. Ссылки на символы записываются в следующем виде:

&# код_символа_в_Unicode;

Код символа можно записать и в шестнадцатеричном виде. В этом случае перед ним ставится символ "x":

&#xШестнадцатеричный_код_символа;

Ссылки на сущности

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

&имя_сущности;

Ссылки на сущности указывают программе-анализатору подставить вместо них строку символов, заранее заданную в определении типа документа (DTD).

Комментарии

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

Разделы CDATA

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

Секция CDATA начинается со строки <![CDATA[, после которой записывается содержимое секции. Завершается секция двумя закрывающими квадратными скобками и знаком "меньше":

<![CDATA[ содержание секции ]]>

Инструкции по обработке

Инструкции по обработке содержат указания программе-анализатору документа XML. Инструкции по обработке заключаются между символами <? и ?>. Сразу за начальным вопросительным знаком записывается имя программного модуля, которому предназначена инструкция. Затем, через пробел, идет сама инструкция, передаваемая программному модулю. Сама инструкция это обычная строка, которая не должна содержать набор символов "?>", означающий конец инструкции. Примером инструкции по обработке может служить строка объявления XML:

<?xml version="1.0" encoding="windows-1251"?>

Эта инструкция предназначена программе, обрабатывающей документ XML. Инструкция передает ей номер версии и кодировку, в которой записан документ.

Атрибуты

Открывающие теги либо теги пустых элементов в XML могут содержать атрибуты, представляющие собой пару имя=значение. В одном открывающем теге разрешается использовать только один экземпляр имени атрибута. Атрибуты могут содержать ссылки на объекты, ссылки на символы, текстовые символы. В отличие от языка HTML, в XML значения атрибутов обязательно надо заключать в апострофы ('), либо в кавычки ("). Таким образом, атрибут может быть записан в одном из двух форматов:

имя_атрибута="значение_атрибута"

имя_атрибута='значение_атрибута'

Атрибуты используются для того, чтобы связать некоторую информацию с элементом, а не просто включить ее в содержание последнего. Однозначного ответа на вопрос «Что лучше выбрать – элемент или атрибут?» не существует. Каждый выбирает то, что ему больше нравится. Атрибуты удобно использовать для описания простых значений или для указания типа элемента. Например, мы можем ввести в открывающий тег <city> атрибут type (который может принимать одно из значений: город, поселок, деревня). Тогда данный тег может выглядеть следующим образом:

<city type="город"> Новосибирск </city>

Эпилог

В эпилог XML могут входить комментарии, инструкции по обработке и/или пустое пространство.

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

Правильно оформленные и валидные документы

В общем случае XML- документы должны удовлетворять следующим требованиям:

Любой XML-документ должен всегда начинаться с инструкции <?xml?>, внутри которой также можно задавать номер версии языка, номер кодовой страницы и другие параметры, необходимые программе-анализатору в процессе разбора документа.

Теги (метаданные) в документе выделяются символами <> (угловые скобки). Название тега должно начинаться сразу после угловой скобки (пробелы между открывающей угловой скобкой и названием тега недопустимы). Каждый открывающий тэг, определяющий некоторую область данных в документе, обязательно должен иметь своего закрывающего «напарника», нельзя опускать закрывающие тэги.

В XML учитывается регистр символов.

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

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

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

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

Пример XML-документа

Ниже представлена структура XML-документа по приведенной в первой части данной лабораторной работы статической информационной модели предметной области «Расписание занятий».

<?xml version="1.0"?>

<subject>Deutsch</subject>

<teacher>Borisova</teacher>

</lesson>

<subject>SAP Administration</subject>

<teacher>Egorov</teacher>

</lesson>

<subject>SAP Administration</subject>

<teacher>Petrov</teacher>

</lesson>

</day>

</timetable>

Прежде чем Internet Explorer отобразит XML-документ, его встроенный синтаксический XML-анализатор (parser) просмотрит содержимое документа. Если он обнаружит ошибку, Internet Explorer отобразит страницу с сообщением об ошибке, не предпринимая попытки отобразить документ.

Internet Explorer использует для отображения документа имеющуюся по умолчанию таблицу стилей. Именно поэтому в описании ошибки упоминается использование таблицы стилей XSL.

Практическая работа

. Создание динамических web - страниц на основе языков xml, xsl

Цель работы:

Отображение XML-документа в виде HTML-страницы. Применение таблиц стилей. Вставка элементов HTML в XML-документы

Результат:

Динамическая страница на основе XML файла.

Этапы выполнения работы

Методы создания XSL приложений

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

Выполните отображение этого XML-документа с помощью простой и вложенной таблицы.

Добавьте постраничное отображение.

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

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

ЗАДАНИЕ 1. Стилевые таблицы XSL, JavaScript и XML

РАБОТАЕМ ВМЕСТЕ:

Рассмотрим простой пример XML-файла (ex01.xml).

<?xml version="1.0" encoding="WINDOWS-1251"?>

<title>"Путешествие дилетантов"</title>

<author>Булат Окуджава</author>

</tutorial>

Если мы откроем этот файл в браузере Internet Explorer, то мы увидим тот же самый текст, который приведен выше, вместе со всеми тегами и служебной информацией.

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

Перепишем наш XML-файл в следующем виде (ex01-1.xml).

<?xml version="1.0" encoding="WINDOWS-1251" ?>

<?xml-stylesheet type='text/xsl' rel="nofollow ugc" target="_blank" href="ex01-1.xsl" tppabs="ex01-1.xsl"?>

<title>Путешествие дилетантов</title>

<author>Булат Окуджава</author>

</tutorial>

</NewDataSet>

И создадим XSL-файл ex01-1.xsl. Текст файла приведен ниже.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

</xsl:template>

</xsl:stylesheet>

Если мы теперь откроем файл ex01-1.xsl в браузере Internet Explorer, то мы увидим, что наша задача решена, - на экране осталась только необходимая нам информация, все теги исчезли. Результат, который вы получите на экране браузера, приведен ниже.

Рисунок 2

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

Перепишем XML-файл. Информационную часть изменять не будем, а шаблон укажем другой ex01-2.xml.

<?xml version="1.0" encoding="WINDOWS-1251" ?>

<?xml-stylesheet type='text/xsl' rel="nofollow ugc" target="_blank" href="ex01-2.xsl" tppabs="ex01-2.xsl"?>

<title>Путешествие дилетантов</title>

<author>Булат Окуджава</author>

</tutorial>

Создадим XSL-файл ex01-2.xsl. Текст файла приведен ниже.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

</xsl:template>

</xsl:stylesheet>

Если мы теперь откроем файл ex01-2.xsl в браузере Internet Explorer, то результат будет другим.

Рисунок 3

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

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

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

Есть и еще одно соображение, которое может быть существенным для разработчиков баз данных. Большинство современных СУБД могут форматировать результаты запроса к базе данных в виде XML-файла. То есть при построении интерфейса пользователя в рамках технологии XML и XSL мы добиваемся определенной независимости от поставщика СУБД. В части организации вывода - практически полной независимости. А эта часть весьма велика в большинстве прикладных систем, ориентированных на работу с базами данных. Конечно, помимо вывода есть еще ввод и серверная обработка бизнес-логики, но здесь вам придется искать какие-то иные решения.

Разберем теперь более подробно первый пример. Напомним его текст.

Первая строка информирует браузер о том, что файл имеет формат XML. Атрибут version является обязательным. Атрибут encoding не является обязательным, но если у вас в тексте есть русские буквы, то необходимо вставить этот атрибут, в противном случае XML-файл просто не будет обрабатываться, - вы получите сообщение об ошибке.

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

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

На верхнем уровне XML-файла всегда находится один элемент. То есть файл вида

<?xml version="1.0" encoding="WINDOWS-1251" ?>

<?xml-stylesheet type='text/xsl' rel="nofollow ugc" target="_blank" href="ex01-1.xsl" tppabs="ex01-1.xsl"?>

<title>Путешествие дилетантов</title>

<author>Булат Окуджава</author>

</tutorial>

<title>Привет школяр!</title>

<author>Булат Окуджава</author>

</tutorial>

<title>Четки</title>

<author>Анна Ахматова</author>

</tutorial>

</NewDataSet>

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

<?xml version="1.0" encoding="WINDOWS-1251"?>
<knowledgeDatabase>
<tutorial>

<title>Путешествие дилетантов</title>

<author>Булат Окуджава</author>

</tutorial>

<title>Привет школяр!</title>

<author>Булат Окуджава</author>

</tutorial>

<title>Четки</title>

<author>Анна Ахматова</author>

</tutorial>

</knowledgeDatabase>

Перейдем теперь к шаблону преобразования - к XSL-файлу. Задача XSL-файла - преобразовать дерево XML-файла в другое дерево, которое, например, будет соответствовать формату HTML и может быть изображено на экране браузера с учетом форматирования, выбора шрифтов и т.п.

Для того, чтобы браузер выполнил необходимое преобразование, нужно в XML-файле указать ссылку на XSL-файл

<?xml version="1.0" encoding="WINDOWS-1251"?>
<?xml-stylesheet type='text/xsl' href='ex01-1.xsl'?>

Рассмотрим теперь текст XSL-файла

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<p><strong><xsl:value-of select="//title""/></strong></p>
<p><xsl:value-of select="//author"/></p>
</xsl:template>
</xsl:stylesheet>

Первая строка файла содержит тег элемента xsl:stylesheet. Атрибуты элемента — номер версии и ссылка на пространство имен. Эти атрибуты элемента xsl:stylesheet являются обязательными. В нашем случае пространство имен - это все имена элементов и их атрибутов, которые могут использоваться в XSL-файле. Для XSL-файлов ссылка на пространство имен является стандартной.

Заметим, что XSL-файл является одной из разновидностей XML-файлов. Он не содержит пользовательских данных, но формат его тот же самый. Файл содержит элемент верхнего уровня xsl:stylesheet, а далее идет дерево правил преобразования.

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

В первом примере мы посмотрели, как с помощью элемента xsl:value-of можно вывести в HTML-формате содержание элемента (текст, заключенный между тегами). Теперь мы посмотрим, как при помощи того же самого элемента можно вывести значение атрибута элемента.

Рассмотрим следующий XML-файл ex02-1.xml

<?xml version="1.0" encoding="WINDOWS-1251" ?>

<?xml-stylesheet type='text/xsl' rel="nofollow ugc" target="_blank" href="ex02-2.xsl" tppabs="ex02-2.xsl"?>

</car>

</tutorial>

В этом файле информация хранится не в содержании элементов, а в виде значений атрибутов. Файл ex02-1.xsl имеет вид

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<xsl:value-of select="//car/@marka"/>.

<xsl:value-of select="//car/carInfo/@number"/>,

<xsl:value-of select="//carInfo/@color"/>.</P>

</xsl:template>

</xsl:stylesheet>

Обратите внимание на синтаксис ссылки на атрибут элемента - //car/@Marka. Имя элемента и имя атрибута разделены парой символов "/@". В остальном синтаксис тот же самый, что и для ссылки на содержание элемента.

Результат имеет следующий вид:

Обратим теперь внимание на следующий момент. В XSL-файле мы никак не использовали элемент tutorial. На самом деле можно было использовать полный путь. Перепишем наш XML-файл, увеличив глубину дерева (ex02-2.xml)

<?xml version="1.0" encoding="WINDOWS-1251"?>

<?xml-stylesheet type='text/xsl' rel="nofollow ugc" target="_blank" href="ex02-2.xsl" tppabs="ex02-2.xsl"?>

<avto>

</car>

</avto>

</tutorial>

Файл ex02-2.xsl имеет вид

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<xsl:value-of select="//avto/car/@marka"/>.

<xsl:value-of select="//avto/car/carInfo/@number"/>, <xsl:value-of select="//carInfo/@color"/>.</P>

</xsl:template>

</xsl:stylesheet>

Результат будет тем же самым.

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

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

Вывод результатов запроса

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

Рассмотрим следующий XML-файл - ex03.xml. Текст его приведен ниже.

<?xml version="1.0" encoding="WINDOWS-1251"?>

<?xml-stylesheet type='text/xsl' rel="nofollow ugc" target="_blank" href="ex03-1.xsl" tppabs="ex03-1.xsl"?>

<avto>

<cars>

<carsCaption>Автомобили</carsCaption>

<carsCaptionMarka>Марка</carsCaptionMarka>

<carsCaptionNumber>Номер</carsCaptionNumber>

<car>

<carColor>Белый</carColor>

</car>

<car>

<carColor>Индиго</carColor>

</car>

<car>

<carMarka>Mersedes</carMarka>

<carColor>черный</carColor>

</car>

<car>

<carMarka>Mazda</carMarka>

<carColor>синий</carColor>

</car>

</cars>

</avto>

</tutorial>

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

Простая таблица

Первый шаг - это, как всегда, добавление шаблона преобразования. Модифицируем наш файл, добавив в него ссылку на шаблон. В результате получим файл ex03-1.xml.

В этот файл добавлен шаблон преобразования ex03-1.xsl.

Рассмотрим этот шаблон подробнее. Вот его текст.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

</tr>

<xsl:for-each select="tutorial/avto/cars/car">

</tr>

</xsl:for-each>

</table>

</xsl:template>

</xsl:stylesheet>

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

<xsl:for-each select="tutorial/avto/cars/car">

Этот элемент шаблона позволяет выбрать и просмотреть все группы информации, полный путь к которым задается списком тегов " tutorial/avto/cars/car ". Обратите внимание - путь задается полностью, ни один из тегов опустить нельзя. Далее в ячейки таблицы помещается информация о наших автомобилях. В отличие от первых примеров путь к соответствующей информации тоже задается полностью. Попробуем, например, разместить информацию о марке чуть-чуть иначе ex03-2.xml:

Если мы в соответствующем XSL-файле поставим ссылку <xsl:value-of select="carNick"/>, то в соответствующем столбце никакойй марки мы не увидим. Ссылка должна быть полной - <xsl:value-of select=" carMarka / carNick "/>. Правильный результат приведен ниже.

Марка	Номер	Цвет
Мерседес	341111	Черный
Шкода	456678	Красный
Опель	34с666	Белый
БМВ	342rt66	Индиго

Сортировка в XSLT применима к некоторому множеству узлов. Она изменяет типичную для XSLT последовательность вывода элементов (в порядке просмотра докумнента) и определяется наличием в элементе xsl:apply-templates одного или нескольких элементов xsl:sort. Синтаксис этого элемента прост:

<xsl:sort

select="выражение"

datatype="тип данных"

order={"ascending" | "descending"}

case-order={"upper-first" | "lower-first"} />

Атрибут select содержит выражение, оцениваемое для каждого узла множества и являющееся критерием сортировки. Атрибут order определяет порядок сортировки: значение "ascending" ("восходящий") означает сортировку по возрастанию и является значением по умолчанию, значение "descending" ("нисходящий") означает сортировку по убыванию. Если необходимо провести сортировку по нескольким критериям (например по фамилии и по имени), то в этом случае первым записывается элемент xsl:sort, выполняющий сортировку по фамилии, затем элемент xsl:sort, выполняющий сортировку по имени. Давайте рассмотрим все на простом примере: сортировка книжного каталога:

Входящий документ

<catalogtitle="Библиотека web-мастера">

<book title="XHTML 1.0" category="Языки разметки" author="Иванов И.Г."/>

<book title="Javascript для профессионалов" category="Языки скриптов" author="Семенов В.У."/>

<book title="Apache" category="Web-серверы" author="Фримен Г."/>

...

</catalog>

Преобразование

<xsl:template match="/">

<body>

<table border="1" width="80%" alibn="center">

<xsl:apply-templates select="catalog/book">

<xsl:sort select="@category" />

</xsl:apply-templates>

</table>

</body>

</xsl:template>

<xsl:template match="book">

<tr>

</tr>

</xsl:template>

Пример, который вы видите является несколько более "навороченным", чем приведенный в уроке, однако это не меняет сути - присутствие элемента xsl:sort в теле элемента xsl:apply-templates заставляет выбранное мноэество узлов сортироваться по значению выражения, указанного атрибутом select элемента xsl:sort. Очевидно, что сортировка происходит в алфавитном порядке по возрастанию значений выражения select.

Давайте теперь изменим направление сортировки - сделаем сортировку по убыванию значений выражения. Для этого изменим приведенный выше код следующим образом: добавим в элемент xsl:sort атрибут order со значением "descending". Вот так:

...

<xsl:sort order="descending" />

...

Видите, что направление сортировки поменялось.

Но давайте рассмотрим такой пример: книги в каталоге имеют стоимость, по которой и необходимо осуществлять сортировку. Например такие значения стоимостей книг, как "3.1", "20.5" бубут отсортированны по возрастанию так: "20.5", "3.1". Как упоминалось ранее, xsl:sort выполняет алфавитную (строковую) сортировку, а символ "3" больше символа "2", а значит "20.5" меньше "3.1". С точки зрения нашей логики получится абсолютный бред! Как же решить эту проблему? Решение кроется в использовании типа данных, указываемого атрибутом data-type. Если data-type="text" (по умолчанию), то происходит строковая сортировка; при data-type="number" сортировка числовая (то что нам надо):

...

<xsl:sort select="@price" data-type="number" />

...

Последний атрибут case-order определяет порядок сортировки по регистру символов, что может быть актуально при строковых сортировках. Значение "upper-first" (верхний регистр вперед) означает, что символы в в верхнем регистре будут рассмотрены и отсортированны раньше, чем символы нижнего регистра. Значение "lower-first" - наоборот: символы нижнего регистра рассматриваются и сортируются раньше. Например, при case-order="lower-first" строка "Пример" помещается перед строкой "пример".

В предыдущих примерах порядок строк в таблице полностью соответствовал группам тегов в XML-файле. Этот порядок можно изменять. Добавим в тег

<xsl:for-each select="tutorial/avto/cars/car">

атрибут order-by

<xsl:for-each select="tutorial/avto/cars/car" order-by="carMarka">

Наша таблица примет вид (ex03-3.xml, ex03-3.xsl).

Более интересные результаты мы получим, если попытаемся отсортировать таблицу по столбцу "Number". Вначале попробуем сделать по аналогии с предыдущим примером - атрибут order-by="carMarka" заменим на order-by="carNumber". Результат приведен ниже (ex03-4.xml, ex03-4.xsl).

Таблица действительно отсортирована по столбцу "номер", но это не числовая, а строковая сортировка! Для того, чтобы браузер воспринял значения как числа, ему необходимо об этом сказать, - вместо order-by="carNumber". необходимо написать order-by="number(carNumber)". Теперь мы получили правильный результат (ex03-5.xml, ex03-5.xsl).

Приведем теперь пример сортировки по нескольким столбцам. Различные элементы в атрибуте order-by должны разделяться символом ";" - order-by=" carMarka ;number(carNumber) " (ex03-6.xml, ex03-6.xsl). Таблица приведена ниже.

Следующий пример работает только под управлением XML-парсера версии 3. В нем строки сортируются по одному столбцу - по марке автомобиля. Этот пример уже приводился выше, однако теперь мы используем новый синтаксис (ex03-7.xml, ex03-7.xsl).

Отметим разницу.

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

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

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

Кроме того, мы убрали атрибут order-by в элементе xsl:for-each и добавили другой элемент

<xsl:sort order="ascending" select="carMarka"/>

Если элемент xsl:sort присутствует в элементе xsl:for-each, то он всегда должен стоять сразу после элемента xsl:for-each. Синтаксис элемента xsl:sort достаточно очевиден. В нем используются два атрибута: атрибут order - способ сортировки (по возрастанию или по убыванию) и атрибут select - имя поля, по которому производится сортировка. Если нам нужно отсортировать по первому элементу, как в данном примере, то вместо " carMarka " можно было поставить точку - ".", для других элементов нужно указывать его имя, например "carColor", если нам нужно отсортировать записи по цвету машины. На самом деле атрибутов может быть пять - select, lang, data-type, order и case-order, но мы не будем здесь рассматривать все эти атрибуты, поскольку здесь мы не преследуем цель дать полное описание всех элементов, используемых в XSL, и их атрибутов.

Таблица результатов приведена ниже.

С использованием нового синтаксиса легко сменить сортировку по возрастанию на сортировку по убыванию (ex03-8.xml, ex03-8.xsl). Этот пример работает только под управлением XML-парсера версии 3.

Разница заключается в одной строке

<xsl:sort order="descending" select="carMarka"/>

Мы изменили значение атрибут order - значение ascending заменено на descending.

Таблица результатов приведена ниже.

Покажем теперь сортировку по нескольким полям (ex03-9.xml, ex03-9.xsl). Этот пример работает только под управлением XML-парсера версии 3.

В этом примере у нас фигурируют две строки с элементом

<xsl:sort. <xsl:sort order="ascending" select="carMarka"/>

<xsl:sort order="ascending" select="number(carNumber)" data-type="number"/>

Строки вначале сортируются по марке автомобиля, а затем по их номерам. Обратите внимание - для того, чтобы сортировка выполнялась в числовой последовательности, в элемент xsl:sort мы добавили атрибут data-type. Таблица результатов приведена ниже.

Элемент XSL:IF - фильтр

Рассмотрим теперь способы фильтрации строк таблицы. Первый пример использует старый синтаксис. В нем условие фильтрации указывается непосредственно в атрибуте select (ex04-1.xml, ex04-1.xsl).

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

<xsl:for-each select="tutorial/avto/cars/car[carNumber$gt$1000000]" order-by="number(carNumber); carMarka">

И таблица результатов.

Вы видите, что в таблице остались только те автомобили, чей номер превышает 1000000, причем первым стоит Опель, чей номер меньше.

Все дальнейшие примеры в этом параграфе работают только под управлением XML-парсера версии 3.

Более гибкие возможности нам предоставляет новый синтаксис (ex04-2.xml, ex04-2.xsl). Обратите внимание - в новом синтаксисе атрибут order-by в элементе xsl:for-each не поддерживается, вместо него мы вставили два элемента xsl:sort.

<xsl:for-each select="tutorial/avto/cars/car">

<xsl:sort order="ascending" select="number(carNumber)" data-type="number"/>

<xsl:sort order="ascending" select="carMarka"/>

<xsl:if test="carNumber>1000000">

</tr>

</xsl:if>

</xsl:for-each>

Кроме того, условие фильтра у нас вынесено в отдельный элемент xsl:if.

<xsl:if test="carNumber>1000000">

Не забывайте указывать конечный тег элемента xsl:if.

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

Полностью преимущества нового синтаксиса проявляются при использовании функций.

Рассмотрим следующий пример (ex04-3.xml, ex04-3.xsl). В этом примере используется функция position(), определяющая порядковый номер фрагмента в исходном XML-файле.

Соответствующий элемент xsl:if.

<xsl:if test="position()<3"> и <xsl:if test="position()>5">

Результат.

Стилевые таблицы XSL, Переменные и параметры

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

· Переменная - это имя, присвоенное ячейке памяти или ячейкам, которые могут содержать представление конкретного типа данных

· Значение переменной может изменяться в процессе выполнения программы.

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

· Переменная - это объект определенного типа, с которым связанно имя

По этому имени мы можем обращаться к объекту, использовать его значение и т.д. Иными словами, в XSLT под переменной понимается не более чем ассоциация между значением и именем, и если мы скажем, что переменная x имеет значение 5, это будет означать, что имя "x" связанно с объектом численного типа, значение которого равно 5.

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

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

Элемент xsl:variable

Синтаксис:

<xsl:variable name="имя" select="выражение">

</xsl:variable>

Элемент xsl:variable в XSLT используется для связи имени переменной, указанного атрибутом name со значением. Значение переменной может быть полученно вычислением выражения, заднного необязательным атрибутом select или выполнением шаблона в содержимом элемента. Использовать объявленную таким образом переменную можно, указывая перед именем символ $:

$имя

Переменные XSLT могут быть глобальными и локальными. Если элемент xsl:variable является элементом верхнего уровня, то переменная будет глобальной; если элемент xsl:variable объявлен внутри шаблонного правила - локальной.

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

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

Использование переменных

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

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

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

Попробуем разобраться на примерах.

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

//a

Гораздо удобнее и экономней с точки зрения вычислительных ресурсов объявить переменную вида

<xsl:variable name="links" select="//a" />

и использовать ее в преобразовании как $links. Например:

...количество ссылок в документе: <xsl:value-of select="count($links)" />

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

Объявление

<xsl:variable name="image_path" select="http://www.site.com/chapter-files/images">

Использование

<img>

<xsl:attribute name="src">

<xsl:value-of select="concat($image_path, '/picture1_1.gif')" />

</xsl:attribute

</img>

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

<xsl:template match="/">

<html>

<xsl:copy-of select="$head" />

<xsl:copy-of select="$body" />

</html>

</xsl:template>

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

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

если условие1 то

присвоить переменной1 значение1

иначе

присвоить переменной1 значение2

В традиционном языке программирования с изменяемыми переменными (например C++ или Javascript) это выглядело бы так:

переменная1=условие1?значение1:значение2;

или в чуть более широком варианте:

if (условие1) переменная1=значение1

else

переменная1=значение2

Однако если в XSLT написать что нибудь подобное

<xsl:choose>

<xsl:when test="условие1">

<xsl:variable name="переменная1" select="значение1" />

</xsl:when>

<xsl:otherwise>

<xsl:variable name="переменная1" select="значение2" />

</xsl:otherwise>

</xsl:choose>

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

<xsl:variable name="переменная1"

<xsl:choose>

<xsl:when test="условие1">

<xsl:copy-of select="значение1" />

</xsl:when>

<xsl:otherwise>

<xsl:copy-of select="значение2" />

</xsl:otherwise>

</xsl:choose>

</xsl:variable>

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

Параметры

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

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

Работа с параметрами обеспечивается двумя элементами XSLT:

xsl:param - служит для объявления параметра;

xsl:with-param - указывает значение параметра ри вызове шаблона.

xsl:param

Синтаксис этого элемента следующий:

<xsl:param name="имя" select="выражение">

</xsl:param>

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

Атрибут name задает имя параметра. Имя параметра может имет расширенную форму, например "user:param", однако, чтобы не возиться с пространствами имен, на практике всегда используют простые имена: "i", "count" или что-то в этом роде.

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

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

<xsl:param name="x" select="2 * 2" />

если атрибут select не определен, носам элемент xsl:param содержит дочерние узлы, то значением параметра по умолчанию будет фрагмент дерева, полученный в результате выполнения содержимого xsl:param. Пример:

<!--

в результате будет получен фрагмент дерева

состоящий из корневого узла и текстового узла "4"

-->

<xsl:param name="x">

<xsl:value-of select="2 * 2" />

</xsl:param>

если атрибут select не определен и сам элемент xsl:param не содержит дочерних элементов, то значением по умолчанию будет пустая строка. Пример:

<xsl:param name="x" />

Область видимости параметра определяется так же как область видимости переменной. Единственное, что нужно запомнить - это то, что элементы xsl:param, определяемые в шаблонах, должны всегда быть его первыми дочерними элементами. Абсолютно логично и то, что в одном шаблоне не может быть объявленно 2 или более одноименных параметра, так как их области видимости обязательно будут пересекаться.

xsl:with-param

Синтаксис:

<xsl:with-param name="имя" select="выражение">

</xsl:with-param>

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

если в элементе, который вызывает этот шаблон, присутствует элемент xsl:with-param, передающий значение этого параметра, то в шаблоне будет использоваться переданное значение;
в противном случае будет использоваться значение по умолчанию.

Продемонстрируем теперь использование более интересных функций - start-with(string,startSubstring) и contains(string,anySubstring). Функция start-with(string,startSubstring) проверяет, начинается ли строка string с подстроки startSubstring. Пример - ex04-4.xml, ex04-4.xsl.

Синтаксис элемента xsl:if.

<xsl:if test="starts-with($var СarMarka,$varStartWith)">

В этом элементе мы использовали переменные. Значения переменных были инициализированы ранее

<xsl:variable name="varStartWith"><xsl:value-of select="//letter"/></xsl:variable>
<xsl:for-each select="tutorial/avto/cars/car">
<xsl:variable name="varCarMarka"><xsl:value-of select="carMarka"/></xsl:variable>

Переменная varStartWith представляет собой подстроку, с которой должны начинаться требуемые нам марки. Она не меняется, поэтому инициализируется перед циклом. Переменная varCarMarka содержит марку автомобиля, она меняется на каждом шаге цикла и, соответственно, инициализируется в теле цикла. Элемент letter XML-файла содержит букву "М".

Результат:

Функция contains(string,anySubstring) проверяет, содержит ли строка string подстроку anySubstring. Пример - ex04-5.xml, ex04-5.xsl.

Синтаксис элемента xsl:if. <xsl:if test="contains($varCarMarka,$varStartWith)">

Этот пример полностью аналогичен предыдущему. Элемент letter XML-файла содержит букву "Ш".

Результат.

Два элемента xsl:if, вложенные друг в друга, дают нам эффект оператора AND (ex04-6.xml, ex04-6.xsl).

Соответствующий фрагмент XSL-файла.

<xsl:for-each select="tutorial/avto/cars/car">

<xsl:sort order="ascending" select="number(carNumber)" data-type="number"/>

<xsl:sort order="ascending" select="carMarka"/>

<xsl:if test="carNumber>1000000">

<xsl:if test="carNumber<2000000">

</tr>

</xsl:if>

</xsl:for-each>

Результат.

Можно добиться и эффекта оператора OR. Для этого нам нужно включить два цикла, в каждом из которых формируется своя выборка (ex04-7.xml, ex04-7.xsl).

Соответствующий фрагмент XSL-файла.

<xsl:for-each select="tutorial/avto/cars/car">

<xsl:sort order="ascending" select="number(carNumber)" data-type="number"/>

<xsl:if test="carNumber<1000000">

</tr>

</xsl:if>

</xsl:for-each>

<xsl:for-each select="tutorial/avto/cars/car">

<xsl:sort order="ascending" select="number(carNumber)"/>

<xsl:if test="carNumber>5000000">

</tr>

</xsl:if>

</xsl:for-each>

Если сортировка не требуется, то можно вставить два элемента xsl:if в один элемент xsl:for-each.

Элемент XSL:IF - улучшение внешнего вида таблиц

Элемент xsl:if можно применять не только для фильтрации строк выборки. Очевидно, что он может быть полезен и во многих других областях. В этом параграфе мы разберем пример использования элемента xsl:if для улучшения внешнего вида таблицы. Заодно мы продемонстрируем реальное использование функции position(). Мы будем использовать эту функцию для того, чтобы чередовать цвет четных и нечетных строк таблицы (ex04-8.xml, ex04-8.xsl).

Фрагмент XSL-файла, который отвечает за требуемое чередование.

<xsl:if test="position() mod 2 = 0">

<xsl:attribute name="bgcolor">#004EF0</xsl:attribute>

</xsl:if>

С элементом xsl:if и с функцией position() мы уже знакомы. Операция mod 2 дает нам остаток от деления на 2. А элемент xsl:attribute позволяет нам динамически подставлять в файл результатов различные атрибуты. Это очень мощный элемент, мы разберем еще одно применение этого элемента в следующем параграфе. А сейчас приведем для полноты картины таблицу результатов.

К сожалению, элемент xsl:if в XSLT не может реализовать конструкцию "если-то-иначе". Условный оператор такого вида реализуется при помощи элементов xsl:choose, xsl:when и xsl:otherwise.

Примером применения xsl:choose можно так-же привести "перекрашивание" фона элемента в разные цвета в зависимости от автора т года издания. Элемент xsl:choose содержит один или несколько элементов xsl:when и необязательный элемент xsl:otherwise. При обработке xsl:choose процессор поочередно вычисляет выражения, содержащиеся в атрибутах test элементов xsl:when, приводит их к булевому типу и выполняет содержимое первого (и только первого) элемента xsl:when, тестовое выражение которого равно true. В случае если ни одно из тестовых выражений не дало "истину" в результате и в элементе xsl:choose присутствует xsl:otherwise, процессор выполнит его содержимое.

Как упоминалось ранее, при помощи элемента xsl:choose можно реализовать конструкцию вида "если-то-иначе". Делается это следующим образом:

<?xml version="1.0" ?>

<?xml-stylesheet type="text/xsl" href="xslchoose.xsl"?>

</catalog>

<?xml version="1.0" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<body>

<th>Title</th>

<th>Author</th>

</tr>

<xsl:apply-templates />

</table>

</body>

</xsl:template>

<xsl:template match="book">

<tr>

<xsl:choose>

<xsl:when test="@year < 1950">

<xsl:attribute name="bgcolor">#FFDDDD</xsl:attribute>

</xsl:when>

<xsl:when test="@year >= 1950 and @year < 2000">

<xsl:attribute name="bgcolor">#DDFFDD</xsl:attribute>

</xsl:when>

<xsl:when test="@year >= 2000">

<xsl:attribute name="bgcolor">#DDDDFF</xsl:attribute>

</xsl:when>

</xsl:choose>

</tr>

</xsl:template>

</xsl:stylesheet>

.Динамическое формирование атрибутов на примере параметров ссылки в теге <a>

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

<td>
<a target="_blank">
<xsl:attribute name="href">DisplayDetails.html?carName=

<xsl:value-of select="carMarka"/>&carWeight=<xsl:value-of select="carWeight"/></xsl:attribute>
<xsl:attribute name="title">To view some more details about <xsl:value-of select="carMarka"/> click to car Marka</xsl:attribute>
<xsl:value-of select="carMarka"/>
</a>
</td>

В этом примере в ячейке таблицы мы размещаем ссылку на страницу с подробными описаниями. Ссылка указывается в атрибуте href тега <a>. Поскольку на страницу передаются два параметра, значения которых берутся из XML-файла, этот атрибут формируется динамически. Обратите также внимание - символ & (амперсанд), разделяющий передаваемые параметры, записывается в XSL-файле в виде & Во втором атрибуте нам нужна всплывающая подсказка (атрибут title), которая появляется при наведении курсора мыши на ссылку. Текст этой подсказки тоже меняется динамически. Наконец, статический атрибут target мы разместили непосредственно в теге <a>.

ТЕМА 1.4 СПОСОБЫ СОЗДАНИЯ САЙТОВ.

ПРАКТИЧЕСКАЯ РАБОТА №13-15

Способы создания и размещения сайтов

Для создания сайтов используется специальный язык разметки HTML (Hyper Text Markup Language). Однако большинство офисных приложений позволяют сохранять свои файлы как web-страницы в формате HTML, принятом в Интернет.

Цель данной работы:

Изучить способы создания сайтов с использованием средств MS Word, MS Power Point, MS Front Page.
Получить навык размещения страниц с использованием ftp-доступа.

1. Получение Интернет-аккаунта.

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

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

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

Задание 1

Получить аккаунд на сервере home.novgorod.ru

Зайти на сервер home.novgorod.ru и пройти процедуру регистрации (ссылка Регистрация). При регистрации обязательно указать действующий e-mail. Логин, котрый вы указали, будет являться Интернет адресом вашего сайта.

Например, если вы зарегистрировались как filosof.home.nov.ru, то это и будет ваш логин и адрес сайта - http:// filosof.home.nov.ru.

После прохождения регистрации и появления страницы с поздравлением необходимо подтвердить регистрацию (зайти на свою почту, получить письмо и щелкнуть по ссылке подтверждение регистрации). На слудующие сутки Вам будет открыт ftp-доступ.
Для "выкладывания" страниц на WWW сервер необходимо использовать FTP клиента, поддерживающего выгрузку файлов на сервер. Это умеют делать, например FAR, Total Commander и др.
Для выгрузки файлов вы можете зайти на FTP сервер как, ftp://вашсервер:вашпароль@home.novgorod.ru.

Например: ftp:// filosof.home.nov.ru:pdjfhrf@home.novgorod.ru

Создание сайта средствами MS Word.

Задание 2.

Создать сайт «Чудеса света» средствами MS Word по следующей схеме:

Для создания сайта воспользуйтесь готовыми текстовыми файлами:

Чудеса света - index.doc

Великая пирамида в Гизе - piramida.doc

Храм Артемиды - hram.doc

Сады Вавилона - sadi_vavilona.doc

Скопируйте эти файлы и файлы картинок в вашу папку!

Порядок выполнения.

Откройте файл index.doc. Это будет главная страница сайта. В начале файла напишите заголовок «Чудеса света». Оформите его заголовком 1 уровня.
Примените оформление к странице (Формат, Тема)
Добавьте на страницу рисунки Piramida.jpg, Sad.jpg, Hram.jpg.
Сохраните файл как web-страницу (Файл, Сохранить как, web-страница с фильтром) в отдельной папке САЙТ (папку можно создать кнопкой

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

Аналогичным образом откройте, оформите и сохраните в папке САЙТ как web-страницы с фильтром файлы piramida.doc, hram.doc, sadi_vavilona.doc.
Если вы все правильно сделали в папке сайт должны появиться файлы index.htm, piramida.htm, hram.htm, sadi_vavilona.htm и одноименные папки.
Создайте систему навигации по сайту. Для этого:

Откройте файл index.htm из папки САЙТ. Так как это Web-страница, то он открывается по умолчанию программой Internet Explorer.
Выберите Файл, Править в Microsoft Word, файл будет открыт для правки в программе Word.
после заголовка введите названия разделов на которые будете ссылаться:

На главную

Великая пирамида в Гизе

Храм Артемиды

Сады Вавилона

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

Организуйте ссылки на страницы по щелчку на соответствующей картинке.Для этого выделите картинку, Вставка, Гиперссылка, из списка файлов выберите нужный, ОК.

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

Скопируйте навигацию на страницы piramida.htm, hram.htm, sadi_vavilona.htm
Проверьте как работают ссылки, запустив файл index.htm из папки САЙТ.
Найдите информацию в Интернет о других чудесах света и дополните сайт.

Размещение сайта.

Задание 3.

Разместите созданный сайт в Интернет.

Запустите программу Windows Commander
Выберите Commands, FTP new Connect
Задайте путь по правилам FTP-доступа, например

ftp:// filosof.home.nov.ru:pdjfhrf@home.novgorod.ru

Каталог ftp-сервера будет отображаться на одной из панелей Windows Commander.

Перекачка (заливка) файлов осуществляется простым копированием.

ПРАКТИЧЕСКАЯ РАБОТА №16-18

Разработка сайта на основе шаблона Microsoft Front Page

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

Шаг 1

Загрузите программу Microsoft Front Page (Пуск, Программы, Microsoft Front Page).

Шаг 2

Выберите меню File, New, Web… (Файл, Новый, Сайт).

Рис. 1

В появившемся окне шаблонов (см. рисунок) выберите шаблон Личный Web-узел, нажмите кнопку OK.

При этом Front Page сформирует шаблоны нескольких страниц и установит связи между ними.

Вид экрана должен быть такой, как представлен на рис. 2

Если на экране отсутствуют окно Folders List (Список папок), то обратитесь к меню View (Обзор) и включите кнопку Folders List (Список папок).

Рис. 2

Шаг 3

Щелкните мышью по кнопке веб-узел затем Переходы. На экране будет показана схема созданного сайта на основе шаблона ( см. рис 3).

Рис. 3

Шаг 4

Отредактируйте названия страниц. Для этого щелкните правой кнопкой мыши по рисунку страницы, в всплывающем меню выберите команду Rename (Переименовать) (см. рис. 4) и введите новое название.

Рис. 4

Например, см. рис 5:

Рис. 5

Шаг 5

При необходимости добавьте в схему навигации дополнительные страницы. Для этого в поле схемы навигации щелкните правой кнопкой мыши и вo всплывающем меню выберите команду New Top Page (Новая верхняя страница) (см. рис. 6) В схеме навигации подцепите мышкой появившуюся страницу и передвиньте ее на нужный уровень так, чтобы появились связи (см. рис. 7).

Отредактируйте название новых страниц, по аналогии с пунктом Шаг 4.

Рис. 6

Рис. 7

Шаг 6

Перейдите на главную страницу (она помечена значком «домик»).

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

Шаг 7

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

Рис. 8

В появившемся окне Свойства Панели ссылок выберите Child Pages under Home (Дочерние страницы домашней) (см. рис. 9). Нажмите кнопку OK (Да).

Рис. 9

Шаг 8

Выберите стиль оформления сайта - меню Format, Theme (Формат, Тема). Выберите любую тему из предлагаемого списка и нажмите кнопку ОК.

Шаг 9

Перейдите в режим просмотра сайта (кнопка Preview (Просмотр) в нижней части окна Front Page). Переходя по ссылкам просмотрите структуру сайта.

Шаг 10.

Перейдите в режим редактирования страниц (кнопка Конструктор в нижней части окна Front Page). Отредактируйте каждую страницу. Уберите ненужный текст (Выделите ненужный текст и нажмите кнопку Delete на клавиатуре).

Используя копирование фрагментов текста вставьте в страницы подготовленный в программе MS WORD текст. Для вставки подготовленных иллюстраций воспользуйтесь командой меню Insert, Picture, From File (Вставка, Рисунок, Из файла).

Задание5.

Разместите созданный сайт в Интернет.

ПРАКТИЧЕСКАЯ РАБОТА №19-21

Использование визуальных редакторов (Microsoft FrontPage)

1. ПОДГОТОВКА К ВЫПОЛНЕНИЮ РАБОТЫ

1.1. Подготовить сменный носитель (дискету, flash-накопитель) для сохранения результатов работы с целью их дальнейшего использования в работах №№ 2 – 4.

1.2. По рекомендованной литературе [1 – 7] ознакомиться с принципами работы в среде Microsoft FrontPage.

1.3. Ознакомиться с базовыми элементами языка HTML.

1.4. Выбрать тематику будущего веб-сайта.

1.5. Ознакомиться с дизайном и структурой существующих веб-сайтов.

1.6. Подготовить текст теоретических разделов отчета о работе.

1.7. Ответить на контрольные вопросы настоящих методических указаний.

2. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

2.1.РАЗРАБОТКА ЛОГИЧЕСКОЙ СТРУКТУРЫ ВЕБ-САЙТА. Определите тип и количество информации, которая будет помещена на сайт. В результате должно получиться не менее пяти разделов. К полученным разделам обязательно добавьте разделы «Анкета» и «Гостевая книга».

2.2. ВЫБОР ВИДА ЛОГИЧЕСКОЙ СТРУКТУРЫ САЙТА. Выберите вид логической структуры веб-сайта в соответствии с рекомендациями, данными в разделе 2.1. Предпочтительной является древовидная структура сайта. Подобную структуру имеет сайт, описываемый ниже в качестве примера.

2.3.ЛОКАЛИЗАЦИЯ ПРОЕКТА. Средствами Windows создайте папку для хранения файлов вашего сайта. Создайте в ней подпапки в соответствии с разработанной физической структурой сайта. При разработке физической структуры рекомендуется создавать отдельную подпапку для каждого раздела (остальные рекомендации сформулированы в разделе 2.1).

2.4. ЗАПУСК MICROSOFT FRONTPAGE. Запустите среду создания веб-сайтов Microsoft Frontpage (Пуск – Программы – Microsoft Frontpage).

2.5. СОЗДАНИЕ СТРАНИЦ САЙТА. В появившемся окне редактора веб-страниц введите необходимую информацию.

2.5.1. Нажмите правую кнопку мыши и выберите меню «Свойства страницы». Пройдите по всем закладкам появившегося окна и установите все необходимые вам свойства. Особое внимание обратите на последнюю закладку, на которой устанавливаются языковые параметры (рис. 1.4).

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

2.5.3. Создайте новую страницу. Расположите на ней элементы меню сайта в соответствии с созданной логической структурой (рис. 1.6).

2.5.4. Создайте остальные страницы сайта (кроме анкеты и гостевой книги) в соответствии с разработанной структурой. Наполните их информацией. На одну из страниц поместите крупный блок информации, преимущественно текстовой (рис. 1.7).

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

2.6. ЗАВЕРШЕНИЕ РАБОТЫ. Сохраните получившиеся страницы и перепишите созданные файлы на заранее подготовленный носитель. Выйдите из Frontpage, выключите компьютер.

3. СОДЕРЖАНИЕ ОТЧЕТА

Отчет о работе должен содержать следующие материалы в соответствии с полученным индивидуальным заданием:

3.1. Обоснование выбора структуры сайта (по материалам п. 2.1).

3.2. Схему логической структуры созданного сайта (по материалам п. 2.1).

3.3. Схему физической структуры созданного сайта (до уровня файлов – по материалам п. 2.1).

3.4. Словесную постановку задачи лабораторной работы (по материалам индивидуального задания).

3.5. Последовательность выполнения работ в среде Microsoft FrontPage для создания сайта (по материалам п. 2.2).

3.6. Формализацию выполненного индивидуального задания (разделение структуры и оформления создаваемых документов).

3.7. Ответы на контрольные вопросы и выводы по выполненной работе.

4. КОНТРОЛЬНЫЕ ВОПРОСЫ

4.1. Перечислите наиболее распространенные виды логических структур веб-сайтов (по материалам п. 2.1).

4.2. Почему в именах файлов нежелательно использование символов русского алфавита (по материалам п. 2.1)?

4.3. С какой целью (для использования в какой части сайта) мог быть создан файл bg_about_me.jpg (по материалам п. 2.1)?

4.4. Сформулируйте принцип организации, преимущества, недостатки и область применения решетчатой структуры сайта (по материалам п. 2.1).

4.5. Укажите достоинства и недостатки пакета Microsoft FrontPage как универсального инструмента для обмена и управления узлами в Web в сравнении с другими средствами редактирования HTML-страниц (см., например, [4]).

4.6. Параметры (атрибуты) какого элемента определяются заново при изменении в редакторе цвета фона веб-страницы (см., например, [4])?

4.7. Какими атрибутами или какими элементами HTML устанавливаются наклон, толщина, подчеркивание и другие особенности шрифта в тексте и его фрагментах (см., например, [4])?

ПРАКТИЧЕСКАЯ РАБОТА №22-24

Работа с движком

Что такое движок сайта

Вообще-то, движок, это жаргонное выражение, правильное название – программный комплекс управления сайтом. Подобная система управления может состоять из множества небольших модулей (т.е. несколько маленьких программ), которые объединены в общую систему. Наиболее часто встречается аббревиатура CMS – Content Managment System – Система Управления Контентом.

ЗАДАНИЕ 1.

Создайте сайты на Joomla,

Используя программную оболочку Денвер для создания виртуального хостинга на домашнем компьютере

ЗАДАНИЕ 2.

Создайте сайты на Wordpress

ЗАДАНИЕ3.

Создайте сайт на бесплатном хостинге

РАЗДЕЛ 2. ОСНОВНЫЕ СВОЙСТВА ЯЗЫКА JAVASCRIPT. ПОСТРОЕНИЕ И ПРИМЕНЕНИЕ СКРИПТОВ.

ТЕМА 2.1 ОСНОВЫ JAVASCRIPT.

ПРАКТИЧЕСКАЯ РАБОТА №25-27

Структура кода

Написание команд:

Например, можно вместо одного вызова alert сделать два:

alert('Привет'); alert('Мир');

</script>

alert('Мир');

</script>

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

</script>

В этом случае JavaScript интерпретирует переход на новую строчку как разделитель команд и автоматически вставляет «виртуальную» точку с запятой между ними.

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

Поэтому рекомендуется точки с запятой ставить. Сейчас это, фактически, стандарт.

Написание комментариев

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

Однострочные комментарии начинаются с двойного слэша //

alert('Мир'); // Второе сообщение выводим отдельно

</script>

Многострочные комментарии начинаются слешем-звездочкой "/*" и заканчиваются звездочкой-слэшем "*/".

Вложенные комментарии не поддерживаются! В этом коде будет ошибка:

alert('Привет'); /* вложенный комментарий ?!? */

*/ alert('Мир');

</script>

Структура DOM (Document Object Model) документа HTML и место Javascript в теле документа

Рисунок - Структура DOM (Document Object Model) документа HTML

С помощью программируемой объектной модели JavaScript становится полноценным инструментом по созданию динамического HTML (DHTML):

• JavaScript может изменить все HTML элементы на странице

• JavaScript может изменить все атрибуты HTML на странице

• JavaScript может изменить все стили CSS на странице

• JavaScript может реагировать на все события на странице

Скрипты могут располагаться как в области заголовка HTML, так и в области тела HTML.

Пример структуры HTML и места скрипта в теле документа:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//пример встраивания javascript в тело документа

/*использован метод Writeдля вывода на страницу результата выполнения функции Date() – возвращение текущего даты/времени

*/ document.write(Date());

</script>

</body>

</html>

Задание: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки

разметки. Сохранить файл с названием Пример1_1.html и открыть (запустить) его в любом браузере.

Пример кода в составе страницы HTML:

<!DOCTYPE html>

<html>

<body>

<p>

JavaScript может написать прямо в HTML выходной поток – в теле документа

</p>

document.write("<h1>Это тег для заголовка</h1>"); document.write("<p>Это тег для обозначения параграфа</p>");

</script>

<p>

Вы можете использовать метод <strong> document.write </strong> в теле выходном HTML.

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

</p>

</body>

</html>

Задание: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример1_2.html и открыть (запустить) его в любом браузере.

Использование переменных

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

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

var:

var message;

После объявления, можно записать в переменную данные:

var message;

message = 'Привет'; // сохраним в переменной строку

Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:

var message; message = 'Привет';

alert(message); // выведет содержимое переменной

Для краткости можно совместить объявление переменной и запись данных:

var message = 'Привет';

При изменении значения старое содержимое переменной удаляется.

Переменные в JavaScript могут хранить не только строки, но и другие данные, например, числа.

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

var num = 100500;

var message = 'Привет';

Значение можно копировать из одной переменной в другую.

var num = 100500;

var message = 'Привет'; message = num;

Значение из num перезаписывает текущее в message.

В JavaScript вы можете создать переменную и без var, достаточно просто присвоить ей значение:

x = "value"; // переменная создана, если ее не было

Технически, это не вызовет ошибки, но делать так все-таки не стоит.

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

Пример документа с объявлением переменных:

<html>

<body>

var test = 5; alert(test);

</script>

</body>

</html> Самое «забавное» — то, что, эта ошибка будет только в IE<9, и только если на странице присутствует элемент с совпадающим id.

Такие ошибки особенно весело исправлять и отлаживать.

Есть и еще ситуации, когда отсутствие var может привести к ошибкам. Надеюсь, вы убедились в необходимости всегда ставить var.

Задание: Создайте документ HTML, в котором средствами JavaScript:

1. Объявите две переменные: admin и name.

2. Запишите в name строку "Василий".

3. Скопируйте значение из name в admin.

4. Выведите admin (должно вывести «Василий»).

Объявление констант

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

var COLOR_BLUE = "#00F"; var COLOR_RED = "#0F0"; var COLOR_GREEN = "#F00";

var COLOR_ORANGE = "#FF7F00";

alert(COLOR_RED); // #0F0

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

Зачем нужны константы? Почему бы просто не использовать "#F00" или "#0F0"?

1. Во-первых, константа — это понятное имя, в отличие от строки "#FF7F00".

2. Во-вторых, опечатка в строке может быть не замечена, а в имени константы её упустить невозможно — будет ошибка при выполнении.

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

На имя переменной наложены два ограничения:

1. Имя может состоять из: букв, цифр, символов $ и _

2. Первый символ не должен быть цифрой.

!!! Регистр букв имеет значение

Переменные apple и AppLE - две разные переменные.

Существует список зарезервированных слов, которые нельзя использовать при именовании переменных, так как они используются самим языком, например: var, class, return, implements и др.

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

ТЕМА 2.2 ТИПЫ ДАННЫХ В JAVASCRIPT

ПРАКТИЧЕСКАЯ РАБОТА №28-30

Число number. Строка string. Булевый (логический) тип boolean. Объекты object

Число number:

var n = 123; n = 12.345;

Строка string:

var str = "Мама мыла раму";

str = 'Одинарные кавычки тоже подойдут';

1. В JavaScript одинарные и двойные кавычки равноправны. Можно использовать или те или другие.

2. Тип символ не существует, есть только строка

3. В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это char. В JavaScript есть только тип «строка» string. Что, надо сказать, вполне удобно.

Булевый (логический) тип boolean. У него всего два значения - true (истина) и

false (ложь).

Как правило, такой тип используется для хранения значения типа да/нет, например:

var checked = true; // поле формы помечено галочкой checked = false; // поле формы не содержит галочки

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

null — специальное значение. Оно имеет смысл «ничего». Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null:

var age = null;

1. В JavaScript null не является «ссылкой на несуществующий объект» или

«нулевым указателем», как в некоторых других языках. Это просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».

2. В частности, код выше говорит о том, что возраст age неизвестен.

3. undefined — специальное значение, которое, как и null, образует свой собственный тип. Оно имеет смысл «значение не присвоено».

Если переменная объявлена, но в неё ничего не записано, то ее значение как раз и есть undefined:

var u;

alert(u); // выведет "undefined"

Можно присвоить undefined и в явном виде, хотя это делается редко:

var x = 123;

x = undefined;

В явном виде undefined обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную «пустого значения» используется null.

Объекты object

Первые 5 типов называют «примитивными».

Особняком стоит шестой тип: «объекты». К нему относятся, например, даты, он используется для коллекций данных и для многого другого.

ИТОГО: Есть 5 «примитивных» типов: number, string, boolean, null, undefined и объекты object.

Пример объявления переменных и их использования:

<!DOCTYPE html>

<html>

<body>

var pi=3.14;

var name="John Doe"; var answer='Yes I am!';

document.write(pi + "<br>"); document.write(name + "<br>"); document.write(answer + "<br>");

</script>

</body>

</html>

Здесь в скрипте <br> - это тег HTML, который переводит каретку на новую строку (переход на новую строку)

Задание: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример1_3.html и открыть (запустить) его в любом браузере.

Пример

<!DOCTYPE html>

<html>

<body>

<p>Нажмите кнопку для объявления переменной и вывода результата.</p>

<p id="demo">Текст, помеченный меткой demo</p>

//объявляем функцию, которую будет вызывать кнопка по методу onclick

function myFunction()

{

//объявляем переменную строковую

var carname="Volvo";

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

//метод getElementById, получающий данные из тега по метке demo

// Свойство innerHTML устанавливает или получает всю разметку

// и содержание внутри данного элемента.

document.getElementById("demo").innerHTML=carname;

}

</script>

</body>

</html>

Задание: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример1_4.html и открыть (запустить) его в любом браузере.

Пример на Undefined and Null:

<!DOCTYPE html>

<html>

<body>

var car="Volvo";

// document.write- метод, выводящий на страницу переданные ему аргументы

document.write(person + "<br>"); document.write(car + "<br>"); var car=null

document.write(car + "<br>");

</script>

</body>

</html>

Задание: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример1_5.html и открыть (запустить) его в любом браузере.

Пример создает объект с названием "person" и добавляет 4 свойства объекту:

<!DOCTYPE html>

<html>

<body>

var person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue";

document.write(person.firstname + " is " + person.age + " years old.");

</script>

</body>

</html>

Задание: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки

разметки. Сохранить файл с названием Пример1_6.html и открыть (запустить) его в любом браузере.

ТЕМА 2.3 ОСНОВНЫЕ ОПЕРАТОРЫ

ПРАКТИЧЕСКАЯ РАБОТА №31-33

Основные операторы

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

1. Термины: «унарный», «бинарный», «операнд»

У операторов есть своя терминология, которая используется во всех языках програмирования.

· Операнд — то, к чему применяется оператор. Например: 5 * 2 — оператор умножения с левым и правым операндами. Другое название: «аргумент оператора».

· Унарным называется оператор, который применяется к одному выражению. Например, оператор унарный минус "-" меняет знак числа на противоположный:

var x = 1;

alert( -x ); // -1, унарный минус

alert( -(x+2) ); // -3, унарный минус применён к результату сложения x+2

alert( -(-3) ); // 3

· Бинарным называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:

var x = 1, y = 3;

alert( y - x ); // 2, бинарный минус

Работа унарного "+" и бинарного "+" в JavaScript существенно различается.

Это действительно разные операторы. Бинарный плюс складывает операнды, а унарный

— ничего не делает в арифметическом плане, но зато приводит операнд к числовому типу. Далее мы увидим примеры.

2. Арифметические операторы

Базовые арифметические операторы знакомы нам с детства: это плюс +, минус -, умножить *, поделить /.

Например:

alert(2 + 2); // 4

Или чуть сложнее:

var i = 2;

i = (2 + i) * 3 / i; alert(i); // 6

Более редкий арифметический оператор % интересен тем, что никакого отношения к процентам не имеет. Его результат a % b — это остаток от деления a на b.

Например:

alert(5 % 2); // 1, остаток от деления 5 на 2

alert(8 % 3); // 2, остаток от деления 8 на 3

alert(6 % 3); // 0, остаток от деления 6 на 3

3. Сложение строк, бинарный +

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

var a = "моя" + "строка"; alert(a); // моястрока

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

строке!

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

alert( '1' + 2 ); // "12"

alert( 2 + '1' ); // "21"

Это приведение к строке — особенность бинарного оператора "+".

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

Например:

alert( '1' - 2 ); // -1

alert( 6 / '2'); // 3

4. Унарный плюс +

Унарный плюс как арифметический оператор ничего не делает:

alert( +1 ); // 1

alert( +(1-2) ); // -1

Как видно, плюс ничего не изменил в выражениях. Результат — такой же, как и без него. Тем не менее, он широко применяется, так как его «побочный эффект» — преобразование значения в число.

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

var a = "2";

var b = "3";

alert( a + b ); // 23, так как бинарный плюс складывает строки alert( +a + b ); // 23, второй операнд - всё ещё строка

alert( +a + +b); // 5, оба операнда предварительно преобразованы в числа

5. Присваивание

Оператор присваивания выглядит как знак равенства =: var i = 1 + 2;

alert(i); // 3

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

var a = 1;

var b = 2;

a = b + a + 3; // (*) alert(a); // 6

В строке (*) сначала произойдет вычисление, использующее текущее значение a (т.е. 1), после чего результат перезапишет старое значение a.

Возможно присваивание по цепочке:

var a, b, c;

a = b = c = 2 + 2;

Такое присваивание работает справа-налево, то есть сначала вычислятся самое правое выражение 2+2, присвоится в c, затем выполнится b = c и, наконец, a = b.

Оператор "=" возвращает значение

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

var a = 1; var b = 2;

var c = 3 - (a = b + 1); alert(a); // 3

alert(c); // 0

В примере выше результатом (a = b + 1) является значение, которое записывается в a

(т.е. 3). Оно используется для вычисления c. Забавное применение присваивания, не так ли?

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

6. Приоритет

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

Из школы мы знаем, что умножение в выражении 2 * 2 + 1 выполнится раньше сложения, т.к. его приоритет выше, а скобки явно задают порядок выполнения. Но в JavaScript — гораздо больше операторов, поэтому существует целая таблица приоритетов. Она содержит как уже пройденные операторы, так и те, которые мы еще не проходили. В ней каждому оператору задан числовой приоритет. Тот, у кого число меньше — выполнится раньше. Если приоритет одинаковый, то порядок выполнения — слева направо.

Отрывок из таблицы:

… … …

5 умножение *

5 деление /

6 сложение +

6 вычитание -

17 присвоение =

… … …

Посмотрим на таблицу в действии.

В выражении x = 2 * 2 + 1 приоритет умножения * равен 5, он самый высокий, поэтому выполнится раньше всех. Затем произойдёт сложение +, у которого приоритет 6, и после них — присвоение =, с приоритетом 17.

7. Инкремент/декремент: ++, --

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

· Инкремент ++ увеличивает на 1:

var i = 2;

i++; // более короткая запись для i = i + 1. alert(i); // 3

· Декремент -- уменьшает на 1:

var i = 2;

i--; // более короткая запись для i = i - 1. alert(i); // 1

Инкремент/декремент можно применить только к переменной.

Код 5++ даст ошибку.

Вызывать эти операторы можно не только после, но и перед переменной: i++ (называется

«постфиксная форма») или ++i («префиксная форма»).

Обе эти формы записи делают одно и то же: увеличивают на 1.

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

Например:

var i = 1;

var a = ++i; // (*)

alert(a); // 2

В строке (*) вызов ++i увеличит переменную, а затем вернёт ее значение в a. То есть, в

a попадёт значение i после увеличения.

Постфиксная форма i++ отличается от префиксной ++i тем, что возвращает старое значение, бывшее до увеличения.

В примере ниже в a попадёт старое значение i, равное 1:

var i = 1;

var a = i++; // (*)

alert(a); // 1

· Если результат оператора не используется, а нужно только увеличить/уменьшить переменную — без разницы, какую форму использовать:

var i = 0; i++;

++i;

alert(i); // 2

· Если хочется тут же использовать результат, то нужна префиксная форма:

var i = 0;

alert( ++i ); // 1

· Если нужно увеличить, но нужно значение переменной до увеличения — постфиксная форма:

var i = 0;

alert( i++ ); // 0

Инкремент/декремент можно использовать в любых выражениях.

При этом он имеет более высокий приоритет и выполняется раньше, чем арифметические операции:

var i = 1;

alert( 2 * ++i ); // 4

var i = 1;

alert( 2 * i++ ); // 2, выполнился раньше но значение вернул старое

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

var i = 1; alert( 2 * i ); i++;

Важность: 5

Посмотрите, понятно ли вам, почему код ниже работает именно так?

var a = 1, b = 1, c, d;

c = ++a; alert(c); // 2 d = b++; alert(d); // 1

c = (2+ ++a); alert(c); // 5 d = (2+ b++); alert(d); // 4

alert(a); // 3

alert(b); // 3

8. Побитовые операторы

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

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

Поддерживаются следующие побитовые операторы:

· AND(и) ( & )

· OR(или) ( | )

· XOR(побитовое исключающее или) ( ^ )

· NOT(не) ( ~ )

· LEFT SHIFT(левый сдвиг) ( << )

· RIGHT SHIFT(правый сдвиг) ( >> )

· ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( >>> )

9. Вызов операторов с присваиванием

Часто нужно применить оператор к переменной и сохранить результат в ней же, например:

n = n + 5; d = d * 2;

Эту запись можно укоротить при помощи совмещённых операторов: +=, -=, *=, /=,

>>=, <<=, >>>=, &=, |=, ^=, вот так:

var n = 2;

n += 5; // теперь n=7 (работает как n = n + 5) n *= 2; // теперь n=14 (работает как n = n * 2)

alert(n); // 14

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

Важность: 3

Чему будет равен x в примере ниже?

var a = 2;

var x = 1 + (a *= 2);

10. Оператор запятая

Запятая тоже является оператором. Ее можно вызвать явным образом, например:

a = (5, 6);

alert(a);

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

Запятая — единственный оператор, приоритет которого ниже присваивания. В выражении a = (5,6) для явного задания приоритета использованы скобки, иначе оператор '=' выполнился бы до запятой ',', получилось бы (a=5), 6.

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

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

// три операции в одной строке

for (a = 1, b = 3, c = a*b; a < 10; a++) {

...

}

Такие трюки используются во многих JavaScript-фреймворках для укорачивания кода.

Пример с массивом и циклом:

<!DOCTYPE html>

<html>

<body>

<script> var i;

var cars = new Array(); cars[0] = "Saab";

cars[1] = "Volvo";

cars[2] = "BMW";

for (i=0;i<cars.length;i++)

{

document.write(cars[i] + "<br>");

}

</script>

</body>

</html>

Задание: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример1_7.html и открыть (запустить) его в любом браузере.

ТЕМА 2.4 ВЗАИМОДЕЙСТВИЕ С ПОЛЬЗОВАТЕЛЕМ: ALERT, PROMPT, CONFIRM

ПРАКТИЧЕСКАЯ РАБОТА №34-36

В этом разделе мы рассмотрим базовые UI операции: alert, prompt и confirm, которые позволяют работать с данными, полученными от пользователя.

Синтаксис: alert(сообщение)

Оператор alert

alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмет «ОК».

alert("Привет");

Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберется с окном. В данном случае - пока не нажмет на «OK».

Оператор prompt

Функция prompt принимает два аргумента: result = prompt(title, default);

Она выводит модальное окно с заголовком title, полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.

Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием ESC на клавиатуре.

Вызов prompt возвращает то, что ввел посетитель - строку или специальное значение null, если ввод отменен.

Как и в случае с alert, окно prompt модальное.

var years = prompt('Сколько вам лет?', 100);

alert('Вам ' + years + ' лет!') Всегда указывайте default

Вообще, второй default может отсутствовать. Однако при этом IE вставит в диалог

значение по умолчанию "undefined".

Запустите этот код в IE, чтобы понять о чем речь:

var test = prompt("Тест");

Поэтому рекомендуется всегда указывать второй аргумент:

var test = prompt("Тест", ''); // <-- так лучше

Синтаксис:

result = confirm(question);

Оператор confirm

confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.

Результатом будет true при нажатии OK и false - при CANCEL(Esc).

Например:

var isAdmin = confirm("Вы - администратор?");

alert(isAdmin);

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

С одной стороны — это недостаток, т.к. нельзя вывести окно в своем дизайне.

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

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

«красивости» особой роли не играют.

Индивидуальные задания по вариантам

Задание инд 1:

Вариант 1: Создать страницу со скриптом, который бы средствами скрипта выводил sin(x), где x – числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Вариант 2: Создать страницу со скриптом, который бы средствами скрипта выводил cos(x), где x – числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Вариант 3: Создать страницу со скриптом, который бы средствами скрипта выводил sqrt(x), где x – числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Вариант 4: Создать страницу со скриптом, который бы средствами скрипта выводил abs(x), где x – числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Задание инд 2:

Вариант 1: Создать страницу со скриптом, которая выводила бы сообщение « Нажмите кнопку для замены текста страницы». В скрипте опишите тег <button>, который будет при нажатии будет запускать функцию, созданную средствами javascript, которая заменит текст, размещенный в теге

<h1> </h1> на текст «произошла замена», который бы извлекался из переменной str_.

Вариант 2: Создать страницу со скриптом, которая выводила бы сообщение « Нажмите кнопку для замены текста страницы» с кнопками «да» и «нет». В скрипте опишите тег <button>, который будет при нажатии будет запускать функцию, созданную средствами javascript, которая заменит текст, размещенный в теге <p> </p> на результат сложения двух переменных, которые объявлены в функции.

Вариант 3: Создать страницу со скриптом, которая выводила бы сообщение «Нажмите кнопку для замены текста страницы». В скрипте опишите тег <button>, который будет при нажатии будет запускать функцию, созданную средствами javascript, которая заменит текст, размещенный в теге

<a> </a> на текст «произошла замена ссылки», который бы извлекался из переменной str_, хранящей ссылку на сайт.

Вариант 4: Создать страницу со скриптом, которая выводила бы сообщение « Нажмите кнопку для замены текста страницы». В скрипте опишите тег <button>, который будет при нажатии будет запускать функцию, созданную средствами javascript, которая заменит текст, размещенный в теге

<h6> </h6> на текст текущую дату, которая бы извлекалась из переменной date_.

Задание инд 3:

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

Вариант 2: Создать страницу со скриптом, в котором создается объект Холодильник с 4-мя свойствами: цвет, марка, модель, цена. Вывести по нажатию кнопки все значения свойств на экран.

Вариант 3: Создать страницу со скриптом, в котором создается объект Компьютер с 3-мя свойствами: модель, производитель, цена. Вывести по нажатию кнопки все значения свойств на экран.

Вариант 4: Создать страницу со скриптом, в котором создается объект Квартира с 4-мя свойствами: адрес, количество комнат, цена, ремонт. Вывести по нажатию кнопки все значения свойств на экран.

ТЕМА 2.5 СОЗДАНИЕ СЦЕНАРИЕВ НА ЯЗЫКЕ JAVASCRIPT

ПРАКТИЧЕСКАЯ РАБОТА № 37-42

СОЗДАНИЕ СЦЕНАРИЕВ НА ЯЗЫКЕ JAVASCRIPT

1. ЦЕЛЬ РАБОТЫ

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

2. СВЕДЕНИЯ ИЗ ТЕОРИИ

2.1. Язык JavaScript

JavaScript появился в 1995 году, когда язык Java был уже достаточно широко известен. К тому времени, однако, существовал прототип языка JavaScript — язык описания скриптов (сценариев) LiveScript, встроенный в браузер Netscape Navigator 2.0. Впоследствии компания Netscape отказалась от названия LiveScript и в сотрудничестве с компанией Sun Microsystems, создавшей язык программирования Java, начала разработку нового языка, получившего название JavaScript [6,7].

Несмотря на некоторое сходство в синтаксисе и методах создания объектов, языки Java и JavaScript мало похожи. Определение языка JavaScript как "облегченной версии" языка Java является неточным. Многие утверждают, что язык JavaScript – это язык описания сценариев, а не язык программирования. Однако описание сценариев и программирование тесно связаны между собой, несмотря на то, что скрипты и программы применяются для различных целей. Создание скриптов часто рассматривают как "упрощенное программирование", т.е. средство для решения простых задач, хотя фактически именно скрипты являются основой многих программных продуктов, работающих в Internet. Подобно программам на языке Java, JavaScript-программы компилируются во внутреннее представление, известное как байт-код, который затем выполняется интерпретатором. Главной целью языка JavaScript является поддержка активного взаимодействия документов HTML с пользователем. Этот язык не претендует на то, чтобы быть полномасштабным средством программирования, таким как Java или C++. Скорее, он является расширением языка HTML, облегчающим работу пользователя с конкретным браузером. Язык JavaScript расширяет возможности стандартных элементов HTML, позволяя конструкциям веб-страницы взаимодействовать с объектами и свойствами языка JavaScript. С введением обработчиков событий HTML-документы стали более "живыми", поскольку разработчики получили возможность определять их поведение в зависимости от действий пользователя. Важен тот факт, что JavaScript-программы действительно являются выполняемым содержимым документов; они физически находятся внутри HTML-документов, в отличие от Java-апплетов, которые существуют вне документов, их активизирующих. Пример реакции системы на действия человека приведен на рис. 3.1. Курсор мыши в своем движении по экрану остановился на символе сноски. В результате обработки произошедшего события поверх основного текста документа всплыл текст сноски. Читателю не нужно использовать прокрутку документа, чтобы добраться до сноски, она сама появляется перед ним и
сама исчезает, если курсор мыши сдвинуть в сторону от символа сноски.

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

В результате, с помощью JavaScript-программ вы можете:

· формировать HTML-документы "на лету";

· производить проверку правильности данных HTML-формы перед передачей их на сервер;

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

· создавать окна сообщений и диалоговые окна для вывода предупреждающих сообщений и ввода данных;

· создавать документы с расширенными возможностями навигации, используя фреймы и автономные окна;

· обнаруживать Java-апплеты и подключаемые модули (plug-in) браузера и взаимодействовать с ними.

2.2. Основы грамматики JavaScript

Большинство программ на языке JavaScript распространяются по сети упакованными в документах, запрашиваемых пользователями. До тех пор пока ресурс не загружен в браузер, невозможно определить, содержит он JavaScript-программу или нет. Чтобы браузер мог обнаружить такую программу, в язык HTML введен элемент <script>. Имеется также дополняющий элемент <noscript>, позволяющий авторам HTML-документов выяснить, когда язык JavaScript использовать нельзя. Скрипты могут находиться в любом месте документа. Обратное неверно: теги элементов языка HTML нельзя помещать внутри JavaScript-программы. Не забывайте заключать JavaScript-программу в теги <script>. . .</script>, кроме тех случаев, когда она используется как обработчик события. Событием может явиться нажатие кнопки, передача заполненной формы, загрузка новой страницы и т.д. При встрече с открывающим тегом <script>, браузер построчно анализирует содержимое документа до тех пор, пока не будет достигнут закрывающий тег </script>. После этого производится проверка скрипта на наличие ошибок и компиляция JavaScript-программы в формат, пригодный для выполнения на компьютере пользователя. Если при проверке или компиляции программы обнаруживаются ошибки, Navigator выводит на экран окна с предупреждениями. Чтобы продолжить работу, необходимо нажать кнопку ОК в каждом таком окне.

Главная часть JavaScript-программы может быть помещена в контейнер <head>. . .</head>, поскольку он считывается в программу Navigator при загрузке HTML-документа одним из первых. Теоретически скрипт можно размещать в любом месте HTML-документа, хотя лучше это делать перед контейнером <body>.. .</body>, т.е. в заголовке документа, чтобы функции языка JavaScript загружались в память сразу же после загрузки документа в браузер. Однако некоторые авторы любят размещать скрипты в конце программы. Тогда их не нужно разыскивать по тексту разметки. Окончательный выбор остается за вами. Описания функций лучше всего помещать в заголовок документа, хотя скрипты, выполняемые "на лету" и формирующие новые документы HTML при обращении к определенным частям текущего документа, могут быть размещены там, где они необходимы. Синтаксис элемента <script> следующий:

[JavaScript-statements (предложения языка JavaScript)...]

</script>

Как известно, необязательный атрибут language элемента script устанавливает язык скриптов, используемый в документе. Это может быть «родной» для компании Microsoft язык VBScript, наследующий конструкции Visual Basic. Здесь значением атрибута language является строка "JavaScript". Как правило, то же значение присваивается атрибуту по умолчанию. Далее, с помощью атрибута src (source, т.е. ресурс, источник) определяется адрес файла, содержащего скрипт. Заметим, что регистр символов в данном случае не имеет значения, как и при указании тегов языка HTML. Если атрибут src определен, то тело скрипта [JavaScript-statements...] пропускается, потому что скрипт будет загружен из определенного атрибутом src файла. Если значение атрибута src не указывается явно, то предполагается, что программа содержится в контейнере <script>.. .</script>. Операторы языка JavaScript подробно рассматриваются в [6,7].

Для того чтобы включить JavaScript-программу в HTML-документ, используйте открывающий тег <script> без определения атрибута src. Например, при загрузке следующего HTML-документа на экран выводится окно сообщения:

<html>

<head>

alert {"Добро пожаловать !"} ;

</script>

</head>

------------------------ тело документа ----------------------------------------------

</html>

Метод alert() – это один из инструментов языка JavaScript. При его выполнении на экране появляется окно сообщения, в котором отображаются заданный текст, кнопка ОК и пиктограмма с восклицательным знаком. Такие предупреждения используются для привлечения внимания пользователя. Приведенная программа выполняется немедленно после загрузки включающего ее документа, хотя в языке JavaScript можно определить и функции, содержащие последовательности операторов – аналогов обработчиков прерываний в пакетах визуального программирования. Такие функции активизируются только при обращении к ним из основной программы.

2.3. Система событий языка JavaScript

Использование языка JavaScript при обработке событий значительно расширило возможности языка HTML. В элементы HTML, определяющие гиперсвязи и компоненты формы, добавлены необходимые атрибуты. Чаще всего сценарии создаются для контроля реакции системы на любые действия пользователя, от движения курсора мыши по экрану до обработки информации, вводимой в поля форм. Возможности управления элементами форм обеспечиваются главным образом за счет функций обработки событий, которые задаются для всех элементов документа, в частности, для формы. Форма представляет собой контейнер, содержащий поля ввода, области текста, списки и кнопки. Для каждого из этих элементов определяются программы обработки событий, что существенно повышает степень интерактивности документа. События делятся на несколько категорий:

· события, связанные с документами в целом – загрузка и выгрузка;

· события, связанные с гиперссылками – активизация гиперссылки;

· события, связанные с формой – щелчки мыши на кнопках (button), группах кнопок выбора варианта (radiobutton), переключателях (checkbox), кнопках передачи данных и восстановления исходных значений элементов, получение и потеря фокуса ввода, а также изменение содержимого полей ввода, областей текста и списков, выделение текста в полях ввода и областях текста;

· события, связанные с рисунками – загрузка рисунка, ошибка загрузки рисунка, прерывание загрузки рисунка;

· события, связанные с клавиатурой – нажатие, давление, отпускание любой клавиши компьютера;

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

События, связанные с документами, возникают при загрузке и выгрузке документа, в то время как события гиперсвязей возникают при их активизации или при помещении на них указателя мыши. Очень популярно использование программ на языке JavaScript для обработки событий форм. События, связанные с рисунками, позволяют выполнять ответные действия как в процессе загрузки рисунка, так и при возникновении ошибок. Рисунки теперь тоже представляются как объекты с программными свойствами, которые можно описать массивами. Например, выражение document.images[0].src соответствует атрибуту src (адрес URI) в открывающем теге первого элемента <img> текущего документа.

Обработчики событий конкретного объекта задаются в HTML-теге, определяющем этот объект. Например, обработчик события, связанного с рисунком, задается в теге <img>, обработчик события гиперсвязи – в теге <A> и т.д. В целях «перехвата» события программируют функции-обработчики событий. Ими могут оказаться достаточно объемные коды, или только группы из одного или нескольких операторов, разделенных точкой с запятой (;). В таблице 3.1 перечислены имена большинства событий, используемых в языке разметки гипертекстов, и условия их возникновения. В среднем столбце таблицы сосредоточены названия атрибутов, обеспечивающих правильную реакцию на события.

Таблица 3.1

Имя события	Атрибут	Условие возникновения события
Blur	onBlur	Потеря фокуса ввода элементом формы
Change	onChange	Изменение содержимого поля ввода или области текста, выбор нового элемента списка
Click	onClick	Щелчок мыши на элементе HTML
Focus	onFocus	Получение фокуса ввода элементом формы
Load	onLoad	Завершение загрузки документа
MouseOver	onMouseOver	Помещение указателя мыши на элемент
MouseOut	onMouseOut	«Уход» указателя мыши из контура элемента
KeyPress	onKeyPress	Нажатие клавиши на клавиатуре компьютера
Select	onSelect	Выделение текста в поле ввода или во фрагменте текста
Submit	onSubmit	Передача данных формы
Unload	onUnLoad	Выгрузка текущего документа (начало загрузки в браузер нового документа)

3. ПОДГОТОВКА К ВЫПОЛНЕНИЮ РАБОТЫ

3.1. Подготовить сменный носитель (дискету, flash-накопитель) с результатами работ №№ 1 и 2. На созданном в них сайте будет производиться доработка дизайна, составляющая содержание данного занятия. Результаты будут сохранены с целью их дальнейшего использования в работе № 3.

3.2. По рекомендованной литературе [6, 7] ознакомиться с принципами написания скриптов на языке JavaScript.

3.3. Подготовить и обосновать предложения по внесению динамики в сайт, разработанный на занятиях 1 и 2. Определить основные события, на которые должна реагировать система.

3.4. Составить программные коды обработчиков прерываний по п. 3.3.

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

3.6. Подготовить текст теоретических разделов отчета о работе.

3.7. Ответить на контрольные вопросы настоящих методических указаний.

4. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

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

4.1.
ПРОЕКТИРОВАНИЕ СТРАНИЦЫ АНКЕТЫ. Создайте пустую веб-страницу. Настройте цвет фона, шрифты и другие свойства страницы, аналогичные ранее размеченным страницам сайта. Добавьте на страницу объект «форма». Поместите в форму группу кнопок выбора (radiobutton), комбинированный список с выпадающими ответами, несколько строк ввода (обязательны поля ввода адреса e-mail и номера телефона), список с возможностью выбора нескольких вариантов ответа и область ввода текста. Дайте форме и ее объектам понятные («говорящие») имена. Не следует называть форму “f”, радиокнопки “r”, “rr” или “rrr”, а область ввода текста “a”. Оформите страницу в соответствии с правилами дизайна. Пример анкеты показан на рис. 3.2.

Добавьте ссылку на анкету в меню сайта.

4.2. СОЗДАНИЕ СКРИПТОВ ДЛЯ ПРОВЕРКИ ПРАВИЛЬНОСТИ ЗАПОЛНЕНИЯ ПОЛЕЙ ФОРМЫ.

4.2.1. Самый надежный способ ненавязчивого контроля правильного ввода пользователем необходимой вам информации – создать обработчик события onBlur (элемент формы из активного превращается в неактивный). Тогда проверка производится после заполнения поля, в момент перехода к следующему. Можно использовать обработчик onChange, реагирующий на каждый вводимый символ, но это лишит вашего потенциального клиента права на опечатку или на создание экзотического псевдонима. Постоянно всплывающие в процессе ввода информации сообщения могут заставить даже лояльного пользователя отказаться от сотрудничества с вами. Более того, часто такой способ просто неприемлем (например, для проверки правильности ввода адреса e-mail). Дополнительно организуйте функцию общей повторной проверки всех полей формы по событию submit (отправка формы). Опыт показывает, что «изобретательные» корреспонденты легко находят способ обойти событие onBlur.

4.2.2. Для поля ввода имени (см. рис. 3.2) разрешенными символами являются буквы и дефис. Если желательно допустить ввод фамилии, инициалов или имени и отчества, то следует разрешить пробелы и точки. Существуют два варианта скрипта проверки правильности ввода имени: один проверяет наличие разрешенных символов, другой – наличие запрещенных. В обоих случаях в функции проверки задается строка запрещенных или разрешенных для использования в имени символов, а затем в цикле проверяются значения символов из поля ввода имени. С помощью функции indexOf или search проверяется присутствие или отсутствие текущего символа в запрещающей или разрешающей строке. По факту обнаружения несоответствия символа в поле ввода имени указанным ограничениям на экран с помощью функции alert выдается соответствующее сообщение («Обнаружен неверный символ»), курсор помещается в поле ввода имени (метод focus), а вся строка выделяется (метод select), чтобы дать возможность пользователю удалить ее одним нажатием клавиши.

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

4.2.4. Содержимое комбинированного списка для выбора альтернативного варианта ответа в контроле не нуждается, оно введено автором на этапе дизайна. Нужно проверить, введено ли что-нибудь в строку альтернативного варианта ответа (рис. 3.3). Правила дружественного интерфейса советуют при выборе варианта «Другая модель» автоматически – с помощью обработки события onChange элемента ComboBox – переводить фокус ввода на строку альтернативного варианта. В этом поле ввода допустимые комбинации символов должны принадлежать множеству всех известных моделей фирмы.

4.2.5. Функция проверки ввода адреса e-mail может быть реализована несколькими способами. Самый простой из них – использовать функцию search. Более надежный и трудоемкий – последовательно перемещаться по строке, аналогично процедуре проверки имени, выставляя флажки-признаки наличия встреченных символов, проверяя их повторение и т.д. В обозначении e-mail адреса необходимо удостовериться в использовании только разрешенных символов. Это буквы, цифры, символы «_» и «-». Символ «@» должен присутствовать только один раз. Устанавливается наличие символа «.» (точка), отсутствие точки непосредственно после или перед символом «@», отсутствие лидирующей и замыкающей точки в обозначении адреса, отсутствие следующих друг за другом точек (многоточия), а также возможность указания доменов третьего и более высоких уровней (комбинации вида ghf56@hj.dhh.aaa.des). Действия по факту обнаружения нарушений аналогичны указанным выше (см. рис. 3.4). Отличие состоит в том, что сообщения об ошибках должны четко указывать, что именно некорректно в строке, например, «В адресе e-mail встречено два символа @».

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

4.3. СТРАНИЦА ГОСТЕВОЙ КНИГИ. Создайте пустую страницу. Настройте ее свойства по аналогии с имеющимся страницами сайта и разместите на ней объект «форма» с полями ввода (рис. 3.5).

5. СОДЕРЖАНИЕ ОТЧЕТА

Отчет о работе должен содержать следующие материалы в соответствии с полученным индивидуальным заданием:

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

5.2. Обоснование эффективности использования скриптов в разметке страниц создаваемого сайта (по материалам п.2 данного пособия).

5.3. Обоснование выбора визуальных элементов создаваемых документов (собственного или по п. 4 настоящего пособия).

5.4. Таблица (по аналогии с табл.3.1 пособия), представляющая информацию о событиях прерывания, используемых в лабораторной работе.

5.5. Программные коды обработчиков прерываний по событиям с комментариями или блок-схемами (по материалам п. 2.2 настоящего пособия).

5.6. Содержание выполненных индивидуальных занятий.

5.7. Ответы на контрольные вопросы и выводы по выполненной работе.

6. КОНТРОЛЬНЫЕ ВОПРОСЫ

4.8. Каковы назначение и функции скриптов (сценариев) в языке разметки гипертекстов? К какой категории языка они относятся - это элементы, атрибуты, комментарии, ссылки, или они не входят ни в какие другие категории HTML?

4.9. В каком разделе документа HTML предпочтительно располагать элемент <SCRIPT>?

4.10. Каким образом прерывание от внешнего устройства или программного процесса активизирует выполнение скриптов? Постройте универсальную схему обработки прерываний.

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

4.12. Элемент <A> (якорь) предназначен как для идентификации цели гиперссылки (атрибуты id и name), так и для указания адреса связанного ресурса (атрибут href). Воспримет ли система документ, в разметке которого не определены значения ни одного из этих атрибутов?

4.13. Какое противоречие содержит в себе рис. 3.1? Какие элементы представленного изображения несовместимы в реальной ситуации?

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

РАЗДЕЛ 3. ОСНОВЫ РАБОТЫ В ADOBE FLASH. 60

ТЕМА 3.1 ИНТЕРФЕЙС ПРОГРАММЫ. СОЗДАНИЕ ОБЪЕКТОВ.

Теоретическая часть

Знакомство с Macromedia Flash.
Создание рисунков

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

Программа Flash впервые появилась в 1996 г. В переводе с английского «flash» - это нечто очень быстрое или очень яркое. Возможно и то и другое одновременно.

Macromedia Flash MX – это интегрированная среда для создания интерактивной векторной анимации, использующейся при создании Web-сайтов и презентаций. В Macromedia Flash МХ можно:

1) рисовать изображения, при этом программа сразу исправляет многие погрешности;

2) импортировать векторную и растровую графике;

3) трассировать (преобразовывать) импортированную растровую графику в векторную;

4) работать с текстом;

5) создавать и редактировать графические изображения и экспортировать их как в векторные, так и растровые форматы;

6) производить изменение формы, цвета и положения объекта (его частей) во времени и пространстве;

7) создавать элементы управления (кнопки, меню и пр.) для интерактивной анимации;

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

9) использовать для создания интерактивной анимации язык программирования ActionScript;

10) создавать библиотеки изображений, клипов, кнопок и ActionScript-сценариев и пользоваться ими;

11) создавать формы для ввода данных пользователем;

12) взаимодействовать с сервером, отсылая и получая информацию;

13) получать конечный продукт в виде либо gif-анимации, либо Flash-фильма, либо исполняемого exe-файла;

14) создавать интерактивные фильмы;

15) использовать конечный продукт для создания Web-страниц и презентаций;

16) сохранять секреты построения фильма, используя форматы SWF и EXE при публикации.

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

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

Инструмент дополнительного выбора - используется для изменения формы объекта. При выделении объекта этим инструментом на объекте появляются контурные точки перетаскивая которые вы будете произвольно изменять форму объекта выгибать и растягивать линии

Инструмент линия - служит для рисования прямых

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

Инструменты овал и прямоугольник - используется для рисования овала и прямоугольника соответственно

Инструмент карандаш - используется для рисования произвольных линий подобно тому как это делается обычным карандашом

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

Инструмент произвольная трансформация - позволяет изменять форму объекта в любом направлении

Инструмент трансформация заливки - служит для изменения градиентной заливки

Инструмент бутылка с чернилами - используется для заливки твердым цветом линий или окантовки

Инструмент заливка - заполняет цветом области ограниченные линиями

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

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

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

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

Практическая работа №43
«Применение инструментов Macromedia Flash для создания рисунков»

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

Задание 1. Нарисуйте полумесяц. Результат работы сохраните во внутреннем формате (Луна.fla) и как изображение (Луна.jpg, Луна.gif). Цвет луны – желтый.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте три слоя изображения, используя кнопку добавить слой $..\..\..\..\Рисунки\Добавить кнопку.bmp$ . 2. Переименуйте слои *Небо, Звезды, Луна. Встаньте на слой Небо*.
	3. Выберите инструмент прямоугольник. Установите цвет заливки синий и постройте прямоугольник по размеру документа. 4. Двойным щелчком щелкните по границе прямоугольника и нажав клавишу Del удалите ее. 5. Перейдите на слой Луна. 6. Выберите инструмент *Овал. Установите цвет заливки – желтый, а цвет границы, контрастный для желтого, например, коричневый. 7. Придерживая клавишу Shift*, нарисуйте круг.
	8. Выбрав инструмент Выделение и щелкнув двойным щелчком по кругу, выделите его. 9. Удерживая клавишу *Ctrl, переместите круг немного в сторону, чтобы получившаяся копия частично перекрывала оригинал. 10. Удалите выделенную часть рисунка (клавиша Del*). 11. Выделите границы полученной фигуры, и удалите их.
	1. Перейдите на слой Звезды и нарисуйте несколько звездочек. 2. Для сохранения во внутреннем формате (*fla) в меню Файл* выбрать пункт *Сохранить…* (или *Сохранить как…). Выбрать нужную папку и ввести имя. Подтвердить выбранное. 3. Для сохранения в стандарте gif* или *jpg* (или *png) в меню Файл* выбрать пункт *Экспортировать изображение…* (для движущегося изображения *Экспортировать ролик…*). Выбрать нужную папку, нужный тип файла и ввести имя. Подтвердить выбранное. 4. Завершите работу с программой.

Задание 2. Нарисуйте колодец. Результат работы сохраните во внутреннем формате (Колодец.fla). Цвет кирпича – коричневый, границы – ярко-желтый.

Алгоритм работы

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ Macromedia Flash 2. В меню *View* (Вид) в пункте выберите *Grid* (Сетка) опции Show grid (Показать сетку) а при необходимости смените параметры сетки (пункт *Edit* *grid…). 3. Выберите инструмент Прямоугольник*. Установите цвет заливки – коричневый, а цвет границы – желтый. 4. Нарисуйте по линиям сетки прямоугольник размером 2´1.
	5. Для построения верхней грани первого кирпича над ним по линиям сетки «впритык» нарисуйте квадрат, размером 2´2. Выделите указателем построенный квадрат (двойной щелчок левой кнопкой мышки). Выберите инструмент *Свободная трансформация* и, направив курсор на верхнюю границу квадрата, добейтесь, чтобы указатель принял вид $..\Туда-сюда.bmp$ . Прижмите левую кнопку мышки и сдвиньте на две клетки вправо. Верхняя грань кирпича построена.
	6. Повторите построение для боковой грани. Нарисуйте прямоугольник размером 2´1 по линиям сетки «впритык». Выделите построенный прямоугольник. Выберите инструмент *Свободная трансформации* и, направив курсор на правую границу прямоугольника, добейтесь, чтобы указатель принял вид $..\Туда-сюда.bmp$ (если не получается, то смените масштаб, например, на 200%). Прижмите левую кнопку мышки и сдвиньте на две клетки вверх. Боковая грань кирпича построена.
	7. Выделите получившийся кирпичик, выбрав инструмент *Выделение* и выполните команду *Изменить / Группировать*. 8. Повторите построение для другого вида кирпича размерами 4´1´1.
	9. Начните укладывать первый ряд колодца, начиная с задней стенки, затем левой боковой, затем правой боковой, затем ближней. Для того, чтобы взять копию кирпича, прижмите клавишу *Ctrl* и левой кнопкой мышки переместите его на нужное место (используйте сетку). 10. Во время построения исправляйте видимость кирпичей в сетке, выделив неправильный» кирпич и используя команды: переместить наверх (*Ctrl+) или вниз (Ctrl*+¯) .
	11. Затем постойте второй и последующие ряды со сдвигом кирпичей. 12. Перед сохранением результата отключите опцию *Показать сетку* и сгруппируйте колодец. 13. Для сохранения во внутреннем формате (*fla) в меню Файл* выбрать пункт *Сохранить…* (или *Сохранить как…*). Выберите нужную папку и введите имя. Подтвердите выбранное.

Практическая работа №44

Задание 1. Нарисуйте букет. Результат работы сохраните во внутреннем формате (Букет.fla) и как изображение (Букет.jpg, Букет.gif).

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Нарисуйте небольшой вертикально вытянутый овал 2. Выберите инструмент *Selection* и поднесите курсор к контуру овала так, чтобы около курсора появилась небольшая дуга. Немного потяните курсор, преобразовывая овал в лепесток 3. Используя клавишу *Ctrl*, скопируйте лепесток
	4. Выберите инструмент *Free* *Transform, выделите копию лепестка и поверните ее на 10⁰. 5. Используя инструмент Selection*, перенесите повернутую копию и наложите ее на оригинал 6. Продолжите процедуру копирования до тех пор, пока количество лепестков у нашего цветка не станет достаточным. На каждом этапе можно слегка изменять форму лепестков.
	7. Выделите весь цветок. Откройте панель *Color* 8. На вкладке *Color* *Mixer* панели *Color* установите цвет контура 9. Для цвета заливки выберите тип *Radial. Откроется монтажная линейка для установки перехода между цветами. Двойным щелчком по «банке с краской» откройте панель выбора цвета и выберите подходящий цвет. Вы можете создать цветовой переход между двумя и более цветами (до восьми). Для того чтобы убрать лишнюю «банку», достаточно щелкнуть по ней мышкой при нажатой клавише Ctrl* или просто сдвинуть «банку» вниз 10. Нарисуем стебель и листья для нашего цветка. Листья делаются так же как и лепестки.
	11. Выделите весь цветок и использую клавишу *Ctrl* сделайте несколько копий. 12. Поработайте с каждой копией, чтобы придать ей индивидуальные черты. Измените пропорции копий. Поверните их на различные углы 13. Сдвиньте все копии поближе и получите красивый букет. 14. Сохраните файл

Задание 2. Нарисуйте синусоиду инструментом Перо. Результат работы сохраните во внутреннем формате (Синус.fla)

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ Macromedia Flash 2. В меню *View* (Вид) в пункте выберите *Grid* (Сетка) опции Show grid (Показать сетку) а при необходимости смените параметры сетки (пункт *Edit* *grid…). 3. Выберите инструмент Pen* и установите курсор в точку расположения одного из максимумов синусоиды в левой части рабочего поля 4. Нажмите левую кнопку мыши и протяните курсор на две клетки вправо
	5. Перенесите курсор в точку расположения очередного минимума синусоиды и нажав левую кнопку мыши, протяните курсор на две клеточки вправо. Увидим появившуюся кривую.
	6. Повторите шаги 4, 5 несколько раз 7. Сохраните файл

Практическая работа №45

Задание 1. Создайте «рисованный текст» с градиентной заливкой (FlashMX.fla)

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ Macromedia Flash 2. Выберите инструмент и щелкните курсором мышки на рабочем поле 3. Введите текст
	4. Выберите инструмент *Selection* и щелчком выделите текстовый блок 5. Откройте панель *Prorperties* и выберите шрифт *Arial, цвет букв – синий, размер 56. Убедитесь, что тип созданного текстового блока Static* *Text* 6. Инструментом *Free* *Transform* выделите текстовый блок и измените размер и пропорции текста
	7. Преобразуем текст в рисунок. Для этого выполните дважды команду *Modify* / *Break* *Apart* 8. Инструментом *Seleсtion* измените форму каждой буквы 9. На панели *Color* выберите тип заливки *Lineаr и выберите цветовые переходы 10. Инструментом Paint* *Backet* выполните заливку букв 11. Сохраните полученное изображение в своей папке с именем *Text*.fla

Задание 2. Нарисуйте и раскрасьте гриб.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый Flash документ 2. Выберите инструмент карандаш $..\..\..\..\Рисунки\Инструмент карандаш.bmp$ . 3. Установите цвет линии – слабо-серый $..\..\..\..\Рисунки\Цвет контура.bmp$ . 4. Установите опцию сглаживание.
	5. Нарисуйте шляпку. 6. Нарисуйте еще одну кромку шляпки гриба. 7. Нарисуйте ножку, стараясь построить замкнутую линию. 8. Удалите лишние части линий. Для этого выберите инструмент – выделение $..\..\..\..\Рисунки\Выделение.bmp$ . Щелкайте по ненужной части линии и нажимайте клавишу Delete.
$..\..\..\..\Рисунки\Линейный градиент.bmp$	9. Выберите инструмент ведро $..\..\..\..\Рисунки\Ведро.bmp$ . 10. Перейдите к выбору цвета заливки шляпки. Установите опцию линейный градиент и цвет от светло-коричневого к коричневому (см. рисунок). 11. Проведите выбранным инструментом по шляпке гриба с прижатой левой клавишей. 12. Перейдите к выбору цвета заливки для нижней части гриба. Установите опцию линейный градиент и цвет от белого к серому.
	13. Проведите выбранным инструментом ножке гриба с прижатой левой клавишей. 14. Выберите инструмент выделение $..\..\..\..\Рисунки\Выделение.bmp$ и охватите прямоугольной рамкой весь гриб.
	15. Выполните команду группировки объекта в целое Modify/Group. 16. Выполните команду Edit/Copy, копирующую выделенный объект в буфер обмена, и Edit/Paste in Center, вставляющую содержимое буфера обмена на слайд. 17. Измените размер и угол поворота, выбрав инструмент свободная трансформация $..\..\..\..\Рисунки\Свободная трансформация.bmp$ и переместите на новое место инструментом выделение. 18. Сохраните рисунок в своей папке под именем Гриб.fla. Для этого выполните команду File/Save.

Практическая работа №46

Задание 1 Нарисуйте сосну.

Алгоритм работы:

Сопровождающие иллюстрации

Шаги

$..\..\..\..\Рисунки\Свойства линии.bmp$

1. Для выбранного инструмента карандаш, $..\..\..\..\Рисунки\Инструмент карандаш.bmp$ установите нужный цвет, используя палитру Properties и нарисуйте ствол и веточки сосны

$..\..\..\..\Рисунки\Сосна.gif$

2. Для рисования хвои кнопку Custom этой же палитры

3. Сохраните полученный рисунок в своей папке с именем Sosna. fla

Задание 2 Нарисуйте кружевной узор.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый Flash документ 2. Нарисуйте вытянутый прямоугольник. 3. С помощью инструмента Selection $..\..\..\..\Рисунки\Выделение.bmp$ удалите заливку и слегка деформируйте контур 4. Выделите получившуюся фигуру и выберите инструмент Free Transform $..\..\..\..\Рисунки\Свободная трансформация.bmp$ Перенесите центр вращения на короткую сторону нарисованной фигурки
	5. Откройте панель Transform и задайте уголь поворота 18⁰ 6. Нажмите несколько раз на кнопку «Копирование с поворотом» так чтобы получился круг из нашей фигурки
	7. Сохраните файл под именем Usor.fla в свою папку

Практическая работа №47

Задание 1 Нарисуйте автомобиль.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ и три слоя изображения, используя кнопку добавить слой $..\..\..\..\Рисунки\Добавить кнопку.bmp$ . 2. Переименуйте слои *Фон, Луна, Авто. Встаньте на слой Фон. 3. Используя инструменты Rectangle* , *Pencil* или *Brush* на слое *Фон* нарисуйте задний план вашей картинки. 4. Перейдите на слой *Луна* и изобразите полумесяц
	5. Перейдите на слой *Авто. Нарисуем колесо 6. Выберите инструмент Oval* , установите цвет контура и цвет заливки. Удерживая клавишу *Shift, нарисуйте круг 7. Сгруппируем полученный рисунок. Для этого выделите круг и выполните команду Group* в меню *Modify* (или используйте комбинацию клавиш *Ctrl*+G) 8. Нарисуйте и сгруппируйте еще один круг меньшего размера 9. Наложите меньший круг на больший и сгруппируйте полученное колесо
	10. Используя инструменты *Rectangle* и *Selection* для изменения формы, нарисуйте компот, кузов, кабину и окно автомобиля. Все эти элементы группируются по одному по мере создания. 11. Расставьте все созданные группы по своим местам 12. Чтобы перенести фигуру с переднего на заданий план воспользуйтесь сочетанием клавиш *Ctrl* + ¯, для переноса фигуры с заднего плана на передний воспользуйтесь сочетанием клавиш *Ctrl*+
	13. Нарисуйте отдельно и сгруппируйте шляпку и ножку гриба. Сопоставьте рисунки и выполните группировку грибочка. 14. При нажатой клавише *Ctrl* выполните тиражирование грибочков. Измените размер и угол наклона каждой копии. 15. Соберите все грибы в кучу и еще раз сгруппируйте 16. Разместите их на заднем плане так чтобы они оказались лежачими в кузове. 17. Сохраните полученный рисунок в свою папку

Задание 2 Нарисуйте круг, не пользуясь инструментом Oval.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ *Macromedia* *Flash* 2. В меню *View* (Вид) в пункте выберите *Grid* (Сетка) опции *Show* *grid* (Показать сетку) а при необходимости смените параметры сетки (пункт *Edit* *grid*…). 3. Выберите инструмент Pen 4. Нажмите левую кнопку мыши и протяните курсор на 8 клеток вправо
	5. Установите курсор на 12 клеток ниже и нажав левую кнопку мыши, протяните курсор на 8 клеток влево.
	6. Установите курсор в первую узловую точку и нажав левую кнопку мыши, протяните курсор на 8 клеток вправо 7. При желании измените цвет контура используя инструмент Ink Bottle 8. Сохраните рисунок в своей папке

ТЕМА 3.2 АНИМАЦИЯ ДВИЖЕНИЯ. СПОСОБЫ СОЗДАНИЯ FLASH-АНИМАЦИИ.

ПРАКТИЧЕСКАЯ РАБОТА №48

Пошаговая анимация

Вся работа по созданию фильма происходит с участием панели Timeline. Если эта панель не отображается на экране, то включить ее можно командой меню View/Timeline

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

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

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

Понятие ключевого кадра является принципиальным в работе программы Maxromedia Flash MX. Именно в ключевых кадрах размещаются те самые статические картинки, которые потом оживают на экране.

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

Если инструментом Selection на линейке кадров выделить ключевой кадр, то будет выделено что изображено на рабочем поле этого кадра. Если теперь нажать клавишу <F5>, то справа от выделенного кадра будет создан дублирующий кадр. Символ дублирующего кадра в отличие от символа ключевого кадра не содержит ни полого, ни черного кружочка.

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

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

Клавиша <F6> копирует содержание ключевого кадра в новый ключевой кадр

Клавиша <F7> создает новый пустой ключевой кадр.

Попробуем создать несколько анимированных роликов, используя так называемую «пошаговую» анимацию. Такое название этот тип анимации получил потому, что каждая фаза (шаг) анимации прорисовывается в своем ключевом кадре. Для просмотра созданной анимации будем использовать сочетания клавиш Ctrl + Enter

Практическая работа
«Пошаговая анимация в Macromedia Flash»

Цель: знакомство c пошаговым видом анимации. Использование ключевых и дублирующих кадров при создании анимированных роликов

Задание 1.Создайте анимированный ролик, реализующий движение человека. Результат работы сохраните во внутреннем формате (Человечек.fla)

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ *Macromedia* *Flash* 2. Назовите первый слой *Движение* 3. На *1-ом кадре* нарисуйте статические детали, т.е. рисунок, который не будет подвергнут изменению в других кадрах (туловище, голова)
	4. Создадим еще семь таких же ключевых кадров. Для этого выделите мышкой символ первого кадра и нажмите клавишу <F6> семь раз 5. Вернитесь на первый кадр и дорисуйте ноги и руки человечку
	6. Перейдите на второй кадр и включите режим *Onion* *Skin* (луковая кожа) Ноги и руки первого кадра будут видны чуть бледнее, нарисуйте новые для второго кадра 7. Перейдите на третий кадр и нарисуйте руки и ноги человечку для этого кадра. Проделайте эти действия со всеми оставшимися кадрами
	8. Выделите и опустите человечка на *1 и 5* кадрах 9. Выделите и приподнимите человечка на *3 и 7* кадрах. 10. Создайте второй слой и расположите его ниже слоя Движение. 11. На втором слое нарисуйте пейзаж 12. Запустите файл на просмотр с помощью клавиш *Ctrl+Enter* 13. Сохраните файл

Задание 2.Создайте анимированный ролик, реализующий движение шара. Результат работы сохраните во внутреннем формате (Шар.fla)

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ *Macromedia* *Flash* 2. На первом кадре нарисуйте круг и овал. Круг заполните градиентной заливкой (это будет мяч), а овал однородным серым цветом (это будет тень которую отбрасывает мяч). Каждый объект сгруппируем отдельно друг от друга.
	3. Создадим второй ключевой кадр анимации. Для этого щелкнем правой кнопкой мыши на первом ключевом кадре и в появившемся меню выберем пункт *Insert* *Keyframe* На временной шкале появится второй ключевой кадр. Нарисуем звёздочку, сгруппируем (*Modify/Group*) её и поместим на изображение мяча. 4. Так же как и второй, создадим третий ключевой кадр и поместим на изображение мяча ещё одну звёздочку.
	5. Один за другим создайте ещё 12 ключевых кадров, помещая всякий раз на изображение по одному объекту. 6. Теперь зададим вращения мячу. Для того, чтобы световой блик при вращении оставался на месте, сгруппируем все звёзды и месяцы (*Shift+ объект и выбрать команду Modify/Group*). Для создания иллюзии вращения вполне достаточно придать вращение размещённым на изображении объектам, при этом сам мяч может оставаться неподвижным. Поскольку вращение у нас будет неравномерным то в первом кадре, в котором мяч начнёт вращаться он должен будет повернуться, например на 10°. В следующем кадре – на 30°, потом – на 50° и так далее пока угол поворота за 1 кадр не составит 190°
	7. Создайте очередной ключевой кадр и выполните команду *Modify/Transform/Scale* *and* *Rotate. В диалоговом окне параметр Scale* оставьте без изменения, а в поле *Rotate* введите значение 10 (При этом выделенными должны быть объекты на шаре). 8. Далее, создавая каждый последующий кадр, увеличивайте угол поворота на 20. Всё это создаст иллюзию вращения.
	9. Теперь будем создавать разлёт звёзд и месяцев с поверхности мяча, который должен напоминать взрыв. Разгруппируйте объекты и снова сгруппируйте теперь только центральные объекты. 10. Создадим очередной ключевой кадр, переместим периферийные объекты от изображения мяча, а для центральной группы применим команду *Scale* *and* *Rotate. В поле параметра Scale* введём значение 150, а поле *Rotate* оставим прежнее значение.
	11. Используем для анимации удаления объектов от мяча 5 кадров, в каждом из них будем сдвигать одни объекты и используя команду *Scale* *and* *Rotate, увеличивать и вращать группу других до тех пор, пока периферийные объекты на покинут пространство кадра. 12. Два раза щелкните по кнопке Frame* *Rate* и установите цвет фона голубой 13. Создадим последний кадр, удалив все звёзды и полумесяцы, запустим анимацию (*Ctrl* + *Enter*).

Задание 3.Создайте анимированный ролик, реализующий рост цветка. Результат работы сохраните во внутреннем формате (Цветок.fla)

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ *Macromedia* *Flash* 2. Два раза щелкните по кнопке *Frame* *Rate* и установите скорость показа равной 8, при желании можно изменить размеры сцены, цвет фона. 3. Создайте слои: *Фон, Горшок, Цветок* 4. Перейдите на слой *Фон* и нарисуйте задний план будущего ролика
	5. Заблокируйте слой Фон, нажав кнопку под изображение замка, находящуюся справа от названия слоя. 6. Перейдите на слой Горшок и нарисуйте горшочек и заблокируйте слой. 7. Встаньте на кадре 4 слоя *Цветок* и выполните команду *Insert* / Timeline / *Keyframe* (или нажмите F6). 8. Выберите инструмент кисть, толщину и цвет нарисуйте маленький побег.
	9. Встаньте на кадре 7 слоя *Цветок* и вставьте ключевой кадр. Дорисуйте побег. 10. Встаньте на кадре 10 слоя *Цветок* и вставьте ключевой кадр. Дорисуйте побег. И так далее, включая появление цветка, а дальше его увядание. 11. Сохранения во внутреннем формате (*fla). 12. Запустите ролик на выполнение, Ctrl+Enter. 13. Обратите внимание – горшок исчез. Он есть только на слое горшок* в 1 кадре. Для его размножения встаньте на слое *горшок* напротив последнего ключевого кадра слоя *Цветок* и нажмите F5 14. Запустите ролик на выполнение повторно. 15. Для сохранения ролика в формате *gif* выберите в меню *File/Export* команду *Export Movie. Установите нужные опции (прозрачность, повторять). Выполните сохранение щелкнув по кнопке Опубликовать*.

Задание 4 Создайте анимированный ролик «Лягушка и муха».

Алгоритм работы:

Сопровождающие иллюстрации

Шаги

1. Создайте новый документ Macromedia Flash

2. Нарисуйте контуры лягушки (то, что неподвижно)

3. Выделите первый кадр и нажмите клавишу F6 6 раз чтобы добавить 6 ключевых кадров (на каждом будет копия первого)

4. Вернитесь на первый кадр. Выберите инструмент кисть и нарисуйте глаза и муху.

5. Включите режим Onion Skin (луковая кожа) для того, что бы видеть то, что было на предыдущих кадрах.

6. Перейдите на следующий кадр и нарисуйте глаза и муху на новом кадре. И так пока не закончатся кадры

7. Выключить режим Onion Skin

8. Запустите файл на просмотр Ctrl + Enter

Задание 5 Создайте анимированный ролик «Движущийся автомобиль»

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ *Macromedia* *Flash* 2. Переименуйте первый слой в «Пейзаж» 3. Выполните команду *File* / *Import* / *Import* to *Stage* и вставьте картинку с изображением пейзажа 4. Выберите инструмент *Free* *Transform* и растяните картинку так, чтобы она покрывала все рабочее поле 5. Создайте цепочку дублирующих кадров. Для этого выделите тридцатый кадр и нажмите клавишу <F5> 6. Заблокируйте слой «*Пейзаж*», нажав кнопку под изображением замка правее имени слоя.
	7. Создайте новый слой «*Авто» и расположите его над слоем «Пейзаж» 8. В первом кадре нарисуйте автомобиль без колес 9. Сгруппируйте нарисованную машинку: выделите все изображение слоя «Авто», используя инструмент Selection, и нажмите клавиши Ctrl* +G 10. Сдвинте ваше авто за пределы рабочего поля в начало движения (смотрите по картинке на слое «*Пейзаж*»)
	11. Создадим второй ключевой кадр. Для этого выделите первый кадр слоя «*Авто» и нажмите клавишу <F6> 12. Сдвиньте немного автомобиль в сторону движения 13. Создайте еще один ключевой кадр и опять произведите сдвиг; и так до тех пор, пока машинка не скроется за противоположной границей рабочего поля 14. Нажмите клавишу Enter* и просмотрите движение авто 15. Заблокируйте слой «*Авто*»
	16. Создайте новый слой «*Колесо1» и расположите его выше слоя «Авто» 17. Нарисуйте колесо и сгруппируйте его 18. Расположите его так, чтобы оно проектировалось туда, где должно быть колесо у автомобиля 19. Создайте второй ключевой кадр на слое «Колесо1» и выполните смещение колеса, так чтобы оно оказалось на нужном месте. 20. Поверните его на небольшой угол, используя инструмент Free* *Transform* 21. Проделайте эти операции во всех кадрах с участием автомобиля
	22. Выделите всю последовательность кадров слоя «*колесо1» и командой Edit* / *Copy* Frames скопируйте их в буфер 23. Создайте новый слой «*Колесо2» и командой Edit / Paste* *Frames* вставьте кадры 24. Поставьте каждое колесо на место и просмотрите результат 25. Сохраните ролик

ПРАКТИЧЕСКАЯ РАБОТА №49

Анимация движения

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

Экземпляр библиотечного образца ( или просто экземпляр) – это конечная реализация библиотечного образца в фильме. На рабочее поле любого ключевого кадра экземпляры переносятся мышкой из окна панели «библиотека»

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

В качестве первого шага при создании анимации движения помещаем некий объект в ключевой кадр. Содержание этого кадра становится начальной фазой будущей анимации. Далее устанавливаем курсор на n-ый кадр, и с помощью клавиши <F6> создаем ключевой кадр, содержащий копию первого кадра. Путем редактирования рисунков на первом и последнем ключевых кадрах получаем начальную и конечную фазы анимации. Теперь приступим к анимации промежуточных кадров. Выделим первый ключевой кадр, затем откроем панель Properties и выполним следующие настройки: из списка Tween (тип анимации) выберем Motion (движение). Чтобы анимация шла корректно проследим за тем, чтобы был установлен флажок Scale, иначе не будет изменения пропорций. При выборе отрицательных значений параметра Easing (замедление) анимация будет идти ускоренно, а при выборе положительных – замедленно. В списке Rotate (поворот) можно предусмотреть поворот по часовой стрелке (CW) или против (CCW). В окошке рядом можно задать количество оборотов объекта в процессе анимации. Изменение положения центра вращения можно сделать либо в меню Modify / Transform / Edit Center, либо воспользоваться инструментом Free Transform.

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

При создании анимации движения важно чтобы:

1) начальная и конечная фазы анимации были получены из точных копий одного и того же объекта путем редактирования

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

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

ПРАКТИЧЕСКАЯ РАБОТА №50

«Анимация движения в Macromedia Flash»

Цель: знакомство с алгоритмом создания анимации в которой программа Flash MX сама рассчитывает все промежуточные фазы движения; создание экземпляров библиотеки; изучение возможности совместного использования пошаговой анимации и анимации движения.

Задание 1.Создайте анимированный ролик, реализующий движение шарика по кругу. Результат работы сохраните во внутреннем формате (sharic.fla)

Алгоритм работы:

Сопровождающие иллюстрации

Шаги

1. Создайте новый документ Macromedia Flash

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

3. Сгруппируйте рисунок

4. Выберите инструмент Free Transform и перенесите центр будущего вращения на некоторое расстояние

5. Преобразуйте 30 кадр в ключевой с помощью клавиши <F6>

6. Перейдите на первый кадр и откройте панель Properties

7. В списке Tween выберите Motion.

8. В списке Rotate обязательно выберите принудителььное вращение либо по часовой стрелке (CW) или против (CCW).

9. Запустите ролик на просмотр

Задание 2.Создайте анимацию движения букв текста. Результат работы сохраните во внутреннем формате (privet.fla)

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ *Macromedia* *Flash* 2. С помощью инструмента Text напишите фразу которая должна оживать на экране 3. Выделите набранное слово и примените команду *Modify* / *Break* *Apart*
	4. Командой меню Modify / Timeline / Distridute to Layers разведите буквы написанного слова по отдельным слоям. В результате проделанной работы каждая буква, оставаясь в первом кадре, оказалась в своем слое. Слои автоматически получили соответствующие имена
	5. Примените к каждой букве еще раз команду *Modify* / *Break* *Apart* 6. Раскрасьте каждую букву в разные цвета, и придайте ей самую необычную форму 7. Выполните группировку каждой буквы
	8. Все слои кроме слоя «П» сделайте невидимыми 9. Перейдите на 20 кадр слоя «П» и сделайте его ключевым 10. Вернитесь на первый кадр. Выделите изображение буквы и вынесите его за пределы рабочей области 11. Инструментом *Free* *Transform* измените ее пропорции и центр вращение перенесите в другое место 12. Оставаясь на первом кадре, выберите на панели *Properties* в списке *Tween* значение *Motion. В списке Rotate* закажите один оборот по часовой стрелке.
	13. Аналогично создайте анимацию движения для каждой буквы. Буквы могут двигаться по разным траекториям, кувыркаясь, изменяя свои размеры и пропорции. Время движения различных букв может быть разным 14. Сохраните роли и запустите его на просмотр

Задание 3.Создайте анимированный ролик, реализующий движение человека. Результат работы сохраните во внутреннем формате (Dvigenie.fla)

Алгоритм работы:

Сопровождающие иллюстрации

Шаги

1. Создайте новый документ Macromedia Flash

2. Не закрывая новый документ откройте файл Человечек.fla

3. Выделите последовательность из 8 кадров, содержащих фазы движения человека и выберите команду Edit / Copy Frames

4. Перейдите в новый документ. Создадим новый символ, используя клавиши <Ctrl> + <F8>

5. Задайте имя образца и укажите тип Movie clip

6. Выделите первый и единственный кадр и выберите команду Edit / Paste Frames

7. Выйдете из редактора образцов в основную сцену. Для этого нажмите кнопку с именем сцены на панели Timeline

8. Откройте окно библиотеки (<Ctrl> + <L>) и перетащите из библиотеки только что созданный экземпляр на первый кадр

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

Задание 4.Создайте flash-ролик “Хамелеон”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Откройте *Flash-документ 2. Выберите инструмент Rectangle* *Tool* и в настройках *Round* *Rectangle* *Radius* в поле *Corner* *Radius* введите значение “15”. В поле *Fill* *Color* выберите синий цвет и нарисуйте прямоугольник или квадрат с закругленными углами.
	3. Создайте движение в последовательности из 15 кадров 4. Выделите 15 кадр, на панели *Properties* из списка *Color* выберите эффект *Tint*; задайте цвет. Уровень яркости установите 100%. 5. Протестируйте мультик
	6. Для того чтобы одновременно использовать эффект прозрачности *Alpha* и изменения тона *Tint, есть специальный более сложный эффект Advanced. Выделите 31 кадр и сделайте его ключевым, затем выделите 16-й кадр и удалите его (ПК –* *Clear* *Frame) 7. Выделите 31 кадр и задайте эффект Advanced. Нажав на кнопку Settings* задайте параметры эффекта. 8. Сохраните мультик.

ПРАКТИЧЕСКАЯ РАБОТА №51

Анимация формы

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

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

Для создания анимации формы помещаем рисунок, состоящий из одного или нескольких графических фрагментов, в ключевой кадр. Содержание этого ключевого кадра становится начальной фазой будущего преобразования. На достаточном удалении по линейке кадров с помощью клавиши <F7> создаем новый пустой ключевой кадр. Помещаем в него другой рисунок, состоящий из нескольких графических фрагментов (можно из одного). Рисунок может быть как создан здесь «с нуля», так и скопирован из другого кадра или даже импортирован извне. В результате этих действий мы создали начальную и конечную фазу будущей анимации.

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

1) Открываем панель Properties

2) в списке Tween (тип анимации) выбираем Shape (форма). Этот выбор немедленно окрашивает в салатовый цвет «промежуточные кадры» временной шкалы, на которых прорисовывается стрелка, соединяющая начало и конец анимации.

3) При задании отрицательных значений в поле ввода параметра Ease (замедление) анимация будет идти ускоренно, а при вводе положительных значений этого параметра — замедленно.

4) список Blend (переход) предлагает настройки, которые адекватно работают только тогда, когда анимируемый графический фрагмент имеет прямые линии. При выборе Blend/Distributive все формы в промежуточных кадрах, будут по возможности сглаженными. При выборе Blend/Angular, наоборот, по возможности сохранятся изначальные углы.

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

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

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

Можно сделать так, чтобы определенная точка фрагмента при изменении его формы в процессе анимации переместилась в строго определенное место. Для этого и используют так называемые «метки формы». Эти метки можно ставить либо на краях заливок, либо на контурах. Метки, будучи поставлены на контурах (краях) рисунков начальной и конечной фазы анимации показывают, откуда и куда должна переместиться помеченная точка в результате процесса анимации. Меток формы может быть любое количество в пределах 26. Они обозначаются в порядке создания маленькими латинскими буквами от «а» до «z» включительно.

Перед тем как создавать метки формы, убедитесь, что пункт-выключатель меню View/Show Shape Hints (просмотр/показать метки формы) включен и, следовательно, метки формы будут видны на рабочем поле. Для включения и отключения просмотра созданных «меток формы» можно воспользоваться комбинацией клавиш <Ctrl> + <Alt> + <Н>.

Чтобы создать новую «метку формы», выделите первый (ключевой) кадр анимационной последовательности и выберите пункт меню Modify /Shape/Add Shape Hint (добавить метку формы) или воспользуйтесь клавишами <Ctrl> + <Shift> + <Н>. На рабочем поле появится маленький красный кружочек с латинской буквой. Это и есть «метка формы». Ее нужно перенести мышкой на ту точку контура графического фрагмента, судьбу которой мы хотим проконтролировать.

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

Временно скрыть метки формы можно, используя пункт-выключатель меню View/Show Shape Hints (просмотр/показать метки формы). Для того чтобы совсем удалить метку формы, можно воспользоваться контекстным меню, щелкнув правой кнопкой мышки по метке. Здесь есть команды Remove Hint (убрать метку), здесь же есть и команда Remove All Hints (убрать все метки).

Практическая работа
«Анимация формы в Macromedia Flash»

Цель: знакомство с алгоритмом создания анимации формы; изучение возможностей контроля анимационного процесса путем создания меток

Задание 1.Создайте flash-ролик “Превращение1”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый документ *Macromedia* *Flash* 2. На первом кадре нарисуйте яблока 3. Перейдите на 30 кадр и нажав клавишу <F7> вставьте пустой ключевой кадр
	4. На 30 ключевом кадре нарисуйте машинку 5. Откройте панель *Properties* и в списке *Tween* выбираем *Shape, а в список Blend* выбираем *Distributive* 6. Запустите файл на просмотр 7. Сохраните ролик
	8. Изменим ход анимации. Для этого выделите первый кадр и выберите пункт меню *Modify* /*Shape/Add* *Shape* *Hint* (<*Ctrl> + <Shift*> + <Н>) 9. Перенести мышкой метку на одну из точек контура яблока
	10. Перейдите на последний ключевой кадр и перенесите метку на этом кадре в предполагаемую точку перетекания метки из первого кадра 11. Запустите ролик 12. Создайте еще несколько меток и проследите как будет изменяться ход анимации. 13. Сохраните ролик в своей папке

Задание 2.Создайте flash-ролик “Превращение2”.

Алгоритм работы:

Сопровождающие иллюстрации

Шаги

1. Создайте новый документ Macromedia Flash

2. Импортируйте на первый кадр рабочего поля растровый рисунок

3. Перейдите на 20 кадр и преобразуйте его в пустой ключевой кадр

4. В 20 кадр импортируйте другое растровое изображение

5. Откройте панель Properties и в списке Tween выбираем Shape, а в список Blend выбираем Distributive

6. Запустите ролик

7. Откройте панель Properties и в списке Tween измените Shape на Angular

8. Запустите ролик, проследите за изменением хода анимации

9. Сохраните файл

Задание 3.Создайте flash-ролик “Капля”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	10. Запустив *Macromedia* *Flash, создаем новый flash* документ 11. Переименуйте первый слой в *Краски*. Нарисуйте (либо импортируйте из файла) и сгруппируйте на первом кадре этого слоя краски.
	12. Перейдите на 6 кадр этого слоя и сделайте его ключевым 13. Выбрав инструмент *Free* *Transform*, немного поверните рисунок 14. Вернитесь на первый кадр и установите анимацию движения 15. Выделите 7 кадр и сделайте его ключевым 16. Разгруппируйте изображение на 7 кадре 17. Перейдите на 37 кадр и нажмите на клавишу <F5>
	18. Создайте новый слой *Капля* и расположите его ниже слоя *Краски* 19. Слой *Краски* заблокируйте 20. На слое *Капля* перейдите на 6 кадр и сделайте его ключевым 21. На этом ключевом кадре нарисуйте каплю и сгруппируйте ее 22. Постройте анимацию движения с 6 по 29 кадры, в которой на 6 кадре капля будет возле кисти, а на 29 кадре – на полу под кистью 23. Преобразуйте 30 кадр в ключевой
	24. Разгруппируйте рисунок на 30 кадре 25. Перейдите на 37 кадр и нарисуйте там каплю в разбитом состоянии
	26. Вернитесь на 30 кадр и откройте панель *Properties* 27. В списке *Tween* выберите *Shape; окне Ease* установите -31; в списке *Blend* выберите *Distributive* 28. Запустите ролик 29. Сохраните ролик

Задание 4.Создайте flash-ролик “Спутник”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Запустив *Macromedia* *Flash, создаем новый flash* документ, которому даем название *Спутник* 1. Установим частоту кадров (*Frame* *Rate) 8fps 2. Создадим новый символ Insert / New Symbol,. Указываем Name(имя) Спутник, а Behavior(поведение) создаваемого символа оставим нетронутым. 3. Инструментом Oval* нарисуем круг 4. Выделим круг и в окне *Info* изменим размер на 30x30. 5. Совмещаем центр нарисованного круга с точкой привязки в центре сцены.
	6. Перейдите в режим сцены и измените масштаб так, чтобы рабочее поле полностью умещалось на экране. 7. Выберем инструмент *Oval* и установим радиальную заливку, изменим цвет чёрного маркера на сине-голубой и белого на светло-жёлтый (панель *Color* *Mixer); и бесцветный контур. 8. Нарисуем планету. и выполним ее группировку 9. Нарисуем орбиту,. выбрав инструмент Oval* и установив синий цвет контура и цвет заливки – бесцветный. 10. Выделив орбиту, выполним группировку. Выделив планету и орбиту опять выполним группировку.
	11. Выравним их по центру, открыв для этого окно выравнивания комбинацией клавиш *Ctrl+K* или выбрав пункт меню *Window-Design Panels-Align. В этом окне выберем выравнивания: Align Horizontal Center* и *Align Vertical Center* и закроем окно. 12. Выделим рисунок и разгруппируем *Modify-Ungroup. Снимем выделения, выберем орбиту и придадим ей более правдоподобный вид. Для этого выполним команды Modify->Transform->* *Scale* *and* *Rotate* и установим параметр Rotate – 150
	13. Изменим название слоя с *Layer1* на *Планету* и добавим еще два слоя, назвав их, *Орбита* и *Спутник. 14. На слое Планета* выделим орбиту и вырежем ее, нажав клавиши *Ctrl+X. Выберем слой Орбита* и вставим рисунок в тоже место *Edit ->Paste in Place. 15. Разгруппируем орбиту и удалим верхнюю её часть, которая находится в области планеты. 16. Сделаем невидимым сой Планета* и заблокируем слои *Орбита* и *Планета*
	17. На слой *Спутник* перетащим из библиотеке символ спутник так, чтобы его центр совпал с концом орбиты 18. Выделим слой *Спутник* и на панеле *Properties* выберем *Motion Tween, выставим галочки в полях масштабирования (Scale), движения по траектории (Orient* to *path), синхронизации(Sync) и привязки (Snap). Сохраняем изменения Ctrl+S* или *File ->Save*.
	19. На всех слоях выделим 66-й кадр и сделаем его ключевым, нажав F6 20. Выделим слой *Спутник* и добавим над ним с помощью кнопки на временной шкале направляющий слой. На этот слой скопируем орбиту. 21. Выделим 66 кадр слоя спутник и мышкой перетащим спутник, соединив его центр с другим концом орбиты. Запустим ролик *Ctrl+Enter*.
	22. Выделим первый кадр каждого слои и добавим ещё по 4 кадра с помощью клавиши F5. 23. Выделим 5-й кадр на слое *Спутник* и нажмем клавишу F6 Тоже самое проделаем с 65 кадром. 24. Возвращаемся к первому кадру и в окне *Info* выставляем размер спутника 1x1, тоже проделываем с последним кадром. 25. Сделайте 35 кадр ключевым и измените размеры спутника на 60x60. Потом через 4 кадра вставляли ключевые кадры, сначала справа, уменьшая размер спутника с 60 до 55, потом 55 до 50 и т.д. до тех пор, пока не дошли до 34, а потом так же в обратную сторону.
	26. Заблокируйте все слои, кроме слоя *Планета. 27. Выделите слой Планета* и выполните команды *Modify-Ungroup. 28. На панели Properties* устанавливаем вид анимации *Shape. 29. Выделяем первый кадр слоя Планета и выбираем инструмент Fill* *Transform* *Toll* С помощью центрального маркера выносим градиент за пределы планеты и переносим его влево, так чтобы центр градиента и центр планеты находились на одной прямой. Тоже самое проделаем с последним кадром перенеся градиент вправо.
	30. Создадим новый слой «Звук», расположив его поверх остальных слоев. Импортируем музыкальный файл *File* – *Import* – *Import* to *Library* Выделим слой Звук и на панели *Properties* и из списка *Sound* выбираем вставленный файл 31. Ролик готов. Сохраните файл

ПРАКТИЧЕСКАЯ РАБОТА №52

Анимация движения по заданной траектории

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

Слой траекторий создается нажатием второй слева кнопки под изображением слоев на панели Timeline. При этом слой с анимацией, для которой нужна траектория, должен быть выделен. Можно поступить по-другому и создать слой траекторий, выбрав пункт Add Motion Guide (добавить направление движения) в контекстном меню выделенного слоя (слоя с анимацией). Созданный слой траекторий располагается над слоем с анимацией. Он автоматически получает такое же имя, как и слой анимации, но с приставкой Guide (направляющий). Слева от его имени помещается эмблема, не такая, как у известных нам слоев, а такая, как на кнопке, с помощью которой этот слой был создан.

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

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

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

При запуске файла траектории, по которой перемещается объект не видно.

Практическая работа
«Анимация по заданной траектории в Macromedia Flash»

Цель: знакомство с алгоритмом создания анимации, в которой объект будет двигаться не по прямой или окружности, а по произвольной кривой

Задание 1.Создайте flash-ролик “ Движение по криволинейной траектории ”.

Алгоритм работы:

Сопровождающие иллюстрации

Шаги

1. Откройте Flash-документ

2. Нарисуйте круг синего цвета

3. Выполните группировку

4. Создайте движение в последовательности из 15 кадров

5. Выберите в меню Insert – Timeline-Motion Guide. Активируйте новый получившийся слой

6. Выберите инструмент Pencil Tool и установив нужную вам настройку, нарисуйте предполагаемую траекторию движения

7. Выделите начальный кадр и сопоставьте центр круга и один из концов кривой

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

9. Просмотрите полученный результат и сохраните мультик

Задание 1.Создайте flash-ролик “Полет бабочки над цветком по заданной траектории”. Результат работы сохраните во внутреннем формате (Butterfly.fla)

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Запустив *Macromedia* *Flash, создаем новый flash* документ 2. Первый слой назовите Flower 3. На первый кадр слоя Flower вставьте рисунок цветка (File / Import) 4. Заблокируйте слой Flower 5. Создайте второй слой и назовите его Butterfly
	6. Создадим новый символ *Insert / New Symbol,. Имя символа – бабочка, тип - Movie* *clip* 7. На первом кадре нарисуйте баббочку 8. Совместите точку привязки символа с бабочкой 9. Вернитесь на сцену и перетащите из библиотеки образец бабочка на первый кадр слоя Butterfly
	10. Преобразуйте 48 кадр слоя Butterfly в ключевой кадр 11. Выделите 60 кадр этого слоя и преобразуйте его в дублирующий кадр (<F5>) 12. Вернитесь на первый кадр и создайте анимацию движения 13. Выделите слой Butterfly и из контекстного меню выберите Add Motion Guide 14. На появившемся новом слое нарисуйте траекторию движения бабочки
	15. Перейдите на первый кадр слоя Butterfly и совместите точку привязки бабочки с началом движения 16. Перейдите на 48 кадр и совместите точку привязки бабочки с другим концом нарисованной траектории 17. Откройте панель Properties и включите флажки Orient to Path и Snap 18. Загрузите ролик 19. Сохраните файл и опубликуйте его в форматах *gif* и *html*

практическая работа №53

Использование языка программирования ActionScript при создании анимационных фильмов

В настоящее время среди языков программирования высокого уровня выделился класс объектно-ориентированных языков программирования (Visual Basic, AcionScript и др.)- Здесь существенно расширяется понятие данные. Теперь ими могут быть не только числа или строки, но и объекты.

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

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

Свойство объекта — сгруппированная по какому-либо принципу часть структуры данных этого объекта. Это могут быть данные разного типа.

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

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

Действие — встроенная функция языка программирования ActionScript. Манипулирует объектами, также как метод манипулирует свойствами объектов, или оператор манипулирует данными.

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

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

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

Таким образом, следующие две строчки

record.colorbag = "black";

col = record.colorbag;

можно понимать так. В первой строчке свойству colorbag экземпляра по имени record присвоено строковое значение "black", а во второй строчке это значение помещено в переменную col.

В ActionScript существует три способа создания объектов:

1. Некоторые из объектов образуются автоматически на начальном этапе создания фильма. Примерами таких объектов могут служить объекты Mouse (обеспечивает доступ к свойствам мыши), Key (служит для взаимодействия с клавишами клавиатуры). Эти объекты создаются в единственном экземпляре и поэтому перед ними не стоит проблема выбора уникального имени.

2. Другие объекты, такие как MovieClip (является инструментом управления клипами), Button (отвечает за доступ к кнопкам), создаются также автоматически при создании экземпляра библиотечного образца клипа или кнопки (точнее при получении таким экземпляром имени). В результате каждому экземпляру такого библиотечного образца соответствует экземпляр объекта ActionScript.

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

Также автоматически при создании текстового блока и присвоении ему имени создается объект TextField (управляет полем ввода и динамическим текстовым блоком).

Создание библиотечного образца типа Graphic или его экземпляра не приводит к автоматическому появлению какого-либо объекта ActionScript. Поэтому экземпляры библиотечной графики не нуждаются в имени.

3. Для управления цветом и звуком экземпляров клипов программист сам создает экземпляры объектов Color (цвет) и Sound (звук) и дает им имена. Кроме того, программист может создавать «пользовательские объекты», определять их методы и свойства, создавать экземпляры этих объектов, давать им имена и присваивать свойствам этих экземпляров конкретные значения.

Использование панели Actions

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

Чтобы вывести на экран и открыть панель, можно воспользоваться или клавишей <F9>, или кнопкой с изображением стрелки в правой части панели Property. Можно использовать для этого команду меню Window/Actions или контекстные меню кадра, кнопки, клипа.

Если выделим на рабочем поле кнопку, то заголовок панели изменился на Actions — Button. Это означает, что панель готова для редактирования сценариев, привязанных к этой кнопке

Панель Actions может быть открыта в двух режимах: Expert Mode (профессиональный режим) и Normal Mode (обычный режим). Переключение вариантов осуществляется в контекстном меню панели или комбинацией клавиш <Ctrl>+<Shift>+<E> (для перехода в Expert Mode), <Ctrl>+<Shift>+<N> (для перехода в Normal Mode).

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

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

В левой части панели Actions находится иерархический список доступных для использования операторов Action Script. Операторы сгруппированы по различным темам и признакам. Это упрощает их поиск. Если оператор не может быть использован в редактируемом в данный момент сценарии, он обозначен серым цветом.

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

Над текстовым полем для введения сценария вы имеется набор кнопок:

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

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

- кнопка Insert a Target Path. При нажатии этой кнопки открывается диалоговое окно. Окно может быть использовано для написания путей доступа (адресной цепочки) вручную. Здесь же в окне имеется поле автоматического ввода путей доступа. Чтобы воспользоваться такой возможностью нужно найти в иерархическом списке клипов целевой экземпляр. Затем с помощью выбора переключателей Relative (относительная) или Absolute (абсолютная) задать систему адресации и, нажав кнопку ОК, вернуться в панель Actions. Вся адресная цепочка окажется аккуратно вписана в текст вашего сценария.

- кнопка, запускающая проверку синтаксиса.

- кнопка автоформата.

- кнопка, выводящая всплывающую подсказку по коду.

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

Практическая работа
«использование языка программирование actionsScript при создании анимации»

Цель: знакомство с панелью Actions; с режимами записи сценариев, предлагаемых программой Flash MX; создание своих первых интерактивных фильмов; использование «события кнопки» для написания сценариев; создание анимации средствами программирования

Задание 1.Создайте flash-ролик “Кнопка”.

Алгоритм работы:

Сопровождающие иллюстрации

Шаги

1. Запустив Macromedia Flash, создаем новый flash документ

2. Откройте панель библиотеки кнопок: Window / Common Libraries / Buttions

3. Выберите кнопку и перетащите ее на сцену

4. Откройте окно Window – Design Panels – Info и установите нужные вам размеры кнопки

5. Выделите кнопку и откройте панель Actions-Button

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

7. Сохраните файл с расширение fla

8. При сохранении файла с расширением html(file – Publish Settings), чтобы фон кнопки был прозрачным необходимо выбрать вкладку HTML и в выпадающем меню Window mode выбрать Transparent Windowless.

Задание 2.Создайте flash-ролик “Переключатель”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Запустив *Macromedia* *Flash, создаем новый flash* документ 2. Нарисуйте небольшой круг красного цвета, внутри которого расположим текст “OFF” 3. Выделите круг и измените тип и толщину контура, выбрав пункти толщиной 3 на панели свойств
	4. Преобразуйте текст и круг в символ *Movie* *Clip* 5. Внутри символа создайте второй ключевой кадр в котором измените цвет круга на зеленый, тип контура на сплошной , а текст на “ON”
	6. Поставьте на оба кадра скрипты остановки
	7. Вернитесь на главную сцену и выберите символ. В окне свойств задайте имя символа *indicator* в окне *Instance* *Name. Под этим именем символ будет виден в скриптах 8. Откройте библиотеку кнопок Window* / *Common* *Libraries* / *Buttons* и скопируйте оттуда любую понравившуюся вам кнопку
9. На кнопку, взятую из библиотеки, «навесим» следующий скрипт: 10. Запустите ролик на просмотр и сохраните его

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

press – нажатие кнопки мыши над символом;

release – отпускание кнопки мыши над символом;

releaseOutside – отпускание кнопки мыши вне символа;

keyPress – нажатие определенной кнопки (кнопок);

rollOver – наведение на символ;

rollOut – убирание символа;

dragOver – перетаскивание над символом;

dragOut – перетаскивание вне символа.

В этом скрипте переменная a используется как флажок, который меняет значение при каждом нажатии на кнопку.

Оператор tellTarget адресует предписание объекту, который является его параметром. В первом случае (ветка if (a) ) мы предписывает объекту indicator перейти к первому кадру и начать выполнение. Во втором случае осуществляется переход ко второму кадру.

Ссылка на indicator записывается как _root.indicator поскольку объект находится в основной (корневой “root” сцене).

Задание 3.Создайте flash-ролик “Спортсмен”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый *Flash* документ 2. Поменяйте цвет рабочего поля 3. Создадим новый символ (*Insert* / *New* *Symbol) типа Movie* *Clip* и назовем его Спортсмен. 4. На панели *Color* *Mixer* выберите тип заливки *Bitmap* и откройте файл beg.jpg (Это изображение тут же появится в селекторе цвета заливки, а рисунок в окне библиотеки) 5. Выберите инструмент *Rectangle* и нарисуйте прямоугольник размером примерно с рабочее поле
	6. Измените масштаб рабочего поля на 25% 7. Выберите инструмент *Fill* *Transform* и щелкните по нарисованному прямоугольнику. 8. Перетащите левый нижний маркер к центру так, чтобы весь рисунок уместился в прямоугольник.
	9. Выберите инструмент *Lasso* в опциях которого, выберите *Magic* *Wand* 10. Изменим настройки: выберем *Magic* *Wand* *Settings* и в поле *Threshold* установите чувствительность равную 33.
	11. Нажмете клавишу *Esc, чтобы снять выделение рисунка 12. Щелкните курсором по белому фону между изображениями фаз бега и нажмите клавишу Delete. 13. Инструментом Selection* выделите изображение первой фазы движения, и сгруппируем его (*Modify* / *Group*). Так же поступите и с остальными изображениями фаз движения.
	14. Нажимая клавишу F6, добавьте еще 9 ключевых кадров. 15. Выделите первый кадр 16. Удерживая клавишу *Shift, инструментом Selection* щелкните по первой фазе движения 17. Нажмете клавишу *Delete*
	18. Аналогично поступите с остальными кадрами, оставив на каждом соответствующую фазу движения 19. Измените вид рабочего поля, добавив сетку (*Ctrl+э). 20. Включите эффект Onion* *Skin* и совместите изображения всех кадров в одной точке
	21. Вернитесь на сцену 22. Из окна библиотеки перетащите созданный символ на рабочее поле сцены 23. Инструментом *Selection* выделите символ и откройте панель *Actions* 24. Введите сценарий 25. Запустите файл

В этом сценарии при запуске файла (onClipEvent) увеличивается значение координаты x точки привязки символа на 10 (this._x += 10) в каждом прокручиваемом кадре(enterFrame), т.е. 12 раз в секунду. Т.к. по умолчанию в настройках фильма скорость равна 12 кадрам в секунду.

Так как размер рабочего поля 550*400, то при достижении x отметки 550 пиксель (if (this._x >= 550)) значение x устанавливается равным -100 ({this._x = -100}).

ПРАКТИЧЕСКАЯ РАБОТА №54

Задание 1.Создайте flash-ролик “Кошка”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый *Flash* документ 2. Поменяйте цвет рабочего поля 3. Создадим новый символ (*Insert* / *New* *Symbol) типа Movie* *Clip* и назовем его Кошка 4. . На панели *Color* *Mixer* выберите тип заливки *Bitmap* и откройте файл кошки.jpg (Это изображение тут же появится в селекторе цвета заливки, а рисунок в окне библиотеки) 5. Выберите инструмент *Rectangle* и нарисуйте прямоугольник размером примерно с рабочее поле
	6. Измените масштаб рабочего поля на 25% 7. Выберите инструмент *Fill* *Transform* и щелкните по нарисованному прямоугольнику. 8. Перетащите левый нижний маркер к центру так, чтобы весь рисунок уместился в прямоугольник.
	9. Выберите инструмент *Lasso* в опциях которого, выберите *Magic* *Wand* 10. Изменим настройки: выберем *Magic* *Wand* *Settings* и в поле *Threshold* установите чувствительность равную 33.
	11. Нажмете клавишу *Esc, чтобы снять выделение рисунка 12. Щелкните курсором по фону между изображениями фаз движения кошки и нажмите клавишу Delete. 13. Инструментом Selection* выделите изображение первой фазы движения, и сгруппируем его (*Modify* / *Group*). Так же поступите и с остальными изображениями фаз движения.
	14. Нажимая клавишу F6, добавьте еще 11 ключевых кадров. 15. Выделите первый кадр 16. Удерживая клавишу *Shift, инструментом Selection* щелкните по первой фазе движения 17. Нажмете клавишу *Delete*
	18. Аналогично поступите с остальными кадрами, оставив на каждом соответствующую фазу движения 19. Измените вид рабочего поля, добавив сетку (*Ctrl+э). 20. Включите эффект Onion* *Skin* и совместите изображения всех кадров в одной точке
	21. Вернитесь на сцену 22. Из окна библиотеки перетащите созданный символ на рабочее поле сцены 23. Выделите символ на рабочем поле и откройте панель *Properties* 24. В окно *Instance* name введите имя *kat* 25. Создайте анимацию движения до 40 кадра
	26. Добавьте еще два слоя: «*Старт» и «Стоп» 27. Откройте библиотеку кнопок Window* / *Common* *Libraries* / *Buttons* 28. Выберите понравившиеся кнопки и перенесите их на первые ключевые кадры слоев «*Стоп» и «Старт» 29. Выделите кнопку на слое «Старт» и в окне Actions* добавьте скрипт
	30. Выделите кнопку на слое «*Стоп» и в окне Actions* добавьте скрипт 31. Выделите 40 кадр на слоях «*Стоп» и «Старт*» и нажмите клавишу F5 32. Запустите ролик 33. Сохраните файл

Задание 2.Создайте flash-ролик “Слайд-шоу”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый *Flash* документ и импортируйте изображения с папки *слайд_шоу* на рабочее поле (*File* – *Import* – *Import* to *Stage). 2. Каждое вставленное изображение, прежде чем его удалить, преобразуйте в символ (F8), задав тип Button. 3. С помощью вспомогательных направляющих (View* – *Guides* – *Lock* *Guides*) разбейте лист на части для последующей вставки наших изображений.
	4. Переименуйте наш слой «*Кнопки*» 5. На рабочее поле первого кадра вынесите из библиотеки только что созданные кнопки, так чтобы они не мешали просмотру слайдов.
	6. Создайте новый слой «*Слайды» 7. Расположите слой «Слайды» под слоем «Кнопки*» 8. Клавишей F7 вставьте 8 пустых ключевых кадров 9. Выделим второй ключевой кадр и поместим в него изображение из библиотеки.
	10. Привяжем к этому кадру сценарий, который бы останавливал прокрутку кадров при просмотре в ожидании команды пользователя. 11. Так же проступим и с остальными кадрами.
	12. Выделим первый кадр и на него наложим тот же сценарий *Stop();* 13. В окне Properties первому кадру дадим имя begin, а последнему end**. 14. Вернемся на слой Кнопки и на каждую кнопку наложим сценарий, который будет запускать тот кадр, на котором находится соответствующий кнопке слайд:
	15. Из библиотеки кнопок *Window* / *Common* *Libraries* / *Buttons* перетащите на этот же кадр еще четыре кнопки, с помощью которых также можно будет управлять показом слайдов: 16. Двойным щелчком по первой кнопке откройте окно редактирования кнопки 17. Добавьте еще один слой и расположите его поверх остальных 18. Введите текст *Begin* 19. Вернитесь на рабочее поле основной сцены 20. Также поступите и с кнопкой *End*
	21. Кнопка “*Begin*” задает переход к началу просмотра. К этой кнопке привяжем сценарий
	22. Кнопка “*End*” задает переход к последнему кадру. К этой кнопке привяжем сценарий
	23. Кнопка задает переход к следующему кадру. К этой кнопке привяжем сценарий
	24. Кнопка задает переход к предыдущему кадру. К этой кнопке привяжем сценарий
	25. Запустим наш фильм для просмотра

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

Команда _root.nextFrame(); запускает следующий кадр при щелчке мыши on (press)

Команда _root.predFrame(); запускает предыдущий кадр

Задание 3.Создайте flash-ролик “Автомобиль”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый *Flash* документ и назовите единственный слой «*Фон» 2. На первый кадр слоя «Фон» импортируйте картинку с изображением пейзажа *File / Import / Import to Stageи Используйте для этого подходящее изображение в формате bmp, jpeg, gif или png**. 3. Заблокируйте слой, нажав кнопку под изображением замка.
	4. Добавим новый слой, щелкнув по кнопке и назовем его «*Авто» 5. Нарисуем на слое «Авто*» машинку без колес. Не рисуем колеса потому, что автомобиль будет совершать плавное поступательное движение по экрану, а колеса должны вращаться. Поэтому их мы будем рисовать отдельно
	6. Щелкнем по слою «*Авто» на Монтажном столе чтобы выделить всю машинку или выделим ее использую инструмент выделения Selection* 7. Преобразуем машинку в символ, для этого выполним команду меню *Modify/Convert* to Symbol или нажмем клавишу F8. В окне *Convert* to *Symbol* введем имя *Авто* и выберем *Movie* *clip*.
	8. Зададим движение нашего авто. Для этого выделим символ *Авто* и убедившись, что находимся на сцене откроем окно *Actions*. Введем скрипт
	9. Запустим ролик *Ctrl* + Enter 10. Двойным щелчком щелкнем по символу *Авто. Мы оказались внутри символа. 11. Инструментом овал нарисуем колесо и диски, чтобы было видно вращение колеса. 12. Выделим наше колесо и преобразуем в символ Movie* *clip*
	13. Наложим скрипт на колесо 14. Используя клавишу *Ctrl* создадим копию колеса и перенесем ее в то место, где оно должно быть 15. Вернемся на сцену и запустим ролик. 16. Сохраните файл

В приведенном сценарии оператор rotation при каждом запуске кадра onClipEvent (enterFrame) (12 раз в секунду) поворачивает колесо на 15 градусов по часовой стрелке.

ПРАКТИЧЕСКАЯ РАБОТА №55

Задание 1.Создайте flash-ролик “Часы с кукушкой”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый *Flash* документ 2. Переименуйте слой в «*Часы*» 3. Нарисуйте или импортируйте на рабочее поле рисунок с часами 4. Увеличьте рисунок при необходимости
	5. Вставьте новый слой и назовите его «*Маятник» 6. Нарисуйте маятник и преобразуйте его в символ типа Movie* *clip* 7. Двойным щелчком по символу войдите в режим редактирования маятника 8. Установите маятник в начальное положение
	9. Сделайте 20 кадр ключевым и установите конечное положение маятника 10. Сделайте 40 кадр ключевым и установите маятник в то же положение как и первом кадре 11. Из контекстного меню на 10 кадре выберите *Greate* *Motion* *Tween*. 12. То же самое сделайте для 30 фрейма 13. При необходимости поправки движения маятника создайте промежуточные ключевые кадры
	14. Создайте новый слой и переименуйте его в «*Тиканье* *часов» 15. Импортируйте в библиотеку звуковые файлы, напоминающие тиканье часов бой часов с кукушкой 16. Выделите первый кадр нового слоя. На панели Properties* нажмите кнопку *Sound. В открывшемся списке выберите звук тиканья часов 17. В окне Sync* выберите *Stream* 18. Если нужно отредактировать звук, откройте окно редактирования звука: кнопка *Edit* 19. . Вернитесь на основную сцену
	20. Создайте новый слой и назовите его «*Кнопка» 21. Создайте кнопку: Insert* / *New* *Symbol, выберите тип Button* 22. Нарисуйте изображение кнопки для каждого состояния Up, *Over, Down* и *Hit* 23. Вернитесь на основную сцену
	24. Выделите кнопку и откройте панель *Actions* 25. В окно ввода введите сценарий
	26. Выделите первый кадр слоя «*Кнопка*» и введите скрипт
	27. Добавьте по 12 дублирующих кадров (клавиша F5) на слои *Маятник* и *Часы* 28. Нажмите правой кнопкой мыши по второму фрейму слоя с кнопкой и вставьте пустой ключевой фрейм *Insert* *Blank* *Keyframe* 29. На панели *Properties* нажмите на кнопку *Sound* и выберите звук боя часов с кукушкой, продолжите слой до уровня остальных 30. Продолжите слой до уровня остальных.

Задание 2.Создайте flash-ролик “Стрелочные часики”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый *Flash* документ 2. Нарисуйте круг 3. откройте окно *Window* / *Info* в котором задайте его размеры (W: 100; H: 100) и координаты (X: 100; Y: 100) относительно левого верхнего края. 4. Инструментом *Text* сделайте надписи “12”, “3”, “6”, “9” и расставьте их.
	5. Нарисуйте прямую, параллельную оси OY, и преобразуйте ее в символ *Movie* *Clip* с именем “*Strelka* *Seconds” 6. Двойным щелчком по символу войдите в режим редактирования 7. На панели Properties* задайте размеры прямой (*0; 50) и координаты (0; -50). 8. Выберите тип прямой Hairline* и цвет прямой.
	9. Вернитесь на главную сцену 10. Выберите символ “*Strelka* *Seconds” и задайте ему координаты (150; 100). 11. Определите также его скриптовое имя ssec* (в поле *Instance* *Name*
	12. Откройте окно библиотеки *Library* и сделайте дубликат символа “*Strelka* *Seconds” с именем “Strelka* *Minutes” (правой кнопкой мыши на символ “Strelka* *Seconds” / Duplicate). 13. Внутри символа “Strelka* *Minutes” (ПК /* *Edit*) изменим стиль линии на точечный и укажем размер “2”
	14. Вернитесь на главную сцену 15. Перенесите из библиотеки символ “*Strelka* *Minutes” 16. На панели Properties* задайте ему скриптовое имя *smin* и координаты (*150; 100*)
	17. Нарисуйте черный квадрат со стилем линии контура *Hairline* 18. Поверните его на 45 градусов.
	19. Инструментом *Subselection* щелкните по конутру “квадрата”, в вершинах появятся якорные точки 20. Выберите мышкой нижнюю точку и удалим ее, нажав кнопку *Del*
	21. Инструментом *Selection* выделите треугольник и задайте размеры (*5; 50) 22. Преобразуем треугольник в символ Movie* *Clip* с именем “*Strelka* *Hours” и зададим ему скриптовое имя shour. 23. Внутри символа зададим координаты для треугольника (-2,5; -50). 24. Вернемся в главную сцену и зададим координаты символа “Strelka* *Hours” (145,5; 100)*
	25. Создайте новый слой и разместите его выше первого 26. Второй кадр преобразуйте в ключевой
27. Выберите первый кадр и откройте окно *Actions*. Поместите в него следующий скрипт
	28. Выберите второй кадр и откройте окно *Actions*. Наберите короткий скрипт 29. Запустите и сохраните ролик

Во многих случаях при создании анимации необходимо учитывать текущее время. Для этого существует объект Date, который представляет собой хранилище (и одновременно) инструмент для обработки информации о дате и времени. Он позволяет манипулировать этой информацией как свойствами объекта. Значения его свойств постоянно и автоматически обновляются через связь с внутренними часами компьютера. Дата и время хранятся как обычные числа, но обрабатываются программой Flash MX они особенным образом. Для создания экземпляра объекта Date применяется « конструктор »:

<переменная> = new Date (год, месяц, число, часы, минуты, секунды, миллисекунды);

Параметрами являются свойства объекта Date. Можно или совсем не задавать этих параметров, или задать любое их количество. Если параметров нет, то соответствующим свойствам объекта присваиваются текущие значения.

При задании параметров для введения года нужно или два, или четыре числа. (Если введено два числа, то программа поймет вводимый год, как принадлежащий 20 веку.) Месяц вводится числом от 0 (январь) до 11 (декабрь). Число месяца задается значением от 1 до 31. Часы задаются числом от 0 до 23. Минуты и секунды вводятся числами от 0 до 59. Миллисекунды задаются числом от 0 до 999.

Объект Date имеет множество однотипных методов типа getHours, setHours, getMonth, setMonth, getSeconds, setSeconds и так далее. Метод getTime () , который возвращает текущее время как количество миллисекунд, прошедшее с начала 1970 года по универсальному времени. Этот метод можно использовать как таймер и применять в условных операторах. Например, так:

myDate = new Date ();

a = myDate.getTyme ();

if (a – myDate.getTime () ) > 200)

{ блок исполняемы операторов}

Этот сценарий организует 200 миллисекундную задержку

Задание 3.Создайте flash-ролик “Цифровые часики”.

Алгоритм работы:

Сопровождающие иллюстрации	Шаги
	1. Создайте новый *Flash* документ 2. Инструментом *Text* нарисуйте поле, достаточно длинное для записи значения времени 3. На панели *Properties* в поле *Text* *type* выберите тип *Dynamic* *Text* 4. Задайте координаты поля относительно верхнего левого края (X: 0; Y: 0)
	5. Сделайте три копии поля и расположите их одно под другим 6. В поле *Variable* панели *Properties* задайте имена переменных, соответствующих динамическим полям (сверху вниз): *Ttime, Tmonth, Tdae* и *Tyear* 7. Создайте папку *Часы* и сохраните в нее ролик
8. В папке *Часы* создайте файл *TimeScript*.txt. В файле должен быть следующий текст (скрипт): mydate = new Date (); sec = mydate.getSeconds(); min = mydate.getMinutes(); hour = mydate.getHours(); NameMonths = new Array ("ЯНВАРЯ", "ФЕВРАЛЯ", "МАРТА", "АПРЕЛЯ", "МАЯ", "ИЮНЯ", "ИЮЛЯ", "АВГУСТА", "СЕНТЯБРЯ", "ОКТЯБРЯ", "НОЯБРЯ", "ДЕКАБРЯ"); NameDays = new Array ("ВОСКРЕСЕНЬЕ", "ПОНЕДЕЛЬНИК", "ВТОРНИК", "СРЕДА", "ЧЕТВЕРГ", "ПЯТНИЦА", "СУББОТА"); if (hour<10) { hour = "0"+hour; } if (min<10) { min = "0"+min; } if (sec<10) { sec = "0"+sec; } Ttime = hour+":"+min+":"+sec; Tmonth = mydate.getDate ()+" "+NameMonths [mydate.getMonth ()]; Tday = NameDays [mydate.getDay ()]; Tyear = mydate.getFullYear ()+" ГОД";
	9. Вернитесь в *Macromedia* *flash* и создайте новый слой. На первый кадр этого слоя наложите скрипт:
	10. Преобразуйте второй кадр в ключевой 11. Наложите следующий сценарий 12. Запустите и сохраните ролик

ПРАКТИЧЕСКАЯ РАБОТА №56

Создание пазлов с помощью Flash

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

1. Откройте программу Flаsh 8. Выберите Документ Flаsh. При публикации отображается часть кадра, находящаяся в белом прямоугольнике.

2. Загрузите картинку: Файл>Открыть>Выбрать тип файлов All Files (все файлы) > Выбрать файл (картинку)

(Чтобы увидеть картинку установите параметр «эскизы»). Размер фотографии – 800х600 пикселей.

2. С помощью инструмента свободной трансформации можете установить свои размеры фотографии.

3. Уменьшите масштаб до 50%

4. Установите размер кадра: Свойства документа >Размеры> Ширина 600> Высота 450

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

5. Сразу можно задать цвет фона Background Color (Цвет фона).

6. Расположите картинку в то место, где она будет собираться.

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

7. На панели Tools (Инструменты) выберем Colors (Цвета) зададим цвет штриха и заливки прямоугольника.

8. Переместите картинку на поля

9. Выделим картинку и сделаем дубликат Edit>Duplicate (Ctrl+D).

10. Уменьшенный дубликат будет образцом на рабочем поле

11. Оригинал, оставшийся на полях, разделим на необходимое кол-во частей (min=4): Выделить картинку (Ctrl+B) > инструментом «Кисть» (В) разделите картинку, выбрав размеры кисти и выделяя отдельные ее части. Размеры частей и их форма могут быть различными.

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

a. Щелчком левой кнопкой мыши выберите и выделите фрагмент картинки.

b. Создайте новый видеоклип и присвойте ему имя k1: Вставить>Новый символ (F8) > Клип в поле Name (Имя) введите k1 > ОК. Внизу в поле «Инстанции» также вводим имя k1 и нажмите <Tab>.

Двойной щелчок по k1 на правой панели

d. В первом кадре первого слоя видеоклипа создайте простую кнопку: Вставить>Новый символ (F8) > Кнопка в поле Name (Имя) введите kn1 > ОК. Внизу в поле «Инстанции» также вводим имя kn1 и нажмите <Tab>.

e. Вернитесь на рабочее поле основной временной шкалы: Ре-дактировать> Править документ (Ctrl+E).

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

on (press) {

startDrag (_root.k1);

}

on (release) {

stopDrag();

}

g. Протестируйте результат: Управление > Проверить ролик (Ctrl+Enter). Если щелкнуть левой клавишей мышки по фраг-менту k1, то он начнет перемещаться вслед за курсором. При отпускании клавиши фрагмент останется там, куда вы его пере-местили.

13. Повторите пункт 12 для всех оставшихся фрагментов, меняя в коде номер кадра.

14. Посмотрите результат: Файл > Предварительный просмотр > HTML или Flash.

ПРАКТИЧЕСКАЯ РАБОТА №57

Конструирование игры «Puzzle»

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

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

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

Задание

1. Создайте Flash-документ.

2. Импортируйте нужное изображение в библиотеку и установите его на рабочем поле по центру. Назовите слой «изображение»

3. На отдельном слое нарисуйте собственную или установите готовую сетку. Назовите слой «сетка».

4. Выроните сетку и изображение до необходимых размеров.

5. Создадим один из 24 элементов для пазла:

a. создайте копии сетки и изображения на отдельных слоях. Назовите их сетка_1 и изображение_1 соответственно. Используйте команды копировать и вставить по месту; используйте скрытие и блокирование слоев для удобства;

b. перейдите на слой изображение_1, выделите его и выполните команду Modify – Break Apart дважды (разбить по частям);

c. перейдите на слой сетка_1 и залейте каждую область сетки красным цветом;

d. выделите все залитые области, кроме той, которая предназначена для создаваемого элемента (например, верхний левый угол);

e. скопируйте выделение

f. перейдите на слой изображение_1 и вставьте по месту Paste in place скопированное выделение на изображение;

g. снимите выделение и снова щелкните по красной области; удалите красную область, чтобы на рабочем поле остался лишь один элемент;

h. выделите оставшийся элемент и сгруппируйте его Modify – Group;

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

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

7. Поэтому преобразовывать элемент в клип необходимо следующим образом:

a. Создать новый символ клип Insert – New Symbol (зададим названия клипам от 0-0 до 5-3 в зависимости от горизонтального и вертикального положения элемента);

b. Вставьте вырезанный сгруппированный элемент по центру Edit –Paste in center и вставьте сетку по центру для выравнивания элемента по ней и относительно центра (на разные слои);

c. После выравнивания сетку удалить;

8. Следуя пунктам 5-7 создать все элементы мозаики;

9. После того как все 24 клипа созданы, переместите экземпляр каждого клипа на рабочую область и присвойте им соответствующие имена от 0-0 до 5-3 и каждому клипу присвойте значение alpha=75.

10. Контур картинки поместите в центре рабочей области, преобразуйте в клип и присвойте имя outline. Слой «изображение» удалите.

11. Весь сценарий прикреплен к клипу «actions», расположенному за пределами рабочего поля. Он начинается с обработчика событий onClipEvent (MouseDown), который реагирует на щелчок мыши по рабочему полю.

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

onClipEvent(mouseDown) {

// опеределяем положение курсора

mx = _root._xmouse;

my = _root._ymouse;

// просматриваем все элементы картинки

for(x=0;x<6;x++) {

for(y=0;y<4;y++) {

piece = _root[x+"-"+y];

//выясняем, находится ли элемент под курсором

// и не находится ли он уже на своем месте

if (piece.hitTest(mx,my) and (piece._alpha < 100)) {

// пользователь щелкнул по элементу

piece.startDrag();

//выходим из циклов

x = 6;

y = 4;

break;

}

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

onClipEvent(mouseUp) {

// прекращаем перемещение элемента

stopDrag();

измеряем расстояние от центра элемента до центра контура кар-тинки

dx = _root.outline._x - piece._x;

dy = _root.outline._y - piece._y;

dist = Math.sqrt(dx*dx+dy*dy);

если расстояние меньше 10 пикселей, то элемент перемещается на свое место

if (dist < 10 ) {

piece._x = _root.outline._x;

piece._y = _root.outline._y;

делаем элемент полностью непрозрачным

piece._alpha = 100;

}}

ПРАКТИЧЕСКАЯ РАБОТА №58

Технология создания кроссворда

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

Примечание: типы текстовых полей во Flash: 1) static text (изображение подписей); 2) input text (ввод данных); 3) dynamic text (сообщения программы).

2. Выполните построение ячеек кроссворда, имеющий заданный размер (использованием операций копирования);

3. Для проверки правильности ответов при заполнении кроссворда создайте два динамичных поля – Ошибки и Зачѐт.

4. Создайте кнопки для проверки принятого решения

5. Создайте кнопки для очистки полей и подведения итога.

6. Закончить кроссворд, вставив картинки и написав текст.

7. Перед составлением кода необходимо назначить имена управляемым объектам в проекте. Задайте следующие имена на вкладке Properties (Свойства) в поле var:

8. Задайте код проверки первого слова для кнопки 1 по вертикали:

on (release) {

((v11= ="о") and (v12= ="к") and (v13= ="н") and (v14= ="о")){

zach="Отлично!";

}else{

zach="Неправильно!";

osh=osh+1;

}

9. Задайте код проверки для всех имеющихся в вашем кроссворде кнопок.

10. Задайте код очистки всех полей:

on (release) {

osh=””;

zach=””;

v11=””;

}

11. Завершите проект.

ПРАКТИЧЕСКАЯ РАБОТА №59

Создание презентации

1. Создайте новый документ.

2. Настройте его свойства. Для этого на панели Свойства укажите следующие параметры: Частота кадров (Frame Rate) - 15 fps (по умолчанию стоит 12), выберите цвет фона. Первый (нижний) слой, служащий «фоном», будет иметь дизайн, общий для всей последовательности слайдов.

3. Для того, чтобы Вам было удобнее работать включите линейки Просмотр – Линейки (View – Rulers) и сетку Просмотр – Сетка – Отобразить сетку (View – Grid – Show Grid). Эти элементы нужны для точного размещения объектов на рабочем поле.

4. Добавьте новый слой и инструментом Текст напишите слова «Лето». Это будет в будущем кнопка.

5. Добавьте еще слои и напишите на них название ваших кнопок.

6. Сделайте так, чтобы текст на сцене появлялись не сразу, а постепенно. Для этого переведите текст в символ. Стоя в первом ключевом кадре второго слоя (Лето) выделите текст и нажмите F8.

7. Создайте анимацию движения.

8. Выделите 15 кадр и преобразовать в клавиатуру (F6). Вернитесь в 1 ключевой кадр, выделите Символ Введение и на панели Свойства выберите Цвет (Color) – Альфа (Alpha).

9. Выделите 60 кадр и преобразовать в клавиатуру (F6).

10. На 3 слое (Осень) сделайте так, чтобы кнопка Осень появлялась уже начиная с 15-го кадра, сразу после кнопки Лето.

11. Сделайте все остальные кнопки и фон на все кадры, для этого выделите на слое Фон 60 кадр и преобразовать в клавиатуру (F6).

12. Титульная страница, у нас вроде как вырисовывается. Но кроме титульной страницы (в дальнейшем, будем называть их сценами) в проекте должны быть еще уроки. Создайте отдельную сцену для урока Лето.

13. Откройте панель Сцена (Scene), для этого выберете пункт меню Окно – Другие паели – Сцена (Modify – Scene) или нажмите комбинацию клавиш Shift + F2.

14. Откроется панель со сценами, в которой пока одна единственная сцена Сцена 1 (Scene 1), переименуйте ее в Титульная. Для

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

15. Для удобства навигации внешне все сцены должны быть схожи, то есть на каждой сцене одно и то же меню навигации. Чтобы снова все не рисовать сделайте копию нашей текущей сцены: нажмите кнопку Дублировать сцену (Duplicate Scene) внизу панели Сцена (Scene) и назовите новую сцену Лето.

16. Сделайте изменения в сцене Лето. Удалите анимацию кнопок. Для этого выделите все кадры, исключая последний: нужно щелкнуть по предпоследнему кадру на самом нижнем слое; затем, нажать клавишу Shift и удерживать ее. После чего щелкнуть по первому кадру самого верхнего слоя (таким образом выделиться диапазон). Далее, щелкните правой кнопкой мыши по выделенной области. Выберите в появившемся меню пункт Удалить кадры (Remove Frames).

17. Добавьте новый слой Фото, вставьте картинку.

18. Добавим эффект Размытие (Blur) к вставленной картинке.

В появившемся диалоговом окне Blur (Размытие) настройте параметры у эффекта следующим образом:

· Длительность эффекта (Effect duration in frames)— обозначает, сколько кадров будет длиться эффект. Задайте 20 фреймов.

· Разрешение (Resolution) — определяет число шагов, за которые будет осуществляться эффект. Установите количество переходов равным 10.

· Масштаб (Scale) — задает размер базового объекта по сравнению с теми объектами, которые используются для привнесения эффекта размытия. Значения, меньшие 1, указывают на то, что базовый объект будет меньше производных от него, а более 1, естественно, наоборот — вспомогательные «размытия» будут меньше размываемого объекта. Задайте данное значение равным 0,25.

· Разрешить размытие по горизонтали (Allow horizontal blur) — позволяет производить размытие по горизонтали. Оставьте данный флажок включенным.

· Разрешить размытие по вертикали (Allow vertical blur) — по аналогии с предыдущим пунктом позволяет «размывать» объект по вертикали. Пусть данный пункт также будет активен.

· Направление движения (Direction of Movement) — позволяет выбрать одну из стрелок, указывающих на направление, по которому будет осуществляться размытие. Выберите центральный пункт, который означает, что движение будет производиться сразу по всем направлениям.

Нажмите OK — эффект готов.

19. Интерактивность презентации создается с помощью наборов команд (Actions), которые срабатывают при строго определенных событиях (event). Событием может являться, например, момент, когда проигрывается какой-либо кадр, или когда нажимается кнопка мыши или клавиатуры.

20. Добавьте команду остановить сцену в последнем кадре в сцене Титульный:

a. Перейдите на сцену Титульный.

b. Создайте новый слой и назовите его Actions.

c. Перейдите на последний кадр слоя Actions.

d. Создайте в нем пустой кадр.

e. Раскроем панель Actions: выберем пункт меню Окно – Действия (Window – Actions) или нажмем клавишу F9.

f. Слева, в списке действий выберите Глобальные функции (Global functions) – Элементы управления (Timeline Control) – stop (два раза щелкнув по действию "stop").

g. В слое Actions в последнем кадре на шкале времени появится маленькая буковка а. Она означает, что в этом кадре есть действия.

21. Эту же процедуру нужно будет проделать и для остальных сцен.

22. Далее, нужно, наконец, заставить кнопки работать:

a. Вернитесь на сцену Титульный.

b. Выберите на слое Лето в последнем кадре символ Лето.

c. В панели Свойства поменяем тип объекта с Графика (Graphic) на Кнопку (Button).

d. Ниже нужно задать имя Кнопка Лето для копии символа.

e. Далее, раскройте панель Actions.

f. Выберите действие Средства управления фрагментами роликов (Movie Clip Control) - on (release) {gotoAndPlay("Лето",1);

g. Кнопка готова.

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

ПРАКТИЧЕСКАЯ РАБОТА №60

Организация перетаскивания

Как организовать перетаскивание объекта? Поскольку все задачи, связанные с отслеживанием положения указателя мыши и соот-ветственным перемещением объекта, возложены на оператор startDrag, нам остается только правильно его применить. В технологии drag-and-drop принято, чтобы перемещение объекта вслед за мышью начиналось после нажатия на нем кнопки мыши и прекращалось после ее отпускания. Поэтому для отслеживания событий мыши на объекте удобно применить оператор on. Однако этот оператор допу-стим только в сценариях кнопки, следовательно, наш объект нужно сделать кнопкой. Но в операторе startDrag необходимо указать имя экземпляра, который необходимо перетаскивать.

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

2. Теперь откройте окно сценария кнопки и введите туда такой код:

on (press) {

startDrag (<имя экземпляра кнопки>);

}

on (release) {

stopDrag ();

}

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

Несколько более сложен случай, когда необходимо, чтобы указатель мыши находился точно в центре перетаскиваемого объекта. Для этого у оператора startDrag предусмотрен второй, необязательный аргумент. Если его значение равно true, то в момент начала перетаскивания объекта к указателю мыши «приклеивается» его центр.

4. Но если просто изменить код предыдущего примера следующим образом

on (press) { startDrag (this,true); } on (release) { stopDrag (); }

то случится нечто, на первый взгляд непонятное: при нажатии кнопки мыши на объекте он отпрыгнет куда-то в сторону и начнет перемещаться вместе с указателем мыши, находясь на почтительном расстоянии от него. Более того, объект уже невозможно «освободить», поскольку для этого нужно отпустить кнопку мыши над объектом, а он находится в стороне!

Так случается, поскольку наша кнопка расположена в основном ролике, то «центром» своим она считает начало координат основного ролика, то есть левый верхний угол. Поскольку первоначально объект находится, как правило, где-то в середине рабочей области, получается, что при выполнении оператора

startDrag (this,true);

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

5. Чтобы избежать этого эффекта поместите кнопку внутрь мувиклипа. Начало координат мувиклипа находится в его центре. Поэтому, если просто вставить кнопку в новый мувиклип (выделив ее в рабочей области и нажав F8), центр мувиклипа автоматически совпадет с центром кнопки.

6. После того как Вы поместите кнопку внутрь мувиклипа, код действия кнопки станет невидим по на нажатию F9 при выделенной кнопке. Необходимо будем выделить символ кнопки, вложенный в мувиклип в списке объектов сцены (см. рис.)

Теперь мы можем написать

on (press) {

startDrag (this,true);

}

on (release) {

stopDrag ();

}

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

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

on (press) {

startDrag (this,true,60,60,200,400);

}

on (release) { stopDrag (); }

Четыре числа, стоящие после двух первых аргументов оператора startDrag, означают соответственно координаты левого верхнего (60, 60) и правого нижнего (200,400) углов невидимого прямоугольника, внутри которого разрешено перемещаться объекту (точнее, его центру).

В технологии drag-and-drop одной из наиболее важных задач является определение нулевого объекта, то есть, грубо говоря, анализ ситуации: куда, собственно был перетащен объект? В операционных системах, например, файлы с помощью мышки перетаскивают в другие папки или в «мусорную корзину», где они перестают существовать. Давайте и мы с помощью программы Flash реализуем что-нибудь подобное.

7. Пусть в ролике имеется несколько перетаскиваемых объектов и «мусорная корзина». Задача состоит в том, чтобы при перетаскивании объекта на «мусорную корзину» он бесследно исчезал в ней.

8. Создадим вначале перетаскиваемый объект (создайте несколько экземпляров).

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

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

Нужно сделать так, чтобы при «освобождении» перетаскиваемого объекта над изображением мусорной корзины этот объект исчез. Достаточно, если он станет невидимым, для чего мы присвоим его свойству _visible значение false.

Но каким образом определить, над каким объектом мы отпусти-ли кнопку мыши? Для этого в языке ActionScript предусмотрено специальное свойство _droptarget. Его значением является имя экземпля-ра объекта, над которым находится перетаскиваемый объект. В дан-ном случае нам нужно проверить, является ли значением свойства _droptarget объект _root.<имя экземпляра - корзина>.

Таким образом, при отпускании кнопки мыши нам требуется не только освободить объект оператором stopDrag, но и проверить свой-ство _droptarget. И сделать объект невидимым, изменив его свойство _visible.

11. Давайте посмотрим теперь на код кнопки целиком:

on (press) { startDrag (this); } on (release) { stopDrag (); if (eval(_droptarget)==_root.<имя экземпляра - корзина>) { _visible = false; } }

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

ПРАКТИЧЕСКАЯ РАБОТА №61

Технология ввода команд с клавиатуры

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

Способ 1: использование кнопок

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

2. Если кнопке назначен следующий код, она будет реагиро-вать на клавишу "r" и использовать ее для перемещения клипа (разместите на сцене клип с именем circle):

on (keyPress «r») {

circle._x++; }

Имейте в виду, что событие keyPress чувствительно к регистру. Это значит, что если кнопке назначена клавиша «r», она не будет реагировать на нажатие комбинации Shift+R.

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

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

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

Способ 1: использование клипа

Функция Key.isDown () позволяет проверить состояние клавиши. Например, чтобы проверить, нажата ли клавиша «r», используется следующий код:

if (Key.isDown(«г») ) { circle._x++; }

4. Такой код не может и не должен быть назначен кнопке. Он должен быть назначен клипу «actions». Код находится внутри программы обработки onClipEvent (enterFrame), поэтому проверка происходит в каждом кадре. Код проверяет нажатие клавиш с изображением стрелок, которые обозначаютсяспециальными константами наподобие Key.Right.

onClipEvent(enterFrame) {

if (Key.isDown(Key.RIGHT)) {

_root.circle._x++;

}

if (Key.isDown(Key.LEFT)) {

_root.circle._x--;

}

if (Key.isDown(Key.UP)) {

_root.circle._y--;

}

if (Key.isDown(Key.DOWN)) {

_root.circle._y++;

}

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

ТЕМА 3.4. РАБОТА СО ЗВУКОМ И ВИДЕО

ПРАКТИЧЕСКАЯ РАБОТА №62

Добавление звука к кнопке

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

1. Создайте новый файл – Документ Flash.

2. Загрузите готовую кнопку Окно – Разделяемые библиотеки – Кнопки (Window – Other Panels – Common Libraries – Buttons) и выберете символ кнопки в окне библиотеки и перетащите его на стол. (Если у вас нет в программе библиотек, загрузите готовую кнопку but-tons1)

3. Откройте библиотеку проекта по команде Окно – Библиотека (Window – Library), выделите кнопку и, щелкнув по ней правой кнопкой, выберете режим редактирования или 2 раза щелкните левой кла-вишей мыши по кнопке. В результате появится монтажная линейка кнопки.

4. На временной диаграмме кнопки добавьте звуковой слой.

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

6. Если нужно озвучить процесс нажатия кнопки, следует создать ключевой кадр (F6) во фрейме с меткой Попаданий (Down). Импортируем в библиотеку необходимый звук или воспользуйтесь готовыми файлами из библиотеки звуков, а затем добавим его в ключевой кадр Попаданий (Down).

7. Протестируйте проект, нажмите клавиши Crl+Enter.

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

8. Сохраните файл.

9. Опубликуйте в формате .swf

ПРАКТИЧЕСКАЯ РАБОТА №63

Технология внедрения видеоролика во Flash-документ

1. Создайте новый Flash-документ.

2. Теперь импортируйте AVI-файл. Импорт видео осуществляется с помощью команды меню File-Import-Import To Library…. (Mac-romedia Flash работает с MOV, AVI, WMA, MPEG, MPG).

3. Выберите файл для импортирования.

4. В открывшемся окне Import video установите переключатель On your computer и щелкните далее.

5. Установите переключатель в Embedded video in SWF and play in timeline. Щелкните Next. Завершите внедрение видео (Finish).

6. Появившийся в библиотеке файл (Embedded video) перетащите на сцену.

Примечание. Поведения («behaviors») позволяют легко применять в документе сложные функциональные возможности, причем для этого не требуется знание языка Actionscript - собственного языка написания скриптов программы Flash. Сейчас мы добавим в фильм поведения для управления видео.

7. На панели Properties (свойства) в поле ввода Instance name (имя экземпляра) введите имя video в качестве имени экземпляра.

8. На сцене создайте кнопку для проигрывания ролика.

9. Выберите команду меню Window – Behaviors (Поведения).

10. Нажмите кнопку Add Behaviors и в открывшемся меню выберите Embedded video-Play.

11. В диалоге Play video удостоверьтесь, что выбран переключатель Relative (относительный). Выделите имя video, которое Вы присвоили видеоклипу. Щелкните Ок.

12. Задайте аналогичным способом поведения кнопкам Пауза (Pause) и Вернуться в начало (Show).

ПРАКТИЧЕСКАЯ РАБОТА №64

Создание сценария для клипа. «Автомобиль»

1. Откройте приложение Macromedia Flash

2. Создайте новый фильм размером 500x250 пикселей.

3. Переименуйте слой в Background. Создайте в этом слое два прямоугольника, как показано на рисунке.

Создание нового флеш-фильма

4. Создайте новый слой и переименуйте его в Keys

5. Вставьте в слой Keys кнопки из общей библиотеки Buttons/Key Buttons

Добавление в флеш-фильм символа-кнопки из стандартной библиотеки

6. Расставьте кнопки соответствующим образом:

Добавление в флеш-фильм символа-кнопки из стандартной библиотеки

7. Преобразуйте каждую из кнопок (Button) в фильм (Movie Clip):

Преобразование символа-кнопки в символ-фильм

8. Для каждого из клипов-«кнопок» напишите код, обрабатывающий событиеenterFrame обработчика onClipEvent:

Cимвол-кнопка влево

onClipEvent (enterFrame) {
  if (Key.isDown(Key.LEFT)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
}

Cимвол-кнопка вниз

onClipEvent (enterFrame) {
  if (Key.isDown(Key.DOWN)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
}

Cимвол-кнопка вверх

onClipEvent (enterFrame) {
  if (Key.isDown(Key.UP)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
}

Cимвол-кнопка вправо

onClipEvent (enterFrame) {
  if (Key.isDown(Key.RIGHT)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
}

9. Создаайте новый слой между слоями Background и Keys и переименуйте его в Avto.

10. Создайте в слое Avto символ-клип в виде автомобиля, присвоив ему(символу-клипу) имя Car

Создание в флеш-фильме символа-клипа

11. Напишите код, обрабатывающий события Load и enterFrameобработчика onClipEvent клипа Car. В моём примере это будет выглядеть так:

onClipEvent (load) {
// Объявление и установка переменной скорости
speed = 5;
}

onClipEvent (enterFrame) {
  // Движение влево, вправо, вперёд, назад
  if (Key.isDown(Key.LEFT) && !Key.isDown(Key.RIGHT)) {
    _x -= speed;
    _rotation = 270;
  }
  if (Key.isDown(Key.RIGHT) && !Key.isDown(Key.LEFT)) {
    _x += speed;
    _rotation = 90;
  }
  if (Key.isDown(Key.UP) && !Key.isDown(Key.DOWN)) {
    _y -= speed;
    _rotation = 0;
  }
  if (Key.isDown(Key.DOWN) && !Key.isDown(Key.UP)) {
    _y += speed;
    _rotation = 180;
  }
  //
  // Движение по диагонали
  if (Key.isDown(Key.LEFT) && Key.isDown(Key.UP) && !Key.isDown(Key.RIGHT) && !Key.isDown(Key.DOWN)) {
    _rotation = 315;
  }
  if (Key.isDown(Key.RIGHT) && Key.isDown(Key.UP) && !Key.isDown(Key.LEFT) && !Key.isDown(Key.DOWN)) {
    _rotation = 45;
  }
  if (Key.isDown(Key.LEFT) && Key.isDown(Key.DOWN) && !Key.isDown(Key.RIGHT) && !Key.isDown(Key.UP)) {
    _rotation = 225;
  }
  if (Key.isDown(Key.RIGHT) && Key.isDown(Key.DOWN) && !Key.isDown(Key.LEFT) && !Key.isDown(Key.UP)) {
    _rotation = 135;
  }
  //
  // возвращение на противоположную сторону замаскированной области
  // когда машинка уходит с экрана
  if (_y<0) {_y = 231;}
  if (_y>231) {_y = 0;}
  if (_x<231) {_x = 465;}
  if (_x>465) {_x = 231;}
}

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

Выбрав слой с машинкой, создайте выше него новый слой. Переименуйте слой в Mask;
Заливкой в слое Mask обозначьте квадратную область. Именно в ней и будет видна машинка;
Преобразуйте слой Mask в слой-маску.

Маскирование слоя с изображением

13. Готовое изображение сохраните в своей папке в формате *.fla

14. Протестируйте фильм, нажав сочетание клавиш <Ctrl>+<Enter>.

15. Добавьте озвучивание

ПРАКТИЧЕСКАЯ РАБОТА №65

Создание сценария для клипа. «Часы»

1. Откройте приложение Macromedia Flash

2. Создайте новый фильм.

3. В отдельном слое создайте циферблат:

Создание нового флеш-фильма

4. В разных слоях создайте изображения часовой, минутной и секундной стрелок:

Создание в флеш-фильме нового векторноего изображения в отдельном слое

5. Преобразуйте изображения стрелок в символы-клипы с точкой регистрации в нижней части стрелки:

Преобразование векторного изображения в символ-клип

6. Присвойте копиям символов имена (например SecStr, MinStr, ChasStr):

Присвоение экземплярам символов-клипов уникальных имен

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

_root.onEnterFrame = function() {
  //создание объекта с датой
  myDate = new Date();
  //вращение стрелок
  ChasStr._rotation = myDate.getHours()*30+(myDate.getMinutes()/2);
  MinStr._rotation = myDate.getMinutes()*6+(myDate.getSeconds()/10);
  SecStr._rotation = myDate.getSeconds()*6;
}

8. Готовое изображение сохраните в своей папке в формате *.fla
Протестируйте фильм, нажав сочетание клавиш <Ctrl>+<Enter>, устраните недочёты..

Готовый интерактивный флеш-фильм

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

11. Добавьте звук

ТЕМА 3.5. СОЗДАНИЕ ТЕСТА ВО FLASH

ПРАКТИЧЕСКАЯ РАБОТА №66

Технология создания теста с альтернативным и множественным выбором ответа

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

1. Создайте новый проект.

2. Создайте на основной временной шкале четыре ключевых кадра.

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

Примечание: Тип текстового поля во Flash - static text (изображение подписей)

Компоненты с вариантами ответов оформить используя компонент RadioGroup (Windows – Components / Окна - Компоненты) с именами

radio1, radio2 и т.д. На вкладке Parametrs / Параметры в пункте label укажите варианты ответов.

4. В четвертом ключевом кадре разместите надпись «Вы ответили на … вопросов» и динамическое текстовое поле с именем «txt».

5. Создайте новый слой, разместите в первом кадре этого слоя кнопку button (Windows – Components / Окна - Компоненты) с именем button1.

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

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

stop(); // останавливаем проигрывание главной временной шкалы

var test=0; // объявляем новую переменную для подсчета

// количества правильных ответов

button1.onPress = function() {

// при выборе правильного ответа в каждом из предложенных

// вопросов увеличиваем переменную test на 1

if (radio1.selected == true) {

test++;

}

if (radio2.selected == true) {

test++;

}

if (radio3.selected == true) {

test++;

}

_root.nextFrame(); // перемещаемся на следующий вопрос

txt.text=test; // выводим в текстовое поле значение переменной test

};

8. Запустите предварительный просмотр, выберите в каждом вопросе варианты ответов и нажмите кнопку «Проверить». После прохождения теста (по достижению 4 кадра) в текстовом поле отобразится количество правильных ответов (или, по желанию, итоговый балл).

9. Измените разработанную Вами тестирующую программу, путем изменения компонента с вариантами ответов на компонент CheckBox (выбор нескольких вариантов ответов). Вместо кнопки button используйте собственную кнопку, например в виде текста.

Подсказка (используемый код):

if (check1.selected == true && check2.selected == true && check3.selected == false) { test++; }

ПРАКТИЧЕСКАЯ РАБОТА №67-68

Создание теста во Flash

1. Для запуска программы выполнить команду Пуск – Про-граммы – Macromedia - Macromedia Flash 8

2. В главном меню программы выполнить команду Insert – Timeline – Layer.

3. В контекстном меню слоя команда Properties – задать имя слоя. Присвоить имя osnovnoi.

4. Таким же образом создать 4 дополнительных слоя и присво-ить им имена background, highlight, optional, label.

5. Расположить слои как показано на рисунке

6. Выполнить команду Insert – New Symbol (Ctrl + F8).

7. Задать название кнопки «Start».

8. Выбрать тип Button.

9. Нарисовать положения кнопки при состоянии Up, Down, и Over.

Для упрощения работы, вначале рисуется при состоянии Up, за-тем во временной шкале выделяется кадр с пометкой Over и добавляется еще два кадра с помощью команды Insert – Timeline – KeyFrame (F6). Затем уже изменяется внешний вид во всех трех состояниях.

10. Добавить новый слой, в нем добавить текстовое поле с надписью «Начать тест». В панели Properties задать параметры текста.

11. Таким же образом создать кнопки «Далее» и «Повторить тест» (с именами Next и Zanova соответственно).

12. Перетащить объект Start на сцену, в первый кадр слоя osnov-noi.

13. В первом кадре, на слое osnovnoi добавить 4 текстовых поля, используя панель инструментов ToolBox, инструмент Text.

14. Одному из них в панели Properties выбрать DynamicText и в поле «Var» присвоить ему имя «fio».

15. Таким же образом изменить второе поле, присвоив ему имя «gr». Остальные два текстовых поля оставить статичными.

16. Выделить второй кадр на временной шкале в слое osnovnoi.

17. Выполнить команду Insert – Timeline – KeyFrame (F6).

18. Открыть панель Components, найти компонент RadioButton.

19. Перетащить объект из библиотеки в трех экземплярах.

20. В окне Properties задать имена an1, an2 и an3.

21. Разместить три экземпляра как необходимо для теста (это варианты ответа на каждый вопрос теста).

22. Добавить в слой еще 40 кадров.

23. В первом кадре слоя Background создать фон теста, используя панель инструментов ToolBox.

24. Выделить кадр 42, вставить кадр (Insert – Timeline – frame (F5)).

25. В первом кадре слоя optional добавить 4 экземпляр Radio- Button за пределы видимой области, присвоить ему имя an4.

26. Выделить кадр 42, вставить кадр (Insert – Timeline – frame (F5)).

27. Во втором кадре слоя highlight нарисовать подсветку для вопросов и вариантов ответа.

28. Выделить кадр 41, вставить кадр (Insert – Timeline – frame (F5)).

29. В 42 кадре слоя osnovnoi добавить 4 динамических текстовых поля с именами fio2, gr2, bal, ocenka (для вывода результатов теста с указанием фамилии, группы, количества баллов и оценки).

Весь скрипт написан в слое osnovnoi.

30. В панели Actions для первого кадра необходимо задать следующее:

fio="";

p=0;

gr="";

stop();

31. В панели Actions для кадров со 2 по 41 задать следующее:

mynum = (random(3)+1)*30+80;

setProperty (an1, _y, mynum);

if (mynum == 110) {

setProperty (an3, _y, 170);

setProperty (an2, _y, 140);

}

if (mynum == 140) {

setProperty (an2, _y, 110);

setProperty (an3, _y, 170);

}

if (mynum == 170) {

setProperty (an2, _y, 140);

setProperty (an3, _y, 110);

}

stop();

32. Для 42 кадра задать следующее:

fio2=fio+",";

gr2=gr;

oc=p/40*100;

bal=p;

if (oc>=95) {

ocenka="5 баллов."

}

if ((oc>=81)&(oc<=84)) {

ocenka="4 балла."

}

if ((oc>=60)&(oc<=80)) {

ocenka="3 балла."

}

if (oc<59) {

ocenka="2 балла."

}

stop();

33. Для кнопки «Start» задать следующее:

on (release) {

play();

an4.selected=true;

}

34. Для кнопки «Next» задать следующее:

on (release) {

if (an1.selected) {

p=p+1;

}

an4.selected=true;

play ();

}

35. Для кнопки «Zanova» задать следующее:

on (release) {

play();

gr="";

fio="";

p=0;

}

36. Во втором кадре слоя osnovnoi добавить текстовое поле, записать в него вопрос.

37. Ответы записать во втором кадре в экземпляры RadioButton в свойство label. Повторить для всех кадров.

ПРАКТИЧЕСКАЯ РАБОТА №69-72

Задание.

Опираясь на методические указания создайте тест по предмету на ВАШ выбор.

На данное задание дается 8 часов

Учебно-методические рекомендации по разработке теста в программе Macromedia Flash

1) Создание титульного слайда

а) Чтобы приступить к работе во Flash запустите программу (Пуск все программы Macromedia Macromedia Flash). (Рис.1).

рис.1

б) В появившемся окне выберете первый кадр слоя 1.(рис.2)

Рис.2

в) В первый кадр загрузите картинку (ФайлИмпорт… или, нажав Ctrl+R), которая будет фоном всей презентации, или просто поменяйте цвет фона. Далее первый кадр скопировать (Щелкнуть на любом кадре первого слоя правой кнопкой мыши и выбрать вставить кадр (рис.3)).Для удобства можно переименовать слой. (Щелкнуть правой кнопкой мыши на первом слое и в контекстном меню выбрать свойства (рис.4))

рис.3

рис.4

В результате получилось следующее рис.5

Рис.5

2) Создание слоев

А) Для создания данного теста нам понадобится 4 слоя (рис.6).

1 слой назовем – ФОН

2 слой назовем – ВОПРОСЫ

3 слой назовем – ОТВЕТЫ

4 слой назовем – КНОПКА

Рис.6

Б) В 1 кадре слоя ФОН вставляем надпись с помощь инструмента ТЕКСТ. Это будет название теста, титульный лист. (рис.7)

Рис.7

3) Создание вопросов теста

А) Вопросы с вводом правильного ответа.

Во 2 кадре слоя ВОПРОСЫ вставляем текст вопроса. Это будет 1 вопрос теста. (рис.8)

Рис.8

Переходим на слой ОТВЕТЫ. Во 2 кадр вставляем пустое текстовое поле, и в свойствах этого поля выбираем ВВОД ТЕКСТА. (рис 9)

рис.9

Далее переходим на слой КНОПКА. Во 2 кадр вставляем кнопку из библиотеки (ОкноДругие панелиОсновные библиотекиButtons). Для кнопки прописываем действие в панели Action Script.

on (release) // нажатие на кнопку

{

if ((otv1 == "траектория") or (otv1 == "Траектория") or (otv1 == "ТРАЕКТОРИЯ")) // проверка всех вариантов ввода – маленькими буквами, с Большой буквы, БОЛЬШИМИ буквами

{

n=n+1; // если ответ верный, то к n прибавляем 1

}

gotoAndPlay(2); // переход на следующий кадр

}

Аналогично делаем еще 2 кадра.

- В слое ВОПРОСЫ в кадры 3 и 4 пишем вопросы теста.

- В слое ОТВЕТЫ вставляем пустое текстовое поле

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

В результате получилось следующее (рис.10 а, б, в)

Рис.10(а)

Рис.10(б)

Рис.10(в)

Б) Вопросы с выбором правильного ответа.

В 5 кадре слоя ВОПРОСЫ вставляем текст вопроса. Это будет следующий вопрос теста. С помощью инструмента ТЕКСТ пишем несколько вариантов ответа на вопрос (рис 11).

Рис.11

Добавляем из библиотеки 3 кнопки (рис.12).

Рис.12

Для кнопки с правильным ответом прописываем действие

on (release) { // нажатие на кнопку

n = n + 1 // правильный ответ к n прибавляем 1

gotoAndPlay(6); // переход на следующий кадр

}

Для кнопки с не правильным ответом прописываем действие

on (release) {

gotoAndPlay(6); // переход на следующий кадр

}

Аналогично делаем еще 2 кадра.

- В слое ВОПРОСЫ в кадры 6 и 7 пишем вопросы теста.

- В слое ОТВЕТЫ вставляем текст ответов.

- В слое КНОПКА вставляем кнопки или копируем те, которые уже есть. Прописываем действие.

В результате получилось следующее (рис.13 а, б).

Рис 13(а)

Рис 13(б)

В) Вопросы с альтернативным выбором правильного ответа.

В 8 кадре слоя ВОПРОСЫ вставляем текст вопроса. Это будет следующий вопрос теста.

В 8 кадр слоя ОТВЕТЫ добавляем несколько компонентов Radio Button из панели КОМПОНЕНТЫ (рис 14).

Рис.14

В панели ИНСПЕКТОРА КОМПОНЕНТОВ изменяем значение параметра label на ответ вопроса (рис.15, 16). Правильный ответ в панели СВОЙСТВА назовем YES (рис.17)

Рис.15

Рис.16

Рис.17

Далее переходим на слой КНОПКА. В 8 кадр вставляем кнопку из библиотеки (ОкноДругие панелиОсновные библиотекиButtons) или копируем ту, которая уже есть. Для кнопки прописываем действие в панели Action Script.

on (release) { // нажатие на кнопку

if (yes.getState() == true) { // если отмечен верный ответ

n = n + 1; // то к п прибавляем 1

}

gotoAndPlay(9); // переход на следующий кадр

}

В результате получили следующее (рис.18)

Рис.18

Аналогично делаем еще 2 кадра.

- В слое ВОПРОСЫ в кадры 9 и 10 пишем вопросы теста.

- В слое ОТВЕТЫ вставляем компоненты Radio Button.

- В слое КНОПКА вставляем кнопку или копируем ту, которая уже есть. Прописываем действие.

В результате получилось следующее (рис.19 а, б).

рис.19(а)

Рис.19(б)

Г) Создание слайда с результатами теста.

В 11 кадре слоя ВОПРОСЫ с помощью инструмента ТЕКСТ добавляем статический текст (рис.20):

1) Результаты теста

2) Верно

3) Неверно

4) Оценка

Рис.20

Переходим на слой ОТВЕТЫ. Для статического текста добавляем динамические поля для вывода верных, неверных ответов и оценки (рис.21). Для каждой переменной присваиваем имя: prav, neprav, oc.(рис.22)

Рис.21

Рис.22

После переходим на слой ФОН и в нем прописываем следующее действие

stop(); // останавливаем воспроизведение

prav = n; // динамическому полю prav присваиваем количество верных ответов

neprav = 9-n; // считаем неправильные ответы

Дальше прописан код для подсчета оценки

if (prav<5) { // если правильных ответов меньше 5

oc = "2"; // оценка 2

} else if (prav == 5 || prav == 6 )) { // если правильных ответов 5 или 6

oc = "3"; // оценка 3

} else if (prav == 7 || prav == 8) { // если правильных ответов 7 или 8

oc = "4"; // оценка 4

} else { // в остальных случаях

oc = "5"; // оценка 5!

}

В результате получили следующее (рис.23)

Рис.23

Д) Создание слайда с кнопкой возврата к началу теста.

В 11 кадр слоя КНОПКА вставляем кнопку, уменьшаем её. Переходим на кадр 25. Вставляем ключевой кадр и создадим двойное движение (рис.24)

Рис.24

В 11 кадр слоя ВОПРОСЫ вставляем надпись В НАЧАЛО ТЕСТА, уменьшаем её. Переходим на 25 кадр. Вставляем ключевой кадр и создадим двойное движение (рис.24)

В результате получили следующее (рис.25а, б)

Рис.25(а)

Рис.25(б)

В 25 кадре для кнопки нужно прописать следующее действие

on (release) {

gotoAndPlay(1); // переход на 1 кадр теста

}

Литература

Матросов А.В., Сергеев А.О., Чаунин Н.П. HTML 4.0 – СПб.:БХВ – Петербург, 2002. – 672с.:ил.
Пауэлл Томас А. WEB – дизайн: Пер. с англ. СПб.:БХВ – Петербург, 2002. – 1024с.:ил.
Имери, Винс. Как сделать бизнес в Internet: Пер. с англ. – 3-е изд. – К.; М.; СПб.: Диалектика, 1998ю – 464с.:ил.
Успенский И.В. Интернет как инструмент маркетинга. - СПб.:БХВ – Петербург, 2000. – 256с.:ил.
А.Д. Александровский. Создание Web-страниц с использованием

FrontPage98 и JavaScript. – М.: ДМК, 1998 – 368 с.:ил.

Крупник А. Поиск в Интернете: самоучитель (знакомство, работа, развлечение). – СПб.: Питер, 2002. – 272 с.:ил.
Хоффман П. Internet. К.: Диалектика, 1995. – 160 с.:ил.

Палмер С. VBScript и Active: библиотека программиста. – СПб.: ЗАО «Издательство «Питер», 1999, -368 с.:ил.
Монкир, Майкл. Освой самостоятельно JavaScript за 24 часа.: Пер. с

англ.: Уч.пос. – М.: «Издательский дом «Вильямс», 2000, -304 с.:ил. 10. И. Мавджой. ASP. Web – профессионалам: Пер. с англ. – К.: Изда-

тельская группа BHV, 2001. – 288с.
Переверзев C. И. Анимация в Macromedia Flash MX. — М.: Бином. Лаборатория знаний, 2005. — 374 с.: ил.
Стрелкова Л. М. Flash MX. Первые шаги. — М: Интеллект-Центр, 2004, 80 с.
Попов В. А. Macromedia Flash: Материалы к урокам. — М. :ООО «Чистые пруды», 2005. — 32 с: ил. (Библиотечка «Первое сентября», серия «Информатика»)
Программы для общеобразовательных учреждений: Информатика. 2-11 классы. — 2-е изд., испр. и доп. — М: Бином. Лаборатория знаний, 2005. — 380 с.
Элективные курсы в профильном обучении: Образовательная область информатика»/Министерство образования РФ — Национальный фонд подготовки кадров. — М.: Вита-Пресс, 2004. —112 с.

Скачать материал

Скачать материал "Сборник практических заданий по дисциплине "Мультимедия технология""

Как учитель может зарабатывать на Инфоуроке?

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 663 611 материалов в базе

Найти материалы

Скачать материал

Другие материалы

rar

Разработка открытого урока по информатике 8 класс ФГОС тема: «Кодирование и обработка текстовой, графической, звуковой информации. Создание новогодней открытки»

12.05.2017
3522
6

pptx

Презентация "Программное обеспечение компьютера"

12.05.2017
2101
4

docx

Итоговый тест по информатике за курс 8 класса

12.05.2017
1718
1

docx

Лабораторно практические работы для 10 класса Информатика

Рейтинг: 5 из 5

12.05.2017
6700
31

docx

"Программадағы нысандарды тегістеу" 10 - класс

Рейтинг: 5 из 5

12.05.2017
3354
1

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Скачать материал
- 12.05.2017 2772
- DOCX 9.2 мбайт
- 11 скачиваний
- Оцените материал:
Настоящий материал опубликован пользователем Капашева Шынар Марксовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

Капашева Шынар Марксовна
- На сайте: 8 лет и 3 месяца
- Подписчики: 1
- Всего просмотров: 68010
- Всего материалов: 38