4. Порядок виконання роботи
1Створення анімації з шарів зображення
Додайте пошарову анімацію за допомогою штрихів(як показано в п. 3.3.16) для вашого варіанту малюнка в лабораторній роботі 2-01. Варіанти анімації для малюнків приведені в таблицю. 2.1.
Таблиця 2.1. Варіанти малюнків для пошарової анімації
Варіант
Елементи анімації
1
Кольори штриху: Червоний колір
2
Кольори штриху: Червоний колір
3
Кольори штриху:Сегмент 1 - жовтий колір; Сегмент 2 - червоний колір
4
Кольори штриху: Червоний колір
5
Кольори штриху: Червоний колір
6
Елементи анімації 1 – чорним кольором. Елементи анімації 2 – зеленим кольором
7
Кольори штриху: Чорний колір
8
Кольори штриху: Синій колір
9
Кольори штриху: Зелений колір
10
Кольори штриху: Зелений колір
11
Кольори штриху: Червоний колір
12
Кольори штриху: Червоний колір
2. Створення анімації з автоматичною вставкою проміжних кадрів
Створіть анімаційне зображення зі вставкою проміжних кадрів в зображення відповідно до варіантів, приведених в таблицю. 2.2. Кількість проміжних кадрів і інтервал між кадрами підбираються для плавної передачі змін в кадрах.
Таблиця 2.2. Варіанти для покадрової анімації
Варіант
Фон
Слои
Анимационные эффекты для кадров, между которыми вставляются промежуточные кадры
1
RGB(102, 204,
255)
Слой 1 – прямоугольник со скругленными углами (стиль Green Gel).
Слой 2 – прямоугольник со скругленными углами (стиль Red Gel).
Прямоугольники расположены друг над другом.
В первом кадре непрозрачность слоя 1 –100%, стиля 2 – 0%, во втором – 0% для слоя 1 и 100% – для слоя 2.
2
RGB(102, 204,
255)
Слой 1 – прямоугольник со скругленными углами (стиль Green Gel).
Слой 2 – прямоугольник со скругленными углами (стиль Red Gel).
Прямоугольник в слое 1 передвигается от левой границы до правой и обратно. Прямоугольник в слое 1 передвигается от верхней границы до нижней и обратно.
3
RGB(102, 204,
255)
Слой 1 – (прямоугольник со скругленными углами красного цвета и зеленой обводкой)
В кадре 2 наложение цвета меняется на желтый цвет –
,
а в кадре 3 – снова на красный.
4
RGB(102, 204,
255)
Слой 1 – (прямоугольник со скругленными углами красного цвета и зеленой обводкой с внешним свечением – градиент Blue, Yellow, Blue)
В кадре 2 внешнее свечение меняется на градиент Orange, Yellow, Orange –
,
а в кадре 3 – снова на градиент Blue,
Yellow, Blue.
5
RGB(102, 204,
255)
Слой 1 – (круг красного цвета с тиснением желтого цвета и углом поворота 120°)
В кадре 2 угол поворота меняется на -60° –
,
а в кадре 3 – снова на 120°.
6
RGB(102, 204,
255)
Слой 1 – (круг красного цвета с тиснением желтого цвета и углом поворота 120° и высотой 0°)
7
RGB(255, 255,
0)
Слой 1 – (круг зеленого цвета цвета с тенью фиолетового цвета: расстояние 36 пикс., размах 21° и размер 24 пикс.)
В кадре 2 расстояние меняется на 0 пикс. –
,
а в кадре 3 – снова на 36 пикс.
8
RGB(255, 255,
0)
Слой 1 – (круг зеленого цвета цвета с тенью фиолетового цвета: расстояние 36 пикс., размах 21° и размер 24 пикс., угол 120°)
В кадре 2 угол меняется на 0° –
,
а в кадре 3 – снова на 120°.
9
RGB(102, 204,
255)
Слой 1 – круг (стиль Red Paper Clip)
В кадре 2 размер обводки меняется на 30 пикс. –
,
а в кадре 3 – снова на 6 пикс.
10
RGB(102, 204,
255)
Слой 1 – круг (стиль Red Paper Clip с обводкой: градиент Orange, Yellow, Orange и размер 36 пикс. )
В кадре 2 размер градиент обводки меняется на Blue, Yellow, blue –
,
а в кадре 3 – снова на Orange, Yellow, Orange.
11
RGB(102, 204,
255)
Слой 1 – прямоугольник (стиль Yellow Gel With Drop отключенным глянцем)
В кадре 2 наложение цвета меняется на RGB(255,0,255) –
,
а в кадре 3 – снова на первоначальный
цвет RGB(148,147,74).
12
RGB(102, 204,
255)
Слой 1 – прямоугольник (стиль Yellow Gel With Drop отключенным глянцем и внешним свечением, а также наложением красного цвета)
В кадре 2 наложение цвета меняется на RGB(255, 255, 0) и включенным внешним свечением: градиент Spectrum, размахом 55% и размером 41 пикс. –
,
а в кадре 3 – возврат к первоначальному
состоянию.
5. Питання для самоконтролю
Що таке фрагменти, і для яких цілей вони використовуються в редакторові Photoshop?
Як можна одночасно редагувати зображення в декількох графічних редакторах?
Чим відрізняються засоби введення тексту в редакторові ImageReady від засобів введення тексту в редакторові Photoshop?
Як можна задати відтінки кольору в редакторові ImageReady?
Які можливості по заповненню замкнутих фігур надає палітра Styles в редакторові ImageReady?
Що таке процедура в Photoshop, і які засоби створення, коригування і виконання процедур існують в цьому редакторові?
Які засоби створення анімаційних зображень існують в редакторові ImageReady?
Які способи створення анімації використовуються в редакторові ImageReady?
Лабораторна робота № 4 Форматування Web- сторінок
1. Мета роботи
Метою роботи є знайомство з елементами і стилями форматування мови HTML.
2. Склад робочого місця
2.1. Устаткування: IBM- сумісний персональний комп'ютер(ПК).
2.2. Програмне забезпечення: операційна система Windows, Web- браузер Internet Explorer версії 6.0 і вище.
3. Підготовка до лабораторної роботи
Для підготовки до виконання лабораторної роботи необхідно повторити наступні розділи (дивись електронний конспект лекцій по розділу 4 «Технології програмування»).
4. Порядок виконання роботи
Відкрийте папку Web-сторінки і скопіюйте папку свого варіанту в свою папку.
Відкрийте текстовий файл (з розширенням .txt) для свого варіанту. Оформіть його як Web- сторінку, додавши відкриваючі і закриваючі елементи <html>, <head>, <title>, <body>, як показано на мал. 4.1. В якості типу документу візьміть DTD для версії XHTML 1.1. В якості утримуваного елементу <title> задайте найменування Web-сторінки (первую строку файлу). Зміст текстового файлу повинно знаходитись між елементами <body> і </body>.
Введіть в заголовок елементи:
<meta http-eqiv="Content-Type"
content="text/html;charset=Windows-1251">
<meta name="Author"
content="автор-или-авторы;номер-группы">.
де в атрибуті content вкажіть свої ПІБ, а також номер групи.
Задайте структурну розмітку файлу за допомогою блокових елементів <h1>, <h2>, <h3>, <h4> и <p> за наступними правилами:
заголовок Web-сторінки задається як заголовок першого рівня: <h1>;
розділ Введение (якщо він є), а також розділи 1, 2 і т.д. задаються як заголовки другого рівня: <h2>;
підрозділи 1.1, 1.2 і т.д. в розділах задаються як заголовки третього рівня: <h3>;
пункти 1.1.1, 1.1.2 і т.д. (якщо вони є) в підрозділах задаються як заголовки четвертого рівня: <h4>;
абзаци в розділах, підрозділах і пунктах задаються за допомогою елементу <p>.
Не забудьте у кінці кожного заголовку і абзацу вставити відповідний закриваючий елемент!
Збережіть створену Web- сторінку з тим же ім'ям і розширенням .html і прогляньте Web- сторінку, що вийшла, в Internet Explorer.
Створіть таблицю стилів в заголовку Web- сторінки. Вставте в неї правила для селекторів h1, h2, h3 и h4 відповідно до свого варіанту(таблиця. 4.21). Прочерк в значенні властивості означає, що ця властивість не задається.