Interactief storyboard maken met de Auto-Animate functie in Adobe XD

In Adobe XD zit een fantastische animatie functie die je kan gebruiken om prototypes van interactieve producten te maken. Deze mini-les is bedoeld om te integreren in grotere lessen waarbij leerlingen bezig gaan met het produceren van interactieve producten. De mini-les is te combineren met de uitleg op MVI-plein.nl, de tekst is ook te gebruiken om hem om te bouwen naar jouw eigen les waarin je iets interactief wil maken.

Wat is Auto-Animate?

Het is super simpel: de functie ‘auto-animate’ herkent vormen die voorkomen op meerdere schermen. Als Adobe XD deze zelfde vormen herkent zal XD een tween-animatie tussen maken.

De tween start op positie van het object op scherm 1 en eindigt op de positie en vorm zoals op scherm op scherm 2. Deze animatie kan je zelfs op meerdere manieren laten triggeren. Onder andere door het klikken op een object (afbeelding onderaan).

Inspiratie

De opdracht is geinspireerd op het tweenen in Animate. Het tweenen in Animate werkt met ‘keyframes’, waar Animate een beginpositie en een eindpositie nodig heeft. Je kan met een auto-animatie in Adobe XD weliswaar minder geavanceerde tween-bewegingen maken, maar het is wel een stuk gebruiksvriendelijker.

Tutorial

De bijhorende tutorial staat op mvi-plein.nl

https://mvi-plein.nl/knowledge-base/interactief-storyboard/