Лабораторная работа № 7

Тема «Использование Flash-технологий для создания Web-сайтов»

-

Упражнение 1 Превращение одного слова в другое

1. Создаем новый файл (File, New)

2. С помощью инструмента Text Tool создаем произвольную надпись, меняем цвет заливки, размеры, тип шрифта и т.д. (меню Text).

Можно менять параметры текста в окне Text Options(Window, Panels, Text Options).

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

3. Выделим созданный текст с помощью инструмента Arrow(чёрная стрелка).

4. Разобъем текст по буквам Modify / Break Apart [Ctrl+B].

5. Преобразуем буквы в графику Modify / Break Apart [Ctrl+B].

6. Зададим на таймелане пустой ключевой кадр, например 60 (см. рис.)

Для этого выделим 60 кадр, меню Inseart, Blank KeyFrame (F7).

7. Создадим другую произвольную надпись и разобьем ее (пп. 4,5).

8. Щелкнем правой кнопкой на первом кадре таймелайна. Проверим активизировано ли окно Frame (Panels, Frame). Найдем на нем вкладку Frame, В поле Tweening выберем Shape (превращение), зададим параметр Blend - Distributive (плавно) или Angular (жестко). При этом первые 60 кадров должны окрасится в зеленоватый цвет.

9. Просмотрим получившийся ролик (Control, Test movie). Ctrl+Enter

10. Чтобы зафиксировать на экране последнее слово, добавим в 90-м кадре еще один пустой управляющий кадр (F7). Снова посмотрим получившийся ролик.

11. При необходимости зададим высоту и ширину ролика (Modify, Movie). (Изменение-документ)

12. Преобразуем Flash-ролик в HTML-документ. Задаем нужные установки (File, Publish Setting, вкладка HTML, при необходимости меняем параметры, особенно расположение файла) и непосредственно преобразуем (Файл-опубликовать параметры).

13. Для просмотра HTML-документа выбрать File, Publish Preview, HTML.

Задания для самостоятельной работы

1. Создайте ролик по превращению слова «INTERNET» (шрифт Arial, размер 12, красный цвет, курсив) в слово «ИНТЕРНЕТ» (шрифт Courier New Cyr, размер 32, синий цвет, полужирный шрифт).

2. Создайте ролик по превращению многоуголника в овал.

Упражнение 2.1 Движение объекта из библиотеки

1. Создадим новый файл.

2. Откроем библиотеку символов (Windows, Common Library, Graphics). В случае отсутствия библиотеки или графических объектов в ней выполняем Упражнение 2.2.

3. Перенесём символ «Mouse» на холст.

4. Создадим управляющий движением слой (Insert, Create Motion Tween);

5. Щелкнем в 30-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 30 кадров при этом закрасятся в голубоватый цвет.

6. В 30-м кадре произведем изменения символа – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate), изменение размера (Scale) и перенесём символ в другую часть холста.

7. Просмотрим получившийся мини клип – Control, Play.

Упражнение 2. 2. Движение графического объекта

1. Создадим новый файл.

2. Нарисуем круг.

3. Выделим его с помощью инструмента черная стрелка (Arrow Tools) и преобразуем его в графический объект (Изменение-преобразование в значок – F8).

4. Создадим управляющий движением слой (Insert, Create Motion Tween);

5. Щелкнем в 30-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 30 кадров при этом закрасятся в голубоватый цвет.

6. В 30-м кадре произведем изменения объекта – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate), изменение размера (Scale) и перенесём объект в другую часть холста.

7. Просмотрим получившийся мини клип – Control, Play.

Упражнение 3 Работа со слоями

1. Создадим новый файл.

2. Выберем инструмент карандаш, в опциях этого инструмента (в самом низу окна инструментов) выберем Smooth (плавные линии) и нарисуем рыбку.

3. Выделим его с помощью инструмента черная стрелка (Arrow Tools) и преобразуем его в графический объект (Изменение-преобразование в значок – F8). Появится окно, в котором необходимо указать имя символа и его тип :Graphic - графический символ ,Button - кнопка, Movie clip- анимированный символ. В нашем случае это Graphic.

4. Создадим управляющий движением слой (Insert, Create Motion Tween);

5. Щелкнем в 50-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 30 кадров при этом закрасятся в голубоватый цвет.

6. В 30-м кадре произведем изменения объекта – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate), изменение размера (Scale) и перенесём объект в другую часть холста.

7. Вставим новый слой (Insert, Layer).

8. Мышкой перенесём появившийся в списке слоёв Layer 2 под слой Layer1.

9. C помощью специальных кнопок ( и ) скроем 1-ый слой и защитим его от изменений

10. Нарисуем во 2-ом слое водоросли и дно с камушками.

11. Добавим новый слой «Аквариум»(Insert, Layer) и перенесём его под предыдущие два слоя.

12. C помощью специальных кнопок ( и ) скроем 2-ой слой и защитим его от изменений.

13. Нарисуем аквариум.

14. Покажем и откроем для изменений предыдущие слои (кнопки и ).

15. Просмотрим получившийся мини клип – Control, Play.

Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»

1. Создадим новый файл.

2. Нарисуем овал, закрасим его – это наш шарик. Выберем инструмент карандаш, в опциях этого инструмента (в самом низу окна инструментов) выберем Smooth (плавные линии) и пририсуем к шарику нить.

3. Выделим полученное изображение (инструмент белая стрелка - Subselect Tool). При этом все нарисованное выделится.

4. Преобразуем нарисованный шарик объект в символ Insert / Convert to Symbol [F8]. Появится окно, в котором необходимо указать имя символа и его тип :Graphic - графический символ ,Button - кнопка, Movie clip- анимированный символ. Для нашего случая это должен быть анимированный символ. Символ при этом заносится в библиотеку символов.

5. Удалим объект-шарик с холста.

6. Откроем библиотеку символов (Windows, Library). Найдем созданный нами символ и двойным щелчком вызовем его для редактирования.

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

8. Щелкнем в первом кадре таймелана, Создадим управляющий движением слой (Insert, Create Motion Tween);

9. Щелкнем в 10-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 10 кадров при этом закрасятся в голубоватый цвет.

10. В 10-м кадре произведем изменения символа – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем вращение (Rotate) немного наклоним шарик влево, эмитируя покачивание шарика.

11. Щелкнем в 20-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)).

12. В 20- кадре произведем изменения символа –немного наклоним шарик вправо, эмитируя покачивание шарика.

13. Просмотрим получившийся мини клип – Control, Play.

14. Следующим шагом будет вставка этого анимированного символа в полноценный клип.

15. В основом окне (scene1) в первом кадре таймелана создадим управляющий движением слой (Insert, Create Motion Tween);

16. Щелкнем в 60-м кадре – вставим управляющий кадр (Insert KeyFrame (F6)). Все 60 кадров при этом закрасятся в голубоватый цвет.

17. В 60-м кадре произведем изменения символа – с помощью инструмента черная стрелка (Arrow Tools) в ее опциях выберем изменение размеров (Scale) уменьшим шарик, эмитируя его удаление и перетащим в другую часть холста. Просмотрим получившийся мини клип – Control, Play.

18. Следующим шагом зададим траекторию движения.

19. Вставим управляющий траекторией движения слой (Insert, Motion Guide), при этом появится новый слой;

20. Щелкнем по первому кадру слоя Guide Lauer (кнопка Add Motion Guide). С помощью инструмента карандаш нарисуем предполагаемую траекторию движения шарика. Просмотрим получившийся мини клип – Control, Play.

21. Добавим новый слой Insert, Layuer. Этот слой будет фоном – фотографией города.

22. Щелкнем в первом кадре слоя фона;

23. В ставим изображение города –. File, Import, …

24. Перетащим слой фона за слой с изображением шарика.

25. Просмотрим получившийся ролик (Control, Test movie).

Упражнение 5 Создание кнопочного меню.

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

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

1. Создадим новый файл.

2. Выберем кнопку из библиотеки Flash (Window,Common Library, Buttons) и перетянем ее на холст. Если дважды щелкнуть по изображению кнопки в библиотеке, перейдя к ее редактированию, то можно увидеть, как она строится.

3. Перейдём в сцену1 (Scene1)

4. Щелкнем правой кнопкой мыши по изображению кнопки на холсте, во всплывающем меню выберем Actions.Flash может предложить следующие типы основных действий (Basic Action):
Go To - переход к заданной сцене или кадру.
Play - запуск остановленного фильма.
Stop - остановка фильма.
Toggle High Quality - переключатель качества отображения фильма (режим сглаживания).
Stop All Sounds - выключение звука.
Get URL - переход по указанному адресу.
FS Command - передача проигрывания фильма другим приложениям.
Load/Unload Movie - простейший вариант использования данной команды, это загрузка фильма с указанного адреса.
Tell Target - выбор фильма для дальнейшего управления (задание цели).
If Frame Is Loaded - выполнение команды в случае загрузки указанного кадра.
If - проверка на истинность.
Loop - цикл.
Call - вызов.
Set Property - задание свойств фильма.
Set Variable - значение переменной.
Duplicate/Remove Movie Clip - создание или удаление экземпляра клипа
Drag Movie Clip - включает режим перетаскивание клипа
Trace - вывод сообщений при выполнении действий
Comment - комментарии.

5. В поле Actions напишем скрипт

on(press){getURL("str1.htm", "_blank")}

Дата добавления: 2015-05-26