Videonávod: Vytvorte animovaný formát HTML5

Web sa mení. Teraz, keď všetky moderné stolové a mobilné prehľadávače podporujú formát HTML5 a Adobe, skončili Blesk v prípade mobilných prehliadačov je na čase zamyslieť sa nad tým, aký spôsob doručenia zvoliť - a pre mobilné platformy je HTML5 najlepšou voľbou pre interaktívny obsah.

Hype ( k dispozícii v Mac App Store ) vytvára animovaný a interaktívny obsah HTML5 bez toho, aby ste museli napísať jediný riadok kódu. V tomto návod „Chystáme sa vytvoriť animovaný banner HTML5 pomocou jednoduchého, ale výkonného editora scén Hype, založeného na kľúčových snímkoch animácia systém. Na konci budete vedieť, ako vytvoriť a animovať scénu a ako reagovať na udalosti a udalosti používateľov.

01

01 Ak chcete začať, najskôr pridajte svoje diela na scénu presunutím svojich obrázkov do novej scény Hype. Usporiadajte fotografie od najbližšej po najvzdialenejšie pomocou ponuky Usporiadať, ktorá má niekoľko rôznych spôsobov usporiadania a zmeny veľkosti objektov.



ako používať huion h610 pro

02

02 Zapnite nahrávanie kliknutím na tlačidlo Záznam na pravej strane ovládacích prvkov Animácia. Posuňte časový kurzor na tri sekundy a posuňte oblohu, hory, kopce a trávu doľava. Posunutím každého obrázka ďalej ako za ním, získate pôsobivý paralaxný efekt. Nakoniec premiestnite futbalovú loptu z ľavého okraja scény na pravý. Opätovným kliknutím na tlačidlo Nahrávanie vypnete a kliknutím na Prehrať zobrazíte ukážku.

03

najlepšia šablóna štvorcového priestoru pre návrhárske portfólio

03 Vyberte prvok futbalovej lopty v zozname Hype’s Elements a kliknite na zobrazenú ponuku Vlastnosti. Vyberte vlastnosť Rotation Angle a kliknite na trojuholník zverejnenia futbalovej lopty, aby ste odhalili jeho vlastnosti. Vyberte novú vlastnosť a resetujte časový kurzor na začiatok. Kliknutím na tlačidlo Kľúčový snímok pridáte počiatočný kľúčový snímok. Posuňte časovú os na tri sekundy a opätovným kliknutím na tlačidlo Kľúčový rámec vytvorte koncový kľúčový rámec. Otočte futbalovú loptu prepnutím na Hype’s Metrics Inspector a zmenou hodnoty rotácie v osi Z na 1080 stupňov.

04

04 Zmena funkcií načasovania animácie futbalovej lopty spôsobí, že sa bude pohybovať prirodzenejšie po panoráme. Ak chcete zmeniť funkciu časovania pre jej vodorovný pohyb, dvakrát kliknite na animáciu pre Origin (vľavo) a vyberte funkciu Lineárne časovanie. Rovnakú akciu urobte aj s ostatnými animáciami futbalovej lopty, aby ste vytvorili veľmi prirodzene vyzerajúci efekt.

ako vyrobiť štetec v clip studio farbe

05

05 Keď sa táto scéna skončí, musíme automaticky prejsť na poslednú scénu nášho bannera. Prepnite na inšpektora scény a pozrite si akcie špecifické pre danú scénu. Kliknite na ponuku Akcia priradenú k akcii Pri animácii dokončená a vyberte možnosť „Prejsť na scénu…“. Týmto sa pridajú ponuky Scéna a Prechod, ktoré sa automaticky nastavia na okamžitý prechod na ďalšiu scénu.

Pre tých, ktorí hľadajú inšpiráciu, si pozrite tieto príklady HTML5 z našej sesterskej stránky Creative Bloq.