Getting started with Mitya

In this tutorial, we're going to use Mitya to prototype a simple interaction, based on Any.do, a to do app for iOS and Android. Here's what the final output is going to look like.

You can download the assets here if you want to follow along.

The major steps to create the interaction are:
1. Create your interaction's start and end states
2. Define a hot spot for interaction
3. Animate the interaction with the timeline
4. Preview the interaction
5. Export to HTML5

Step 1: Create your interaction's start and end states
First, let's define what our app must look like before the interaction begins.

Creating the start state

1. Double click the empty space to create the start screen.

2. Double click inside the screen. Mitya will ask you to choose images for your prototype. Add the images Today, Tomorrow and Upcoming.

3. Arrange them one below the other, so it looks like the screenshot on the right. (Shift drag to lock movement to one axis). This is going to be our interaction's start state.









With that in place, now let's define what the app looks like at the end of the interaction.

Creating the end state

1. Double click the empty space again to create a new screen. Mitya will ask you if you want to create a blank screen or a duplicate of the current screen - choose "duplicate of current screen". In our example, the end state has all the images of the start state, so it's easier to duplicate that screen and modify it as required.

2. Move 'Tomorrow' and 'Upcoming' further down - remember you can shift drag to lock movement to the vertical axis.

3. Double click inside the end screen and add the images 'make' and 'rejoice'. Move them up to match the screenshot.



Step 2: Define a hot spot for interaction
With the two states defined, we need to create a hot spot to trigger our state change.
1. Click the third button on the toolbar, or press T. The cursor will change into a crosshair.

2. Draw a rectangle over the start screen to define your hot spot. For convenience, you can draw it over the entire screen.

Now, when the user clicks anywhere within this rectangle, our state change will be triggered.


Step 3: Animate the interaction using the timeline
Before we customize the animation, try this: click the preview button

and click anywhere on the hot spot in the preview that pops up. You will see a default animation for your interaction.

Where did that animation come from?
Mitya compares the two states we have created and automatically animates any differences it finds. The 'Tomorrow' and 'Upcoming' images have their 'y' value changed, so Mitya puts a default ease out animation for that change. The to-do items, however, are found only in the end state, so a default fade in is added for them. Of course, these are only convenience functions. You can change or delete the default animations from the timeline.

Exit the preview (Esc) and click on the blue play icon. Mitya will open a timeline tool with the images and animations loaded.

Let's create our animation. As you saw in the linked example, the 'make a to-do list' image must slide in from the left. But, the slide in starts after the 'Tomorrow' and 'Upcoming' labels have moved down. Let's create this effect
1. Move the timeline's playhead to 0.2 seconds.
2. Click on the 'make a to-do list' image and drag it slightly to the left as shown in the screenshot below. When you let go, you'll see a transition being created.

3. To match the example, adjust the transitions for the 'make a to-do list' image as shown below

- Drag the opacity transition to 0.2 (Opacity is the one with the 2 dark squares similar to Photoshop's background pattern)

- Move the playhead to 0.3. Drag the opacity transition's right keyframe to 0.3 seconds (We dragged the playhead first to allow it to snap - this will be made easier in future iterations)
- Move the playhead to 0.34. Drag the translation transition's right keyframe to snap to 0.34 (We could have both the transitions of equal length. However, having a slight offset makes the animation look smoother.)


4. Similarly, create and adjust the transitions for the 'rejoice' image

- Move the playhead to 0.28. Having a slight offset will make for cleaner animation
- Drag the 'rejoice' image slightly to the left just as we did for the previous image.
- Drag the opacity transition to 0.28.
- Move the playhead to 0.38. Drag the opacity transition's right keyframe to snap to 0.38.
- Move the playhead to 0.42. Drag the translation transition's right keyframe to snap to 0.42

Our animation is done!


Step 4: Preview within Mitya
Let's see what that animation looks like! To interact with your animation, use any one of these methods:
Shortcut: Hit 'R' (R for Run preview)
Toolbar: Return to the layout screen and click the preview option
Menu: Choose Project | Run Preview


Step 5: Export to HTML5
Your prototype is now ready to share! You can use:
Shortcut: Cmd+Shift+E to Export
Toolbar: Click the export button
Menu: Choose Project | Export to HTML5

What happens when you export?
Let's say you choose the name "AnyDo" to export your prototype. Mitya will create the following files
1. An HTML file called AnyDo.html which contains the prototype
2. A folder called AnyDo_assets which contains all the images in your prototype
3. A folder called AnyDo_source which has the .js and css files.

Remember to share all the above files and folders for the prototype to run.


So, that was a quick overview of how to get started with Mitya. In future updates, I'll share other tips, shortcuts and workflow ideas on how to get the most from your interaction prototypes.