Rich Media 2 - PowerPoint PPT Presentation

1 / 29

About This Presentation

Title:

Rich Media 2

Description:

{ trace('Ouch!'); private function onSquareDoubleClick(event:MouseEvent):void { trace('Double ouch!'); Try it out. Mouse events. Now let's create a rollover event. ... – PowerPoint PPT presentation

Number of Views:27

Avg rating:3.0/5.0

Slides: 30

Provided by: Instr181

Category:

more less

Transcript and Presenter's Notes

Title: Rich Media 2

1
Rich Media 2

Week 5 User Interaction

2
Events

Events are instances of the Event class they are
things that happen (mouse clicks, rollovers,
keypresses).
Events have a variety of properties that relate
to the type of event that occured (position of
the mouse pointer, specific key pressed, if a
modifier key was held down. etc.)
Many different classes extend the core Event
class (MouseEvent, KeyboardEvent, etc.).

3
Events

The part of the code that waits for an event to
occur is an event listener. Event listeners are
created with the addEventListener() method.
The addEventListener() method takes two
parameters
The type of event being listened for (like a
mouse click)
A reference to the method (action) you want
called when that event occurs (which is set up
separately).
For example
myButton.addEventListener(MouseEvent.CLICK,
onNextClick)
function onNextClick(myEventMouseEvent)void
this.nextFrame()

4
Mouse events

Create a new folder on your computer called
yourName_drawingAp
Inside put another folder called myClasses
Launch Flash and open a new Flash file. Save it
as eventTest.fla into the yourName_drawingAp
folder (keep it outside of myClasses).
In the Document Class field in the property
inspector write myClasses.EventTest
Save again.

5
Mouse events

Now create a new Actionscript file. Save it as
EventTest.as into the myClasses folder.
Create the basic package and class definitions
including an empty constuctor method
package myClasses
import flash.display.Sprite
public class EventTest extends Sprite
public function EventTest()

6
Mouse events

To see a mouse event in action lets create an
object to click on. We'll put the graphics
methods in a separate function called drawSquare
(next slide).
package myClasses
import flash.display.Sprite
public class EventTest extends Sprite
private var _mySquareSprite
public function EventTest()
_mySquare new Sprite()
drawSquare(0xFF0000)
addChild(_mySquare)

7
Mouse events

Now the drawSquare method
package myClasses
import flash.display.Sprite
public class EventTest extends Sprite
private var _mySquareSprite
public function EventTest()
_mySquare new Sprite()
drawSquare(0xFF0000)
addChild(_mySquare)
private function drawSquare(coloruint)void
_mySquare.graphics.clear()
_mySquare.graphics.beginFill(color)
_mySquare.graphics.drawRect(10,10,100,100)
_mySquare.graphics.endFill()

8
Mouse events

Next we need to import the MouseEvent class
package myClasses
import flash.display.Sprite
import flash.events.MouseEvent
public class EventTest extends Sprite
private var _mySquareSprite
public function EventTest()
_mySquare new Sprite()
drawSquare(0xFF0000)
addChild(_mySquare)
...

9
Mouse events

Now we add the listener and its method
...
addChild(mySquare)
_mySquare.addEventListener(MouseEvent.CLICK,
onSquareClick)
private function drawSquare(coloruint)void
_mySquare.graphics.clear()
_mySquare.graphics.beginFill(color)
_mySquare.graphics.drawRect(10,10,100,100)
_mySquare.graphics.endFill()
private function onSquareClick(eventMouseEvent)
void
trace("Ouch!")
...
Try it out. Run the program and click on the
square.

10
Mouse events

Let's add a double-click event
...
addChild(_mySquare)
_mySquare.doubleClickEnabled true
_mySquare.addEventListener(MouseEvent.CLICK,
onSquareClick)
_mySquare.addEventListener(MouseEvent.DOUBLE_CLI
CK,
onSquareDoubleClick)
...
private function onSquareClick(eventMouseEvent)
void
trace("Ouch!")
private function onSquareDoubleClick(eventMouseE
vent)void
trace("Double ouch!")
Try it out.

11
Mouse events

Now let's create a rollover event. Add two new
event listeners...
...
_mySquare.doubleClickEnabled true
_mySquare.addEventListener(MouseEvent.CLICK,
onSquareClick)
_mySquare.addEventListener(MouseEvent.DOUBLE_CLIC
K,
onSquareDoubleClick)
_mySquare.addEventListener(MouseEvent.ROLL_OVER,
onSquareOver)
_mySquare.addEventListener(MouseEvent.ROLL_OUT,
onSquareOut)
...

12
Mouse events

...and two new methods...
private function onSquareClick(eventMouseEvent
)void
trace("Ouch!")
private function onSquareDoubleClick(eventMouseE
vent)void
trace("Double ouch!")
private function onSquareOver(eventMouseEvent)v
oid
drawSquare(0x0000FF)
private function onSquareOut(eventMouseEvent)vo
id
drawSquare(0xFF0000)
Try it out now.

13
Creating a drawing application

Launch Flash and open a new Flash file. Save it
as drawingAp.fla into the yourName_drawingAp
folder (keep it outside of myClasses).
In the Document Class field in the property
inspector write myClasses.DrawingApplication
Save again.

14
Creating a drawing application

Now create a new Actionscript file. Save it as
DrawingApplication.as into the myClasses folder.
Create the basic package and class definitions
including an empty constuctor method
package myClasses
import flash.display.Sprite
public class DrawingApplication extends Sprite
public function DrawingApplication()

15
Creating a drawing application

We need a suface on which to draw so we'll make
a light gray box (called _canvas) that's a little
smaller than the stage. First we create the
object
package myClasses
import flash.display.Sprite
public class DrawingApplication extends Sprite
private var _canvasSprite
public function DrawingApplication()
_canvas new Sprite()

16
Creating a drawing application

Now we give our canvas shape and color
...
_canvas new Sprite()
_canvas.graphics.beginFill(0xF0F0F0)
_canvas.graphics.drawRect(60, 20,
stage.stageWidth-80,
stage.stageHeight-40)
_canvas.graphics.endFill()
addChild(_canvas)
Run the Flash file you should see a light gray
box.

17
Creating a drawing application

Next we'll set the default values for our
drawing 'pen' to 2pt black by creating two
variables and adding them as properties of the
lineStyle() method
public class DrawingApplication extends Sprite
private var _myThickint 2
private var _currentColorNumber 0x000000
private var _canvasSprite
...
_canvas.graphics.endFill()
_canvas.graphics.lineStyle(_myThick,
_currentColor)
addChild(_canvas)

18
Creating a drawing application

Let's add some listeners. We need to listen for
the MOUSE_DOWN event which will cause the 'pen'
to draw. We also need to listen for the
MOUSE_MOVE event which will cause the 'pen' to
follow the mouse, and the MOUSE_UP event which
will remove the MOUSE_MOVE event listener.
The first step is to import MouseEvent
package myClasses
import flash.display.Sprite
import flash.events.MouseEvent
...

19
Creating a drawing application

Now we add some listeners
...
addChild(_canvas)
_canvas.addEventListener(MouseEvent.MOUSE_DOWN,
onCanvasMouseDown)
_canvas.addEventListener(MouseEvent.MOUSE_UP,
onCanvasMouseUp)
private function onCanvasMouseDown(eventMouseEve
nt)void

20
Creating a drawing application

Within the MOUSE_DOWN event we move the 'pen' to
the current mouse position and prepare to draw by
adding the MOUSE_MOVE listener
...
private function onCanvasMouseDown(eventMouseEve
nt)void
_canvas.graphics.moveTo(event.localX,
event.localY)
_canvas.addEventListener(MouseEvent.MOUSE_MOVE,
onCanvasMouseMove)
private function onCanvasMouseMove(eventMouseEve
nt)void
_canvas.graphics.lineTo(event.localX,
event.localY)
event.updateAfterEvent()

21
Creating a drawing application

Finally we create the method for the MOUSE_UP
listener to follow when called
...
private function onCanvasMouseMove(eventMouseEve
nt)void
_canvas.graphics.lineTo(event.localX,
event.localY)
event.updateAfterEvent()
private function onCanvasMouseUp(eventMouseEvent
)void
_canvas.removeEventListener(MouseEvent.MOUSE_MO
VE,
onCanvasMouseMove)
Try it out

22
Creating a drawing application

That's great, if you don't mind having only one
color and line weight to draw with. Let's give
the user some choices by adding some color
swatches and line-width choices.
We'll begin by adding the swatches to the
screen we'll use the API to do this, rather than
draw them by hand on the stage.

23
Creating a drawing application

...
_myCanvas.addEventListener(MouseEvent.MOUSE_UP,
myMouseUp)
var blackSwatchSprite new Sprite()
blackSwatch.graphics.beginFill(0x000000)
blackSwatch.graphics.drawCircle(30, 30, 20)
blackSwatch.graphics.endFill()
addChild(blackSwatch)
var redSwatchSprite new Sprite()
redSwatch.graphics.beginFill(0xFF0000)
redSwatch.graphics.drawCircle(30, 80, 20)
redSwatch.graphics.endFill()
addChild(redSwatch)

24
Creating a drawing application

Now we need to add some event listeners to make
the swatches 'clickable'
var blackSwatchSprite new Sprite()
blackSwatch.graphics.beginFill(0x000000)
blackSwatch.graphics.drawCircle(30, 30, 20)
blackSwatch.graphics.endFill()
addChild(blackSwatch)
blackSwatch.addEventListener(MouseEvent.CLICK,
onBlackClick)
var redSwatchSprite new Sprite()
redSwatch.graphics.beginFill(0xFF0000)
redSwatch.graphics.drawCircle(30, 80, 20)
redSwatch.graphics.endFill()
addChild(redSwatch)
redSwatch.addEventListener(MouseEvent.CLICK,
onRedClick)

25
Creating a drawing application

Now we need to create the onBlackClick and
onRedClick methods
private function onCanvasMouseUp(eventMouseEvent
)void
_canvas.removeEventListener(MouseEvent.MOUSE_DO
WN,
onCanvasMouseMove)
private function onBlackClick(eventMouseEvent)v
oid
_canvas.graphics.lineStyle(_myThick,
0x000000)
_currentColor 0x000000
private function onRedClick(eventMouseEvent)voi
d
_canvas.graphics.lineStyle(_myThick,
0xFF0000)
_currentColor 0xFF0000
Try it Now

26
Creating a drawing application

We can do the same thing with line weight. First
add two new swatches after the color swatches
var thickLineSprite new Sprite()
thickLine.graphics.beginFill(0x000000)
thickLine.graphics.drawRect(15, 280, 30, 20)
thickLine.graphics.endFill()
addChild(thickLine)
thickLine.addEventListener(MouseEvent.CLICK,
onThickClick)
var thinLineSprite new Sprite()
thinLine.graphics.beginFill(0x000000)
thinLine.graphics.drawRect(15, 320, 30, 5)
thinLine.graphics.endFill()
addChild(thinLine)
thinLine.addEventListener(MouseEvent.CLICK,
onThinClick)