Date post: | 06-Jul-2015 |
Category: |
Technology |
Upload: | g1sh |
View: | 302 times |
Download: | 0 times |
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Sketching Interactivity Using Flash CatalystGuillermo Torres
@g1sh #adobemax54 #flashcatalyst
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Guillermo Torres
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Guillermo Torres
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4
© Chris Jordan
A picture is worth a thousand words
http://bit.ly/2rmUa2
Wednesday, December 16, 2009
http://bit.ly/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
Wednesday, December 16, 2009
http://bit.ly/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
ME
Wednesday, December 16, 2009
http://bit.ly/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
us
ME
Wednesday, December 16, 2009
http://bit.ly/rsFfj
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
us
ME
everyone
else
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6
A picture is worth a thousand words
...a prototype even more
i
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Prototypes are great
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8
“What I hear I forget, what I see I remember, what I do I understand.”
Xunzi (340-245 BC)
Benefits of Prototyping
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9
Stop describing, just show it
Benefits of Prototyping
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10
Start testing faster
Benefits of Prototyping
Wednesday, December 16, 2009
<?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"/> <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" 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" 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" 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> <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"> <s:Parallel> <s:Parallel target="{bitmapimage1}"> <s:Transition fromState="State2" toState="State4" autoReverse="true"> <s:Parallel> <s:Parallel target="{bitmapimage1}"> <s:Fade duration="500"/> </s:Parallel> <s:Parallel target="{bitmapimage7}"> <s:Fade duration="500"/> </s:Parallel> <s:Move autoCenterTransform="true" duration="500" startDelay="0"/> <s:Resize duration="500" startDelay="0"/> <s:Fade duration="500" startDelay="0"/> </s:Parallel> <s:Parallel target="{bitmapimage0}"> <s:Fade duration="500"/> </s:Parallel> </s:Parallel> </s:Transition> </s:transitions> <fx:Private> <th:Guide x="61"/> <th:Guide x="559"/> <th:Guide y="61"/> <th:Guide y="659"/> </fx:Private></s:Group>
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11
explore in code
Benefits of Prototyping
include developers earlier
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Prototypes are unattainable
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13
There is never any time
I can’t getany resources
We spent all this money, now we have to throw it away?!
That looks great! let’s launch tomorrow.
Waaaahhh!
Pitfalls of prototyping
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14
There is never any time
I can’t getany resources
We spent all this money, now we have to throw it away?!
That looks great! let’s launch tomorrow.
Waaaahhh!
Pitfalls of prototyping
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15
There is never any time
I can’t getany resources
We spent all this money, now we have to throw it away?!
That looks great! let’s launch tomorrow.
Waaaahhh!
Pitfalls of prototyping
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16
There is never any time
I can’t getany resources
We spent all this money, now we have to throw it away?!
That looks great! let’s launch tomorrow.
Waaaahhh!
Pitfalls of prototyping
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17
There is never any time
I can’t getany resources
We spent all this money, now we have to throw it away?!
That looks great! let’s launch tomorrow.
Waaaahhh!
Pitfalls of prototyping
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Including prototypes in your process
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19
Concepting Design Implementation Deploy/Maintain
Scope
Including prototypes in your process
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Concepting Design Implementation Deploy/Maintain
Scope
Including prototypes in your process
Wednesday, December 16, 2009
Sketch
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Concepting Design Implementation Deploy/Maintain
Scope
Including prototypes in your process
Wednesday, December 16, 2009
Sketch ThrowawayPrototype
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Concepting Design Implementation Deploy/Maintain
Scope
Including prototypes in your process
Wednesday, December 16, 2009
Sketch ThrowawayPrototype Evolutionary
Prototype
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 20
Concepting Design Implementation Deploy/Maintain
Scope
Including prototypes in your process
Wednesday, December 16, 2009
Sketch ThrowawayPrototype Evolutionary
Prototype
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 21
Concepting Design Implementation Deploy/Maintain
Scope
Including prototypes in your process
1.0
Wednesday, December 16, 2009
Sketch ThrowawayPrototype Evolutionary
Prototype
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 22
Concepting Design Implementation Deploy/Maintain
Scope
Including prototypes in your process
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
The Sketch/Prototype Continuum
Wednesday, December 16, 2009
SKEtching User Experiences - Bill Buxton
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 24
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 25
QuickInexpensive
Plentiful
TimelyDisposable
What we want to learn from sketching
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 26
“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
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 27
Celebrate Failure
“If you are not prepared to be wrong,you’ll never come up with an original ” Sir Ken Robinson
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 28
“Constraints drive innovation and force focus. Instead of trying to remove them, use them to your advantage.”
“Getting Real” — 37 Signals http://gettingreal37signals.com/
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 29
Time
Investm
ent
The Sketch/Prototype Continuum
Sketch Prototype
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 30
Time
Investm
ent
The Sketch/Prototype Continuum
Sketch Prototype
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 31
It’s not about the pencil
Boo!
What we DON’T want to learn from sketching
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 32
It’s not about the pencil
Boo!
What we DON’T want to learn from sketching
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Demonstration
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
What we learned:
•The benefits of prototyping.
•Including prototyping in your process.
•The sketch prototype continuum.
•Sketching with building blocks.
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
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.
Wednesday, December 16, 2009
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
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:http://xd.adobe.com
Thanks!@g1sh
Wednesday, December 16, 2009
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 37
Wednesday, December 16, 2009