Tutorial 3 - Interactions

Scroll down for detailed text description.
Back to Overview
Download video file for offline viewing

00:00Welcome to Antetype Tutorial 3 - Interactions. In this tutorial we will add a hidden menu to our design and add some interactions to the burger element so that the hidden menu can be revealed.

00:14You can begin this tutorial either from the Start of Tutorial 3 screen in the Tutorial 3 template or continue using the screen you have already created in Tutorials 1 & 2.

00:33If you want to start from the tutorial file - please open the template “Tutorial 3 - Interactions” from the Getting Started section of the Template Chooser.

00:40We are going to update our design by adding a hidden menu and then adding interactions to the burger element so that the hidden menu is shown and hidden when clicked.

00:50This is what our design should look like at the end of this tutorial.

01:11Let’s get started by creating the slide out menu to do this we will first need to put all of the existing elements into a new container, this container will be moved to the side when our menu is visible.

01:25Select the 4 main areas from the screen inspector and then press group on the toolbar and choose a vertical flow group.

01:34Rename the “Vertical Flow Group” to to “Main View”

01:40We don’t want our main view to become smaller than 320px wide so use the Size Editor to set a minimum width of 320px.

01:50With the main view still selected click on the Rectangle button on the toolbar. This will create a rectangle underneath the main view.

02:03Rename the new Rectangle to “Drawer Menu”.

02:10We want our Drawer Menu to appear to the left of the Main View so first we need to drag the drawer menu above the main view in the hierarchy and then we need to select the screen and change the layout mode to horizontal rather than vertical.

02:29Our Drawer Menu should now be to the left of the Main View container.

02:34Let’s set the size for the Drawer Menu so that it is a bit more menu like. Set the width to 275px and the height into a Stretch mode so that it fills the screen vertically.

02:48Open the fill editor and change the background colour to 42 46 48 so that it matches the Header and Footer. You can either enter this manually or do this using the pipette button on the fill editor and then select the header colour.

03:11Now set the border to zero width.

03:16The menu will be a vertical list so set the layout mode to vertical and make sure that the layout alignment is top and centre.

03:26Next we will use a new editor to create an inner shadow for our menu. Press I to open the Inner Shadow Editor.

03:37Set the switch to On and change the angle of the inner shadow to 90 degrees from the default value of 315.

03:45Our menu formatting is now complete and now we can add some menu components. To speed up building the menu we will use some existing widgets that are included in the tutorial file. The menu will consist of a search box at the top and 4 menu items below.

04:02Open the widget inspector and make sure you are looking at the project widgets then find the widget called Search Bar.

04:10Drag this widget onto the Drawer Menu container (remembering to wait for the blue flash before letting go of the widget). The search bar widget should appear at the top of the menu centre aligned. Now find the “Menu Entry” widget and drag 4 of these into the “Drawer Menu”.

04:36When we add the interactions to the design our drawer menu will need to have two states one for when it is visible and one for when it is not visible. To create the two states the Drawer Menu will need to be a widget so let’s convert it to a widget now so that we can add those states later.

04:54Select the “Drawer Menu” and Click Create Widget on the toolbar and we’ll use the default name so just press Create.

05:06Let’s finish the styling for our menu - first rename each of the menu item widget instances in the screen inspector to

  • Home
  • Features
  • Widgets
  • Shop

05:30Now change the text for each widget to match their names.

05:45Our design is showing the Home screen currently and the Menu Entry widget has a special state setup to highlight the selected item. Select the Home element and then from the Style bar change the selected state from “Normal” to Selected- this will change the text to an orange colour.

06:06If we select the “Drawer Menu” element we can see that it is in the “Normal” state - this is the state we shall use when the menu is visible. We also need to create a state for when the menu is not visible.

06:20To do this we open the states list on the style bar and choose manage states. This will open the Style Inspector to enable us to manage the states for this widget.

06:30Click on the plus button at the top of the list of current states this will show you a list of state types - for our state we need a custom state type. Name the new state “Collapsed”.

06:45The collapsed state is now selected and we can now change style properties for this state without affecting the styling of the normal state.

06:56Our style change is very simple we want our Drawer Menu to be collapsed when in the collapsed state.

07:03Click on the Visibility button in the style bar to show the visibility editor.

07:09There are 3 options that are available: Visible, Hidden and Collapsed. To understand the difference between hidden and collapsed let’s first click on the hidden option. You should now see that the menu has disappeared from the screen, but the Main View is still pushed from the screen. If we choose the collapsed option you should then see that the automatic layout system in antetype brings back the Main View to take up the entire screen.

07:40Leave the setting on collapsed and close the visibility editor.

07:47We now have a drawer menu widget with two states so lets add the interaction to move between those states.

07:52We want our Burger element to respond to clicks by showing and hiding the Drawer Menu.

07:58Select the Burger element in the Header.

08:00Now change to a new inspector the interaction inspector.

08:05We can add interactions for different event types, but in this case we want to respond to a mouse click - so press the plus sign to the right of Mouse Click in the list. This will create a new action that will be triggered when someone clicks on the burger menu.

08:25From the drop down menu at the top of the action we want to choose the action of toggle state. Using the next button we can select the target widget, which is the Drawer Menu.

08:40Using the final two lists we can select what state the drawer menu should change to upon the first click and the second click. Choose Normal for the first state and Collapsed for the second state.

08:55Let’s test our new interaction - we can do this by entering presentation mode. We do this from the toolbar by clicking on the Present button and then choosing in-place or full screen mode. For this tutorial we will use in-place mode, but please do experiment with the full-screen mode afterwards.

09:15When you enter in-place presentation mode the main window of Antetype is no longer an editing tool it is now a clickable prototype that will respond to interactions. To find out where the clickable or hot areas of the prototype are you can hold down alt and they are then highlighted in blue.

09:40In the case of our design we only have a single clickable area on the burger element. Click on the burger element and you can now toggle the visibility of the drawer menu. Antetype will automatically change the layout for you as the Drawer Menu is shown and collapsed.

09:51To leave presentation mode press ESC or click on the stop button in the toolbar.

09:58Well that’s it - we have now added some interaction to our design with our burger element and hidden menu. Interactions enable the creation of dynamic designs that can communicate to clients, users and developers exactly what you have intended as a designer to happen when a system is interacted with.

In the next tutorial we will take our mobile website and add the rules so that the design can respond to changes in the width of the viewport, so called responsive design.

We hope you have enjoyed this tutorial, please visit antetype.com/learn for more.