Урок 39 Інформатика 11(ІКТ)
Учень ніколи не перевершить учителя,
якщо бачить у ньому зразок, а не суперника.
В. Бєлінський
Створення графічних об’єктів, трансформування об’єктів.
Мета.
Навчальна. Ознайомити учнів зі створенням вмісту презентації, створенням графічних об’єктів, імпортуванням об’єктів.
Розвиваюча. Розвивати логічне мислення, самостійність, вміння застосовувати набуті знання до практичних завдань.
Виховна. Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки.
Тип уроку. Засвоєння нових знань і навичок.
Матеріали для роботи з учнями:
План
Хід уроку
1. Організація початку уроку.
2. Інструктаж БЖД.
3. Мотивація навчальної діяльності.
Опановуючи матеріал попереднього розділу, ви малювали прості геометричні фігури — коло та квадрат. Звісно, вбудований у середовище Flash графічний редактор має значно ширші можливості. В документах Flash створюють такі векторні об’єкти: лінії довільної форми, багатокутники, зірки й еліпси, а також текстові написи.
У Flash можна створювати й більш складні об’єкти та символи, використовуючи для цього названі вище елементи (про це вже йшлося в попередньому розділі). Кожен об’єкт має широкий набір властивостей, які можна настроювати. Крім того, у програмі передбачено ряд операцій з редагування об’єктів і їхніх груп. У цьому розділі ми навчимося створювати графічні й текстові об’єкти та виконувати найважливіші операції з їх редагування.
4. Актуалізація опорних знань.
5. Вивчення нового матеріалу.
Креслення геометричних фігур
Як і в Microsoft PowerPoint, у Macromedia Flash графічний об’єкт можна додати у презентацію у два способи: імпортувати його або накреслити засобами векторного графічного редактора, вбудованого у середовище програми, певну геометричну фігуру. Засоби креслення фігур буде розглянуто в цьому підрозділі, імпортування об’єктів — у наступному.
Зазначимо, що хоча набори основних операцій над графічними об’єктами у Flash і PowerPoint майже однакові (змінення розмірів і кольорів, переміщення, вирівнювання, групування тощо), самі засоби малювання в цих двох програмах суттєво відрізняються. У Flash немає такого широкого набору автофігур, як в PowerPoint, проте інструменти, призначені для створення й редагування найпростіших фігур — ліній, прямокутників, овалів і багатокутників, гнучкіші й потужніші.
Опишемо спочатку панель Tools (Інструменти), де розміщено всі графічні засобе Flash, а потім — кожен із основних інструментів малювання.
Панель Tools
Панель Tools (Інструменти) містить набір інструментів для створення фігур і для їх редагування. Панель складається з чотирьох секцій (рис. 10.1): Tools (Інструменти), View (Вигляд), Colors (Кольори) та Options (Параметри).
Розглянемо окремо кожну секцію.
Креслення та змінення ліній
Для створення відрізків прямої використовують інструмент Line (Лінія), якому відповідає значок на панелі Tools (Інструменти). Відрізок має початкову та кінцеву точки, а також такі параметри, як товщина та стиль (останній визначає, буде лінія суцільною, пунктирною, штриховою тощо). Стандартно створюється суцільна чорна лінія товщиною в 1 піксел. Змінити колір, товщину та інші параметри лінії можна за допомогою панелі Properties (Властивості).
Вправа 10.1
Накреслимо пряму лінію червоного кольору товщиною 1,5 піксела.
а) Наведіть курсор миші на робоче поле;
б) Клацніть лівою кнопкою миші точку, де лінія має початися, і, утримуючи кнопку, протягніть курсор до точки, де лінія має закінчитися.
в) Відпустіть ліву кнопку миші.
Буде накреслено відрізок червоного кольору.
а) виберіть інструмент Selection (Виділення) на панелі Tools (Інструменти).
б) Виділіть лінію лівою кнопкою миші, на панелі Properties (Властивості) буде відображено її властивості (рис. 10.2).
в) Змініть значення товщини лінії з 1 піксела на 1,5, скориставшись повзунком, розміщеним праворуч від поля, де зазначено товщину лінії.
г) Збережіть презентацію у файлі Вправа_10_1.
За допомогою панелі Properties (Властивості) можна змінювати й інші параметри лінії, зокрема стиль, ширину, висоту, координати тощо. А інструмент Selection (Виділення) дає змогу переміщувати кінцеві точки лінії та вигинати її.
Вправа 10.2
Перемістимо за допомогою інструмента Selection (Виділення) одну з кінцевих точок створеної у попередній вправі лінії, а потім спробуємо вигнути її.
а) Підведіть курсор миші до одного з кінців лінії. Курсор змінить свій вигляд — під його зображенням з’являться дві лінії, що утворюють прямий кут.
б) Перетягніть курсор, утримуючи ліву кнопку миші, — кінець лінії переміщуватиметься за ним (рис. 10.4).
в) Відпустіть ліву кнопку миші, щоб завершити операцію.
а) Підведіть курсор миші до лінії. Він змінить свій вигляд: під зображенням курсору з’явиться закруглений відрізок.
б) Тягніть курсор миші, утримуючи ліву кнопку, — форма вигину зображуватиметься чорним кольором (рис. 10.5).
в) Відпустіть ліву кнопку миші для завершення операції.
г) Збережіть проект у файлі Вправа_10_2.
Зазначимо, що лінії довільної форми можна малювати за допомогою інструмента РепсіІ (Олівець). Це фактично те саме, що й малювати вручну, відтак провести олівцем плавну лінію достатньо важко. Тому Flash згладжує лінії, намальовані цим інструментом. Набагато легше отримати правильні та водночас складні геометричні форми за допомогою вигинання інструментом Selection (Виділення).
Створення та редагування прямокутника, овалу, багатокутника й зірки
Прямокутник, овал, багатокутник і зірку створюють у схожий спосіб, але різними інструментами: Oval (Еліпс) О » Rectangle (Прямокутник) Р. і PolyStar (Багатокутник/зірка) Q. На панелі Tools (Інструменти) слід вибрати інструмент і, утримуючи ліву кнопку миші, намалювати геометричну фігуру від центра.
Інструменти Rectangle (Прямокутник) і PolyStar (Багатокутник/зірка) утворюють групу на панелі Tools (Інструменти). Доступним є лише один з них. Щоб зробити доступним інший інструмент, слід клацнути мишею на трикутній позначці у правому нижньому куті кнопки інструмента та вибрати його зі спливаючого списку (рис. 10.7).
Інструмент, яким креслять прямокутник, у секції Options (Параметри) панелі Tools (Інструменти) має додатковий параметр Set Corner Radius (Встановити радіус закруглення кутів) (f, що дає змогу намалювати прямокутник із закругленими кутами.
Для інструмента PolyStar (Багатокутник/зірка) на панелі Properties (Властивості) є додаткова кнопка Options (Параметри), за допомогою якої відкривається вікно Tool Settings (Настройки інструмента) (рис. 10.8). Воно містить такі елементи:
Star Point Size (Розмір точки зірки) — значення поля впливає лише на зірку та визначає гостроту її променів (поле може містити числа від 0 до 1); щоб зрозуміти, як значення поля впливає на зірку, погляньте на рис. 10.9.
Вправа 10.3
Накреслимо прямокутник із закругленими кутами та семикутну зірку.
а) Виберіть на панелі Tools (Інструменти) інструмент Rectangle (Прямокутник). У секції Options (Параметри) буде відображено додаткові параметри цього інструмента.
б) Для закруглення кутів прямокутника відкрийте вікно Rectangle Settings (Настройки прямокутника), клацнувши значок Set Corner Radius Я (Встановити радіус закруглення кутів) у секції Options (Параметри) (рис. 10.10).
в) Уведіть значення радіуса 10.
а) Виберіть інструмент PolyStar (Багатокутник/зірка). Якщо на панелі Tools (Інструменти) його не відображено, клацніть спочатку трикутну позначку на кнопці інструмента Rectangle (Прямокутник)
б) На панелі Properties (Властивості) клацніть кнопку Options (Параметри). Буде відображено вікно Tool Settings (Настройки інструмента), як на рис. 10.8, де зі списку Style (Стиль) виберіть елемент star (зірка), а в полі Number of sides (Кількість сторін) введіть число 7.
Якщо ви плануєте й надалі використовувати створену фігуру, перетворіть її на символ. Щоб згадати, як це робиться, перегляньте практичну роботу з розділу 9.
Редагування фігур та об'єктів
Можливості Flash щодо перетворення форми та кольору графічних елементів набагато перевищують можливості PowerPoint. Операції, які ми розглядаємо у цьому підрозділі, — лише верхівка айсберга, але цього матеріалу достатньо, щоб зрозуміти основні принципи роботи з формою та кольором у Flash.
Контур та заливка
Фігури, створені за допомогою інструментів Oval (Еліпс), Rectangle (Прямокутник) або PolyStar (Багатокутник/зірка), складаються з двох частин — контуру та заливки, які можна розглядати як окремі елементи. їх, наприклад, можна виділяти окремо один від одного, переміщувати, змінювати колір тощо. Є такі способи виділення контуру, заливки та цілої фігури за допомогою інструмента Selection (Виділення):
Колір контуру та заливки фігури можна змінювати за допомогою панелі Properties (Властивості). Для цього слід виконати такі дії.
Для змінення кольору заливки кількох фігур зручно використовувати інструмент Paint Bucket (Заливка) ф на панелі Tools (Інструменти).
Типи заливок
Тип заливки визначають за допомогою панелі Color Mixer (Змішувач кольорів), яку показано на рис. 10.13. Вивести цю панель можна командою Windows ► Color Mixer (Вікно ► Змішувач кольорів). Зі спливаючого списку Туре (Тип) цієї панелі можна вибрати такі типи заливок:
Заливку кожного типу можна застосовувати до внутрішньої області фігури та до її контуру. Заливку типу Solid (Суцільна) ми вже використовували не один раз. Тепер докладніше ознайомимося з градієнтними заливками та заливкою типу Bitmap (Растрова). Приклади градієнтних заливок подано внизу на панелі Color Swatches (Зразки кольорів) (рис. 10.14).
Можна створювати й власні типи градієнтних заливок та долучати їх до набору Color Swatches (Зразки кольорів). У вправі 10.4 навчимося створювати радіальну заливку. Лінійна градієнтна заливка створюється в аналогічний спосіб.
Вправа 10.4
Зафарбуємо семикутну зірку, створену в попередній вправі, використовуючи триколірну радіальну градієнтну заливку. В центрі зірка має бути червоного кольору, на початку променів — жовтого, а на їх кінцях — білого (рис. 10.15).
а) Відкрийте панель Color Mixer (Змішувач кольорів), скориставшись командою Window ► Color Mixer (Вікно ► Змішувач кольорів) або клавішами Shift+F9.
б) Клацніть кнопку Fill Color (Колір заливки) на панелі Color Mixer (Змішувач кольорів), вказуючи таким чином, що ви змінюватимете колір заливки, а не контуру.
в) Виберіть тип заливки Radial (Радіальна) зі спливаючого списку Туре (Тип) на панелі Color Mixer (Змішувач кольорів). Панель набуде такого вигляду, як на рис. 10.16.
На панелі відобразиться кілька нових елементів, зокрема смужка визначення градієнта та спливаючий список Overflow (Переповнення). У Flash параметри градієнтної заливки задають за допомогою смужки визначення градієнта та вказівників під смужкою, що визначають кожний колір заливки.
Кількість вказівників може варіюватися від 2 до 15. Кожний вказівник відповідає за один наявний у градієнті колір. Положення вказівника на смужці визначає, які саме частини фігур буде зафарбовано відповідним кольором. Для радіальної заливки чим лівіше розташовано вказівник на смужці, тим ближче до центру перебуватиме його колір у градієнті. Лінійна заливка повністю відповідає смужці визначення градієнта, вона будується зліва направо. Відстань між вказівниками визначає проміжок, на якому відбуватиметься поступовий перехід кольору одного вказівника у колір сусіднього.
Положення вказівників можна змінювати, перетягуючи їх мишею вздовж смужки визначення градієнта. Щоб додати вказівник, клацніть смужку визначення градієнта, а щоб видалити, виділіть вказівник лівою кнопкою миші та потягніть його вниз від смужки. Змінюючи положення, кольори та кількість вказівників, можна створювати різноманітні градієнтні заливки.
-Крім кольору, для кожного вказівника на смужці визначення градієнта в полі Alpha (Непрозорість) можна задати коефіцієнт непрозорості.
Повернімося до виконання вправи 10.4.
а) Додайте новий вказівник, клацнувши мишею смужку визначення градієнта.
б) Змініть кольори вказівників. Виберіть крайній лівий вказівник, двічі клацнувши його мишею, та задайте для нього червоний колір. Для середнього та правого вказівників виберіть жовтий і білий кольори.
в) Змініть положення вказівників.
а) Виберіть інструмент Selection (Виділення) на панелі Tools (Інструменти).
б) Виділіть заливку зірки, один раз клацнувши її.
в) Клацніть кнопку Fill Color (Колір заливки) на панелі Properties (Властивості) та виберіть створену заливку (її буде відображено в нижньому рядку). Зірку буде зафарбовано створеною заливкою (див. рис. 10.15).
Збережіть документ.
Слід зазначити, що Flash має набагато більше засобів керування градієнтною заливкою, ніж було розглянуто. Так, за допомогою спливаючого списку Overflow (Переповнення) на вкладці Color Mixer (Змішувач кольорів) можна контролювати використання кольору за межами градієнтної заливки. Побачити це можна, застосувавши градієнтну заливку до фігури, а потім трансформувавши її за допомогою інструмента Gradient Transform (Трансформація градієнта) З, розміщеного на панелі Tools (Інструменти).
У середній частині панелі Color Mixer (Змішувач кольорів) є ще три корисні кнопки, дію яких ми розглянемо у прикладі 10.1. Ці самі кнопки є також у секції Colors (Кольори) панелі Tools (Інструменти).
Приклад 10.1
Значок No Color зручно використовувати, якщо потрібно намалювати замкнену фігуру (прямокутник, коло тощо) без заливки.
Нарешті, ознайомимося із заливкою типу Bitmap (Растрова). Для заливки цього типу використовують растрове зображення. Після вибору пункту Bitmap (Растрова) у спливаючому списку Туре (Тип) на вкладці Color Mixer (Змішувач кольорів) відкриється діалогове вікно Import to Library (Імпортувати до бібліотеки), за допомогою якого можна додати до бібліотеки растрове зображення. Якщо бібліотека містить растрові зображення, їх буде відображено на панелі Color Mixer (Змішувач кольорів) (рис. 10.18), і будь-яке з цих зображень можна використати як заливку. Для цього слід виділити фігуру, встановити тип заливки Bitmap (Растрова) та вибрати потрібне растрове зображення на панелі Color Mixer (Змішувач кольорів).
Фігури та об'єкти
Ми не випадково вживали слово «фігура» замість «графічний об’єкт* до графічних елементів, побудованих інструментами малювання. Річ у тім, що у Flash розрізняють графічні об'єкти (drawing objects) та фігури (shapes), які часто називають формами. Об’єкт поводить себе зовсім не так, як фігура, в разі накладання на інші фігури та об’єкти. Всі інструменти малювання дають змогу створювати і об’єкти, і фігури, залежно від того, чи активна кнопка Object Drawing (Малювання об’єктів) ЕЗ у секції Options (Параметри) на панелі Tools (Інструменти). Щоб краще зрозуміти, чим фігура відрізняється від об’єкта, розглянемо приклад.
Приклад 10.2
Створимо дві фігури, «еліпс» і «прямокутник», а також об’єкт «прямокутник» і подивимось, як проявляється відмінність між фігурами та об’єктами у разі їх накладання та переміщення.
Отже, об’єкти та фігури виділяються по-різному, крім того, для об’єкта неможливо виділити окремо контур і заливку — разом вони утворюють цілісний графічний об’єкт.
Зазначимо, що екземпляри символів завжди є об’єктами, відтак радимо створювати символи та їхні екземпляри, замість того щоб використовувати параметр Object Drawing (Малювання об’єктів).
Змінення форми та розміру об'єктів і фігур
Графічні фігури та об’єкти, крім кольору контуру та заливки, мають ще й інші параметри (товщина, стиль штриха та розміри об’єкта), які після виділення фігур або об’єктів відображаються на панелі Properties (Властивості).
До фрагментів контуру будь-якої фігури застосовують ті самі операції вигинання та переміщення, що й у вправі 10.2 ми застосовували до лінії — їх виконує інструмент Selection (Виділення). Відтак будь-який правильний багатокутник можна перетворити на довільний багатокутник, переміщуючи його вершини, а застосовуючи операцію вигинання до багатокутника або кола, можна отримати взагалі будь-яку фігуру (рис. 10.20)
Перетворення об'єктів і фігур. Панель Transform
Хоча інструмент Selection (Виділення) дає змогу створювати довільні фігури, Flash має спеціалізовані засоби для кількох найтиповіших операцій перетворення об’єктів і фігур. Так, за допомогою інструмента Free Transform (Вільне перетворення) О панелі Tools (Інструменти) можна стиснути, розтягнути та нахилити виділений фрагмент зображення. Щоправда, в цьому випадку майже неможливо, наприклад, повернути зображення точно на 25° або зменшити його розмір на 3 %. Для виконання таких операцій радше використати панель Transform (Перетворення), яку показано на рис. 10.21. Вона дає змогу задати числові значення відносних розмірів виділеного зображення, а також кутів його повороту та нахилу.
У вправі 10.5 апробуємо різні способи змінення форми й розмірів об’єктів. Використаємо для цього символ Логотип, який було створено на практичній роботі з попереднього розділу.
Вправа 10.5
Створимо три екземпляри символу Логотип. Зменшимо розмір одного з них до 75 % від початкового, другий повернемо на 30°, а третій нахилимо на 30°.
а) Виділіть екземпляр символу за допомогою інструмента Selection (Виділення).
б) Відкрийте панель Transform (Перетворення), скориставшись клавішами Ctrl+T. На панелі відображатиметься інформація про виділений об’єкт.
в) Установіть прапорець Constrain (Змушувати), щоб забезпечити пропорційне змінення горизонтального та вертикального розмірів об’єкта, тобто «зв’язати» поля ширини та висоти.
г) Уведіть у поле ширини число 75 — значення у полі висоти буде змінено на 75 автоматично.
д) Натисніть клавішу Enter, щоб застосувати зміни.
а) Виділіть екземпляр символу.
б) Встановіть перемикач у положення Rotate (Обернути).
в) Уведіть у поле Rotate (Обернути) число ЗО.
г) Натисніть клавішу Enter, щоб виконати поворот. Результат повороту зображено на рис. 10.22.
а) Виділіть екземпляр символу.
б) Встановіть перемикач у положення Skew (Нахилити).
в) Уведіть у відповідне поле число ЗО.
г) Натисніть клавішу Enter, щоб нахилити об’єкт. Результат виконання нахилу наведено на рис. 10.23. Порівняйте його з рис. 10.22.
Збережіть документ.
Варто згадати ще дві команди трансформування, які використовують для створення пар симетричних об’єктів, а саме Modify ► Transform ►Flip Vertical (Модифікувати ► Перетворити ► Перевернути вертикально) та Modify ► Transform ► Flip Horizontal (Модифікувати ► Перетворити ► Перевернути горизонтально), які дають змогу відобразити виділений об’єкт вертикально та горизонтально
6. Застосування отриманих знань
Вправи 10.1-10.5
7. Підбиття підсумків уроку
8. Домашнє завдання