Навіны тэхналогій

Агляд прыкладанняў для стварэння анімацыі ў HTML5 Adobe Edge, Sencha Animator, Tumult Hype

Шматспадзеўная серада HTML5 даволі складаная і патрабуе дэталёвага вывучэння. Аднак існуюць спецыялізаваныя прыкладанні, здольныя значна спрасціць задачу па стварэнні анімаванага кантэнту распрацоўніку любога ўзроўню.

У гэтым матэрыяле мы разглядаем тры такіх праграмы: Adobe Edge, Sench Animator і Tumult Hype.

Змест

  • Стварэнне інтэрактыўнай анімацыі HTML5
  • Adobe Edge
  • Sencha Animator
  • Tumult Hype

Праграмны код HTML5 дазволіў вэб-распрацоўнікам выкарыстоўваць рэсурсы браўзэра, працэсара і аператыўнай памяці кампутараў карыстальнікаў для выканання складаных задач. Папярэднія версіі браўзэраў і HTML меркавалі выкананне вялікай колькасці вылічэнняў серверамі або прымушалі кліентаў ўсталёўваць дадатковыя ўбудовы або адоны для прагляду дынамічнага кантэнту сайтаў.

Але цяпер хуткасць ўзаемадзеяння з інтэрактыўнымі старонкамі, напісанымі c дапамогай HTML5, значна ўзрасла. Пры працы выкарыстоўваецца ўсяго некалькі файлаў з кадоўкай ASCII. Акрамя гэтага, HTML5 прыбірае са старонак двайковыя блокі інфармацыі ў Flash і іншым мультымедыйным кантэнце, якія не індэксаваліся пошукавымі сістэмамі. На дадзены момант бізуном любога SEO-спецыяліста з'яўляюцца сайты, якія складаюцца толькі з інтэрактыўнага напаўнення. Прыгожая графіка і захапляльная анімацыя прыемныя для вачэй, аднак інфармацыя на гэтых старонках застаецца нябачнай для пошукавых службаў, якія павінны прасоўваць сайт. У HTML5 ўвесь кантэнт знаходзіцца прама ў зыходным кодзе старонкі, менавіта там, куды могуць дабрацца пошукавыя боты. Пакідаючы бачным змест, HTML5 сумяшчае інтэрактыўнасць старонкі з эфектыўным SEO.

Звярніце ўвагу на тое, што вывучэнне не будзе простым, паколькі ў мове выкарыстоўваецца новыя коды для дынамічных кампанентаў. Для спрашчэння гэтай задачы азнаёмцеся з праграмамі, аб якіх пойдзе гаворка ніжэй.

Стварэнне інтэрактыўнай анімацыі HTML5

Перад разглядам прыкладанняў для HTML5 неабходна надаць увагу таго, як наогул ствараюцца вэб-старонкі на гэтым мове. Існуе два розных спосабу фарміравання дынамічнага кода. Вы можаце выкарыстоўваць JavaScript і JQuery або код CSS3 (Cascading Style. Sheet v3) для атрымання аднолькавых вынікаў. CSS3 і JavaScript, з'яўляючыся праграмамі для рэдагавання скрыптоў, выконваюць задачы кожны па-свойму. CSS3 дазваляе задаць параметры старонкі, такія як фон, колер тэксту, налады дынамічнага ўзаемадзеяння з карыстальнікам, прама ў HTML файле. JavaScript выконвае практычна тыя ж функцыі, але прапануе больш шырокі спектр каманд, чым CSS3, на даволі простым сінтаксісе.

Вэб-дызайнерам, якія працуюць з CSS2, будзе лёгка асвоіцца з сінтаксісам і ўласцівасцямі CSS3. Працоўныя файлы СЅЅ3 звычайна менш па памеры, чым JavaScripts, і імі лягчэй кіраваць. Выкарыстанне JavaScript мяркуе, што будуць існаваць як мінімум два асобных файла JQuery, якія неабходна карэктаваць разам.

Яшчэ адным вялікім перавагай выкарыстання кода CSS3 з'яўляецца тое, што кантэнт сайта не будзе схаваны глыбока ў кодзе JavaScript, які не індэксуецца пошукавымі службамі. Валодаючы неабходнай інтэрактыўнасцю, старонкі, напісаныя на JavaScript, могуць утрымліваць адкрыты код, але пры гэтым трэба памятаць, што некаторыя інструменты HTML5, калі не надаць гэтаму ўвагі, будуць аўтаматычна змяшчаць пэўную частку інфармацыі ў файлы JavaScript. Пры выкарыстанні CSS3 увесь кантэнт можна праглядзець прама на HTML старонцы.

Істотным недахопам CSS3 з'яўляецца сумяшчальнасць з браўзэрамі. На дадзены момант працу з кодам CSS3 падтрымлівае толькі IE9, Firefox 8 і 9, Chrome, пачынаючы з версіі 15 і Safari 5.1 і вышэй. Нядзіўна, што Chrome і Safari імкнуцца падтрымліваць сумяшчальнасць з CSS3: кампаніі Google і Apple хочуць цалкам адмовіцца ад выкарыстання тэхналогіі Flash на сваіх браўзэрах для мабільных і настольных прылад. Акрамя гэтага, CSS3 анімацыя з'яўляецца адзінай тэхналогіяй, якая стабільна працуе ў аперацыйных сістэмах Android, iOS, BlackBerry OS6.

Прыкладання, пра якіх пойдзе гаворка, дазволяць распрацоўнікам ствараць інтэрактыўныя аніміраваныя вэб-старонкі HTML5. Для тых, хто займаўся звядзеннем старонак Flash або Silverlight, метадалогія і інтэрфейс гэтых прыкладанняў здадуцца знаёмымі.

Adobe Edge

Кошт: бясплатна

Платформы: Windows, Mac OS X

Самай новай сярод праграм гэтага класа з'яўляецца «Edge» кампаніі Adobe. На дадзены момант яна яшчэ не выйшла афіцыйна. Першая альфа-версія (Preview 1) стала даступная ў жніўні 2011 года, а цяпер даступная версія Preview 4.


Інтэрфейс Adobe Edge

Edge мае цікавую асаблівасць: гэтую праграму выпусціла кампанія, якая стварыла тэхналогію Flash, якую і спрабуе замяніць HTML5. Можна спадзявацца, што Adobe выпусціць прадукт годнага ўзроўню для стварэння анімацыі. І на дадзены момант справа ідзе менавіта да гэтага. Нават раннія версіі прыкладання Edge зарэкамендавалі сябе як вельмі магутны інструмент у ўмелых руках. Па запэўненнях распрацоўнікаў, фінальная версія праграмы дасць магчымасць ствараць і карпаратыўныя сайты, напоўненыя складаным інтэрактывам, і HTML5-гульні з мудрагелістай анімацыяй, і прыкладанні для мабільных прылад. Праца з Edge у першую чаргу рэкамендуецца дасведчаным аніматарам.


Adobe Edge

Інтэрфейс Edge лёгка вар'іраваць па жаданні: панэлі можна перамяшчаць і змяняць у памерах, працоўны інтэрфейс — цалкам захоўваць для выкарыстання ў наступных працах.

Інтэрфейс Timeline, які выкарыстоўваецца ў Edge, шмат у чым падобны на інтэрфейс іншых прыкладанняў для стварэння анімацыі. Панэлі налад і кіравання выглядае практычна як у Animator. Аднак, у адрозненне ад Animator, рабочыя інструменты можна перамяшчаць, змяняць іх памер, захоўваць пазіцыі працоўнага прасторы для выкарыстання ў наступных працах. Такі інтэрфейс дае магчымасць сачыць за ходам анімацыі лепш, чым гэта адбываецца ў канкурэнтаў Edge.

Напрыклад, кожны аб'ект на часовай шкале выдзелены сваім колерам для зручнасці выбудоўвання аб'ектаў у паслядоўны шэраг, чаго вельмі не хапае ў Animator і Hype. Таксама ў Edge можна вылучаць аб'екты ў групы, для задання ім аднолькавых уласцівасцяў. Многія па вартасці ацэняць функцыю капіявання набору дзеянняў і ўстаўкі іх у патрэбнае месца на часовай шкале. Опцыя «Paste Inverted» дазволіць распрацоўнікам стварыць люстраны набор дзеянняў націскам адной кнопкі. Гэта дадатак, напэўна, здасца зручным для распрацоўшчыкаў з яго ўсплывальным вокнамі, адкрывалымі актуальны код JavaScript для любога элемента і яго дзеянні.

Унікальнай рысай Edge можна назваць арганізацыю кіраваннем рабочым праектам: пасля стварэння файлаў HTML і JQuery яны могуць рэдагавацца рознымі карыстальнікамі, і, пасля захавання ў адпаведнай тэчцы, Edge зверне ўвагу на змены і інтэгруе іх у праект. Такая функцыя, па меншай меры, на дадзены момант, не даступная ні Hype, ні Animator. Прагледзець вынік працы дазволіць убудаваны вэб-рухавічок WebKit. А для выгоды працы з ужо створанымі старонкамі прадугледжана магчымасць імпарту існуючых старонак HTML і канвертавання розных элементаў у успрыманы для Edge выгляд.


Adobe Edge

Для навучання працы з гэтым дадаткам можна скарыстацца вялікім наборам навучальнага відэа і тэставых праектаў, размешчаных у бібліятэцы Adobe. І ўсё ж Edge не здасца лёгкай аниматору-пачаткоўцу. Вопытныя аніматары ацэняць набор інструментаў Edge на цвёрдую пяцёрку і, па ўсёй бачнасці, складуць асноўны кантынгент пакупнікоў гэтага прыкладання.

Важна памятаць, што на дадзены момант даступная толькі альфа-версія прыкладання. Нягледзячы на тое, што пакуль у Edge не выяўлена ніякіх грубых шурпатасцяў, гэта не азначае, што яны не будуць існаваць у релизной версіі. Гэтак жа існуе патэнцыйная магчымасць, што фінальная версія будзе валодаць меншай або вялікім наборам функцый.

Sencha Animator

Кошт: $199

Платформы: Windows (Vista and later); Mac OS X; Linux (32 - і 64-bit)

Сярод трох прыкладанняў, аб якіх ідзе гаворка ў гэтым артыкуле, Sencha Animator з'яўляецца самым старым — першы пре-рэліз быў анансаваны яшчэ ў кастрычніку 2010 года. Аднак гэты ж факт дазваляе даць праграме, афіцыйна выпушчанай у пачатку 2011 года, статус першапраходцы. З дапамогай Sencha Animator вы зможаце зрабіць даволі складаную анімацыю для вэб-старонкі і надзяліць яе добрай інтэрактыўнасцю.


Sencha Animator

Тварыць у Animator проста і зручна. Аб'екты ствараюцца з дапамогай адпаведных інструментаў або дзякуючы маніпуляцыям з патрэбнымі выявамі і відэа файламі. Ветэраны анімацыі знойдуць некаторыя сюрпрызы ў панэлях опцый трансфармацыі і пераўтварэньняў. Усе аб'екты могуць апрацоўвацца асобна або сумесна з астатнімі аб'ектамі, злучанымі ланцугом. Інтэрактыўнасць задаецца з дапамогай вызначэння дзеянні на клік па аб'екце. Для гэтага Animator дае магчымасць стварэння некалькіх сцэнарыяў, такіх як адкрыццё іншы вэб-старонкі, прайграванне анімацыі або запуск пэўнага кода JavaScript. Агульны набор функцый Animator менш у параўнанні з Adobe Edge, аднак дае магчымасць працы з любым існуючым кодам JavaScript.


Sencha Animator

Але вось дзе Animator сапраўды адрозніваецца ад канкурэнтаў, так гэта ў выходных дадзеных, якія атрымліваюцца пры стварэнні дынамічных вэб-старонак. У адрозненне ад Edge і Hype, Animator выкарыстоўвае код CSS3 для стварэння старонак. Паколькі тэхналогія CSS3 з'яўляецца адзінай, стабільна якая працуе на мабільных аперацыйных сістэмах iOS, Android і BlackBerry OS6, гэта дае перавагу праектах, зробленым з дапамогай Animator.

Калі вы плануеце ствараць старонкі HTML5 для карыстальнікаў мабільных прылад, Sencha Animator будзе вялікім падмогай.

Tumult Hype

Кошт: $29.95

Платформы: Mac OS X

Яшчэ адным інструментам для стварэння анімацыі ў HTML5 з'яўляецца праграма Tumult Hype. Гэта дадатак распрацавана для аперацыйнай сістэмы Mac OS X і выкарыстоўвае яе інтэрфейс для стварэння анімацыі без неабходнасці ўводзіць код уручную. Панэлі інструментаў і інтэрфейс апынуцца знаёмымі карыстальнікам Mac.


Tumult Hype

Магчымасць перацягвання элементаў, запісваць іх рух і аўтаматычнае пабудова часовай шкалы вельмі зручная для аніматараў-пачаткоўцаў. Адметнай асаблівасцю Hype з'яўляецца прастата стварэння анімацыі. У дадатку ёсць кнопка «Record», якую вопытныя аніматары палічаць лішняй, а пачаткоўцы — вельмі карыснай, якая дае паўнату адчуванняў старту і заканчэння анімацыі. У Edge і Animator такога няма.

У дадатак да гэтага, у Hype ёсць функцыі перацягвання элементаў і запісу іх руху, з аўтаматычным пабудовай часовай шкалы анімацыі, істотна спрашчаюць навучанне працы з праграмай.

Як і іншыя прыкладання, аб якіх ішла гаворка, Hype можа злучыць любы аб'ект з нарыхтаванымі сцэнарамі — з адкрыццём вэб-старонкі, выклікам падзеі на часовай шкале або запускам JavaScript. Аднак Hype не валодае пашыраным наборам функцыянальных магчымасцяў. У гэтым дадатку не прадугледжана магчымасць групавання аб'ектаў для задання ім аднолькавых параметраў, няма магчымасці паўнавартаснага прагляду створанага праекта ў асяроддзі самога прыкладання. І, што самае дзіўнае, у дадатку няма круглых аб'ектаў па змаўчанні, толькі квадратныя. Вы можаце наладзіць квадрат, каб ён выглядаў як круг, але гэта зойме пэўны час.


Tumult Hype

Выходны прадукт Hype — гэта маленькі файл HTML, аўтаматычна згенераваная тэчка з малюнкамі і файламі JQuery, якія выкарыстоўваюцца ў праекце, і файл бібліятэкі Hype.js. Нягледзячы на прысутнасць CSS3 кода, асноўную долю займае JavaScript. У дадатку ёсць магчымасць выкарыстання PIE для сумяшчальнасці CSS3 са старымі версіямі Internet Explorer. Акрамя гэтага, Hype дазваляе інтэграцыю з сэрвісам Dropbox для імгненнага абмену файламі.

Падвёўшы рысу, можна сказаць, што за 29.95$ карыстальнікі Mac OS X могуць атрымаць прадукт, зручны для пачаткоўцаў, якія хочуць паспрабаваць свае сілы ў стварэнні анімацыі вэб-старонак для мабільных платформаў, паколькі нічога большага, чым простая анімацыя, Hype зрабіць не дазволіць.