Sketching Interactivity

Sketching Interactivity
Using Flash Catalyst
Guillermo Torres

@g1sh #adobemax54 #flashcatalyst

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

Wednesday, December 16, 2009

Guillermo Torres



A pictur
e is
worth a
thousan
d
words

http://bit.ly/2rmUa2

© Chris Jordan

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4


http:/
/bit.ly
/rsFfj



ME

http:/
/bit.ly
/rsFfj



ME

us http:/
/bit.ly
/rsFfj



ME

ever yone
else

us http:/
/bit.ly
/rsFfj



A pictur
e is
worth a
thousan
d
words

...a
prototype
even more
i



Prototypes are great



“What I hear I forget,
what I see I remember,
what I do I understand.”

Xunzi (340-245 BC)

Benefits of Prototyping



Stop
describin
just show g,
it




Start testing
faster




<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:th="http://ns.adobe.com/thermo/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:states>

<s:State name="State1" th:color="0xcc0000"/>
<s:State name="State2" th:color="0x0081cc"/>
explore in
<s:State name="State3" th:color="0x00cc21"/>

<s:State name="State4"/>
</s:states>
<s:BitmapImage source="@Embed('/assets/images/zoom1.jpg')" height="599.95" x.State2="37.9"
code
id="bitmapimage1" y.State2="40" width.State2="579.95" height.State2="680.05" x.State1="78"
y.State1="80" alpha.State2="0.01" includeIn="State1,State2" d:userLabel="Image1"/>
<s:BitmapImage x="60.9" y="61.1" source="@Embed('/assets/images/zoom3_big.jpg')"
id="bitmapimage7" width="497.95" height="598.9" includeIn="State2,State3,State4" alpha="0.01"
d:userLabel="image3" alpha.State3="1" y.State3="44" height.State3="668" x.State3="46"
width.State3="570" y.State4="0" height.State4="775" x.State4="12" width.State4="644"
x.State2="78.9" y.State2="81.1"/>
<s:BitmapImage source="@Embed('/assets/images/zoom2_big.jpg')" id="bitmapimage0" x="60.9"
y="61" height="599.95" width="497.95" includeIn="State1,State2,State3" alpha="1"
d:userLabel="Image2" x.State2="39" y.State2="41" height.State2="704" width.State2="584"
alpha.State1="0.01" x.State1="78.9" y.State1="81" alpha.State3="0.01" y.State3="9"
include
height.State3="750" x.State3="0" width.State3="660"/>
<s:BitmapImage x="60.9" y="61.1" source="@Embed('/assets/images/zoom4_big.jpg')"
id="bitmapimage9" height="600.85" width="501" includeIn="State3,State4" alpha="1"
developers
d:userLabel="Image4" x.State4="31" y.State4="22" height.State4="725" width.State4="604"
alpha.State3="0.01" x.State3="78.9" y.State3="81.1"/>
<s:transitions>
earlier
<s:Transition fromState="State1" toState="State2" autoReverse="true">
t="{bitmapimage0}">
<s:Resize d:noAutoDelete="true" startDelay="0" duration="500"/>
<s:Move autoCenterTransform="true" d:noAutoDelete="true" startDelay="0"
duration="500"/>

<s:Fade duration="500" startDelay="0"/>
<mx:Blur blurYFrom="20" blurYTo="0" blurXTo="0" blurXFrom="20"
d:noAutoDelete="true" startDelay="0" duration="500"/>
</s:Parallel>
<s:Parallel target="{bitmapimage7}">
<s:Fade duration="0"/>
</s:Parallel>
</s:Parallel>
</s:Transition>
<s:Transition fromState="State1" toState="State3" autoReverse="true">

Prototypes are
unattainable



There is never
any time That looks great!
let’s launch tomorrow.

Waaaahhh!
I can’t get
any resources

We spent all this
money, now we
have to throw it
away?!

Pitfalls of prototyping


There is never

Waaaahhh!
I can’t get
any resources

We spent all this
money, now we
have to throw it
away?!



Including prototypes
in your process



Concepting Design Implementation Deploy/
Scope
Maintain

Including prototypes in your process


Scope
Maintain



Sketch

Scope
Maintain



Sketch Throwaway
Prototype

Scope
Maintain



Sketch Throwaway
Prototype Evolutionary
Prototype

Scope
Maintain



Sketch Throwaway
Prototype
1.0

Scope
Maintain



Sketch Throwaway
Prototype

Scope
Maintain



The Sketch/Prototype
Continuum



SKEtching User Experiences - Bill Buxton



What we
Q uick want to learn
Inexpen sive from
sketching
Plen tiful
T imely
Dispo sable



“Sketch ideas to make things, and you are
likely to encourage accidental discoveries.
At the most fundamental level, what we're
talking about is play, about exploring
borders.”
Tom Kelley. Ideo



e Fa ilure
Cel ebrat

“If you are not prepared to be wrong,
you’ll never come up with an original ”
Sir Ken Robinson



“Constraints drive innovation and force
focus. Instead of trying to remove them, use
them to your advantage.”

“Getting Real” —
37 Signals
http://gettingreal37signals.com/



Investment

Sketch Prototype

Time
The Sketch/Prototype Continuum


ut t h e pencil
It’s n ot abo

Boo!

What we
DON’T want
to learn from
sketching


Demonstration



What we learned:
•The benefits of prototyping.
•Including prototyping in your process.
•The sketch prototype continuum.
•Sketching with building blocks.



What we learned:
•Using wireframe components
•Importing your own library of components
•States are used to manage the properties of the shared objects
•If a component has multiple states, a transitions are automatically generated
•Convert artwork to a component to add interactivity
•Use Data Lists to ease the generation of a set of items
•Use the timelines panel to orchestrate motion and transitions.



Try:
http://labs.adobe.com/technologies/flashcatalyst/
Discuss:
http://forums.adobe.com/community/labs/flashcatalyst/
@g1sh #adobemax54 #flashcatalyst

Learn:
http://tv.adobe.com/product/flash-catalyst/
Get Inspired: Thanks!
http://xd.adobe.com

@g1sh



®



Sketching Interactivity

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Sketching Interactivity