Publish Settings > Basic & Advanced

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Publish Settings > Basic & Advanced
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.

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

 

 

Zodra je een HTML Canvas productie wil gaan exporteren om te publiceren.

Is het verstandig om eerst de Publish Settings na te kijken en in te stellen.

De instellingen die je hier kiest zijn bepalend voor de opdracht Publish.

Verschillende publicaties moeten soms met verschillende instellingen weggeschreven worden.

Het fijne is...

...dat je dit niet elke keer allemaal opnieuw hoeft in te stellen.

Eenmaal een juiste combinatie van instellingen gemaakt.

Kun je deze opslaan als een profiel bij Profile.

Klik achter Profile op het instellingen-icoon en kies uit het menu voor ‘Create profile’.

Dat doen we nu nog niet maar wel als we straks klaar zijn met het maken van de instellingen.

Sowieso moet je de optie ‘JavaScript/HTML’ aanvinken onder Publish.

Alle tabbladen in het venster zijn dan gericht op het publiceren van een HTML Canvas productie.

In het eerste tabblad ‘Basic’ voer je het volgende in.

Klik achter Output name op het map-icoon.

Kies een doelfolder uit en maak hierin een nieuwe map.

Geef deze voor de productie een herkenbare naam. Bijvoorbeeld 'rocket-publicatie'.

En ik klik op 'Create'.

Zorg dat deze map geactiveerd is en klik dan op 'Save'.

Activeer de optie ‘Loop Timeline’ als je wilt dat de productie zichzelf standaard herhalend gaat afspelen.

Om ook verborgen lagen op te nemen in de publicatie vink je de optie ‘Include hidden layers’ aan.

Dan volgt een deel wat de responsiveness bepaalt van de productie.

Ik wil dat de productie automatisch horizontaal en verticaal gecentreerd komt te staan.

In het gebied waarin deze gepubliceerd gaat worden.

Dus activeer ik 'center stage' en deze zet ik dan op Both.

Liefst wil ik dat het formaat van de publicatie ook wordt aangepast aan de beschikbare ruimte.

Dus vink ik de optie ‘Make responsive’ aan.

Om de publicatie enkel in de breedte aan te laten passen met 'By width'.

Of enkel in de hoogte met 'By height'.

Of zo goed mogelijk allebei.

Wat mij betreft mag de productie ook geschaald gaan worden.

Dus activeer je de optie ‘Scale to fill visible area’.

Met e optie ‘Fit in view’ zorg je ervoor dat in elk geval de hele productie zichtbaar is.

Het kan dan zijn dat er in de hoogte of de breedte een leeg deel aanwezig is.

Met Stretch to fit’ wordt de publicatie in ieder geval beeldvullend binnen de beschikbare ruimte geplaatst.

Maar kan het zijn dat er dan delen van de publicatie buiten het zichtbare gebied vallen.

Ik kies voor ‘Fit in view’, dan maar eventueel een deel van het gebied onbenut laten.

Mocht de productie redelijk veel tijd kosten om te laden, dan kun je een ‘preloader’ insluiten.

Kijk naar een voorbeeld om door op preview te klikken.

Je kunt ook zelf een preloader maken en toewijzen.

Via 'Browse' en dan wijs je het bestand aan.

Een preloader is een animated gif en deze kun je op verschillende manieren maken.

Een publicatie bestaat uit onderdelen als afbeeldingen, geluiden en JavaScript.

Animate schrijft al deze bestanden naar aparte mappen weg.

Ik heb al een doelmap aangemaakt en standaard zal Animate binnen deze map.

De bestanden in de mappen Images, Sounds en Libs opslaan.

Alleen als de bestanden ook daadwerkelijk aanwezig zijn in de publicatie.

Maakt Animate deze mappen aan, anders niet.

Mocht jij de mappen een andere naam willen geven of ergens anders willen opslaan dan kan dat.

Maar ik zou hier juist niets aan wijzigen.

De opties onder tabbald Advanced staan standaard goed ingesteld.

Je moet een goede reden hebben om deze te wijzigen.

Dus hier verander ik niets aan.

In de volgende video behandel ik de tabbladen 'Spritesheet' en 'Webfonts'.