Download presentation
Presentation is loading. Please wait.
1
SM1205 Interactivity Topic 01: Introduction Spring 2011SCM-CityU1
2
Self-Introduction L1 Instructor – Oscar Au PhD (HKUST, 2007) Teaching: interactivity, programming, physical computing, hardware hacking – SM1204, SM1205, SM2240, SM2608 Research: computer graphics, user interface http://sweb.cityu.edu.hk/kincau/ Spring 2011SCM-CityU2
3
Interactivity Human-human interaction Human-object interaction Human-computer interaction Spring 2011SCM-CityU3
4
Human-Computer Interaction Also known as HCI User interface – A place where interaction between humans & machines occurs Types – Command-line interface – Graphical user interface – Natural user interface Spring 2011SCM-CityU4 User Interface
5
Command-Line Interface Keyboard Spring 2011SCM-CityU5 DosUnix
6
Graphical User Interface (GUI)GUI Mouse & keyboard Spring 2011SCM-CityU6
7
Natural User Interface (NUI)NUI Keyboard? No. Mouse? No. Spring 2011SCM-CityU7
8
NUI Example: Multi-Touch Effortless interaction with digital content through natural hand gestures and touch Spring 2011SCM-CityU8
9
NUI Example: Multi-Touch Microsoft Surface Spring 2011SCM-CityU9
10
NUI Example: Kinect (wiki)wiki Controller-free gaming & entertainment experience for Xbox 360 by Microsoft Xbox 360 by Microsoft – Released Nov. 2010 Spring 2011SCM-CityU10
11
NUI Example: Kinect (wiki)wiki Spring 2011SCM-CityU11
12
NUI Example: Kinect (wiki)wiki Spring 2011SCM-CityU12
13
NUI Example: Kinect (wiki)wiki Natal sensor – RGB camera – Depth camera – Multi-array microphone Capabilities – 3D motion capture, facial recognition, voice recognition etc. Spring 2011SCM-CityU13
14
How Microsoft Kinect Works Depth camera – Shooting out beams of infrared light – Measuring how long it takes them to reflect off of objects in the scene and return to an infrared camera Video: Look at Kinect using IR goggles Video: Kinect – The Way Games Work Spring 2011SCM-CityU14
15
How Microsoft Kinect Works Spring 2011SCM-CityU15
16
Microsoft Office Labs Vision 2019 Spring 2011SCM-CityU16
17
Class Schedule Development platform: Flash CS5 + AS 3.0 Tentative topics – Flash fundamentals – AS 3.0 fundamentals – Keyboard & mouse – Interactivity with sound, image, video – Webcam interactivity (color, motion, pattern) Spring 2011SCM-CityU17
18
Assessment Attendance: 10% 3 Assignments: 90% – Tentative: A1 (20%), A2 (30%), A3 (40%) Curved grading: A+, A, A-, B+, …. Spring 2011SCM-CityU18
19
Late Policy Attendance – Late policy: 5 late minutes per class > 5 minutes late no attendance score for that class Assignment & project submission – Late policy: 3 late days in total Use them wisely! Spring 2011SCM-CityU19
20
SM1205 Interactivity Flash Fundamentals Spring 2011SCM-CityU20
21
What is Flash (wiki)?wiki Originally by Macromedia, later by Adobe – Latest version: Adobe Flash CS5 Rich media content platform – Animation, interactivity, image/video, online games Youtube, Google Videos, Yahoo Maps, …. Support both bitmaps & vector graphics Programming language: ActionScript 3.0 Spring 2011SCM-CityU21
22
ActionScript 3.0 Scripting language Object-oriented language Popular for – Web design, – Animation – Multimedia applications – … Online language reference Spring 2011SCM-CityU22
23
Spring 2011SCM-CityU23 Stage Tools Timeline Layer Panels: Library + Properties
24
Workflow Spring 2011SCM-CityU24 Files PublishView Flash Player
25
Let’s start a simple example! Spring 2011SCM-CityU25
26
Document Properties Change stage properties & save as Ex01.fla Spring 2011SCM-CityU26
27
Use Commands Test movie – Control > Test Movie (Ctrl + Enter) Play (for previewing animation) – Control > Play (Enter) Publish – File > Publish (Shift + F12) Spring 2011SCM-CityU27
28
Shape & Drawing Object Shape Spring 2011SCM-CityU28
29
Shape & Drawing Object Drawing object – Make sure object drawing is enabled Spring 2011SCM-CityU29
30
Layers Spring 2011SCM-CityU30 Layer3 Layer2 Layer1
31
Symbols and Library Symbol: reusable content – Stored in the library – Required for many operations E.g., motion tween, access in ActionScript Spring 2011SCM-CityU31 Convert to Symbol Instance
32
Symbols and Library Each instance can have its own properties, effects, and filters Spring 2011SCM-CityU32
33
Symbols and Library But if you change the symbol, every of its instances will be changed correspondingly Spring 2011SCM-CityU33
34
Tween Tween (between) can be assigned to keyframe intervals – Automatically interpolate frames between keyframes Motion Tween – Mainly for keyframes with symbol instances Shape Tween – Mainly for keyframes with shapes/drawing objects Spring 2011SCM-CityU34
35
Motion Tween Example Step 1: right click a symbol instance at Frame 1 & select Create Motion Tween Spring 2011SCM-CityU35
36
Motion Tween Example Step 2: At Frame 25, change properties of the symbol – E.g., move it to a new place, change its alpha value Spring 2011SCM-CityU36
37
Motion Editor Very powerful but not that intuitive to control Spring 2011SCM-CityU37
38
Predefined motion – Window > Motion Presents Spring 2011SCM-CityU38
39
Shape Tween Example Step 1: Right click a shape or drawing object at Frame 1 & select Create Shape Motion – E.g., a red square Step 2: Insert a blank keyframe at Frame 20 & draw some shape, e.g., a circle Spring 2011SCM-CityU39
40
Recommend Flash Books Spring 2011SCM-CityU40
41
SM1205 Interactivity Programming Fundamentals Spring 2011SCM-CityU41
42
Talk to the Computer Computers & humans speak in different languages Spring 2011SCM-CityU42 English, Mandarin, Cantonese, …
43
Talk to the Computer Is there any interpreter for us? – Yes: through voice recognition – No: recognition is successful only at the level of predefined sets of voice commands E.g., “Xbox, pause” Computers do NOT have fuzzy human brains – Need new languages with stricter grammars/syntaxes, called programming languages Spring 2011SCM-CityU43
44
Programming Language Now humans “speak” in programming languages – E.g., Java, C, C++, Python, Flash ActionScript, … But computers still speak in binary Still need an interpreter – A special computer program which converts the code written in a programming language to the binary the computer understands Different programming languages need different interpreters Spring 2011SCM-CityU44
45
Spring 2011SCM-CityU45 0101011… Write Code Code in Programming Language
46
Programming Language Computers are NOT good at tolerating errors You must exactly follow the grammars of programming language – E.g., many programming languages are case-sensitive Spring 2011SCM-CityU46
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.