SM1205 Interactivity Topic 01: Introduction Spring 2011SCM-CityU1

SM1205 Interactivity

Topic 01: Introduction

Spring 2011 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/


Interactivity

• Human-human interaction • Human-object interaction • Human-computer interaction


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


User Interface

User Interface

Command-Line Interface

• Keyboard


Dos Unix

Graphical User Interface (GUI)

• Mouse & keyboard


Natural User Interface (NUI)

• Keyboard? No. Mouse? No.


NUI Example: Multi-Touch

• Effortless interaction with digital content through natural hand gestures and touch


NUI Example: Multi-Touch

• Microsoft Surface


NUI Example: Kinect (wiki)• Controller-free gaming & entertainment experience for

Xbox 360 by Microsoft– Released Nov. 2010


NUI Example: Kinect (wiki)





• Natal sensor – RGB camera – Depth camera– Multi-array microphone

• Capabilities – 3D motion capture, facial recognition, voice

recognition etc. Spring 2011 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


How Microsoft Kinect Works


Microsoft Office Labs Vision 2019


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)


Assessment

• Attendance: 10%

• 3 Assignments: 90%– Tentative: A1 (20%), A2 (30%), A3 (40%)

• Curved grading: A+, A, A-, B+, ….


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 2011 SCM-CityU 19


Flash Fundamentals


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


ActionScript 3.0• Scripting language • Object-oriented language • Popular for

– Web design, – Animation – Multimedia applications – …

• Online language reference



StageStage

ToolsTools

TimelineTimelineLayerLayer

Panels:Panels:Library + Library + PropertiesProperties

Workflow


Files

Publish View

Flash Player

Let’s start a simple example!


Document Properties

• Change stage properties & save as Ex01.fla


Use Commands

• Test movie– Control > Test Movie (Ctrl + Enter)

• Play (for previewing animation) – Control > Play (Enter)

• Publish – File > Publish (Shift + F12)


Shape & Drawing Object

• Shape


Shape & Drawing Object

• Drawing object – Make sure object drawing is enabled


Layers


Layer3

Layer2

Layer1

Symbols and Library

• Symbol: reusable content – Stored in the library– Required for many operations

• E.g., motion tween, access in ActionScript


Convertto Symbol Insta

nce

Symbols and Library

• Each instance can have its own properties, effects, and filters


Symbols and Library

• But if you change the symbol, every of its instances will be changed correspondingly


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


Motion Tween Example

• Step 1: right click a symbol instance at Frame 1 & select Create Motion Tween


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


Motion Editor

• Very powerful but not that intuitive to control


• Predefined motion– Window > Motion Presents


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


Recommend Flash Books



Programming Fundamentals


Talk to the Computer

• Computers & humans speak in different languages


English, Mandarin,

Cantonese, …

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


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



0101011…

Write

Co

de

Code in Programming Language

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


Documents

SM1205 Interactivity Topic 01: Introduction Spring 2011SCM-CityU1