Theանցը փոխվում է: Այժմ, երբ բոլոր ժամանակակից սեղանադիր և շարժական զննարկիչները աջակցում են HTML5- ին, և Adobe- ը դադարեցրել է Flash- ը բջջային բրաուզերների համար, ժամանակն է մտածել, թե առաքման որ եղանակն է ընտրել, և իհարկե բջջային հարթակների համար, HTML5- ը ինտերակտիվ բովանդակության լավագույն տարբերակն է:
Hype- ը (հասանելի Mac App Store- ից) ստեղծում է անիմացիոն և ինտերակտիվ HTML5 բովանդակություն `առանց ձեզանից պահանջելու մեկ տող ծածկագիր: Այս ձեռնարկի մեջ մենք պատրաստվում ենք ստեղծել անիմացիոն HTML5 բաններ, օգտագործելով Hype- ի պարզ, բայց հզոր տեսարանային խմբագրիչը և ստեղնաշարի վրա հիմնված անիմացիոն համակարգը: Վերջում դուք կիմանաք, թե ինչպես կառուցել և կենդանացնել տեսարան և ինչպես արձագանքել տեսարանի և օգտագործողի իրադարձություններին:
01 Սկսելու համար նախ ավելացրեք ձեր ակտիվները դեպքի վայր ՝ ձեր պատկերները քարշ տալով նոր Hype տեսարանի մեջ: Կազմակերպեք լուսանկարները մոտակաից հեռավոր հեռավորության վրա `օգտագործելով Arrange ընտրացանկը, որն ունի օբյեկտների դասավորության և չափափոխման մի քանի տարբեր եղանակներ:
02 Միացրեք ձայնագրությունը ՝ կտտացնելով Անիմացիայի կառավարման սարքերի աջ կողմում գտնվող Record կոճակին: Timeամանակի կուրսորը առաջ տանեք երեք վայրկյան և երկինք, սարեր, բլուրներ և խոտ տեղափոխեք ձախ:Յուրաքանչյուր պատկեր տեղափոխելը ավելի շատ է, քան նրա հետեւում գտնվողը, ստեղծում է գրավիչ զուգահեռ ազդեցություն: Վերջապես, տեղափոխեք ֆուտբոլի գնդակը տեսարանի ձախ եզրից աջ: Նորից կտտացրեք Ձայնագրությունը կոճակը ՝ ձայնագրությունն անջատելու համար և նախադիտելու համար կտտացրեք Նվագարկել:
03 Hype’s Elements ցուցակում ընտրեք ֆուտբոլի գնդակի տարրը և կտտացրեք Հատկություններ ընտրացանկին, որը հայտնվում է: Ընտրեք Պտտման անկյուն հատկությունը և կտտացրեք ֆուտբոլի գնդակի բացահայտման եռանկյունին ՝ դրա հատկությունները բացահայտելու համար: Ընտրեք նոր հատկությունը և վերափոխեք ժամանակի ցուցիչը սկզբին: Կտտացրեք KeyFrame կոճակին ՝ մեկնարկային բանալին շրջանակ ավելացնելու համար: Elineամանակացույցը հասցրեք երեք վայրկյանի և կրկին կտտացրեք «Հիմնական շրջանակ» կոճակին ՝ վերջնական ստեղնաշարի շրջանակ ստեղծելու համար: Պտտեք ֆուտբոլի գնդակը ՝ անցնելով Hype’s Metrics Inspector- ին և փոխելով դրա Z առանցքի ռոտացիայի արժեքը 1080 աստիճանի:
04 Ֆուտբոլային գնդակի անիմացիայի ժամանակի գործառույթների փոփոխությունը կստիպի այն ավելի բնական կերպով շարժվել երկնքում: Իր հորիզոնական շարժման ժամանակի գործառույթը փոխելու համար կրկնակի սեղմեք Origin- ի անիմացիան (Ձախ) և ընտրեք Linear timing գործառույթը: Նույն գործողությունը կատարեք ֆուտբոլի գնդակի մյուս անիմացիաների վրա ՝ շատ բնական տեսք ունենալու համար:
05 Երբ այս տեսարանն ավարտվի, մենք պետք է ավտոմատ կերպով անցնենք մեր դրոշի վերջնական տեսարանին: Անցեք տեսարանի տեսուչին ՝ տեսնելու Hype- ի տեսարանին հատուկ գործողությունները: Կտտացրեք Գործողություն ընտրացանկին, որը կապված է On Animation Complete գործողության հետ և ընտրեք «Անցնել տեսարան…»: Սա ավելացնում է Scene and Transition ընտրացանկերը, որոնք ավտոմատ կերպով դրվում են անմիջապես անցման հաջորդ տեսարան:
Ոգեշնչում փնտրողների համար ստուգեք HTML5- ի այս օրինակները մեր քրոջ Creative Bloq կայքից:
