HTML5 Canvas document opstarten en bewaren

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

HTML5 Canvas document opstarten en bewaren
5 (100%) 3 stem[men]

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

HTML5 Canvas in Animate CC: JavaScript Basics

perm_identity Belinda | video_library 31 video's | query_builder 2:04:51

Interactieve animaties met geavanceerde tekentools

In Adobe Animate CC kun je interactieve HTML5 publicaties maken met behulp van het zogeheten Canvas-element. Het programma biedt standaard een aantal codefragmenten aan waarmee je heel snel een interactieve animatie of -infographic kunt maken. Met de nadruk op interactief, want daarvoor gebruik je de zogeheten Code Snippets.

In deze online cursus leer je met duidelijke instructievideo’s hoe je de standaard codefragmenten (Code Snippets) van Animate CC kunt toepassen in jouw publicatie. De cursus is juist speciaal ontwikkeld voor mensen die geen kennis van JavaScript of andere codetalen hebben.

Aan het creëren van de animaties zelf wordt geen aandacht besteed, dus kennis van de applicatie Adobe Animate CC is wel een vereiste. In deze cursus werk je met voorbereidde bestanden. Al kun je natuurlijk de kennis ook direct gaan toepassen in een eigen productie.

Je leert hoe je met de codefragmenten van het programma zowel gebruikers- als tijdsgebeurtenissen activeert. Dus je creëert interactiviteit op basis van een muisklik of als de bezoeker met de muis ergens overheen beweegt (user-event). Of zodra de animatie een bepaald punt in de tijd heeft bereikt (tijd-event). Je kunt dan interacties maken als:
• Animaties opstarten en stoppen
• Illustraties verplaatsen, roteren en positioneren
• Illustraties in- en uitfaden
• Tekst in beeld tonen
• De cursor van uiterlijk doen veranderen

 

 

In deze cursus leer je hoe je gebruik kunt maken van de standaard Code Snippets.

Die Animate aanbiedt voor interactieve html-publicaties.

Het bestandstype dat je hiervoor moet gebruiken is het html Canvas type.

Zodra je een nieuw document aan gaat maken via File > New krijg je een keuzevenster.

Kies hier voor het Type > HTML canvas.

WebGL is een andere techniek die we nu niet behandelen in deze cursus.

Het type Actionscript . creëert uiteindelijk een .swf bestand.

En dat soort publicaties kun je alleen afspelen met een swf-player.

Omdat Apple voor mobiele devices geen flash-players ondersteunt.

Is dit bestandsformaat bijvoorbeeld voor digitale advertenties en interactieve banners niet geschikt.

Want dan wil je natuurlijk een zo breed mogelijk publiek kunnen bereiken.

Dus wij kiezen voor deze cursus altijd voor het HTML Canvas Type.

Bepaal de breedte en de hoogte met de Width en de Height.

Ik hou voor nu dit formaat aan.

Het is handig om de maateenheid voor de linialen in pixels te houden.

Maar mocht je een goede reden hebben om in een andere maateenheid te willen werken.

Dan heb je hier een hele lijst waaruit je kunt kiezen.

De framerate van de productie staat standaard op beelden per seconde.

Met deze snelheid zien de animaties er prima uit.

Je zou kunnen overwegen de Frame rate te verlagen.

Om de bestandsgrootte van een publicatie naar beneden te krijgen.

Lager dan frames per seconde zou je niet moeten gaan.

Want dan worden de animaties niet meer vloeiend afgespeeld maar schrokkerig.

Als je in de productie gebruik maakt van hele trage bewegingen en overgangen.

Zou ik de Frame rate sowieso op houden.

Kies een achtergrondkleur bij de Background Color.

Klik op het kleurvlak om het stalenvenster te activeren en kies een kleurstaal uit.

Of klik op het kleurenwiel om de kleurkiezer te activeren.

En hierin kun je exact de kleur kiezen die je wilt .

Bij de Description staat nu aangegeven dat je met dit documenttype,

interactiviteit aan je productie kunt toevoegen.

Door gebruik te gaan maken van de standaard JavaScript Codes die Adobe Animate aanbiedt.

En dat gaan we in deze cursus dus ook doen. Klik op OK.

Activeer het Properties-venster. Deze vind je onder Window > Properties.

Hierin worden de eigenschappen van het huidig geselecteerde weergegeven.

Op dit moment is er nog niets geselecteerd.

Enkel het document is aanwezig in het werkgebied.

In het Properties-venster staat dat dit een HTML Canvas Document is.

Het bestand is nog niet bewaard vandaar de naam Untitled.

Onderin het venster staat de huidig gekozen Framerate bij fps weergegeven.

Hier kun je de Framerate dus nog op elk moment nog aanpassen.

Ook de breedte en de hoogte kun je nog wijzigen bij de Width en de Height.

Als je de productie automatisch responsive wilt maken.

Dan moet je de optie ‘Scale Content’ aanvinken.

Maar meer over deze output-opties vertel ik in het laatste hoofdstuk.

Als we de productie gaan exporteren en publiceren.

De gekozen achtergrondkleur kunnen we ook hier weer wijzigen.

Dus bijna alle instellingen voor het document kun je later nog weer aanpassen en wijzigen.

Bewaar het document via File > Safe As...

Geef het document een herkenbare naam, bijvoorbeeld 'start'. En klik op Save.