Adobe Illustrator is de perfecte tool om infographics in te maken. Alle onderdelen kun je zelf tekenen en op een duidelijke manier ordenen. Maar, als je zo’n infographic gemaakt hebt dan wil je ‘m natuurlijk ook op het web gebruiken. Vaak worden de letters dan te klein, of leent het originele formaat zich niet echt voor online plaatsing. Één van de beste oplossingen is dan om een interactieve, klikbare infographic te maken in Adobe Animate. Je kunt gewoon je Illustrator-document importeren in Adobe Animate, en van daaruit animeren. Hieronder vind je een aantal video’s over hoe je zo’n infographic maakt.
Het eindresultaat
Voordat we beginnen plaats ik hieronder eerst het eindresultaat: de geanimeerde, klikbare infographic. Dit is een aangepaste versie van een infographic die ik een tijdje geleden voor Zeeuwse energiemaatschappij DELTA heb gemaakt. De infographic gaat over de samenhang tussen de energieleverancier, de producent en de consument. Je kunt op de infoknoppen klikken en wat informatie bekijken (die is voor de tutorial vervangen door lorum ipsum-tekst).
Adobe MAX
In 2018 heb ik een aantal sessies over dit onderwerp verzorgd op de Adobe MAX conferentie in Los Angeles. Dit jaar, in 2019 doe ik dat weer, maar dan met wat andere oefeningen. Na de sessie in 2018 heb ik samen met het Adobe Animate-team alle onderdelen in vijf korte video’s samengevat. Die zijn nu te vinden op het Adobe Animate YouTube-kanaal, maar je kunt ze ook vinden als je Adobe Animate opstart. Als je dan naar de Learn-sectie gaat dan vind je de tutorials.
Het enige nadeel is (nu nog) dat de tutorials daar allemaal in willekeurige volgorde staan. Je kunt daar wel de oefenbestanden downloaden die erbij horen. Er zijn ook nog een paar andere opties die je hieronder kunt lezen.
Adobe Animate Help pagina
Je vindt de hele reeks namelijk ook op volgorde én helemaal uitgeschreven op de Adobe Help- en zelfstudiepagina. De oefenbestanden kun je daar ook vinden.
Hoe maak je zo’n interactieve infographic?
De site hierboven is al erg handig, maar ik zal hieronder ook nog even alle video’s in de goede volgorde plaatsen met wat korte uitleg daarbij.
Oefenbestanden
Op de Adobe-site kun je de bestanden downloaden die bij deze video’s horen. Een directe link naar deze bestanden vind je hieronder
Download de Adobe Animate infographic bestanden (634KB)
Video 1: importeer je Illustrator-bestand in Adobe Animate
In deze video leer je hoe je je Adobe Illustrator-document het best vormgeeft, zodat je die zonder problemen kunt importeren in Animate. Dit is best een belangrijk onderdeel, omdat alle Illustrator-lagen direct worden omgezet naar Adobe Animate tijdlijn-lagen.
Video 2: beweeg je eerste object met een Motion Tween
Met Motion Tweens kun je objecten laten bewegen van de ene positie naar de andere. In deze oefening beginnen we eenvoudig. We animeren een wolk van links naar rechts. En, het leuke is dat de animatie gewoon weer opnieuw begint als de wolk aan de rechterkant van het scherm verdwenen is.
Video 3: roteer een object in Animate
Rotaties komen vaak voor in infographics. Denk aan een klok, een molen, een roterende pijl en ga zo maar door. In deze video zie je hoe je de wieken van een windmolen animeert. Daarna laat je een paar pijlen roteren.
Video 4: animeer een object langs een Motion Path
Ik denk dat deze functie bij veel Animate-gebruikers is weggezakt. Je kunt namelijk objecten langs een vooraf gemaakt pad laten animeren. In deze video animeer je een aantal pijlen langs de vorm van een buis. Hiermee geef je aan hoe gas en elektriciteit van de producent naar de gebruiker getransporteerd worden.
Video 5: voeg interactiviteit toe en maak klikbare knoppen
En dan de laatste video alweer. In deze video zie je hoe je interactiviteit kunt toevoegen aan een knop. Zodra je op de knop klikt opent een popup, en als je er weer op klikt dan sluit die zich weer af. De acties voeg je toe door gebruik te maken van een hele handige Actions Wizard. Die leidt je in één keer door het hele stappenplan heen.
Meer weten?
Tijdens deze tutorials maakte ik gebruik van Adobe Illustrator en Adobe Animate. Mocht je nu meer willen weten over Illustrator zodat je zelf infographics kunt tekenen, neem dan eens een kijkje op de pagina van de tweedaagse Illustrator cursus. Wil je meer weten over infographics in Adobe Animate? Laat me dat dan zéker even weten in een bericht op de contactpagina. Er zijn al twee Animate sessies gepland in Breda voor Adobe MAX 2019 waaraan een aantal oud-cursisten deelnemen. Deze sessies zitten al vol, maar ik overweeg er komend jaar misschien nog een paar in te plannen.