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. Met de kennis
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.
Eindresultaten
Aan het eind van deze opdracht lever je de volgende producten in:
| Wat | Productie-eisen |
| Een ontwerp dat digitaal interactief kan animeren in Adobe XD. Als basis-bestand gaan we in deze mini-les een grafiek animeren. | · Er is gewerkt met de auto-animate functie van Adobe XD
· Het bestand heeft ten minste 1000 x 1000 pixels · Het bestand heeft ten minste twee artboards · Er is een auto-animate overgang toegevoegd op het moment dat je op één object klikt · Beide artboards bevatten identieke objecten, maar de objecten hoeven niet op dezelfde positie of rotatie te staan. |
Tutorial
Stap voor stap
- Open Adobe XD en log in
Je gaat Adobe XD openen. Je moet waarschijnlijk inloggen. Dit kan met jouw Google account, of misschien zelfs wel met jouw school account!
- Maak een nieuw document aan volgens de productie-eisen
Vraag aan jouw docent wat het formaat van jouw document moet zijn. - Importeren van de bestanden.Je wil iets interactiefs maken. Hiervoor moet Adobe XD wel weten wat er interactief gemaakt moet worden! Dit kunnen zelfontworpen afbeeldingen zijn, of van internet gevonden. Je kan in Adobe XD zelfs vectortekeningen importeren.Exporteer alles wat je nodig hebt in een mappenstructuur. (Bijvoorbeeld ‘Adobe XD Interactief product’ > ‘afbeeldingen’) zodat je het bij de volgende stap kan importeren in Adobe XD.
- Importeren
Importeer alle bestanden die jij wil animeren. Deze plaats je op het eerste scherm (jouw artboard). Zet de bestanden hoe je ze wil!
Ontwerpen in Adobe XD
- Opzetten van het eerste scherm
Zet nu alle bestanden op de juiste plaats. Als je met de tutorial van mvi-plein.nl meedoet betekend dit dat de trein, de palen en de hekken op de juiste plaats staan in jouw scherm.Je kan uiteraard ook nog tekst en andere vormen toevoegen door gebruik te maken van de gereedschappen in Adobe XD. Afhankelijk van jullie opdracht ga je iets bouwen. Dit kan zijn een menukaart, een app-concept een nieuwsbrief een DVD-menu, etc.
- Dupliceer het scherm 1 of 2x (nu heb je twee of drie schermen)
Je gaat het scherm dupliceren (verdubbelen). Nu heb je kopieën van de schermen! Adobe XD herkent dat je twee dezelfde vormen en/of afbeeldingen op twee losse schermen hebt. Als je in de volgende stap nu de vormen of afbeeldingen gaat verslepen, dan zal Adobe XD daartussen kunnen animeren.
- Verplaatsen om te animeren
Je wil een geïmporteerde afbeelding laten bewegen. Dit kan heel makkelijk door in het eerste scherm de afbeelding links in het scherm te hebben. En dan in het tweede scherm dezelfde gedupliceerde afbeelding en stuk naar rechts te verplaatsen. Adobe XD herkent dat je twee dezelfde vormen en/of afbeeldingen op twee losse schermen hebt en zal daartussen kunnen animeren.Je kan in deze stap ook al een 3e scherm maken, waar je weer wat in verplaats
- De animatie laten afspelen met de prototype functie van XD
De animatie moet worden geactiveerd door op bijvoorbeeld een afbeelding of vorm te drukken. In Adobe XD kan je dus van alles een knop maken! Bekijk de tutorial op mvi-plein hoe je dat moet doen. Schakel over naar de prototype weergave. Verbind nu de bij stap 5 gemaakte knop uit scherm 1 met scherm 2.
Stel in het rechtervenster in dat de ‘type’ overgang ‘auto-animate’ is.
- Experimenteer!
Je kan echt helemaal los gaan hiermee! Je zou bijvoorbeeld ook meerdere schermen kunnen maken waartussen steeds één stapje van de animatie zit. Je kan er ook bijvoorbeeld voor kiezen om in plaats van de animatie te starten na een klik, dat hij start na een bepaalde verstreken tijd.
Voeg geluid toe
Voeg nu geluid toe aan jouw animatie. Zoek op google naar ‘free sound effects’ en download een paar geluidseffecten. Dit moet .wav of .mp3 zijn. Volg de tutorial op mvi-plein.nl en voeg de geluidseffecten toe als een extra ‘action’ bij de animatie!
Afsluiting
- Sla het bestand op.Altijd handig om eerst even jouw bestand op te slaan. Klik op CMD + S op jouw toetsenbord, of doe het via de menubalk
- Testen in de voorvertoning
Klik op voorvertoning om jouw interactief ontwerp met animate in de voorvertoning zien. Vraag een klasgenoot om jouw prototype animatie te testen!
- Scherm opnemen
Adobe XD heeft in de voorvertoning een hele handige ‘preview opnemen’ functie. Klik op het opname icoon als je begint. Dan kan je jouw app-prototype laten zien! Als je klaar bent klik je weer op de opname knop. XD zal je dan vragen waar je jouw bestand wil.
- Inleveren
Lever het Adobe XD-bestand en jouw voorvertoning opname in op de door de docent aangewezen wijze.
