SM1205 Interactivity Topic 01: Introduction Spring 2010SCM-CityU1

Self-Introduction L1 Instructor – Oscar Au L2 Instructor – Hongbo Fu L3 Instructor – Ryan Lam Spring 2010SCM-CityU2

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 2010SCM-CityU3

Assessment Attendance: 10% 3 Assignments: 90% – Tentative: A1 (20%), A2 (30%), A3 (40%) Curved grading: A+, A, A-, B+, …. Spring 2010SCM-CityU4

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 2010SCM-CityU7

Command-Line Interface Keyboard Spring 2010SCM-CityU8 DosUnix

Graphical User Interface (GUI)GUI Mouse & keyboard Spring 2010SCM-CityU9

Natural User Interface (NUI)NUI Keyboard? No. Mouse? No. Spring 2010SCM-CityU10

NUI Example: Multi-Touch Effortless interaction with digital content through natural hand gestures and touch Spring 2010SCM-CityU11

NUI Example: Multi-Touch Microsoft Surface Spring 2010SCM-CityU12

NUI Example: Project Natal (wiki)wiki Controller-free gaming & entertainment experience for Xbox 360 by MicrosoftXbox 360 by Microsoft – To be released in 2010 holiday seasons Spring 2010SCM-CityU13

Project Natal (wiki)wiki Spring 2010SCM-CityU14

Project Natal (wiki)wiki Natal sensor – RGB camera – Depth sensor – Multi-array microphone Capabilities – 3D motion capture, facial recognition, voice recognition etc. Spring 2010SCM-CityU15

Voice Recognition (wiki)wiki Spoken commands Spring 2010SCM-CityU16

Gesture Recognition (wiki)wiki Mouse or pen gesture (e.g., for Firefox)for Firefox Multi-touch gesture (e.g., video)video Image/video based gesture Spring 2010SCM-CityU17

Color Tracking Spring 2010SCM-CityU18

Motion Estimation/Tracking (wiki)wiki Low-level: e.g., to detect moving areas High-level: e.g., to detect motion of body parts Spring 2010SCM-CityU19

Microsoft Office Labs Vision 2019 Spring 2010SCM-CityU20

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)?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 2010SCM-CityU23

Spring 2010SCM-CityU24 Stage Tools Timeline Layer Panels: Library + Properties

Workflow Spring 2010SCM-CityU25 Files PublishView Flash Player

Let’s start a simple example! Spring 2010SCM-CityU26

Document Properties Change stage properties & save as Ex01.fla Spring 2010SCM-CityU27

Shape & Drawing Object Shape Spring 2010SCM-CityU28

Shape & Drawing Object Drawing object – Make sure object drawing is enabled Spring 2010SCM-CityU29

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 2010SCM-CityU33 Convert to Symbol Instance

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 2010SCM-CityU37

Motion Tween Example Step 1: right click a symbol instance at Frame 1 & select Create Motion Tween Spring 2010SCM-CityU38

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 2010SCM-CityU39

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 2010SCM-CityU40

Recommend Flash Books Spring 2010SCM-CityU41