Тема Підготовка сценаріїв і інтерактивність Основи інтерактивності 1

Тема. Підготовка сценаріїв і інтерактивність Основи інтерактивності 1

Зміст лекції: 1. Інтерактивність та динамічні ефекти на Web-сторінках 2. Лінії поведінки 3. Підготовка сценаріїв в Flash 4. Приєднання сценаріїв 5. Методи і властивості відеокліпів 6. Створення додатків у Flash 2

1. Інтерактивність та динамічні ефекти на Web-сторінках. Зміст на Web-сторінці відділяється від зовнішнього вигляду, що контролюється таблицями стилів. Зміна зовнішнього вигляду Web-сторінці досягається маніпулюванням таблицями стилів в сценарії. Способи зміни стилю 1. Зміна стилю певного елементу документа 2. Зміна таблиці стилів усього документа. 3

Зміна стилю певного елементу документа • Використання властивості style • Приклад: h 1 {color: lime; } h 2 {color: blue; } елемент HTML :

Зміна таблиці стилів усього документа властивість Об’єкт document stylesheets масив Stylesheets style масив правил Style CSSRules властивість CSSRules selector. Text 5

Приклад document. style. Sheets[0]. css. Rules[1]. style. color = 'fuchsia'; Еквіваленти 1. style. Sheets[0]. CSSRules [1] h 2 {color: blue; } 2. h 2 {color: fuchsia; } 6

Переміщування елементу по екрану НТМL-документ Jump up and down 7

Правила CSS з абсолютним позиціонуванням #jumper { position: absolute; top : 35; left : 40; font : x-large ; color : blue ; } 8

var delay=180; var continuing = false; var the_style; function" src="https://present5.com/presentation/25748284_68316863/image-9.jpg" alt="Техніка руху 9

2. Лінії поведінки Набір параметризованних дій, що пропонуються системами авторських розробок, обираються для задоволення більшості потреб в сценаріях та в сукупності з підходящим інтерфейсом забезпечують потребу в керуванні елементами мультимедійної продукції. Набір параметризованних дій дозволяє розробникам вводити інтерактивність та анімацію в свою продукцію. 10

Такі параметризованні дії, що пропонуються авторськими системами, називаються лініями поведінки. Параметри лінії поведінки – окремі дії, що вказують значення деяких змінних. Приклад: згенерироване повідомлення Йде завантаження. В авторській системі повинні існувати засоби 1. Що надають авторам задавати значення параметрів 2. Що надають можливості системі генерувати код, відповідно до ліній поведінки. 11

Інтерфейси з доступними лініями поведінки Події, що відповідають лініям поведінки Панель "Behaviors" в Dreamweaver MX 12

Лінії поведінки Set Text of Status bar В заголовок вводиться HTML-документа вводиться сценарій: Еквівалент onmouseover = "

Дії пов'язані із зображеннями й графікою руху Команда візуального виділення Insert Rollover Image Панель Swap Image 14

• Лінія поведінки являє собою HTML-файл. • Елемент head - містить кілька визначень ECMAScript. • Елемент body — документ, що буде візуалізованим у діалоговому вікні, коли користувач вибере лінію поведінки. • Елемент form, що має поля для прийняття параметрів лінії поведінки. 15

Функції лінії поведінки • behavior. Function - повертає код для визначення функції обробника • apply. Behavior - виклик обробника • can. Accept. Behavior - повертає список подій, з якими може співвідноситися лінія поведінки • display. Help - повертає рядок, що описує лінію поведінки при натисканні на кнопці Довідка в діалоговому вікні лінії поведінки 16

3. Підготовка сценаріїв в Flash • Action. Script - мова підготовки сценаріїв Flash • Action. Script = ECMAScript+ набором об'єктів хоста, що відповідають елементам роликів Flash+ об'єкти, які забезпечують зв'язок між роликами й серверами (об'єкти XML). 17

панель Actions 18

19

4. Приєднання сценаріїв Типи елементів, до яких можуть приєднуватися сценарії 1. Сценарії кадрів 2. Символи кнопок 3. Відеокліпи 20

4. 1 Сценарії кадрів • Сценарій може прикріплюватися до будь-якого ключового кадру нескінченний цикл goto. And. Play ("loop") ; Приклад: • цикл відтворювався задану кількість разів - 6. 21

Приклад var loop_count=0; if (++loop_count < 6) goto. And. Play ("loop" ) ; 22

4. 2 Символи кнопок • Символи кнопок представляються окремим типом символів у Flash, що розроблені у відповідь на таку подію, як натискання миші й візуальне виділення, але побудованих, як анімація із чотирьох кадрів. • Кадри мають спеціальні мітки Up, Over, Down і Hit 23

Стани кнопки відповідно до курсору • Up — курсор не встановлений на кнопку • Over — при встановленому на кнопку курсорі • Down - курсор розташований над символом кнопки • Hit – показує область, у якій курсор вважається розміщенним над кнопкою 24

25

Події, що активізуються сценаріями кнопок • • press release. Outside roll. Over rollout drag. Over drag. Out key. Press 26

Сценарій, прив'язаний до кнопки, задає подію, що її активізує. Тіло сценарію розміщують в стандартний код: on. Event { } 27

Засоби керування для зупинки ролику Розмістіть кнопку на сцені й додайте до неї такий сценарій: on (release) { stop (); } 28

4. 3 Відеокліпи • Події кліпу load unload enter. Frame mousemove mouse. Down mouse. Up key. Down key. Up data 29

5. Методи і властивості відеокліпів • Відеокліпи в Flash являються екземплярами символів, які поводяться як самодостатні ролики усередині ролика й мають власні незалежні часові шкали. • Сценарії змушують відеокліпи реагувати на події. 30

Керування кліпу сценарієм 1. Кліпу привласнюється ім'я екземпляра. 2. Вводиться ім'я в інспектор властивостей 3. Визначається кліп, до якого звертається сценарій 31

Установка імені екземпляра кліпу 32

Набір властивостей об'єктів, що звертаються до відеокліпу Атрибути кліпу • загальна кількість кадрів, • поточний кадр, • розміри й т. д. , Методи запуску зупинки кліпу, переходу до певного кадру й т. і. Функції - контроль зчитування всього ролика 33

Приклад програми контролю над екземплярами відеокліпів • 1. Створюємо ролик з одного кадру й приєднаємо до нього елемент stop(). • 2. Створюємо символ кліпу й розмістити його екземпляр на сцену. • 3. Створюємо засоби керування у вигляді кнопок. • 4. До кнопки Play плейєра прив'язуємо сценарій: on (release) { The. Clip. play(); } 34

• 5. Задаємо загальну кількість кадрів у кліпі on (release) { The. Clip. goto. And. Stop (The. Clip. _totalframes); } 35

• 6. Забезпечуємо вибір з декількох кліпів on (release) { The. Clip. load. Movie (" sub-movies/red. swf"); } 36

Музичний автомат для кліпів 37

6. Створення додатків у Flash • Створення калькулятору для розрахунку платежів Інтерфейс калькулятора 38

var amount = 0, period = 0 ; stop(); on (release) { amount = 10*amount + 7; } 39

on (release) { period = 36; goto. Ant. Stop ("Calculate"); } 40

Створення динамічного текстового поля 41

var rate = 0. 0075; var total = amount; for (var t = 0; t < period; ++t); total = total *(1+rate); repayment = total / period; message = period + "платежи по &" + repayment; Результат 24 платежи по £ 249. 252818623463 42

var i = String(Math. floor(repayment)); var f = Math. round( (100* repayment)%100); f = f < 10? "0" + f: String(f); repayment = i + ". " + f ; 24 платежи по £ 249. 25 43