Afbeelding exporteren (poster-image)

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Afbeelding exporteren (poster-image)
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

 

 

Soms wil je puur een afbeelding opslaan van de publicatie.

Zet eventueel de CTI op het gewenste frame dat je wilt exporteren.

Ga naar File > Export > Export Image.

Een export-venster verschijnt.

Kies bij de Preset voor het soort bestandsformaat dat je wilt exporteren.

Belangrijk is om in de gaten te houden hoe ‘zwaar’ de bestandsgrootte wordt.

Onderin het voorvertoningsgebied kun je aflezen hoeveel k het bestand zal zijn.

Kies om voorbeelden naast elkaar te zetten met de optie -Up.

Eén afbeelding zet ik op JPEG met een hoge kwaliteit en één zet ik op een PNG.

Zoom in met het zoom-gereedschap en verplaats vervolgens de afbeelding met het hand-gereedschap.

Ik zie dat de JPEG meer k’s kost.

Maar een slechter resultaat oplevert dan de PNG.

Die blijft veel strakker en scherper.

Dat komt omdat je JPEG voornamelijk goed is in fotorealistische afbeeldingen.

Met veel kleurnuances en overgangen.

En de PNG is juist erg goed in illustraties met effen kleuren.

PNG maakt gebruik van een beperkt kleurenpalet.

Hierdoor kan er wel kleurverschil optreden met het origineel.

Maar de bestandsgrootte blijft wel mooi klein, nu met k.

Kies ik voor PNG .

Dan blijven alle kleuren veel echter behouden.

Maar dat levert dan ook weer een groter bestand op die nu ongeveer net zo zwaar is als de JPEG.

Met nog steeds dat verschil, dat de PNG een beter en scherper resultaat oplevert.

In dit geval kies ik dus voor PNG.

Maar dan de versie om de bestandsgrootte klein te houden.

Je kunt nu ook de afbeelding nog groter of kleiner maken bij ‘Image Size’.

Zorg dat het koppelteken juist geactiveerd is om de verhoudingen te behouden.

Als de afbeelding maximaal pixels breed mag zijn.

Zet ik de width op pixels.

Nu is deze afbeelding nog maar k. Maar nog steeds van goede kwaliteit.

Klik op ‘Save’ om de afbeelding op te slaan.

Kies de doelmap uit. Geef het bestand een naam als bijvoorbeeld ‘rocketPoster’. Klik dan op ‘Save’.

Ik heb de afbeelding geopend in een browser. Dit is het plaatje geworden.

Deze kun je als poster-afbeelding gebruiken voor bij je publicatie.

Keer ik weer terug naar Adobe Animate.

Alle overige Exportmogelijkheden die je ziet bij File > Export.

Als Export Movie, Video en Animated GIF zijn niet interessant voor een interactieve publicatie.

Immers zonder dat de gebruiker ergens op klikt gebeurt er niets.

En de Movie, Video en Animated GIF zijn lineaire producties.

En wij hebben ons juist bezig gehouden met interactieve publicaties.