A short overview of the interaction/animation part of Antetype. We assume a knowledge of the concept of Antetype (screens, cells, widgets, state etc.).

In this document I will use the "Animation/Interaction Template" as an example:





Adding some simple interactions

Say for example you have designed a Switch with two States, "Normal" and "ON". Now it would be nice if clicking on the switch will toggle between the two states.



examples/interaction.1.zip



Adding an interaction

The interaction is normally defined on the element which receives the event. In our case we want to toggle the state after clicking on our Switch. Therefor select the switch, and open the interaction inspector:







We will explain the upper part (State Change Animatios) later. Since we do not have any defined interaction on the selected cell, the inspector shows all availables events. We want to toggle the state of our widget after clicking on it. Therefor we choose Left Click. Now we have defined the event the inspector switches to the normal view and shows all defined interactions for the selected cell:







After choosing the event (in our case "Left Click") Antetype adds a predefined action for us. Before we go into the details, just try it out. Open a Live Preview or use "Present In-Place". Click on the switch and it will change the state to ON.

Since we want to toggle the State after clicking (simulating a normal Switch) we have to change the Action. Back to the interaction Inspector. We call the upper part Detail and the lower Timeline. Click in the Timeline on the "Change State of This Ele…" entry and you see the action in the Detail area:





The first part is always the name (auto generated if you don’t change ist). The first popup is the Type of the Action, followed by the properties for the action. Ok, we want to toggle the state, we have to change the type of the action: Click on Change State and Choose Toggle State. Try it out in the Live Preview (or In place presentation mode) and click on the switch two times and it always switches between the states.

Without going in the details, this is all it takes to add interactions in Antetype:

• Select the element Choose an event (here Left Click)
• Define what should happen …​ (here Toggle State)

The interaction is attached to the element where it is defined (the Switch). But unlike other parts it is not possible to store it in the Switch Widget. (You have to copy the actions, or the whole cell…​.).



Parts of an interaction

Our interaction looks simple, but like all interactions it uses the three parts:

Event: Here Left Click, when should the Interaction happen

Action Group: Which elements should change (the second entry in the Timeline)

Action: What to do (here Toggle State).

Of course each part can be defined multiply times, for example you might want to change something on click, but something different if the mouse hovers over the element (Mouse Enter). Just add another Event. The same is true for all other parts:







The concept of an event is well known (we will explain the non-obvious ones like "visible in viewport" later on), the concept of an Action Group needs a little bit of explanation. In our simple example we skipped the Action Group and used the automatically defined one:





First line is the name of the action group (if not changed a generated name is used). The second part, the token field is more interesting. The default is the cell itself (marked with an "asterisk" besides the name), but we can use other cells as well. (Click on the "+"-button or use the rubber band).

But the Action Group is only half of the story. Which cells are affected is defined in the action itself. Maybe you noted the PopUp-menu the selected "This Element" in the action. We called it the Specifier. The simplest form used in the example uses the cells defined in the Action Group. Other possibilities are:





All Widgets of the Same Type

All widgets on this screen with the same type as the defined target cells in the Action Group. (In our example this would affect all "Switch"-widgets on the screen.

Children of This Element

The direct children of the element selected.

All Children

All children, no matter how deeply nested in the selected cell

Children with the Same Widget Type

Like Children, but only widgets with the same type like the cells defined in the Action Group are used.

Siblings of This Element

The siblings of the selected element.

Siblings With the Same Widget Type

Like siblings but only of the same widget-type.

Parent

The direct parent cell.

All Parents

Like parents, but all cells up to the screen itself.



Using two actions

For example we use an old-style Radio-Group in the prototype:



Clicking on one radio button should change the state to active, the others to normal state. With Action-Groups this is easy. Just add the following Action to the first Radio-Button:

• Change State of This Element to Selected (make the clicked widget active
• Change State of Siblings with the Same Widget Type to Normal





• Copy the Action (Edit > Copy All Actions)
• Select the other Radio-Butttons and Choose Edit > Paste

examples/radio-group.atype.zip





Event Types



Click Events

Left, Right and Double click are triggered with the click-action. Works on mobile devices too (apart from Right click apparently).



Mouse Enter/Leave

Enter is triggered when the mouse cursor is hovererd above the cell, leave if the mouse cursor leaves it.



Mouse Down/Up

In contrast to the click event, mouse down is fired while the button is down, Up releasing the button. The difference between Click and Up: A click event is fired if the mouse button is down/up on the cell, whereas the up event will be fired if the down occured in another cell.



Key Down/Up

Enter a character in the Text-field. The event is triggered if key is pressed/released. Apart from other Events, it is possible to add more than one Key-Event. For example to pressing "a" should do something, "b" something different.Apart from letters you can use a string describing the key. Some frequently used keys:

For a complete list see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

A little example:

examples/keydown.zip

The key-down-handler are defined on the screen, "Enter" and "Arrow Left" toggle the states of the corresponding widgets. (If you start the example in In-place-presentation mode make sure the screen has the focus).



Repeat

A Repeat-Event is fired periodically every time the time entered is over. But: The Repeat-Event is not fired until it is started with a "Start/Stop Repeat"-Action!

A small example which shows the concept. Say you want to repeatedly change the width of a cell after clicking on it. Wee need a Repeat-event and a way to toggle the repeat.

Add a cell, add a repeat repeat-event and two actions (changing the width back and forth):



Now you need a way to start the repeat. In our case we want to click on the cell itself to toggle the behavior. Therefor add a click-event to cell, and change the predefined action to "Start/Stop Repeat" and choose "Toggle":





In the prototype click on the rectangle to start, click again to stop etc.

examples/repeat-event.atype.zip



Focus

The Focus-Event is fired when the event gets the focus. Only works for cells with "Editable in prototype", buggy. (#625)



Load Screen

is called when the screen becomes active. Can be used to set default- values, hide elements etc. You can define this event on any cell (not just the screen).



Unload Screen

Called while the current screen is visible, just before the new screen appears. Like Load Screen this event ist sent to every cell on the screen just before the next screen becomes active.



Scroll

This event is only fired if a container is scrollable (you can change the scrolling-behaviour in the Style inspector:





The event detail in the interaction inspector contains controls to specify when the event should be called:





You can read it in the following way: if the user scrolls on the container and top/left (the distance scrolled in px) is greater, less or equal the specified number.

It is possible to add more then one scroll-event per element.

The "Animation/Interaction Template" contains some examples. The Screen "New Event: Scroll" contains a simple one:



The "Scrollable Content"-cell contains the event which is used to change the state of the the "Header"-Widget depending on the scroll-position. The first scroll-Event (Scroll Down) is fired when the scroll-top positon is bigger than 50px:





and changes the State of the Header-cell to "Small". The next on is executed if the scroll-top-offset is less than 50px (changing the State of the header to "Normal").



Visible/Invisible in Viewport

These events are called when the element becomes visible/invisible. Used together with scrollable containers. For example you want to change something if the user sees a certain element. An example is given in the template "Animation/Ineraction".

The Screen "New Event: Visible in Viewport" contains a simple example:



The actions for the "Visible In Viewport"-Events are defined on the cells "Section2" and "Section3". If the cell is scrolled into the visible viewport, the script is executed. Here we use an Effect to fade in the blue rectangle.





Actions

Change Property

Is used to change a single property for the selected cell. Used for example to fade-in/out (using opacity).



Change State

Changes the state of the selected element to the given one. If all target-cells are from the same widget type the exact state is used, for others we try to match according to the states name.



Toggle State

Like Change, but this one toggles between the two states.



Hide

Collapses the targe Cells. If you want to keep the layout use Property- Change with opacity 0%. This Action is not animatable.



Show

Shows the element. Not animatable, use Property-Change opacity or an effect-action, if you want it animated.



Goto Screen

Go to the selected Screen. Actions after "Goto Screen" are ignored.



Script

Executes the given JavaScript. See the Javascript section for a more detailed description.



Start/Stop Repeat

Start/Stop/Toggle of a Repeat event.



Effect

Applies a visual effect on the target cells.





1. Duration of the effect
2. Delay
3. Choose between iteration count and infinite
4. iteration count





Timing & Animation

All Actions can have a delay:





An action without delay is executed immediately, if we give it a delay (in milliseconds), Antetype waits for the given time before executing the action. And apart from Hide, Show, Script and Start/Stop Repeat all actions can animate:



1. the duration of the animation (0 does not animate)
2. the animation curve (all use the same, but Goto Screen has different ones.







Each action now has the following timeline:

which is also shown in the timeline of the interaction inspector.



With / After Previous

For actions and Action groups you can define if they should start with their previous action/action group, or after the previous one is finished. Use the With/After Previous-Menu in the Action/ Action Group for this:





The following diagram shows the timeline with the two options. If an action Group has "After Previous" enabled it will be started after finishing all actions of the previous action group.



State Animations

To animate automatic state changes (like Mouse Over, Pressed…) or animate all state changes use the "State Animations":







Effect Actions

There are basically two different effect which are available. Effects which Show elements (Fade In, Bounce In Left, etc.), those which hide elements (Fade Out, Bounce Out Right etc.) and real effects (Flash, Wiggle etc.). The last ones can be applied multiple times, the first can only applied once. But the elements are kept (effects with "in" in the name) or disappear ("Out" in the name).

This can be used for example to make elements appear on load of the screen. The cells are shown normally in edit-mode. One can now apply a fade in effect on Load Screen and the cell is not visible an will fade in when the screen displays.

Due to technical reasons this does not work if the effects are in different action groups with "after previous" set.



The "New Interaction/Animation"-Template contains some nice example of the usage of the Effect-Actions. The first Screen "Effects / Screen Transitions 1" for example uses it two slide-in/out the menu. Just open the Template, switch use View > Present In-Place and click on the Burger menu in the upper left to oppen the menu. Once you did that, we take a look at how this was build. Select the "Icon Button" and open the Interaction Inspector:





On Left-Click we see two Action Groups (Sidepanel and Lightbox). The actions are "Change State of Sidepanel to 'Normal'" and simultaneously use the Effect "Slide in left" in 500ms.

Why do we need the State-Change-Action? We don’t want to show the sidepanel if the user sees the screen for the first time. In this example the sidepanel has two states (Normal and collaped) and use the collapsed state as active.



Screen Transitions

Goto Screen Actions can now have a screen transition too.