Click to Display a Textfield

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Click to Display a Textfield
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
Volgende video: Custom Mouse Cursor

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

HTML5 Canvas in Animate CC: JavaScript Basics

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

In Adobe Animate CC kun je interactieve HTML5 publicaties maken met behulp van het zogeheten Canvas-element. Animate CC 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 Adobe Animate 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

 

 

Je kunt ook opdracht geven dat er ergens op de stage tekst wordt getoond.

De vormgeving en de positionering van de tekst kun je dan met CreateJS gaan bepalen.

Ik selecteer de tekstdisplay op de afstandsbediening.

Dubbelklik dan net zolang totdat je enkel het blauwe vlak geselecteerd hebt.

Dit vlak is nog niet omgezet naar een Movie Clip Symbol.

Wil ik hier een klikbaar element van maken dan knip ik deze hier weg met commando X.

Dan activeer ik Scene . Ik maak een nieuwe laag aan

En noem deze ’text’.

Zorg dat de laag geactiveerd is en hierin plak ik het element met Commando V.

Zet het element weer op de juiste positie.

Gebruik eventueel ook de pijltjestoetsen van het toetsenbord.

Ik zet dit element om in een Symbol.

Klik met de rechtermuisknop ingedrukt op het element.

En kies uit het contextuele menu voor ‘Convert to Symbol’.

Geef het symbool een herkenbare naam als bijvoorbeeld ‘Text’.

En zorg dat het een Movie Clip is.

En geef in het properties-venster ook een passende instantienaam op, bijvoorbeeld ‘Textarea’.

Dubbelklik dan in de stage op het symbool.

De eigen timeline van dit symbool verschijnt nu in de stage.

Ik wijzig de naam van 'layer ' in 'display'.

En selecteer het tekstgereedschap.

In de stage typ ik de tekst 'What's your name!'.

maak de tekst op zoals je dit wilt.

Gebruik daarvoor opnieuw het properties-venster.

Kies een lettertype uit, bepaal de tekstkleur en de corpsgrootte.

Met het verplaatsgereedschap kun je de tekst op zijn positie neerzetten.

Ik zoom in met Commando +.

En gebruik het transformeer-gereedschap om de tekst te roteren.

Zorg dat de tekst netjes in de display staat.

Ik wil de tekst op een aparte laag gaan plaatsen.

Dus deze knip ik hier weer weg. ik maak een nieuwe laag aan.

En plak de tekst op de nieuwe laag.

Dan zal ik deze weer opnieuw op zijn plek moeten zetten en ik noem de laag 'text'.

Als je wilt kun je nu natuurlijk ook nog een geneste animatie gaan maken voor de tekstlaag.

Ik wil bijvoorbeeld dat de tekst gaat knipperen.

En ik maak op frame van de tekstlaag een frame aan.

Via het contextuele menu 'Insert Frame'.

Ook voor de display-laag maak ik op frame een frame aan

Want die moet natuurlijk ook in beeld blijven tijdens de animatie.

Daarna zet ik de laag van de display op slot. Zodat hier niets meer mee kan gebeuren.

Klik met de rechtermuisknop ingedrukt ergens in de timeline.

Binnen de eerste frames van de tekstlaag.

En kies uit het contextuele menu voor Classic tween.

Want daarmee kun je animeren met kleur en transparantie.

Om de Classic tween daadwerkelijk te kunnen maken

Moet ik op het laatste frame inklikken.

En plaats ik vanuit het contextuele menu een Keyframe.

Ga dan op frame staan en voeg opnieuw een keyframe toe.

Selecteer dan de tekst in de stage en kijk naar het properties-venster.

De transprantie van de tekst kun je nu wijzigen bij de Color Effect.

Kies dan bij Style voor Alpha.

En zet het percentage op , onzichtbaar.

Dan is dit nu de animatie geworden.

Als je klaar bent met het animeren binnen de tijdlijn van de laag ‘text’.

Keer je weer terug naar Scene .

Standaard spelen geneste animaties binnen de tijdlijn zich automatisch af.

Als ik nu de productie ga bekijken in een browser.

Dan zie je dat de tekst knippert.

Zodra de bezoeker op het tekstvlak klikt wil ik dat de robot antwoord geeft.

Ik keer terug naar mijn doeldocument.

Selecteer het tekst-symbool in de stage.

En dubbelklik in het Code Snippets-venster op ‘Click to Display a Textfield’.

Zodra de bezoeker op de tijdlijn op het element met de instantienaam ‘textarea’ klikt.

Dan wordt de volgende functie uitgevoerd.

Ik wijzig de functienaam in ‘RobotAnswer’.

Zowel bij de function als de eventListener waar deze functie wordt opgeroepen.

De tekst die je wilt tonen typ je bij de variabele ‘TextToDisplay’.

Ik vervang de huidige dummy tekst voor ‘My name is ME!’

De positie van de tekst bepaal je met de x- en de y-positie.

Het document is pixels breed.

Dus als ik de tekst precies horizontaal in het midden wil tonen.

Dan zet ik de x-positie op .

De y-positie zet ik op .

De corpsgrootte en het font kun je ook nog wijzigen.

Net als de kleur. Er staat hier nu een hexadecimale kleur ingevuld.

Als je een andere kleur wilt kiezen.

Dan kun je bijvoorbeeld klikken op het voorgrond kleuricoon.

Een andere kleur uitkiezen.

En daarna de hexadecimale kleurcode kopiëren en plakken binnen het script

Ik bekijk alvast het eindresultaat in de browser.

Ik laat de robot naar voren springen met de Jump-knop.

Daarna klik ik op de knipperende tekst.

En het antwoord van de robot verschijnt.

Deze staat links uitgelijnd op het horizontale midden.

Als ik de text wil centreren dan kan ik nog een function regel gaan toevoegen.

Keer terug naar Animate.

Ik kopieer een bestaande functionregel. Die plak ik eronder.

Daarvoor vervang ik de opdracht voor 'textAlign' en dan is Align met een hoofdletter.

De uitvoering ervan zet ik op “center”.

Ik bekijk opnieuw het eindresultaat.

Ditmaal wordt de tekst gecentreerd in het midden van de stage geplaatst.