1. SM1205 Interactivity Topic 01: Introduction Spring 2010SCM-CityU1

2. 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 2010SCM-CityU2

3. 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

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

5. Interactivity Exchange of information between two or more active participants In this course, we focus to interactivity digital environment Interaction between users and systems

6. 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?

7. 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

8. Command-Line Interface Keyboard Spring 2010SCM-CityU8 DosUnix

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

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

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

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

13. 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

14. Project Natal (wiki)wiki Spring 2010SCM-CityU14

15. 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

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

17. 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

18. Color Tracking Spring 2010SCM-CityU18

19. 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

20. Microsoft Office Labs Vision 2019 Spring 2010SCM-CityU20

21. 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

22. Working Process We use Adobe Flash as a tool for learning and building our interactive prototype system Conception Research Design Build Test

23. 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

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

25. Workflow Spring 2010SCM-CityU25 Files PublishView Flash Player

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

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

28. Shape & Drawing Object Shape Spring 2010SCM-CityU28

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

30. Layers Layer3 Layer2 Layer1

31. Layers Layer3 Layer2 Layer1

32. Grouping Objects Grouping (Ctrl-G) Breaking (Ctrl-G)

33. 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

34. Symbols and Library Grouping (Ctrl-G) Convert to symbol (Ctrl-F8)

35. Symbols and Library Reuse symbols instancize instances

36. Symbols and Library Each instance can has its own properties, effects and filters

37. 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

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

39. 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

40. 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

41. Recommend Flash Books Spring 2010SCM-CityU41