Flash Actionscript Event Handling

1
Flash Actionscript Event Handling
2
Event Handling

• Right now we know all about variables lets go
  back to our text input/output example
• Suppose we want to create an Enter button e.g.
  user types stuff into the input field, when
  finished clicks Enter, and then the text is
  displayed in the output field???
• What we need is some way to detect that the user
  has clicked on the button and some way of knowing
  what to do when this happens

3
ActionScript and Events

• ActionScript code is executed when an event
  occurs E.g., when a movie clip is loaded, when a
  keyframe on the timeline is entered, or when the
  user clicks a button.
• Events can be triggered either by the user or by
  the system. Users click mouse buttons and press
  keys the system triggers events when specific
  conditions are met or processes completed (the
  SWF file loads, the timeline reaches a certain
  frame, a graphic finishes downloading).

4
ActionScript and Events

• When an event occurs, you write an event handler
  to respond to the event with an action.
• When you are writing ActionScript code to perform
  event handling, there are three important
  elements you'll want to identify
• The event source
• The event
• The response

5
ActionScript and Events

• The event source
• Which object is the one the event is going to
  happen to?
• E.g., which button will be clicked, or which
  Loader object is loading the image?
• The event source is also known as the event
  target, because it's the object where the event
  is targeted by the Flash Player (where the event
  actually happens).

6
ActionScript and Events

• The event
• What is the thing that is going to happen, the
  thing that you want to respond to?
• This is important to identify, because many
  objects trigger several events.
• The response
• What step(s) do you want performed when the event
  happens?

7
ActionScript and Events

• Any time you write ActionScript code to handle
  events, it will include these three elements, and
  the code will follow this basic structure
• elements in bold are placeholders you'd fill in
  for your specific case.

function eventResponse(eventObjectEventType)void
// Actions performed in response to the
event go here. eventSource.addEventListener(Ev
entType.EVENT_NAME, eventResponse)
8
ActionScript and Events

• First, we define a function, which is the way to
  specify the actions you want performed in
  response to the event.
• Next, we call the addEventListener() method of
  the source object, in essence "subscribing" the
  function to the specified event so that when the
  event happens, the function's actions are carried
  out.

9
ActionScript and Events

• A function provides a way for you to group
  actions together, with a single name that is like
  a shortcut name to carry out the actions.
• When you're creating a function for event
  handling, you must choose the name for the
  function (named eventResponse in this case), and
  you must also specify one parameter
  (eventObject).
• Specifying a function parameter is like declaring
  a variable, so you also have to indicate the data
  type of the parameter.

10
ActionScript and Events

• There is an ActionScript class defined for each
  event, and the data type you specify for the
  function parameter is always the class associated
  with the particular event you want to respond to.
  
• Finally, between the opening and closing curly
  brackets ( ... ), you write the instructions
  you want the computer to carry out when the event
  happens.

11
ActionScript and Events

• Once you've written the event-handling function,
  you need to tell the event source object (the
  object that the event happens to--for example,
  the button) that you want your function to be
  called when the event happens.
• You do this by calling the addEventListener()
  method of that object (all objects that have
  events also have an addEventListener() method).

12
ActionScript and Events

• The addEventListener() method takes two
  parameters
• First, the name of the specific event you want to
  respond to.
• Second, the name of your event response function.

13
Examining the Event-handling Process

• What happens when you create an event listener?
  Lets look at creating a listener function that
  is called when an object named myButton is
  clicked.
• Here is how this code would actually work when
  it's running in Flash Player

function eventResponse(eventMouseEvent)void
//Actions performed in response to the event go
here. myButton.addEventListener(MouseEvent.CLI
CK, eventResponse)
14
Examining the Event-handling Process

• When the SWF file loads, Flash Player makes note
  of the fact that there's a function named
  eventResponse().

Function eventResponse (event MouseEvent)void
//actions performed in response to the event go
here. myButton.addEventListener(MouseEvent.CLICK
, eventResponse)
15
Examining the Event-handling Process

• Flash Player then runs the code (specifically,
  the lines of code that aren't in a function). In
  this case that's only one line of code calling
  the addEventListener() method of the event source
  object (named myButton) and passing the
  eventResponse function as a parameter.

Function eventResponse (event MouseEvent)void
//actions performed in response to the event go
here. myButton.addEventListener(MouseEvent.CLICK
, eventResponse)
myButton listeners function1() function2()
16
Examining the Event-handling Process

• Internally, myButton has a list of functions that
  are listening to each of its events, so when its
  addEventListener() method is called, myButton
  stores the eventResponse() function in its list
  of event listeners.

Function eventResponse (event MouseEvent)void
//actions performed in response to the event go
here. myButton.addEventListener(MouseEvent.CLICK
, eventResponse)
myButton listeners function1() function2() eve
ntResponse()
17
Examining the Event-handling Process

• At some point, the user clicks the myButton
  object, triggering its click event (identified as
  MouseEvent.CLICK in the code).
• At that point, the following occurs

18
Examining the Event-handling Process

• Flash Player creates an object, an instance of
  the class associated with the event in question
  (MouseEvent in this example).
• For many events this will be an instance of the
  Event class for mouse events it will be a
  MouseEvent instance and for other events it will
  be an instance of the class that's associated
  with that event.
• This object that's created is known as the event
  object, and it contains specific information
  about the event that happened what type of event
  it is, where it happened, and other
  event-specific information if applicable.

19
Examining the Event-handling Process
Function eventResponse (event MouseEvent)void
//actions performed in response to the event go
here. myButton.addEventListener(MouseEvent.CLICK
, eventResponse)
myButton listeners function1() function2() eve
ntResponse()
eventObject targetmyButton
typemouseEvent.CLICK
20
Examining the Event-handling Process

• Flash Player then looks at the list of event
  listeners stored by myButton.
• It goes through these functions one by one,
  calling each function and passing the event
  object to the function as a parameter.
• Since the eventResponse() function is one of
  myButton's listeners, as part of this process
  Flash Player calls the eventResponse() function.

21
Examining the Event-handling Process
Function eventResponse (event MouseEvent)void
//actions performed in response to the event go
here. myButton.addEventListener(MouseEvent.CLICK
, eventResponse)
eventObject targetmyButton
typemouseEvent.CLICK
myButton listeners function1() function2() eve
ntResponse()
22
Examining the Event-handling Process

• When the eventResponse() function is called, the
  code in that function runs, so your specified
  actions are carried out.

Function eventResponse (event MouseEvent)void
//actions performed in response to the event go
here. myButton.addEventListener(MouseEvent.CLICK
, eventResponse)
myButton listeners function1() function2() eve
ntResponse()
eventObject targetmyButton
typemouseEvent.CLICK
23
Event-Handling Examples

• Clicking a button to start the current movie
  clip playing
• Draw a circle on the stage, convert it to a
  graphic symbol and give it the name ball.
• Create a simple animation with motion tweening
  using ball.
• Create a new button symbol for your play
  button. Call it myButton.

24
Event-Handling Examples

• On your main timeline create a new layer called
  button and with that layer selected drag
  myButton onto the stage.
• With your button still selected go to the
  properties panel and Give this instance of
  myButton the instance name playbutton.
• Create another new layer and call it actions.
• Put the following code into frame 1 of your
  actions layer.

25
Event-Handling Examples

• Remember playButton is the instance name of the
  button, and this is a special name meaning "the
  current object"

this.stop() function playMovie(eventMouseEvent
)void this.play() playButton.addEventL
istener(MouseEvent.CLICK, playMovie)
26
Event-Handling Examples

• Clicking a button to navigate to a URL
• Create a new button symbol and call it myButton.
• Place the button on the main timeline and give it
  the instance name linkButton.
• Create a new layer called actions and put the
  following code into frame 1

27
Event-Handling Examples

• Remember In this case, linkButton is the
  instance name of the button

function gotoFacebook(eventMouseEvent)void
var facebookURLURLRequest new
URLRequest("http//www.facebook.com/")
navigateToURL(facebookURL) linkButton.addEve
ntListener(MouseEvent.CLICK, gotoFacebook)
28
Text Input Example

• Open a new movie and select the Text Option.
  Select Input Text from the drop-down menu in the
  properties panel and click once on the stage to
  insert a textfield.
• Give your textfield the instance name entryText.
• With the Text Option still selected insert
  another textfield, select Dynamic Text from the
  drop-down menu and give it the instance name
  outputText.

29
Text Input Example

• Create a button symbol for your enter button.
  Call it myButton.
• Drag myButton onto the main timeline and give it
  the instance name entryButton.
• Create a new layer called actions and place the
  following code into frame 1

30
Text Input Example

• Remember entryText is an input text field, and
  outputText is a dynamic text field. Entrybutton
  is the instance name of your enter button.

function updateOutput(eventMouseEvent)void
var pressedKeyString entryText.text
outputText.text "You typed " pressedKey
entryButton.addEventListener(MouseEvent.CLICK
,updateOutput)