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

2. 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/ SCM-CityU2Spring 2012

3. Interactivity Human-human interaction Human-object interaction Human-computer interaction SCM-CityU3Spring 2012

4. 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 SCM-CityU4 User Interface Spring 2012

5. Command-Line Interface Keyboard SCM-CityU5 DosUnix Spring 2012

6. Graphical User Interface (GUI)GUI Mouse & keyboard SCM-CityU6Spring 2012

7. Natural User Interface (NUI)NUI Keyboard? No. Mouse? No. Spring 2011SCM-CityU7

8. NUI Example: Multi-Touch Effortless interaction with digital content through natural hand gestures and touch SCM-CityU8Spring 2012

9. NUI Example: Multi-Touch Microsoft Surface SCM-CityU9Spring 2012

10. NUI Example: Kinect (wiki)wiki Controller-free gaming & entertainment experience for Xbox 360 by Microsoft Xbox 360 by Microsoft – Released Nov. 2010 SCM-CityU10Spring 2012

11. NUI Example: Kinect (wiki)wiki SCM-CityU11Spring 2012

12. NUI Example: Kinect (wiki)wiki SCM-CityU12Spring 2012

13. NUI Example: Kinect (wiki)wiki Natal sensor – RGB camera – Depth camera – Multi-array microphone Capabilities – 3D motion capture, facial recognition, voice recognition etc. SCM-CityU13Spring 2012

14. 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 SCM-CityU14Spring 2012

15. How Microsoft Kinect Works SCM-CityU15Spring 2012

16. Microsoft Office Labs Vision 2019 SCM-CityU16Spring 2012

17. 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) SCM-CityU17Spring 2012

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

19. 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! SCM-CityU19Spring 2012

20. SM1205 Interactivity Flash Fundamentals SCM-CityU20Spring 2012

21. What is Flash (wiki)?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 SCM-CityU21Spring 2012

22. ActionScript 3.0 Scripting language Object-oriented language Popular for – Web design, – Animation – Multimedia applications – … Online language reference SCM-CityU22Spring 2012

23. SCM-CityU23 Stage Tools Timeline Layer Panels: Library + Properties

24. Workflow SCM-CityU24 Files PublishView Flash Player Spring 2012

25. Let’s start a simple example! SCM-CityU25

26. Document Properties Change stage properties & save as Ex01.fla SCM-CityU26Spring 2012

27. Use Commands Test movie – Control > Test Movie (Ctrl + Enter) Play (for previewing animation) – Control > Play (Enter) Publish – File > Publish (Shift + F12) SCM-CityU27Spring 2012

28. Shape & Drawing Object Shape SCM-CityU28Spring 2012

29. Shape & Drawing Object Drawing object – Make sure object drawing is enabled SCM-CityU29Spring 2012

30. Layers SCM-CityU30 Layer3 Layer2 Layer1

31. Symbols and Library Symbol: reusable content – Stored in the library – Required for many operations E.g., motion tween, access in ActionScript SCM-CityU31 Convert to Symbol Instance Spring 2012

32. Symbols and Library Each instance can have its own properties, effects, and filters SCM-CityU32

33. Spring 2012 Symbols and Library But if you change the symbol, every of its instances will be changed correspondingly SCM-CityU33

34. 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 SCM-CityU34Spring 2012

35. Motion Tween Example Step 1: right click a symbol instance at Frame 1 & select Create Motion Tween SCM-CityU35

36. Spring 2012 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 SCM-CityU36

37. Motion Editor Very powerful but not that intuitive to control SCM-CityU37Spring 2012

38. Predefined motion – Window > Motion Presents SCM-CityU38Spring 2012

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 SCM-CityU39Spring 2012

40. Recommend Flash Books SCM-CityU40Spring 2012

41. SM1205 Interactivity Programming Fundamentals SCM-CityU41Spring 2012

42. Talk to the Computer Computers & humans speak in different languages SCM-CityU42 English, Mandarin, Cantonese, … Spring 2012

43. 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 SCM-CityU43Spring 2012

44. 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 SCM-CityU44Spring 2012

45. Spring 2011SCM-CityU45 0101011… Write Code Code in Programming Language

46. 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 SCM-CityU46Spring 2012