Het web verandert. Nu alle moderne desktop- en mobiele browsers HTML5 ondersteunen en Adobe Flash voor mobiele browsers heeft stopgezet, is het tijd om na te denken over welke bezorgmethode je moet kiezen - en zeker voor mobiele platforms is HTML5 de beste optie voor interactieve inhoud.
Hype (verkrijgbaar in de Mac App Store) maakt geanimeerde en interactieve HTML5-inhoud, zonder dat je ook maar één regel code hoeft te schrijven. In deze tutorial gaan we een geanimeerde HTML5-banner maken met behulp van Hype's eenvoudige maar krachtige scène-editor en op keyframe gebaseerd animatiesysteem. Aan het einde weet je hoe je een scène moet bouwen en animeren, en hoe je moet reageren op scène- en gebruikersgebeurtenissen.
01 Om te beginnen, voegt u eerst uw middelen toe aan de scène door uw afbeeldingen naar een nieuwe Hype-scène te slepen. Schik de foto's van dichtbij naar veraf met behulp van het menu Schikken, dat verschillende manieren heeft om objecten te rangschikken en de grootte ervan te wijzigen.
02 Schakel de opname in door op de opnameknop aan de rechterkant van de animatieknoppen te klikken. Verplaats de tijdcursor naar drie seconden en verplaats de lucht, bergen, heuvels en gras naar links.Door elke afbeelding verder te verplaatsen dan de afbeelding erachter, ontstaat een boeiend parallax-effect. Verplaats ten slotte de voetbal van de linkerrand van de scène naar rechts. Klik nogmaals op de opnameknop om de opname uit te schakelen en klik op Afspelen om een voorbeeld te bekijken.
03 Selecteer het voetbalelement in de Elementenlijst van Hype en klik op het menu Eigenschappen dat verschijnt. Selecteer de eigenschap Rotatiehoek en klik op het driehoekje van de voetbal om de eigenschappen ervan te onthullen. Selecteer de nieuwe eigenschap en zet de tijdcursor terug naar het begin. Klik op de KeyFrame-knop om een beginnend keyframe toe te voegen. Zet de tijdlijn op drie seconden en klik nogmaals op de knop Key Frame om een afsluitend keyframe te maken. Draai de voetbal door over te schakelen naar Hype's Metrics Inspector en de rotatiewaarde van de Z-as te wijzigen in 1080 graden.
04 Door de animatie-timingfuncties van de voetbal te veranderen, beweegt de bal natuurlijker over de skyline. Om de timingfunctie voor de horizontale beweging te wijzigen, dubbelklikt u op de animatie voor Oorsprong (links) en selecteert u de functie Lineaire timing. Voer dezelfde actie uit op de andere animaties van de voetbal om een heel natuurlijk ogend effect te creëren.
05 Wanneer deze scène is afgespeeld, moeten we automatisch overschakelen naar de laatste scène van onze banner. Schakel over naar de Scene Inspector om de scene-specifieke acties van Hype te zien. Klik op het actiemenu dat is gekoppeld aan de actie Bij animatie voltooid en selecteer ‘Ga naar scène ...’. Dit voegt scène- en overgangsmenu's toe die automatisch worden ingesteld om onmiddellijk over te schakelen naar de volgende scène.
Voor degenen die op zoek zijn naar inspiratie, bekijk deze voorbeelden van HTML5 van onze zustersite Creative Bloq.
