Back to all Tutorials Back to all Tutorials
Effects and Gestures
Justinmind Prototyper provides several techniques for adding animation to a prototype. These include fade in/out and slide effects. In this tutorial, we'll list all the effects available and we'll give a description of each. We highly recommend you to take a look at the example provided at the end of this tutorial to understand how the effects work.
An effect can be applied either associated to a hide/show or a set active panel action. That way the effect will be trigger while an element is show/hidden or when a dynamic panel changes it's state. So first you have to select an element that will trigger the action and then select the type of action you want (hide, for instance). Then select the effect from the drop down menu. The execution of an effect can be configured using different easing options. You have an example of each easing type in the example at the end of this tutorial.
Fade
A gradual change in the transparency level of the target. You can define the length of the effect expressed in milliseconds. If it is a hide action, it will be a fade out (to be totally transparent at the end) and if it is a show action, it will be a fade in (to be totally opaque at the end).
Slide
The slide effect animates the height and width of the matched widgets. Durations are given in milliseconds and specified in the lengh input; higher values indicate slower animations, not faster ones. You can add this type of effect to a hide or show action. You can define the direction for the slide effect using the 'side' select list. This 'side' refers to where the widget will slide in or out. So if you define a 'hide'+'slide left' action that will hide the widget towards the left. If you select a 'show' instead, the widget will appear from the left.
Blind
Blinds the element away or shows it by blinding it in.
Bounce
Bounces the element vertically or horizontally several times.
Clip
Clips the element on or off, vertically or horizontally.
Drop
Drops the element away or shows it by dropping it in.
Explode
Explodes the element into multiple pieces.
Fold
Folds the element like a piece of paper.
Highlight
Highlights the background with a defined color.
Puff
Scale and fade out animations create the puff effect.
Pulsate
Pulsates the opacity of the element multiple times.
Shake
Shakes the element vertically or horizontally n-times.
Gestures
Just notice that you can also simulate the swipe gesture using the gestures in the event section and the set focus action. Please note that the only gesture you can simulate with a computer is the swipe gesture. To simulate the rest you need to open your prototype with a mobile device such as an iPad or an Android tablet.
