Web-ul se schimbă. Acum că toate browserele moderne pentru desktop și mobil acceptă HTML5 și Adobe a întrerupt Flash pentru browserele mobile, este timpul să ne gândim la ce metodă de livrare să alegem - și cu siguranță pentru platformele mobile, HTML5 este cea mai bună opțiune pentru conținutul interactiv.
Hype (disponibil din Mac App Store) creează conținut HTML5 animat și interactiv, fără a fi necesar să scrieți o singură linie de cod. În acest tutorial, vom crea un banner HTML5 animat folosind editorul de scenă Hype simplu, dar puternic, și sistemul de animație bazat pe cadre cheie. Până la sfârșit, veți ști cum să construiți și să animați o scenă și cum să răspundeți la evenimente ale scenei și ale utilizatorilor.
01 Pentru a începe, adăugați mai întâi activele dvs. la scenă trăgând imaginile într-o nouă scenă Hype. Aranjați fotografiile de la cel mai apropiat la cel mai îndepărtat folosind meniul Aranjare, care are mai multe moduri diferite de a aranja și redimensiona obiecte.
02 Activați înregistrarea făcând clic pe butonul Înregistrare din partea dreaptă a comenzilor de animație. Înaintează cursorul timpului la trei secunde și deplasează cerul, munții, dealurile și iarba spre stânga.Mutarea fiecărei imagini mai departe decât cea din spatele acesteia creează un efect de paralaxă captivant. În cele din urmă, mutați mingea de fotbal de la marginea stângă a scenei spre dreapta. Faceți clic din nou pe butonul Înregistrare pentru a opri înregistrarea și faceți clic pe Redare pentru a previzualiza.
03 Selectați elementul mingii de fotbal din lista Elemente Hype și faceți clic pe meniul Proprietăți care apare. Selectați proprietatea Unghi de rotație și faceți clic pe triunghiul de dezvăluire al mingii de fotbal pentru a-i dezvălui proprietățile. Selectați noua proprietate și resetați cursorul de timp la început. Faceți clic pe butonul KeyFrame pentru a adăuga un cadru cheie de pornire. Înaintează linia cronologică la trei secunde și faceți clic din nou pe butonul Cadru cheie pentru a crea un cadru cheie final. Rotiți mingea de fotbal trecând la Hype’s Metrics Inspector și schimbând valoarea de rotație a axei Z la 1080 grade.
04 Schimbarea funcțiilor de sincronizare a animației mingii de fotbal îl va face să se deplaseze mai natural pe orizont. Pentru a schimba funcția de sincronizare pentru mișcarea orizontală, faceți dublu clic pe animația pentru Origin (Stânga) și selectați funcția de sincronizare liniară. Efectuați aceeași acțiune asupra celorlalte animații ale mingii de fotbal pentru a crea un efect foarte natural.
05 Când această scenă a terminat de redat, trebuie să trecem automat la scena finală a bannerului nostru. Treceți la Inspectorul de scenă pentru a vedea acțiunile specifice scenei Hype. Faceți clic pe meniul Acțiune asociat acțiunii On Animation Complete și selectați „Salt la scenă ...” Aceasta adaugă meniurile Scenă și tranziție care sunt setate automat pentru a trece instantaneu la scena următoare.
Pentru cei care caută inspirație, consultați aceste exemple de HTML5 de pe site-ul nostru suror Creative Bloq.
