Click to Go to Web Page

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Click to Go to Web Page
Geef een waardering

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

 

 

We gaan een element in de tekening linken naar een andere url.

Zorg dat de CTI weer op het eerste frame staat.

Selecteer in de Stage het logo ‘Robo'.

Bekijk de Symbool- en de instantienaam. Deze zijn beide 'Logo'.

Met het logo geselecteerd in de Stage activeer je het Code Snippets-venster.

open hierin de map ‘Actions’.

En dubbelklik op het script ‘Click to Go to Web Page’.

Bekijk het script in het actions-venster.

Dit is een klein overzichtelijk script.

Je hoeft enkel de url aan te passen om het script te laten werken.

Ik vervang het webadres voor https://www.house-of-training.nl.

De optie “_blank” zorgt ervoor dat de pagina in een nieuw venster wordt getoond.

Je kunt hier ook de optie “_self” gebruiken.

Dan vervangt de nieuwe pagina de huidig actieve.

Maar dan leid je dus mensen en bezoekers van jouw pagina weg.

En dat wil ik niet dus ik hou hem op "_blank".

Voor de leesbaarheid zou ik de functienaam nog willen wijzigen.

Bijvoorbeeld in LinkToWebpage.

Dubbelklik op de naam. Ga naar Commando C om deze te kopiëren.

Want deze naamswijziging mpet dan ook doorgevoerd worden bij de eventListener.

Die deze function activeert. Dus hier plak ik deze met Commando V.

Dan test ik nu het resultaat in een browser.

Ik klik op het 'robo-logo'. En als het goed is opent zich een nieuw browservenster.

Met daarin de opgegeven webpagina.