KGIT 2012 Expressive Web Application Design Class Notes

1. 2012 KGIT [CLASS 04 | 0329]
익스프레시브 웹 응용 디자인
Expressive Web Application Design
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

2. TODAY WE WILL COVER,
- THEORY (2 Hour) -
01. Flex Design Elements
02. Motion & Transition

3. 01. Flex Design Element

4. 01. Flex Design Elements
001. RIA (revised)
RIA
User Centered Contents User Interaction Visual Effect

5. 01. Flex Design Elements
002. Visual Effect
RIA
User Centered Contents User Interaction Visual Effect
Color/Skin
Motion
Typography
Icon
Layer&Depth

6. 02. Effect & Transition

7. 02. Effect & Trasition
001. Basics
- 자연스러운 인터랙션 유도
- 효과 : 맥락에 따른 컴포넌트들의 변화, 시각적 강조 및 효과, 흥미로운 행동 유도
- 전환 : 자연스러운 화면 전환
- 동적인 속성
- 그 외 다음과 같은 일 진행
* 애플리케이션 내에서 화면의 전환을 부드럽게 한다.
* 화면에 필요한 항목을 동적으로 추가한다.
* 화면에 불필요한 요소 보이지 않게 한다.
* 화면 내 요소들을 필요에 따라 바꾸어 준다.

8. 02. Effect & Trasition
001. Basics
** Application내에서 강조하거나 집중해야 할 영역이 있을때.
** Application내에서 그냥 넘어가도 되는 부분
** 인터랙션의 강조

9. 02. Effect & Trasition
002. Considering
- 목적이 무엇인가?
효과를 사용하고자 하는 이유를 명백히 하자
- 화면에 더 필요한 것은 무엇인가?
효과는 사용자 경험을 보완해 주어야지 방해해서는 안된다.
특히, 동작이 큰 움직임은 사용자 시스템의 부하를 막기 위해 순차적으로 실행해줘야한다.
- Application Layout을 어떻게 할 것인가?
어디에 모션을 적용할 지 생각해두면 레이아웃을 융통성 있게 준비할수 있다.
- 레이아웃에 어떠한 영향을 미칠것인가?
효과를 추가할때 나머지 Application의 요소에 어떻게 영향일 미칠것인지 미리 계산해야 한다.
1. Showcases
2. Flex Store

10. 02. Effect & Transition
003. 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. 02. Effect & Transition
003. 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. 02. Effect & Transition
003. Effect | 2. Use Effects
* 실행 조정 methods
plaly();
 효과를 동작
pause();
효과가 동작하는 중 특정 시점에서 일시정지
resume();
일시정지 상태에서 다시 동작
reverse();
 동작하던 효과를 특정 시점에서 다시 역으로 동작
end();
 효과를 종료시점으로 넘김
stop();
 동작 중인 상태에서 특정 시점에서 효과를 멈춤
isPlaying();
 효과가 동작 중인지 여부를 알림

13. 02. Effect & Transition
003. 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. 02. Effect & Transition
003. 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. 02. Effect & Transition
003. 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. Q&A

17. FOR Next Week
** Skin연구
!! 다음주 부터 각각 자신이 디자인해온 Interface를 중심으로
수업이 진행될 예정이니 꼭 Interface Design과 간단한 아이디어/와이어프레임을 준비해올 것.