Topic 01: Introduction

spectacularscarecrowΤεχνίτη Νοημοσύνη και Ρομποτική

17 Νοε 2013 (πριν από 3 χρόνια και 11 μήνες)

78 εμφανίσεις

SM1205 Interactivity

Topic 01:
Introduction


Spring 2012

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/


SCM
-
CityU

2

Spring 2012

Interactivity


Human
-
human interaction


Human
-
object interaction


Human
-
computer interaction




SCM
-
CityU

3

Spring 2012

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

4

User
Interface

Spring 2012

Command
-
Line Interface


Keyboard

SCM
-
CityU

5

Dos

Unix

Spring 2012

Graphical User Interface (
GUI
)


Mouse & keyboard

SCM
-
CityU

6

Spring 2012

Natural User Interface (
NUI
)


Keyboard?
No
. Mouse?
No.


Spring 2011

SCM
-
CityU

7

NUI Example: Multi
-
Touch


Effortless interaction with digital content
through
natural hand gestures and touch


SCM
-
CityU

8

Spring 2012

NUI Example: Multi
-
Touch


Microsoft Surface


SCM
-
CityU

9

Spring 2012

NUI Example: Kinect (
wiki
)


Controller
-
free

gaming & entertainment experience for
Xbox 360 by Microsoft


Released Nov. 2010

SCM
-
CityU

10

Spring 2012

NUI Example: Kinect (
wiki
)


SCM
-
CityU

11

Spring 2012

NUI Example: Kinect (
wiki
)


SCM
-
CityU

12

Spring 2012

NUI Example: Kinect (
wiki
)




Natal sensor


RGB camera


Depth camera


Multi
-
array microphone


Capabilities


3D motion capture, facial recognition, voice
recognition etc.


SCM
-
CityU

13

Spring 2012

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

14

Spring 2012

How Microsoft Kinect Works


SCM
-
CityU

15

Spring 2012

Microsoft Office Labs Vision 2019


SCM
-
CityU

16

Spring 2012

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

17

Spring 2012

Assessment



Attendance:
10%




3
Assignments:
90%


Tentative: A1 (20%), A2 (30%), A3 (40%)



Curved

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

SCM
-
CityU

18

Spring 2012

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

19

Spring 2012

SM1205 Interactivity

Flash Fundamentals

SCM
-
CityU

20

Spring 2012

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



SCM
-
CityU

21

Spring 2012

ActionScript 3.0


Scripting language


Object
-
oriented language


Popular for


Web design,


Animation


Multimedia applications





Online language reference


SCM
-
CityU

22

Spring 2012

Spring 2012


SCM
-
CityU

23

Stage

Tools

Timeline

Layer

Panels:

Library +

Properties

Workflow


SCM
-
CityU

24

Files

Publish

View

Flash Player

Spring 2012

Spring 2012

Let’s start a simple example!


SCM
-
CityU

25

Document Properties


Change stage properties & save as
Ex01.fla

SCM
-
CityU

26

Spring 2012

Use Commands


Test movie


Control > Test Movie

(Ctrl + Enter)



Play (for previewing animation)


Control > Play

(Enter)



Publish


File > Publish

(Shift + F12)

SCM
-
CityU

27

Spring 2012

Shape & Drawing Object


Shape

SCM
-
CityU

28

Spring 2012

Shape & Drawing Object


Drawing object


Make sure object drawing is enabled

SCM
-
CityU

29

Spring 2012

Spring 2012

Layers


SCM
-
CityU

30

Layer3

Layer2

Layer1

Symbols and Library


Symbol: reusable content


Stored in the library


Required for many operations


E.g., motion tween, access in ActionScript

SCM
-
CityU

31

Spring 2012

Spring 2012

Symbols and Library


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

SCM
-
CityU

32

Spring 2012

Symbols and Library


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

SCM
-
CityU

33

Tween


Tween (be
tween
) 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
-
CityU

34

Spring 2012

Spring 2012

Motion Tween Example


Step 1: right click a
symbol

instance at Frame 1
& select
Create Motion Tween


SCM
-
CityU

35

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

36

Motion Editor


Very powerful but not that intuitive to control

SCM
-
CityU

37

Spring 2012


Predefined motion


Window > Motion Presents

SCM
-
CityU

38

Spring 2012

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

39

Spring 2012

Recommend Flash Books


SCM
-
CityU

40

Spring 2012

SM1205 Interactivity

Programming Fundamentals

SCM
-
CityU

41

Spring 2012

Talk to the Computer


Computers & humans
speak in different languages




SCM
-
CityU

42

English,
Mandarin,
Cantonese, …

Spring 2012

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

43

Spring 2012

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

44

Spring 2012

Spring 2011

SCM
-
CityU

45

0101011…

Write Code

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


SCM
-
CityU

46

Spring 2012