Publish Settings > Spritesheet & Webfonts

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Publish Settings > Spritesheet & Webfonts
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

 

 

In het tabblad ‘Spritesheet’ staat de optie ‘Combine image assets into spritesheets’ standaard aangevinkt.

Ook dit is aan te raden.

Alle gebruikte bitmapafbeeldingen worden dan in één bestand verzameld.

Dus niet de vector-illustraties die je in Adobe Animate hebt gemaakt.

Of de vector-illustraties uit illustrator die puur uit vectoren bestaan.

Die worden direct weggeschreven naar het JavaScript-bestand.

Omdat vectoren bestaan uit punt- en lijnverbindingen.

En deze kunnen juist weer perfect in code beschreven worden.

Gebruik je veel bitmap-afbeeldingen.

Dan kost dan misschien één keer flink wat tijd om in te laden.

Maar daarna kunnen de afzonderlijke illustraties veel sneller geactiveerd en afgespeeld worden.

Dat komt de snelheid van de interactieve productie absoluut ten goede.

Afhankelijk van het soort illustraties dat je gemaakt hebt.

Kies je voor het formaat PNG, JPEG of Both.

PNG kies je voor grafische illustraties als vectortekeningen.

JPEG gebruik je voor producties die grotendeels uit fotorealistische afbeeldingen bestaat.

Je kunt het ook aan Animate overlaten om te kiezen wat het beste resultaat levert en voor ‘BOTH’ kiezen.

Als het belangrijk is dat de publicatie zo klein mogelijk blijft kies dan bij de png-settings voor Bit.

Zorg dat de achtergrondkleur op transparant staat zodat transparantie ondersteund blijft.

Bij de JPEG Settings kun je de bestandsgrootte beïnvloeden door de kwaliteit te verhogen of te verlagen.

Hoge kwaliteit levert natuurlijk zwaardere bestanden op dan lagere kwaliteit.

JPEG ondersteunt standaard geen transparantie dus moet de achtergrondkleur een effen kleur zijn

Ik houd deze op wit.

Ik heb geen idee hoe groot mijn spritesheet uiteindelijk zal worden.

Maar dit standaard formaat kun je gewoon aanhouden.

Mochten niet alle afbeeldingen en illustraties hierop passen.

Maakt Animate een volgende spritesheet aan voor de resterende afbeeldingen en illustraties.

Bij het tabblad webfonts kun je de url aangeven van een fontserver.

Mocht je fonts gebruiken die online beschikbaar zijn gezet op het internet.

Moet je hier aangeven waar de browser ze kan vinden.

Ik sla deze instellingen op onder een apart profiel.

Klik op het tandwiel achter Profile en kies voor ‘Create Profile’.

Geef het profiel een relevante naam bijvoorbeeld ‘Webpublicatie’.

En klik op OK

Zoals je zag kun je dit soort profielen ook dupliceren, hernoemen.

Eventueel exporteren naar iemand die onder dezelfde profielen moet wegschrijven.

En zo kun je ook een profiel aangeleverd krijgen die je dan kunt importeren.

En bestaande profielen die overbodig zijn. Kun je met delete profile verwijderen.

Ik heb mijn Settings klaargezet en ik klik op OK.