Prototype anything you can imagine

www.framerjs.com

Martin Halík @martinhalik

K čemu protypovat?

Pojďme vytvořit seřazený seznam položek. Kde při dotyku, vybraná položka vystoupí. S tím tam bude i výrazný stín, který se zvětší a ztlumí jak prvek vystoupí nad jiné položky. Jakmile prvek pustíme, vše se plynule seřadí.

“

Kresba

hrubý

Design

Prototyp

Co lze “prototypovat”?

Pohyb

Dotyk

Hloubka

Input

Data

“Proměnlivost”

Prototypování = design.

Framer Studio

EventsStatesLayers Animation

Properties Hierarchy

Types

layerA = new Layer

x: 20, y: 20

width: 256, height: 256

image: "images/icon.png"

opacity: 0.75

scale: 1

Layers

Curves Timing

Chaining

layerA.animate

properties:

curve: "ease"

delay: 2

time: 1

opacity: 0.5Animation

Add Remove

Cycle

layerA.states.add

second:

third:

opacity: 0.5

scale: 0.5

opacity: 1

scale: 1

States

Touch Scroll Drag

layerA.on Events.Click, ->

layerA.on Events.DragMove, ->

layerA.on Events.Scroll, ->

...

...

...

Events

Scroll Page Slider

Prototype anything you can imagine

Sequence

Space

Tools

Tasks

Audio

http://framerjs.com/examples

http://dribbble.com/tags/framerjs

http://facebook.com/groups/framerjs

http://framerjs.com/resources

Díky

http://framerjs.com http://kiwi.com

m@kiwi.com