2012 KGIT [CLASS 04 | 0329]익스프레시브 웹 응용 디자인Expressive Web Application Design                               Expressive Web A...
TODAY WE WILL COVER,  - THEORY (2 Hour) -  01. Flex Design Elements  02. Motion & Transition
01. Flex Design Element
01. Flex Design Elements001. RIA (revised)                                      RIA         User Centered     Contents    ...
01. Flex Design Elements002. Visual Effect                                      RIA        User Centered      Contents    ...
02. Effect & Transition
02. Effect & Trasition001. Basics        - 자연스러운 인터랙션 유도        - 효과 : 맥락에 따른 컴포넌트들의 변화, 시각적 강조 및 효과, 흥미로운 행동 유도        - ...
02. Effect & Trasition001. Basics        ** Application내에서 강조하거나 집중해야 할 영역이 있을때.        ** Application내에서 그냥 넘어가도 되는 부분   ...
02. Effect & Trasition002. Considering         - 목적이 무엇인가?           효과를 사용하고자 하는 이유를 명백히 하자         - 화면에 더 필요한 것은 무엇인가? ...
02. Effect & Transition003. Effect | 01. Types         1.    Move         2.    Glow         3.    Resize         4.    Zo...
02. Effect & Transition003. Effect | 2. Use Effects * Filter Tag <mx:Fade id="myFadeOut"                                 효...
02. Effect & Transition003. Effect | 2. Use Effects * 실행 조정 methods plaly();  효과를 동작 pause(); 효과가 동작하는 중 특정 시점에서 일시정지 re...
02. Effect & Transition003. Effect | 2. Use Effects * 여러 Effect 적용 : Parallel(동시)/Sequence(순차)하게 적용 <s:Parallel id="myeffe...
02. Effect & Transition003. Effect | 2. Use Effects * State전환 적용  <s:states>                <s:State name="default"/>     ...
02. Effect & Transition003. Effect | 2. Use Effects * Easing Library Import <fx:Script>                <![CDATA[          ...
Q&A
FOR Next Week** Skin연구!! 다음주 부터 각각 자신이 디자인해온 Interface를 중심으로   수업이 진행될 예정이니 꼭 Interface Design과 간단한 아이디어/와이어프레임을 준비해올 것.
Upcoming SlideShare
Loading in …5
×

[KGIT_EWD]class04 0329

809 views

Published on

KGIT 2012 Expressive Web Application Design Class Notes

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
809
On SlideShare
0
From Embeds
0
Number of Embeds
170
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[KGIT_EWD]class04 0329

  1. 1. 2012 KGIT [CLASS 04 | 0329]익스프레시브 웹 응용 디자인Expressive Web Application Design Expressive Web Application Design | WEEK 2 : FLEX.HTML5
  2. 2. TODAY WE WILL COVER, - THEORY (2 Hour) - 01. Flex Design Elements 02. Motion & Transition
  3. 3. 01. Flex Design Element
  4. 4. 01. Flex Design Elements001. RIA (revised) RIA User Centered Contents User Interaction Visual Effect
  5. 5. 01. Flex Design Elements002. Visual Effect RIA User Centered Contents User Interaction Visual Effect Color/Skin Motion Typography Icon Layer&Depth
  6. 6. 02. Effect & Transition
  7. 7. 02. Effect & Trasition001. Basics - 자연스러운 인터랙션 유도 - 효과 : 맥락에 따른 컴포넌트들의 변화, 시각적 강조 및 효과, 흥미로운 행동 유도 - 전환 : 자연스러운 화면 전환 - 동적인 속성 - 그 외 다음과 같은 일 진행 * 애플리케이션 내에서 화면의 전환을 부드럽게 한다. * 화면에 필요한 항목을 동적으로 추가한다. * 화면에 불필요한 요소 보이지 않게 한다. * 화면 내 요소들을 필요에 따라 바꾸어 준다.
  8. 8. 02. Effect & Trasition001. Basics ** Application내에서 강조하거나 집중해야 할 영역이 있을때. ** Application내에서 그냥 넘어가도 되는 부분 ** 인터랙션의 강조
  9. 9. 02. Effect & Trasition002. Considering - 목적이 무엇인가? 효과를 사용하고자 하는 이유를 명백히 하자 - 화면에 더 필요한 것은 무엇인가? 효과는 사용자 경험을 보완해 주어야지 방해해서는 안된다. 특히, 동작이 큰 움직임은 사용자 시스템의 부하를 막기 위해 순차적으로 실행해줘야한다. - Application Layout을 어떻게 할 것인가? 어디에 모션을 적용할 지 생각해두면 레이아웃을 융통성 있게 준비할수 있다. - 레이아웃에 어떠한 영향을 미칠것인가? 효과를 추가할때 나머지 Application의 요소에 어떻게 영향일 미칠것인지 미리 계산해야 한다. 1. Showcases 2. Flex Store
  10. 10. 02. Effect & Transition003. Effect | 01. Types 1. Move 2. Glow 3. Resize 4. Zoom 5. AnimateProperty 6. Wipe 7. Iris 8. Fade 9. Dissolve 10. Rotate 11. Pause
  11. 11. 02. Effect & Transition003. Effect | 2. Use Effects * Filter Tag <mx:Fade id="myFadeOut" 효과 이름과 아이디 alphaFrom="1" alphaTo="0" 효과 값 duration="1000" 효과가 진행되는 시간 target="{myButton01, myButton02}"/> 효과가 적용되는 Component(아이디이름으로) <s:Button id="myButton01" x="74" y="151" label="Fade Out" width="118" height="37" click="myFadeOut.play();"/> 클릭 했을 때 효과 재생 <s:Button id="myButton02" x="212" y="151" label="Fade In" width="118" height="37" rollOver="myFadeOut.play();"/> 마우스가 오버되었을 때 효과 재생
  12. 12. 02. Effect & Transition003. Effect | 2. Use Effects * 실행 조정 methods plaly();  효과를 동작 pause(); 효과가 동작하는 중 특정 시점에서 일시정지 resume(); 일시정지 상태에서 다시 동작 reverse();  동작하던 효과를 특정 시점에서 다시 역으로 동작 end();  효과를 종료시점으로 넘김 stop();  동작 중인 상태에서 특정 시점에서 효과를 멈춤 isPlaying();  효과가 동작 중인지 여부를 알림
  13. 13. 02. Effect & Transition003. Effect | 2. Use Effects * 여러 Effect 적용 : Parallel(동시)/Sequence(순차)하게 적용 <s:Parallel id="myeffect" target="{Btn_motion}"> / 여러 효과를 Parallel하게 적용 <mx:Fade alphaFrom="1" alphaTo="0"/> <mx:Blur blurXFrom="0" blurXTo="10"/> <mx:Move xFrom="74" xTo="104"/> </s:Parallel> <s:Button id=btnMotion x="74" y="151" label=“Motion" width="118" height="37" click="myeffect.play();"/>
  14. 14. 02. Effect & Transition003. Effect | 2. Use Effects * State전환 적용 <s:states> <s:State name="default"/> <s:State name="show"/> </s:states> <s:transitions> <s:Transition fromState="*" toState="*"> <s:Sequence target="{myImg}"> <s:Wipe id="wipeEffect" direction="right“ duration="1000"/> </s:Sequence> </s:Transition> </s:transitions> <s:Panel title="Wipe Effect" width="371" height="360" horizontalCenter="0" verticalCenter="0"> <s:Button id="btn_show" x="145" y="286" label="Wipe Effect" click="currentState=show"/> <mx:Image id="myImg" x="85" y="104" source="flex.png" visible.default="false" visible.show="true" /> </s:Panel>
  15. 15. 02. Effect & Transition003. Effect | 2. Use Effects * Easing Library Import <fx:Script> <![CDATA[ import mx.effects.easing.*; ]]> </fx:Script> <s:transitions> <s:Transition fromState="*" toState="*"> <s:Parallel id="myEffect" target="{myImg}"> <mx:Fade alphaFrom="1" alphaTo="0"/> <mx:Blur blurXFrom="0" blurXTo="10"/> <mx:Move xBy="30" easingFunction="Bounce.easeOut"/> </s:Parallel> </s:Transition> </s:transitions>
  16. 16. Q&A
  17. 17. FOR Next Week** Skin연구!! 다음주 부터 각각 자신이 디자인해온 Interface를 중심으로 수업이 진행될 예정이니 꼭 Interface Design과 간단한 아이디어/와이어프레임을 준비해올 것.

×