SM1205 Interactivity

Topic 01: Introduction

Spring 2010 SCM-CityU 1

Self-Introduction

• L1 Instructor – Oscar Au• http://sweb.cityu.edu.hk/kincau/

• L2 Instructor – Hongbo Fu• http://sweb.cityu.edu.hk/hongbofu/

• L3 Instructor – Ryan Lam

Spring 2010 SCM-CityU 2

Class Schedule

• Development platform: Flash CS4 + AS 3.0

• Tentative topics– Flash fundamentals – AS 3.0 fundamentals – Keyboard & mouse – Interactivity with sound, image, video – Webcam interactivity (color, motion, pattern)

Spring 2010 SCM-CityU 3

Assessment

• Attendance: 10%

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

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

Spring 2010 SCM-CityU 4

Interactivity

• Exchange of information between two or more active participants

• In this course, we focus to interactivity digital environment

• Interaction between users and systems

Interactivity• Key concepts

– Feedback (from system)– Messages (between users and/or system)– Interfaces (provide by system)– Interactions

• Media examples– TV, radio, magazine, WWW, ATM, telephone …– What is their feedback, messages, interfaces?– And how is the interactions?

Interactivity

• Human-human interaction • Human-object interaction

• Human-computer interaction (HCI)– User interface

• Command-line interface • Graphical user interface• Natural user interface

Spring 2010 SCM-CityU 7

Command-Line Interface

• Keyboard

Spring 2010 SCM-CityU 8

Dos Unix

Graphical User Interface (GUI)

• Mouse & keyboard

Spring 2010 SCM-CityU 9

Natural User Interface (NUI)

• Keyboard? No. Mouse? No.

Spring 2010 SCM-CityU 10

NUI Example: Multi-Touch

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

Spring 2010 SCM-CityU 11

NUI Example: Multi-Touch

• Microsoft Surface

Spring 2010 SCM-CityU 12

NUI Example: Project Natal (wiki)

• Controller-free gaming & entertainment experience for Xbox 360 by Microsoft– To be released in 2010 holiday seasons

Spring 2010 SCM-CityU 13

Project Natal (wiki)

Spring 2010 SCM-CityU 14

Project Natal (wiki)

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

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

recognition etc. Spring 2010 SCM-CityU 15

Voice Recognition (wiki)

• Spoken commands

Spring 2010 SCM-CityU 16

Gesture Recognition (wiki)

• Mouse or pen gesture (e.g., for Firefox)• Multi-touch gesture (e.g., video) • Image/video

based gesture

Spring 2010 SCM-CityU 17

Color Tracking

Spring 2010 SCM-CityU 18

Motion Estimation/Tracking (wiki)

• Low-level: e.g., to detect moving areas • High-level: e.g., to detect motion of body parts

Spring 2010 SCM-CityU 19

Microsoft Office Labs Vision 2019

Spring 2010 SCM-CityU 20

Interactive Art and Design

• Supporting data visualization• Controlling mechanics• Organizing tasks• Enabling collaboration between users• Creating experience and environments• Using tools for performance• Telling a narrative or story

Working Process

• We use Adobe Flash as a tool for learning and building our interactive prototype system

•Conception•Research•Design•Build•Test

What is Flash (wiki)?

• Originally by Macromedia, later by Adobe – Latest version: Adobe Flash CS4

• 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 2010 SCM-CityU 23

Spring 2010 SCM-CityU 24

StageStage

ToolsTools

TimelineTimelineLayerLayer

Panels:Panels:Library + Library + PropertiesProperties

Workflow

Spring 2010 SCM-CityU 25

Files

Publish View

Flash Player

Let’s start a simple example!

Spring 2010 SCM-CityU 26

Document Properties

• Change stage properties & save as Ex01.fla

Spring 2010 SCM-CityU 27

Shape & Drawing Object

• Shape

Spring 2010 SCM-CityU 28

Shape & Drawing Object

• Drawing object – Make sure object drawing is enabled

Spring 2010 SCM-CityU 29

Layers

Layer3

Layer2

Layer1

Layers

Layer3

Layer2

Layer1

Grouping Objects

Grouping (Ctrl-G)

Breaking (Ctrl-G)

Symbols and Library

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

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

Spring 2010 SCM-CityU 33

Convertto Symbol Insta

nce

Symbols and Library

Grouping (Ctrl-G) Convert to symbol (Ctrl-F8)

Symbols and Library

• Reuse symbols

instancize

instances

Symbols and Library

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

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 2010 SCM-CityU 37

Motion Tween Example

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

Spring 2010 SCM-CityU 38

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 2010 SCM-CityU 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 2010 SCM-CityU 40

Recommend Flash Books

Spring 2010 SCM-CityU 41