Hier is een voorbeeld om variatie van prototypes te maken met behulp van movieclips en een beetje javascript. (Je kunt naar rechts scrollen op je mobiel)
Adobe Animate heette vroeger Adobe Flash. Toen de Flash player het etiquette verouderd kreeg, moest de naam van het programma ook maar op de schop. Jammer dat tegelijk de fantastisch software “Edge Animate” hierbij het onderspit moest delven. De naam Animate verhuisde dus, maar onder de moterkap herken je nog veel van Flash, al was het maar in de extentie .fla. Je kunt met Adobe Animate veel meer dan animaties maken. Het kost wat concentratie en oefening maar door onderdelen als movieclip op te slaan, kun je, binnen elke movieclip, verschillende frames realiseren. Hier zijn de zolen, de veters en bovenkant van de schoen apart als movieclip gemaakt, waar telkens vier (kleur) versies zijn uitgewerkt. Dit zorgt voor 4 x 4 x 4 = 64 variatiemogelijkheden per schoen.
De drie movieclips zijn weer in een movieclip “schoen” gestopt en deze movieclip staat hier vier keer op de stage. Zorg ervoor dat alle movieclip “instance”-namen hebben. Hiermee kun je ze namelijk bereiken via redelijk eenvoudig javascript:
Download dit .fla-bestand als je Adobe Animate hebt, daar vind je het volledige script.
this.schoen1_mc.veters_mc.gotoAndStop(Math.floor( Math.random() * 4) + 1);
this.schoen1_mc.stiksel_mc.gotoAndStop(Math.floor( Math.random() * 4) + 1);
this.schoen1_mc.zolen_mc.gotoAndStop(Math.floor( Math.random() * 4) + 1);
this.schoen1_mc.rotation = ((Math.random() * 10) -5);Omdat hier vaak een paar movieclips naar hetzelfde framenummer springen (de toevalsgetallen zijn soms namelijk identiek), kunnen we beter een array maken van de framenummers. Dit is in het voorbeeld hieronder gedaan. Download dit fla-bestand voor de code.
Tot slot is hier nog een snel gemaakte uitwerking met knoppen en één schoen. De properties y (y-positie), alpha (transparantie) en scaleX & scaleY zijn hier toegepast op de movieclip. Een accent-knop verspringt van positie.
Download dit fla-bestand voor de code.
Conclusie
Adobe Animatie is een prima programma om, naast animaties, interactieve prototypes mee te maken. Kies bij het maken van een nieuw bestand voor HTML5 Canvas ipv ActionScript 3. En zet alle scripts in één keyframe in de bovenste laag (“Actions”) van de scene. Zet nooit actions in de tijdlijn van de movieclips. Veel plezier.