-Лекция. FLASH –те Web-анимациялар құру

1. 
   Анимация. Статика. Динамика.
   
2. 
   SWF форматын және GIF фоматында құрылған файлды экспорттау.
   
3. 
   SWF форматы және оның параметрлері.
   

Flash технологиясы Shockwave Flash (SWF) форматында қолданылатын векторлық графикаға негізделген. SWF құрушылары, графиканың тамаша мүмкіндіктерімен, олармен жұмыс жасайтын құрал жабдықтарды, (шыққан нәтижені WEB-бетке қоса алатын механизмді тиімді пайдалана отырып, үйлесімді өнім таба алды. SWF-тың тағы бір ұтып тұрғаны, бұл форматты кез келген платформада қолдануға болады. (яғни, MacOS операциялық жүйесімен басқарылатын Macintosh компьютерлері мен Windows ОЖ бар IBM компьютерлері). SWF –да құрылған бейнелерге анимация ғана қолданып қоймай оларды интерактивті элементтермен және дыбыспен де әрлеуге болады.

Осындай қосымша қасиеттерінің арқасында SWF форматы тор әрлеушілерінің ризашылығына ие болып, қолданысқа кіріп кетті. Macromedia отбасында дүниеге келгеннен ақ, бұл форматқа Internet Explorer және Netscape Communicator тор броузерлеріне арналған компоненттері (Plug-In) жасалды. Ал бұл, SWF-тың бүкіләлемдік торда одан әрі атышулы болуына септігін тигізді. Нәтижесінде бұл броузер құрушылары SWF-ті қолдайтын компонентті өз өнімдерінің ядросына қосып қоятынын жария етті. Бұл бастаманы бағдарламалармен қамтамасыз ететін тағы да басқа өндірістер қолдап әкетті (мысалға, Adobe фирмасы).

Macromedia фирмасы SWF форматын қолайлы құралдармен, қарапайымдылықпен жабдықтағандықтан, аталмыш формат өзінің табынушыларын бай. Негізінде, бұлай жабдықталған құралдар жетерлік.

Олардың қайсыбірі мультимедиялық презентация жасауға бағытталса (Macromedia Director Shockwave Studio), келесі бірісі графикалық бейнелерді дайындауға бағыталған (Macromedia FreeHand и Macromedia Fireworks), ал үшіншілерімен интерактивті оқу курсын дайындауға болады. (Macromedia Authorware және Macromedia CourseBuilder). Дегенмен тор беттерін құрушылардың арасында Macromedia Flash көп қолданылады, өйткені тек осы өнім ғана, тор бетін аяғына дейін әрлей алады. Ал жақсы әрленген бет әрине көпшіліктің көңілінен шығады. Интернет пайдаланушылардың жақсы көретіндігінен болар, бұл өнімді жай ғана Flash деп атайды. Сонымен Flash технологиясының құрамына не кіреді соны көрейік:
· Векторлық графика;

· Анимацияның бірнеше түрін қолдайды;

· Интерфейске интерактивті элементтер жасауға болады;

· Импортталған графикалық форматтарды қолдайды (оның ішінде растрлық) ;

· FLASH фильмдерін HTML форматына ғана емес, интернетте қолданылатын кез келген форматқа көшіруге болады;

· Платформалық тәуелсіздік;

· FLASH фильмдерді автономдық түрде де, тор броузерінде де көруге болады;

Сөз етілген FLASH құрамын жеке-жеке талқылап өтелік.

Қазіргі кезде тор беттерін әрлеуге көбінесе растрлық графика қолданылады. Оларға GIF (Graphics Interchange Format, ақпарат алмасуға арналған графикалық формат), JPEG (Join Photographic Experts Group – Біріккен бейне эксперттерінің тобы) және PNG (Portable Network Graphics – Жылжымалы графикалық формат) жатады.

Растрлық графика нүктелер жиынтығы (пиксель – pixel) арқылы сипатталады. Бұл нүктелер бір бірімен байланыста болмағандықтан, олардың әрқайсысының түсі мен координатын анықтау керек. Жай ғана мысал, екі-ақ түсті (ақ қара) бейнені сипаттаған кезде, әр пиксельдің түсін беру үшін екілік санау жүйесін пайдаланады: 0 – қара, 1 – ақ.. Ал, 256 түсті бейнені сипаттаған кезде енді әр пиксельге 8-дік санау жүйесін қолданады (256=28). Суреттің сапасы жақсы болу үшін, әр пиксель үшін 24 разрядқа дейін қолданылады.

Растрлық бейнелердің тағы бір кемшілігі - бейне сапасы, пайдаланып отырған монитор пиксельдерінің өлшеміне де байланысты. Яғни кей мониторларда суреттің сапасы әдемі болып тұрса, екінші жерде ол ондай қасиеттен айырылады. Сапасы нашар суреттердің пикселін көбейтуге арналған бағдарламалар болғанымен олар да бұл проблеманы толық шеше алмайды.

Ал енді векторлық графика туралы сөз айтсақ.. Векторлық графика – орналасуын математикалық формулалар арқылы сипаттайтын қисықтар жиынтығынан туратын бейне. Мысалға, кез келген шеңберді бейнелеу үшін 3-4 сан ғана керек, радиус, центр координаттары, сызық қалыңдығы. Осыған байланысты, векторлық графика растрлық графикаға қарағанда бірнеше артықшылықтарға ие:

· Математикалық формулалармен сипатталған суреттер, растрлық графикаға қарағанда жадыда аз орын алады.

· Бейнені өзіміз қалаған кез келген масштабқа сапасын жоғалтпа й, өзгертуге болады.

· Кез келген платформаға еш «қатесіз» көшіруге болды.

Әрине, векторлық графиканың өзіне тән кемшіліктері болады, мысалға, реалға жақын суреттерді бейнелей алмаймыз. Мұндай мәселені шешімі, жан жақты қанағаттандыратын ортақ бір келісім керек. Мінекей, FLASH авторлары осы шешімді тиімді пайдаланды: тор бетін құру кезінде сіз тек қана векторлық емес растрлық бейнелерді де импорттауыңызға болады.
АНИМАЦИЯ

FLASH тағы анимация негізі объектінің қасиетін өзгерту болып табылады. Мысалға, объектілер көрініп немесе жоқ болып кетуі, өзінің тұрған орнын, көлемін, өлшемін, түсін, көріну деңгейін өзгертуі мүмкін т.б.

FLASH та объектіні анимациялау механизмінің үш түрі бар.

· Кадр бойынша(«классикалық») анимация, яғни автор әрбір кадрды өзі жасайды немесе басқа қосымшадан импорттап алып олардың көріну ретін анықтайды;

· Автоматтық анимациялау (tweened анимация), яғни автор бірінші және соңғы кадрды ғана құрады, ал қалғанын FLASH автоматтық түрде құрады. tweened-анимацияның екі түрі бар, біріншісі анимация, объектінің қозғалысына негізделсе (motion animation), екіншісі анимация объектінің трансформациялануына (пішінін өзгерту) негізделген (shape animation);

· Сценарийге негізделген анимация; сценарий – ActionScript деп аталатын FLASH тілінде жазылған әрекетті сипаттау. Бұл тіл синтаксисі көптеген тор шығармаларын жасауда қолданылатын басқа тілдердің синтаксисіне ұқсас келеді. (мысалға, JavaScript және VBScript).

· Біріншіден, авторға енді әр кадрды жеке-жеке құрып отырудың енді қажеті жоқ.;

· Екіншіден, мұндай FLASH «мультфильмін» ойнату үшін алғашқы және соңғы кадрларын сақтап алса болғаны, бұл фильм көлемін әрине кішкене етіп сақтауға септігін тигізеді.

Бірақтан, tweened – анимация, объектінің қасиеттері бірдей өзгеретін тек қарапайым сюжеттерде ғана пайдалануға болады. Ал, ActionScript сценарийі арқылы объектіге күрделі қозғалыстар жасауға болады. Ол үшін, ActionScript тілін білу керек. Сонымен, егер өзіңіздің «мультфильміңізді» құрғыңыз келсе қай механизіммен жүзеге асыратыңызды таңдап алыңыз.

FLASH анимациясының мүмкіндігін көргіңіз келсе Disney (www.disney.com) компаниясының торын тамашалаңыз. Ол жерде FLASH мүмкіншілігін кеңінен қолданған.

Macromedia (www.macromedia.com) компаниясының торында арнайы «күн торы» (Site Of The Day) деген рубрикасы бар, ол жерден FLASH технологиясын жете пайдаланып отырған торларға сілтеме берілген.

Flash арқылы интерактивті фильмдер құруға болады, ойнату барысында тор қонағы тышқан немесе пернетақта көмегімен фильмнің басқа фрагментіне өтіп кете алады, объектілерді қозғалта алады, және формаға ақпарат енгізе алады т.с.с. Flash фильмдердің интерактивтілігі ActionScript тілінде рет ретімен жазылған командалардың көмегімен, оқиғаға қатысты іске асады. Мысалы, мұндай оқиғаға, белгілі біл кадрға секіру саналады. Интерактивті объектіге батырмалар (мысалға, басқару тақтасының қызметін атқаруға жинақталса), фильм фрагменттері немесе жеке кадрлар. ActionScript –ке қатысты емес стандартты командалар бар, оларға фильмді ойнату, тоқтату, дыбысын қосу мен өшіру, берілген URL - ға өту сияқты оншақты стандартты командалар бар. Бұл тілде күрделі сценарийлер де құруға болады, бірақ ол үшін бағдарламалау тәжірибесі болу керек қолданушының.

Flash дыбыстың фильмде қолдану үшін бірнеше жол ұсынады. Сіз, тоқтамай, сюжеттің мазмұнына қарамай, қолданушының әрекетіне жауап бермей ойнап тұра беретін дыбыспен жабдықтай аласыз. Ал проектіңіз одан әрі қызықты болу үшін әр батырманы басқанда дыбыс шығатындай етуге болады. Және тағы бір жолы, ActionScript сценарийлерін пайдалану. Flash та дыбыспен қамтамасыз етудің екі түрі бар оқиғалы басқару (event sound) және ағымды (stream sound).

Оқиғалы басқару дыбыс кезінде берілгендер аяғына дейін жүктеліп болғаннан кейін ғана дыбыс оны тоқтатқанға дейін ойнатыла береді. Ал ағымдағы дыбыс үшін алғашқы кадрлар жүктелгеннен кейін ақ ойнату басталып кетеді.

Дыбыспен жұмыс істеу оңай болу үшін, Flash авторларға келесі мүмкіншіліктерді ұсынады:

· Дыбысты кітапханаларға бөліп қоюға болады, яғни енді бір кітапханадағы дыбысты бірнеше фильмдерде қолдануға болады.

· Дыбысты, экспортталатын фильмнің сапасы мен көлеміне қарап, параметрлерін өзгертуге болады. Яғни автор, дыбыс сығу жолын өзі таңдай алады.

Осыған орай, web-сайттар құрылу технологиясы бойынша, қолданушымен әрекет етуі бойынша қалай жіктелетініне тоқталайық. Ол үшін Интернет дегеніміз не, оның қандай қызметтері бар деген сұрақтарды қарастырып өткенді жөн көрдік.

Internet – TCP/IP протоколдары негізінде қоғамдық телекоммуникациялар каналы бойынша бір- бірімен ақпарат алмасатын компьютерлер және түрлі деңгейдегі компьютерлік желілердің жиынын біріктіретін бүкіләлемдік желі. Интернеттегі ақпарат серверлерде сақталады. Жоғары жылдамдықтағы магистральдармен біріктірілген серверлер Интернет желісінің негізгі бөлігін құрайды. Колданушылар Интернеттің ақпараттық ресурстарына провайдерлер немесе корпоративті желілер арқылы қол жеткізе алады.

Интернет желісінде бірнеше қызметтер бар (e-mail, Usenet, Telnet,WWW, FTP және т.б.), бірақ кеңінен таралған қызмет түрі WWW болып саналады. WWW қызметтері клиент-сервер принципі бойынша құрылған. Қызмет серверлерден тұрады, серверлерге қатынас клиент қосымшаларымен немесе браузерлермен жүзеге асады. Ақпараттық ресурстардың негізгі көлемі Интернет желісінің web-серверлерінде орналасқан web-сайттар түрінде беріледі.

Құрылу технологияларына байланысты сайттардың келесі типтерін атап өтуге болады:

1. Статистикалық HTML немесе XHTML парақтары бар статистикалық сайттар. Статистикалық web-парақтар - сервердің файлдық жүйесінде дайын түрде сақталынатын HTML тілінде құрылған стастистикалық файлдар (мәтін, кесте, суреттер және т.б.).

2. Web-парақтары қолданушының сұранысын орындау кезінде қалыптасатын динамикалық сайттар. Динамикалық сайттар екі түрлі болады:

- сервердің деректер қорында сақталынған мәліметтерден қалыптасатын web-парақтардан тұратын сайттар;

- клиент қосымшаларында (браузерде) қалыптасатын web-парақтардан тұратын сайттар;

3. Macromedia Flash ортасында құрастырылған интерактивті қосымшалар. Flash бағдарламаларының негізгі құралы векторлық графика (Web-ке арналған интерактивті векторлық анимациялар). Flash сайттарға интерактивтілік және динамикалық сипат береді.

4. Жоғарыда көрсетілген сайттарды құру технологиялары пайдалыналатын құрама сайттар.

Статистикалық сайттардың web-парақтарын құру үшін HTML(Hyper Text Markup Language) тілі және CSS (Cascading Style Sheets) стильдердің каскадты кестелері қолданады. Web-парақтың түрлі элементтерін безендіруге және форматтауға CSS қолданылады, нәтижесінде web-парақтың өлшемі кішірейеді.

Статистикалық сайттардың web-парақтарын құру еңбекті көп қажет ететін үрдіс. Пассивті web-парақтары бар статистикалық сайттар компьютердің файлдық жүйесінде HTML редакторлары арқылы қолмен істеледі де, одан кейін сайтқа жүктеледі.

Пассивті web-парақтары бар статистикалық сайттарды негізінде кішігірім тұрақты құрылымы бар сайттарды жасауда қолданады. Мұндай сайттарды жасау үшін түрлі құралдар бар: Блокнот мәтіндік редакторы, Microsoft Front Page, Macromedia Dreamweaver визуалды редакторлары және көптеген сайт құрастырушылары. Сайт құрастырушылары Интернет желісінің кейбір сайттарында орналасқан.

Статистикалық сайтты интерактивті етіп жасау үшін web-парақтарға клиент жағында орындалатын JavaScript және VBScript сценарий тілдерінде жазылған скрипттер орналастыруға болады. JavaScript және VBScript скрипттері қолданушы бір әрекет орындағанда немесе web-парақ жүктелгенде автоматты түрде орындалуы мүмкін.

HTML құжатына DHTML (динамикалық HTML) элементтерін орналастыруға болады. DHTML – интерактивті web-сайт құрастыру тәсілі. Динамикалық HTML JavaScript программалау тілі, CSS стильдердің каскадты кестелері және DOM (құжаттың объектілі моделі) негізінде құрылған.

Қолданушы және сервер арасында мәліметтер алмасу үшін web-параққа HTML форма деп аталатын web-қосымша орналастыруға болады. Форма дегеніміз – қолданушы өзінің ақпаратын енгізіп, батырма басу арқылы web-парақ орналасқан серверге жібере алатын web-парақтың бөлімі. Сұраныстар серверде өңделіп, сәйкесінше шығыс ақпаратты береді. Формада сұраныстар GET немесе POST әдістерімен орындалуы мүмкін. Клиент жағында орындалатын скрипттер web-парақ көлемін ұлғайтатынын естен шығармаған дұрыс.

Қазіргі кезде динамикалық сайттарды құру үшін түрлі web-қосымшалар қолданылады. Web- қосымшаларды құру үшін динамикалық web-парақтар құруды қамтамасыз ететін түрлі технологиялар бар. Web-қосымшаларды құрастыруда екі жолы бар:

- компиляцияланатын модульдер негізінде;