SM1205 Interactivity
Topic 01: Introduction
Spring 2012
SCM-CityU
1
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 2012
SCM-CityU
2
Interactivity
• Human-human interaction
• Human-object interaction
• Human-computer interaction
Spring 2012
SCM-CityU
3
Human-Computer Interaction
• Also known as HCI
• User interface
– A place where interaction between humans & machines
occurs
• Types
User
Interface
– Command-line interface
– Graphical user interface
– Natural user interface
Spring 2012
SCM-CityU
4
Command-Line Interface
• Keyboard
Dos
Spring 2012
SCM-CityU
Unix
5
Graphical User Interface (GUI)
• Mouse & keyboard
Spring 2012
SCM-CityU
6
Natural User Interface (NUI)
• Keyboard? No. Mouse? No.
Spring 2011
SCM-CityU
7
NUI Example: Multi-Touch
• Effortless interaction with digital content
through natural hand gestures and touch
Spring 2012
SCM-CityU
8
NUI Example: Multi-Touch
• Microsoft Surface
Spring 2012
SCM-CityU
9
NUI Example: Kinect (wiki)
• Controller-free gaming & entertainment experience for
Xbox 360 by Microsoft
– Released Nov. 2010
Spring 2012
SCM-CityU
10
NUI Example: Kinect (wiki)
Spring 2012
SCM-CityU
11
NUI Example: Kinect (wiki)
Spring 2012
SCM-CityU
12
NUI Example: Kinect (wiki)
• Natal sensor
– RGB camera
– Depth camera
– Multi-array microphone
• Capabilities
– 3D motion capture, facial recognition, voice
recognition etc.
Spring 2012
SCM-CityU
13
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 2012
SCM-CityU
14
How Microsoft Kinect Works
Spring 2012
SCM-CityU
15
Microsoft Office Labs Vision 2019
Spring 2012
SCM-CityU
16
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 2012
SCM-CityU
17
Assessment
• Attendance:
10%
• 3 Assignments: 90%
– Tentative: A1 (20%), A2 (30%), A3 (40%)
• Curved grading: A+, A, A-, B+, ….
Spring 2012
SCM-CityU
18
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 2012
SCM-CityU
19
SM1205 Interactivity
Flash Fundamentals
Spring 2012
SCM-CityU
20
What is Flash (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 2012
SCM-CityU
21
ActionScript 3.0
• Scripting language
• Object-oriented language
• Popular for
–
–
–
–
Web design,
Animation
Multimedia applications
…
• Online language reference
Spring 2012
SCM-CityU
22
Tools
Panels:
Library +
Properties
Stage
Layer
Spring 2012
Timeline
SCM-CityU
23
Workflow
Flash Player
Publish
View
Files
Spring 2012
SCM-CityU
24
Let’s start a simple example!
Spring 2012
SCM-CityU
25
Document Properties
• Change stage properties & save as Ex01.fla
Spring 2012
SCM-CityU
26
Use Commands
• Test movie
– Control > Test Movie (Ctrl + Enter)
• Play (for previewing animation)
– Control > Play (Enter)
• Publish
– File > Publish (Shift + F12)
Spring 2012
SCM-CityU
27
Shape & Drawing Object
• Shape
Spring 2012
SCM-CityU
28
Shape & Drawing Object
• Drawing object
– Make sure object drawing is enabled
Spring 2012
SCM-CityU
29
Layers
Layer3
Layer2
Layer1
Spring 2012
SCM-CityU
30
Symbols and Library
• Symbol: reusable content
– Stored in the library
– Required for many operations
• E.g., motion tween, access in ActionScript
Spring 2012
SCM-CityU
31
Symbols and Library
• Each instance can have its own
properties, effects, and filters
Spring 2012
SCM-CityU
32
Symbols and Library
• But if you change the symbol, every of its
instances will be changed correspondingly
Spring 2012
SCM-CityU
33
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 2012
SCM-CityU
34
Motion Tween Example
• Step 1: right click a symbol instance at Frame 1
& select Create Motion Tween
Spring 2012
SCM-CityU
35
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 2012
SCM-CityU
36
Motion Editor
• Very powerful but not that intuitive to control
Spring 2012
SCM-CityU
37
• Predefined motion
– Window > Motion Presents
Spring 2012
SCM-CityU
38
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 2012
SCM-CityU
39
Recommend Flash Books
Spring 2012
SCM-CityU
40
SM1205 Interactivity
Programming Fundamentals
Spring 2012
SCM-CityU
41
Talk to the Computer
• Computers & humans speak in different languages
English,
Mandarin,
Cantonese, …
Spring 2012
SCM-CityU
42
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 2012
SCM-CityU
43
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 2012
SCM-CityU
44
Code in Programming Language
Write Code
0101011…
Spring 2011
SCM-CityU
45
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 2012
SCM-CityU
46