Protptyping with Pixate

Intro

this is a test

This ia test dfsdfs fsdfsdfsdf

You can user layers and visual assets to create screens

First you create layers; then you add interactions to the layers, and finally add animations to the interactions. That’s about it. This diagram illustrate the basic concept.

For these examples, we’ll use plain layers for everything; in practice, you will use chopped assets for layers, and transparent layers for things like scrolling and containers

Essentially the main thing is to create transparent layers for clipping, scrolling

Add Interactions and Animations to the asset layers - animations are driven by interaction

Interactions

drag tap double tap long press rotate pinch scroll

Scroll is super important - we’ll cover it a lot in these lessons. The rest are pretty straightforward

Interaction properties You can specify options for interactions - for example, constrain a drag interaction to horizontal axis. For the most part, these are all self-explanatory.

Animations These allow you to animate properties of layers

Move Scale rotate Fade Color Image - Adds an image to the specified layer Reorder - allows you to change the order in the display stack; only appears to work within the current group - “bring to front” is not global

A key concept is that these animations can be triggered from the interactions you add. You can rename animations in the right panel

Animation properties Pixate is a bit different from your normal animation program. As opposed to settings keyframes, motion is driven by interactions. For example, when a user drags an item, it’s scale can be animated based on how far it moves.

I like to think of this as data flowing from an an interaction to some object’s animation property. We can choose how we want to handle how this data is sent from one object to another by choosing the animation property.

I think the names are terrible for these, so I’ll try to explain them in plain english.

Continuously with rate (animate based on percentage of interaction) The animation is driven by an interaction; you can scale this interaction by a “rate”. Example: “Move this layer 50% as far as the source layer moves” This is what you use for parallax effects

Continuously to final value (animate to a specific value) The animation also is driven by an interaction, but instead of a rate, you animate to specific values. Example: “When the source object moves between 30-100pts, scale this object from a scale of 1 to 1.4 Use this when you want to directly respond to interactions but need to be more specific with values.

With duration to final value (Animate based on if/then rules) The animation also is driven by an interaction, but you specify animation by a set of if/then rules. Example: “If source’s x position is > 50 AND it’s y position > 50, scale this object 1.5x Use this when you need more complex logic for animation. This property is not continuous because the animation may not occur based on the rules

Important! With all animations, it’s important to note what edge of the object we are using for locations… i.e. if we tell an object to move to x=100. are we walking about the center of the object being at 100? left edge? right edge?

More info at http://help.pixate.com/knowledgebase/articles/500005-10b-animation-properties

Parallax Parallax effects are very common in apps today. Parallax is based on the visual effect of objects closer appearing to move faster, and objects in the distance move slower. The effect is achieved when you move and scale objects by percentages of scroll/drag distance. Remember, the way to do this is to use the “Continuously with rate” animation property, with objects that you want to appear farther away have a smaller rate and scale.

Lessons

Basic interaction and condition In this example, we’ll create a basic layer, add a tap interaction, have it scale when tapped. Then, we’ll add a conditional statement so that we can tap it and have it grow/shrink. Need to show how you use the layer id in conditionals

Make sure to show how triple-tap the app to refresh / choose prototype You can’t autoload the prototype by loading it in the editor

Grouping layers Show how we can nest layers, use them for clipping. Attach a drag interaction and use that to drive animation on both layers, but make the inner layer move fast to simulate parallax.

Scrollable layers This example shows how you use transparent layers as a way to set up a scrollable region. This is something you do a lot in Pixate, so it’s important to understand.

To create a scrollable region 1) Create a layer the size you want your scrollable region to be; then make it transparent 2) Add a scroll interaction to it

Now, whatever layers are children of this layer, will be scrollable within the bounds of this layer.

Scrolling with paging This is a variation of scrollable layers. Often, you want to scroll horizontally between screens. You want the screen to advance to the next screen if dragged far enough, or to “snap” back if the drag is not far enough.

You set this up exactly the same was as scrollable layer, but in addition you toggle “Paging mode” to “Paging” (as opposed to “none”). As far as I know there’s no way to change the “snapping breakpoints”

Animation based on scroll position Now we know how to add interactions and animations to layers. Often, the interactions drive the animation. We saw the example earlier of tapping to scale a layer. We can use Pixate to create pretty advanced animations based on how the user interacts with the prototype.

In this example, we want to show/hide a navbar based on how far the user has scrolled. This is a very common way to setup interactions in Pixate, so it’s very important that you understand what’s going on there.

I should probably spend a bit of time on this example - also, make sure I have a good explanation of this section on the nav layer (where is the 55 coming from?) Why -1?

Where is this 55 coming from? We use the -1 to get the navbar to go in the right direction.

Basic conditions Often, we want things to happen only if certain things (conditions) happen For example, let’s make the box scale only when we drag past (move) a certain point This can’t be done without conditions.

Advanced conditions The last example showed a single “If this, do this. Else….” example. We can extend this to do more

if this … else if this… else if this… else

Yahoo News This puts together scrollable layers, paging layers, animation with scrolling to create parallax. We will recreate the Yahoo News app.

First, create the first news story. It will have (create from scratch) a scrollable layer for the story a image that will scroll slower than the story for parallax This motion will be driven by the scroll

Then, we will duplicate this 4 times for 4 stories (new prototype) Create a new top layer that will use paging May or may not show the 6 pixel space Then add horizontal parallax for the story images Since they move half as fast, they have to be moved over so they go half the distance

Finally, add the top arrow

Make sure they get the source files so they can recreate themselves.

Sharing Pixate allows you to share a prototype online - since these are actual iOS apps, they will need to install the Pixate app to view.

There are a few ways to view on phone:

Via a link on phone Tapping on a pixate prototype link (or cut and paste into mobile browser) will launch Pixate app. If Pixate is not installed on phone, user is taken to App Store Pixate page.

Via QR code on computer Even though QR codes are generally lame, they are kinda handy to load a Pixate prototype from your computer screen. Just load the prototype URL into your computer’s browser, open Pixate app on phone, tap “QR button” point at code.

Pros and Cons of Pixate

There are a Pro Easy to learn - Easier to learn than Framer. Harder than Flinto, but it does a lot more.

Pro Pixate makes it easy to create the “everyday” interactions you see in apps today.

Pro or Con Can only view prototypes on the phone - this is kind of a pain, but to be fair it’s most accurate to view the prototype on the phone.

Con No automatic way to pull content from PSD/sketch (like Framer)

Con Hard to create multiple screen prototypes - does not replace flinto for big flows Depending on what you want to do, this can get devilishly hard in

Con No export - We are starting to see prototyping tools be able to export code (for example, Origami 2.0 allows you to export animation values)

Future of Pixate

Actions Actions allow you to create scripts in Pixate. AFAIK there are not new features available using Actions, but the important thing is that these can be shared with other users (like files). Look for pre-made animations and actions in the future!

Mac App They are launching a Mac app soon so you can work offline. The UI looks exactly the same, so again no new features.