Interaction Introduction

1
Interaction Introduction

• Example user interface, from the tutorial sheet
• About events how and why
• Introduction to event handlers
• Where to put your handler code
• Types of event Flash can generate
• Why so many types of event?
• Event-capable objects in Flash
• Further reading

2
The Tutorial - User Interface

• 3-stage buttons
• Rollover graphics
• Clickable graphics
• Keyboard input
• Manipulation of interface elements
• Cheesy design!

3
Events how and why

• How can an application detect user input?
• It could spend a lot of time checking every
  possible input
• Or it could just handle event messages sent by
  the operating system
• Events are generated by all sorts of things key
  presses, timer ticks, clicks, mouse movements
• Why events? Its easy, efficient and common to
  most OS platforms (Win95/98/2000/XP, MacOS, Linux
  GUI shells, )

4
Real-world events example

• The news consists of a collection of events that
  have happened recently.
• The Flash event model can be thought of as being
  a news bulletin.
• The event model is the internal workings of the
  Flash player that notify the Flash movie when
  something important happens.
• BBC News example.

5
BBC News Event

• The BBC has news reporters that are sent out to
  look for news items that may be of importance.
• When something happens in the world, this is
  labelled an event.
• The news reporter sends a message to BBC HQ
  informing their news editors to add the latest
  event to the news bulletin.
• The latest news is then spread via TV, the WWW,
  radio etc.
• The same thing happens with Flash movies.

6
Flash Events

• The Flash player has news reporters.
• These reporters wait until an important event
  occurs.
• When an event happens (e.g. the mouse is moved or
  a button clicked), the news reporter contacts HQ
  (the Flash player) which is notified of the
  event.
• This event is then added to the news bulletin
  (the Flash movie).
• In ActionScript terms, an event is a notification
  that occurs in response to an action.

7
Event Handlers

• The Flash players news bulletin shares the
  latest news with the Flash movie so it can
  respond to the event.
• This means that we can run a piece of code when a
  specific event occurs.
• An event handler is an instruction that you write
  for a user defined object that tells the object
  what to do when a specific event happens.
• In ActionScript terms, an event handler is a
  property of an object that contains a reference
  to an ActionScript method.

8
Event Handler Example

• Flash can receive events through Event Handlers.
• There are different styles of handler, they all
  work.
• Flash MX style is better than Flash v5.
• There are no advantages to using the old model.
• // handler for clicking the top button (up_btn)
• up_btn.onRelease function()
• up()

9
Code Placement

• Where does the code live?
• The handler for an object cannot appear before
  the object appears
• If objects are created in frame 1, code can go in
  frame 1
• But on different layers of course!
• Always have (at least) one layer called scripts
  or code or myActionscripts

10
What events can we handle?

• Flash exposes a wide range of event handlers to
  the scripting language
• The events we can handle include
• onKeyDown, onKeyUp keyboard
• onPress, onRelease button or movieclip click
• onMouseDown, onMouseUp mouse click
• onMouseMove mouse movement
• onRollOut, onRollOver mouse-over
• onDragOut, onDragOver mouse drag

11
Why so many event types?

• Different event types correspond to different
  types of interaction
• This makes Flash very flexible
• You could use the onMouseMove event handler to
  control sounds
• For example, use the system _xmouse property to
  pan from side to side
• And the _ymouse property to control volume

12
What can generate events?

• Most of the things you will need to manipulate or
  monitor for events are movieclips
• Buttons also generate events
• Simple graphics are less useful they are for
  look-and-feel, not interactivity
• In the tutorial, some elements seem to appear
  twice in the Library
• The raw data (e.g. jpeg image) has a movieclip
  version, too why is this a good idea?

13
Categorised Events

• The Flash players news bulletin is split into
  departments.
• Each department deals with specific types of
  events.
• These are known as objects and in ActionScript,
  these predefined objects are things like Key,
  Mouse and Movieclip.
• These objects have news reporters that respond
  only to certain events.
• When the Mouse news reporter sees a mouse-related
  event, they notify the Mouse department at HQ
  which broadcasts the news bulletin.

14
Listeners

• Listeners are user-defined objects that are
  registered with specific departments and listen
  to the news from those departments.
• When a department broadcasts that an event has
  occurred, the listeners attached to the
  department receive the information about the
  event.
• In ActionScript terms, a listener is an object
  that contains event handlers related to a
  specific predefined object.

15
Listener Methods

• There are methods that exist to allow the
  listeners to register and unregister with
  departments.
• To register with a specific department, we use
  the addListener method.
• To unregister we use the removeListener method.
• myobject new Object() // create a new
  object
• Mouse.addListener(myobject) // register
  myobject with Mouse events
• Mouse.removeListener(myobject) // unregister
  myobject

16
Advanced Events - example

• Advanced use of Flash involves dynamically
  loading data over networks
• If you want to put up a progress bar, how easy is
  it?
• Event handlers make it less difficult than you
  might expect
• For exampleonEnterFrame event checks
  myObj.getBytesTotal() against myObj.getBytesLoaded
  ()

http//www.kirupa.com/developer/mx2004/xml_flash_p
hotogallery.htm, by kirupa, 2nd September 2004
17
Further Reading

• Kirupa Colouring Bookhttp//www.kirupa.com/deve
  loper/mx2004/coloringbook.htm
• Kirupa Dynamic Event Handlers
  http//www.kirupa.com/developer/actionscript/tric
  ks/dynamicevent.htm
• Kirupa RPG Programming Introduction
  http//www.kirupa.com/developer/actionscript/rpgp
  rogramming.htm
• W3Schools Flash Tutorialshttp//www.w3schools.c
  om/flash/default.asp