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/
Filmposter animeren tot Motion Poster als interactieve PDF
Hoe zouden filmposters in de toekomst er uit zien? Ken je de kranten uit Harry Potter nog waar de advertenties bewogen? In deze opdracht ga je zoiets zelf maken!
Opdracht:
Animeer jouw favoriete filmposter en maak hem interactief. Je gaat jouw filmposter bewerken in een beeldbewerkingsprogramma. Je knipt de poster op in verschillende stukken. Deze stukken ga je vervolgens weer bij elkaar brengen en animeren. Je kan zelfs hem interactief maken door verschillende acties en animaties in te stellen die moeten afspelen als je met jouw muis er over geen gaat!
Inspiratie:
Deze lessenserie is geïnspireerd op de expositie ‘De Poster is Dood’
‘We worden omringd door plaatjes: reclames vechten overal om onze aandacht. Maar waar posters vroeger stil stonden, wordt onze blik nu steeds vaker getrokken door bewegende beelden. De traditionele grafische vormgeving op papier wordt zo langzaamaan vervangen door motion design op schermen. In de tentoonstelling ‘De poster is dood’ presenteert Design Museum Den Bosch het werk van acht ontwerpbureaus die een rol spelen in de opkomst van de digitale reclamevormgeving in de buitenruimte.’
Varianten:
Geen zin in een filmposter? Je kan ook een natuurlijk een (netflix) serie poster maken, een gamecover-art animeren, muziekalbumhoes animeren, postkaart animeren, bureaublad-achtergrond, etc.
Eindresultaat:
Aan het eind van deze opdracht lever je de volgende producten in:
Jouw geanimeerde Poster geëxporteerd als een interactieve PDF.
Inhoud:
De motion poster bevat minimaal 4 bewegende elementen op het voorplan, 1 bewegend element op het middenplan en 1 element op het achterplan.
Interactief
De motion poster bevat interactieve elementen die reageren op aanraking/klikken of muisbeweging.
Verzorgd
De motion poster ziet er verzorgd uit. De beeldelementen zijn netjes vrijstaand gemaakt en de kleuren zijn op elkaar afgestemd om de sfeer van de originele filmposter te bewaren. De poster is volgens de docent aangewezen wijze ingeleverd met juiste naamgeving.
Remix jouw huisgevel
Herken je gebouwen ook altijd aan gekke details? ‘Dat huis met die kerstlichtjes om de boom’ of ‘dat huis waar die kabouter in de tuin staat’. Je gaat jouw eigen huis ook zo herkenbaar maken.
De opdracht: vrienden zijn zo lang bij jouw huis weg gebleven door Corona dat ze zijn vergeten hoe jouw huis er uit ziet. Je gaat gevel van jouw huis herontwerpen om jouw buren te verwelkomen en hen te helpen het juiste huis te vinden. Dit herontwerp moet geinspireerd zijn op jezelf of jouw familie.
Bijvoorbeeld: Misschien houd je erg van honden? Ontwerp dan een heel groot hondenhuis boven jouw deur!
Deze opdracht is geïnspireerd op het kunstwerk ‘Intellectual Heritage’ van ontwerper Maarten Baas. Een mooi voorbeeld hoe ruimtelijk ontwerp een publieke functie kan bekleden. Het kunstwerk moet straks bezoekers van de nieuwe bibliotheek in Utrecht op de Neude verwelkomen. Maarten wil met het kleurige kunstwerk — dat bestaat uit allerlei neon-teksten — laten zien dat het postgebouw een bijzondere en veelzijdige plek is.