2.10.2004 г. 2 Основни сведения за Macromedia Flash MX и скриптовия език за програмиране АctionScript MX ЛЕКЦИЯ 1. - презентация

1

2 г. 2 Основни сведения за Macromedia Flash MX и скриптовия език за програмиране АctionScript MX ЛЕКЦИЯ 1

3 г. 3 TellTell me and I will forget, Show me, and I will remember, Let me do it and I will understand.

4 г. 4 I.Въведение във Flash MX- запознаване с основните термини, менюта, ленти, панели, работа с инструментите. Малко история II.Създаване на анимации III.Задаване на общи настройки на movie преди неговото публикуване, еxport и тестването му. Някои полезни клавишни комбинации и възможност за настройването им. Вграждане на филм в уеб страница. Използване на Bandwidth Profiler. Оптимизиране на филми. СЪДЪРЖАНИЕ

5 г. 5 IV.Зареждане на movies в главния филм V.Въведение в ActionScript MX Елементи на езика. Основни стандарти на езика. Прилики и разлики между АctionScript MX 1.0 и АctionScript MX 2.0. Планиране на проекти в интерактивния дизайн. Упражнение: създаване и тестване на първи скриптове. VI.Литература СЪДЪРЖАНИЕ

6 г. 6 През 1984 г. в предградията на Чикаго Марк Кантър (Marc Canter) и неговите двама приятели - Джей Фентън (Jay Fen-ton) и Марк Пиърс (Mark Pierce) създават компанията Mac-roMind. Oт 1984 до 1992 г., MacroMind се посвещават в разработката на аудио, видео и анимация. Изкарват на пазара няколко инова-ционни продукта: MacroMind 3D, Action! и Videoworks, който по-късно прераства в Director. През 1987 г. компанията се мести в Сан Франциско, където прави и мултимедийна рево-люция. През 1992 г. MacroMind се сливат с Paracomp и Authorware, и формират Macromedia. Няколко години по-късно (1997 г.) излиза първата версия на Macromedia Flash. А година след това и към Flash 4 се включва и новосъздаденият език за писане на скриптове – ActionScript 1.0, а тази година и ActionScript 2.0. Въведение във Flash MX- запознаване с основните термини, менюта, ленти, панели, работа с инструмен- тите. Малко история

7 г. 7 ActionScript е скриптовият език на Macromedia Flash MX. Скриптовият език е начин за комуникация с програмата, при който можете да окажете на Flash какво да направи или да го попитате какво става докато филмът върви. Този двустранен начин за комуникация ни позво-лява да създаваме интерактивни филми. Oсигурява еле-менти като действия ( actions ), оператори и обекти, които ние обединяваме в скриптове и казват на нашия филм какво да прави. ActionScript е обектно-ориентиран, интерпретируем език за програмиране. Вградените класове се наричат обекти. Movie clip са най-важните обекти във Flash филм, защото те са мини Flash филми. Потока на изпълнение на скрипта е от първото изявление, последователно следващите до края. Въведение във Flash MX- запознаване с основните термини, менюта, ленти, панели, работа с инструмен- тите. Малко история

8 г. 8 ActionScript е разработен въз основа на ECMAScript (European Computers Manufacturers Association Script) (стандартен език, положил началото и на други езици като JavaScript, JScript - последните две са стандартизираните/ унифицираните версии на езика. Mного от синтактичните конструкции са познати, ако имаме опит с JavaScript. Някои съществени разлики: (Различните обектни модели на документа (Different document object models) - Тъй като Flash работи в собствена среда, съотнесена с елементи като филми (movies) и звуци (sounds), той има напълно различен обектен модел. Няма да намерите вградени обекти като документ (document) и прозорец (window). Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история

9 г. 9 Не се поддържат всички изрази на JavaScript- Като услов-ният и частта за изключения ( exception )- ( try/catch/throw ) блокът. Макар и в АctionScript 2004 вече да се появява и тази особеност. Специфични изрази- Езикът поддържа някои не JavaScript изрази като контейнерите за събития (напр., onClipEvent ) и изпращането на съобщения (напр., tellTarget ). Функцията Eval - Функцията Eval, в ActionScript, оценява единствено променливи референции. Вградени Обекти - ActionScript поддържа множество от вградени JavaScript обекти Date (Дата) и String (Низ), и редица техни методи и характеристики. Например, към обекта String (Низ) липсват стандартни функции за регулярни изрази като search и replace. Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история

10 г. 10 Сцена Инспектор Property Инспектор Actions Панели Име на филм Времедиаграма Лента за информация Кутия с инструменти Главно Меню Фрейм

11 г. 11 Инспектор на компонентите Панел с нови компоненти на Web services Начален прозорец с избор на тип Flash проект

12 г. 12 Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история Стрелка (селектор) Стрелка (подселектор) Линия Ласо Писалка Инструмент за въвеждане на текст Елипса Правоъгълник МоливЧетка Свободна трансформация Трансформация на запълването Бурканче с мастило;) за контурите Запълване Капкомер Гумичка Ръка за предвижване на сцената Zoom in/ Zoom out Цвят на контура Цвят на запълване Бутон за смяна на цвета на запълване с цвета на очертанието Липса на цвят (No Colours) Бутон за фон и контур по подраз- биране, съответно: бяло/ черно Област, показваща х-те на избран инстумент

13 г. 13 Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история Стрелка (селектор) Стрелка (подселектор) Линия Ласо Писалка Инструмент за въвеждане на текст Елипса Правоъгълник МоливЧетка Свободна трансформация Трансформация на запълването Бурканче с мастило;) за контурите Запълване Капкомер Гумичка Ръка за предвижване на сцената Zoom in/ Zoom out Цвят на контура Цвят на запълване Бутон за смяна на цвета на запълване с цвета на очертанието Липса на цвят (No Colours) Бутон за фон и контур по подраз- биране, съответно: бяло/ черно Област, показваща х-те на избран инстумент

14 г. 14 Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история Някои полезни клавишни комбинации и допълнителната им потребителска настройка от заглавната лента менюто: Edit -> Keyboard Shortcuts.. Задаване на потребителски настройки за редактиране, изрисуване, писане на код, заместване на шрифтове, ако липсват със съществуващите (т.нар. Font Mapping ): Това става като изберем от основната лента менюто: Edit -> Preferences.. А сега да създадем първата си анимация:-)))...

15 г. 15 Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история Подготовка на нашето филмче за публикуване в различни формати. Настойката става от менюто File -> Publish Settings или като изберете от инспектора Property характеристики на документа. След като направите необходимите настройки вече сте готови да публикувате филма. Това става като изберете: File -> Export Movie или ако искате предварително да прегледате резултата: Control -> Test Movie. И при двата варианта ви се създават два файла: единият е с разширение.fla, a другия:.swf Вграждане на Movie Clip в Уеб страница: Можете да добавите интерактивно филмче във вашата страница по два начина.

16 г. 16 Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история Първият е директно да укажете на Flash да ви генерира.html страница при настройване Publish Settings, а вторият е като добавите следния код (в етикета ) във вашата уеб страница: Когато настройвате Flash movie за публикуване не трябва да забравяте да укажете и бързината, с която ще се изпълнява.

17 г. 17 Въведение във Flash MX- запознаване с основните тер- мини, менюта, ленти, панели, работа с инструментите. Малко история Като съвет: По-точно колко фрейма в секунда ще бъдат заредени. Тук единица за това е: fps (frames per seconds). За Уеб приложения най-добрата стойност е 12 fps. Задава се в Windows -> Properties. За анимация и презентации обикновено тази стойност е: 24 fps., а за филми в.avi и Quik Time формат, е отново 12 fps. Като съвет: Тествайте крайния резултат на различни машини за да получите оптималния вариант за вас! Горните настройки са просто по стандарт;)))

18 г. 18 Въведение във Flash MX- използване на Bandwidth Profiler Въведение във Flash MX- използване на Bandwidth Profiler. А тестването преди това окончателното публикуване на movie клипа може добре да се направи с така наречения Bandwidth profiler(обхват на връзката). Той осигурява графично представяне на размера на вашия филм по кадри. Ако клипът е предназначен за Уеб, при тестването му (Control -> Test Movie)може от менюто Debug да изберете скоростта на модема, която да бъде емулирана от Bandwidth profiler. Като всеки елемент над червената линия ще предизвика някакви проблеми с произволността на сваляне при посочената стойност (на скоростта).

19 г. 19 Въведение във Flash MX- използване на Bandwidth Profiler Въведение във Flash MX- използване на Bandwidth Profiler. Изборът на този наш помощник в тестването става от: View -> Bandwidth Profiler Лявата му страна показва основната информация за филма. Дясната- съдържа графика, показваща размера на файла във всеки кадър. Като червената линия в нея ни съобщава дали даден кадър протича в реално време при текущата скорост на модема, зададена в менюто Control. Ако стълбът надвишава тази линия, кадърът не протича в реално време и филмът трябва да изчака зареждането на този кадър и там ще има евентуална пауза.

20 г. 20 Въведение във Flash MX- използване на Bandwidth Profiler Въведение във Flash MX- използване на Bandwidth Profiler. Зелената лента, която се появява в горния край при поточното сваляне показва съответно каква част от филма е заредена. Но, за да я видите, трябва да я изберете от View -> Show streaming. Всъщност тя възпроизвежда филма, така сякаш е в реални условия, по зададения сценарий.

21 г. 21 Оптимизиране на филми Оптимизиране на филми. Ако след тестванията с Bandwidth Profiler сте решили, че филмът не ви задоволява като големина, (съответно време на зареждане), Flash предоставя няколко стъпки за оптимално възпроизвеждане. Първо като част от процеса на публикуване, той автоматично изпълнява определена оптимизация на филмите, включително откриване на дублирани форми (символи в библиотеката, например)при експортиране и поставянето им само веднъж във файла, конвертиране на вложените групи в единични и други.

22 г. 22 Оптимизиране на филми Оптимизиране на филми. Освен стандартните начини оптимизация става като прегледаме характеристиките на отделните layers с векторна информация и компресирането на звуковете, ако има такива. Последните две възможности ще разгледаме в следващите лекции.

23 г. 23 Зареждане на movies в главния филм Зареждането на филми в главния ни клип е полезна техника, която може да използваме, за да създадем по-интересни впечатления на потребителите. Също така по този начин не им се налага да свалят един огромен файл, а само съдържанието, което искат да видят. Това става с действието (action) loadMovieNum, което позволява зареждане на.swf файлове в главния филм. Това действие ни позволява да се зареди един филм докато се възпроизвежда друг. loadMovieNum има два параметъра: loadMovieNum(име на елемента, където ще се зареди филма,име външен файл.swf)

24 г. 24 В ВВ Въведение в ActionScript MX

25 г. 25 Елементи на езика. Посредникът между това, което разбираме ние и Flash е езикът ÀctionScript. В един проект на Flash езикът ни дава възможност да задавате инст-рукции, ориентирани към действия (направи еди какво си) и инструкции (анализирай нещо, преди да направиш друго). Подобно на всички езици за про-грамиране, ÀctionScript съдържа множество елементи като думи,препинателни знаци и структури. В продължение на лекциите ще се опитаме да ги изясним.

26 г. 26 Елементи на езика. Ето как изглежда един примерен код на езика ÀctionScript: on (release) { // задаване на стойност на първа променлива var promenliva1:Number = 1.00; // задаване на стойност на втора променлива var promenliva2:Number =.09; // задаваме променлива, чиято стойност е произведението // им var mult:Number = promenliva1 * promenliva2; // визуализация на съобщение за потребителя myTextBox_txt.text = Произведението на двете променливи е: + mult; // изпращане на инстанцията на филмов клип // calculator_mc на кадър 9 calculator_mc.gotoAndPlay (9); }

27 г. 27 Елементи на езика. Минимална азбука: букви A..Z, a..z, цифри 0..9, {}[] + – / *,. Допълнителни знакове са например: ! ? ^ $ & | и др. Имаме следните примитивни и референтни типове: Примитивни- Number (числов тип), Boolean (логически тип), String (тип низ). Референтните типове- Arrays (Масиви) и Objects (Обекти). Като типът Обект се дели на две подгрупи: вградени (Math, Clip, Button, Frame, и др.) и потребителски (създадени по ваша преценка). Има също два специални типа данни: null и undefined. числови ТД ( Number ) логически ТД ( Boolean ) Tип низ ( String )

28 г. 28 Елементи на езика. Идентификатор Служебна дума Прости типове данни са: - Идентификатор ( Identifier ) е име, което се използва за обозначаване на променлива, характеристика, обект, функция, или метод. Първата буква задължително трябва да бъде буква, долна ( _ ) или символът за долар ( $ ). Останалите могат да бъдат буква, число, долна черта, ( _ ), $. - Служебна дума ( Keywords )- ÀctionScript резервира думи за специфични нужди, които се използват в рамките на езика. Така не можете да ги използвате като име на променлива, функция или етикет.

29 г. 29 Списък на служебните думи ( Keywords ) в ActionScript:

30 г. 30 Елементи на езика. Тип Обект ( Object ): Обект е колекция от характеристики. Всяка характеристика има име и стойност. Стойността на характеристика може да е от всеки тип данни във Flash дори тип Обект. Това позволява да организираме обекти в други или да ги влагаме. За да специфицираме обекти и техни характеристики използваме оператора точка (. ).

31 г. 31 Елементи на езика. Можем да използваме вградените ActionScript обекти за достъп и за манипулиране на специфична информация. Например Math обектът има методи, които изпълняват математически операции върху числа, които им подаваме. Обектът Movie clip има методи, които ни позволяват да управляваме Movie clip символни инстанции на сцената ( myButton_btn.play() ). Tип Масив ( Аrray ). Tип NULL- този тип има само една стойност null. Тази стойност означава без стойност, което е липса на данни. Може да се използва в най-различни ситуации.

32 г. 32 Елементи на езика. Tип UNDEFINED - Има само една стойност undefined и се из- ползва за променлива, на която не е била присвоена стойност. Kогато дефинираме за първи път променлива да й присвоим позната стойност. Това се нарича инициализация на променлива и често се прави в първия фрейм на филма. Променливите в ÀctionScript могат да са от всеки валиден за езика тип данни (числов, тип низ, логически, обект и т.н.). Типът на данните, който променлива държи, съдържа въздействие на това как стойността й се променя, когато се присвоява в скрипта.

33 г. 33 Елементи на езика. Типична информация, която можем да държим в променлива включва URL, потребителско име, резултат от математическа операция, дали бутон е натиснат и други. Всеки филм или инстанция на movie clip има свое множество от променливи, всяка от която има собствена стойност, независеща от променливите в другите филми или movie clip. Именоване на променливи- името трябва да отговаря на следните условия: - Да е идентификатор. - Не може да е запазена дума или true или false, null или undefined. - Да е уникално в нейния обхват. В ActionScript 1.0 и ActionScript 1.5 не трябваше изрично да се дефинира типът на променливата. Там самият език определяше типа на данните на променлива, когато й се присвои стойност. На променлива, на която не е била присвоена стойност има тип undefined. Но сега в ActionScript 2.0 имаме строго типизиране данните.

34 г. 34 Елементи на езика. Други специфични термини в ActionScript са: Обект Обект ( Object )- колекция от полета и методи; всеки обект има собствено име и е инстанция на някой клас. В езика ActionScript вградените обекти са например, обектът Date получава информация от съответния системен часовник. Събития/Действия Събития/Действия ( Actions ) са изрази, които оказват на филма да прави нещо по време на изпълнението си. Например, gotoAndStop изпраща маркера за кадър към специфициран кадър или етикет. В случая понятията за действие (action ) и израз са взаимозаменяеми.

35 г. 35 Списък на всички действия в ActionScript:

36 г. 36 Елементи на езика. Kонтейнери на събитие Kонтейнери на събитие ( Event handlers )- представляват специален механизъм, с който се управляват събития като: отпускане на бутона на мишката. Има два вида ActionScript (АS) контейнера: действия и методи. Първите се делят на още два ( on и onClipEvent ). За методите (всеки обект с методи подкатегории, наречени Събития). Функциите Функциите ( Functions )- са блокове от код, които могат да приема параметри и връщат стойности.

37 г. 37 Елементи на езика. Програмите в ActionScript представляват отделни скриптове, които управляват филмо-вите клипове във Flash и ни позволяват да комуникираме с тях. Тези скриптове се получават чрез обединението на елементите на езика като: действия ( actions ), оператори и обекти, на които предварително сме присвоили определени характеристики. Тоест нямаме някаква основна програма, а съвкупност от части код, които отговарят за определен елемент от нашия филм.

38 г. 38 Елементи на езика. Може да създаваме скриптове използвайки интерфейса изтегли-и-пусни на ÀctionScript редактора или да пишем чрез Експерт режима на ÀctionScript или който и да е текстови редактор. ÀctionScript позволява да контролираме сцените във филма (movie) чрез нелинейни функции, да създаваме сложни интерфейси, контролни елементи върху сцената, да събира и проследява входа от потребителя (зрителя), както и да обработва вход от външни източници.

39 г. 39 Елементи на езика. Едноредов коментар е //. Всичко след него до края на ред е коментар и не се зачита като изпълним код. Многоредов коментар е /**/. Всичко затворено вътре е коментар. Блок код– затваря се в скоби {}. Всяко изявление завършва с ; Всички интервали, отмествания ( tabs ) и други празни пространства се пропускат. Има стандартни константи за повечето клавиши, например: BACKSPACE,ENTER,QOUTE,RETURN, SPACE и TAB, които можем да присвояваме.

40 г. 40 Основни стандарти на езика.

41 г. 41 Прилики и разлики между АctionScript MX 1.0 и АctionScript MX 2.0. Разлики: - ActionScript MX 2.0 има някои строги изисквания в синтаксиса, които ни карат да станем по-прецизни и организиране в писането на нашия код. - ActionScript MX 2.0 е от 3 до 7 пъти по-бърз от ActionScript MX 1.0. Това спомага разработката на по-големи приложения. - При ActionScript MX 2.0 имаме чувствителност към регистъра на знаците. Тоест прави разлика между малки и големи букви. Тук в помощ ни идва Check Syntax от панела Actions.

42 г. 42 Прилики и разлики между АctionScript MX 1.0 и АctionScript MX 2.0. Разлики: - При ActionScript MX 2.0 имаме строго типизирани данни. - Структурата Клас (Class) вече трябва да е изнесем в отделен.as файл. Това е различно от предната версия, където кода за дефиницията на клас можехме да сложим в първия кадър от времедиаграмата на филма. Това вече не е възможно, ако създаваме клипове за Flash 7.0 плеъра. Прилики: - Филмовите клипове се управляват със същия синтаксис. myMovie_mc.gotoAndPlay(7);

43 г. 43 Прилики и разлики между АctionScript MX 1.0 и АctionScript MX 2.0. Прилики: - Условните конструкции се същите. if (prom1 + prom2 == 6 ){ // действие } - Имаме същите конструкции за цикли. for (i = 0; i

44 г. 44 Процесът на планиране, важен момент в изграждането на проектите Когато създавате проект, който ще съдържа голямо количество ActionScript, е полезно да извършите малко предварително планиране. Справянето с проблемите във фазата на идейния проект има много повече смисъл, отколкото тяхното решаване във фазата на разработката, където често изискват голямо количество време и напрежение, а времето често не достига !

45 г. 45 Процесът на планиране, важен момент в изграждането на проектите Един от добрите начини да осъществим това планиране е като си отговорим на следните въпроси: I. Какво искате да се случи? – това е най- важният въпрос в процеса на планиране на скрипта. Тук трябва да сме ясни, информативни, но още е рано за определяне на всички детайли. II. Кои части от данни трябва да се проследяват? – и по-точно кои стойности, числа, низове в нашия проект са съществени при изпълне- нието му. III. Какво трябва да се случи във филма, преди да бъде тригериран (задействан) филмът? - тоест задаване и създаване на начални данни при първо изпълнение на клипа, познато като инициализация на данните.

46 г. 46 Процесът на планиране, важен момент в изграждането на проектите Един от добрите начини да осъществим това планиране е като си отговорим на следните въпроси: IV. Кое събитие ще тригерира (задейства) главния скрипт? V. Трябва ли да бъдат вземани решения, когато се тригерира главният скрипт? VI. Какви елементи изграждат сцената? Как функционират те? VII. Как ще изглежда нашата сцена? – скициране на сцената/е.

47 г. 47 Упражнение: създаване и тестване на първи скриптове Упражнение: създаване и тестване на първи скриптове.

48 г. 48 Литература Официалният учебен курс на Macromedia Flash MX ActionScript Официалният учебен курс на Macromedia Flash MX ActionScript, с автори: Дерек Франклин и Джоб Макар, издателство Софт Прес. HELP - HELP - файлът към Flash MX. "FLASH 4 Анимация в Web Ефекти & Дизайн", "FLASH 4 Анимация в Web Ефекти & Дизайн", автори: Кен Милбърн и Джон Крото, издателство: Софт Прес официалният сайт на Мacromedia "Action Script fundamentals seminar Flash MX Project Flash MX Project, с автор: Черил Брумбау-Дънкан ( Cheryl Brumbaugh-Duncan)