2533CIT: Multimedia IIB

1
2533CIT Multimedia IIB

• Week4 Empty MovieClips, Drawing Functions and
  Debugging

Coridyn Fitzgerald-Hood
2
Array Review
3
Array Review
4
Array Review
5
Array Review
6
Array Review
7
Array Review

• Removing a clip from the stage does not affect
  our references to them
• (However we must remove all references to a
  MovieClip to allow it to be garbage collected)

8
Array Review

• Removing a clip from an array does not affect
  its presence on stage

9
Array Review
10
Array Review
11
Array Review

• Consider
• How do we access nested arrays?

12
Debugging
13
Debugging

• Debugging is an important aspect of programming,
• Therefore, it is important to utilise a logical
  debugging strategy.
• There are three important stages in the debugging
  lifecycle.
• What are they?

14
Debugging Stage 1

• The first stage in a bugs lifecycle has the most
  impact on an application
• Writing the bug
• All bugs are written by a person at some point,
• Either a single line of code, or
• The combination of multiple mistakes.

15
Debugging Stage 1

• How do we address this problem?
• Most importantly
• Think things through before coding
• Write out a natural language description of the
  problem and the solution,
• Work towards a goal.
• Use pseudo-code to flesh out your solution,
• Am I on the right track?

16
Debugging Stage 1

• Reduce the ability or probability of making a
  typing error
• Use consistent code formatting and styling (i.e.
  indenting),
• Use consistent naming conventions,
• Avoid ambiguous names,
• Include useful comments explain what you are
  trying to do for a complex code block.

17
Debugging Stage 1

• Understand the Actionscript naming conventions
• MovieClip properties begin with an underscore
  _name
• MovieClip properties are all lowercase _lockroot
• Use an editor with keyword highlighting.
• A name beginning with a capital letter indicates
  a class name.
• e.g. MovieClip, String, Object, Stage, Array,
  Function

18
Debugging Stage 1

• A name beginning with a lowercase letter is a
  property or variable.
• Using this convention we can easily see if we are
  accessing a class or a property
• e.g. Stage.width
• constant (immutable) properties are written in
  uppercase
• e.g. Array.UNIQUESORT

19
Debugging Stage 1

• Read what you write!
• Understand the semantics of your code.
• It might compile but that doesnt mean it is
  correct...

20
Debugging Stage 2
21
Debugging Stage 2

• Discovering and locating a bug.
• Once we have discovered a bug we must determine
  its location.
• We cant fix it if we dont know where it is.

22
Debugging Isolating the Bug

• When we discover a bug we may not know where it
  exists within the code.
• We need information
• What did we expect to happen?
• What did happen?
• What did you do when the bug appeared?
• What are the symptoms of the bug?
• Then we can infer the problem and take action.

23
Debugging Example

• See Debugging.fla

24
Debugging Step 2

• What did we expect to happen?
• What did happen?
• What did we do (or what action took place) when
  the bug occurred?
• What are the symptoms of the bug?

25
Debugging Step 2

• Using the information from the previous questions
  we can determine a set of possible causes
• SimpleMenu.createItem isnt being called,
• attachMovie might be incorrect,
• Are we overwriting old MovieClips?
• Mispelled function name?
• Mispelled MovieClip name?
• Are we moving the Items off the screen?

26
Debugging Step 2

• As we can see, there are a lot of possible causes
  for a single bug.
• We need to logically reduce the possibilities and
  locate the bug.
• Unfortunately Flash/Actionscript 2.0 has few
  debugging tools available to developers
• In the Flash IDE we have access to the MovieClip
  Debug Mode.
• Otherwise we must output debug information
• trace(msgString)

27
Debugging Flash Debugger

• Begin by setting a breakpoint in the Actionscript
  code,
• You can set a breakpoint by clicking on the grey
  border to the left of the code (or line numbers).
• You can only set breakpoints in external
  Actionscript files in the Flash 8 (or later) IDE.

28
Debugging Flash Debugger

• Begin debugging by running the movie in debug
  mode
• Press ctrl shift enter, or
• apple/command shift enter, or
• Toolbar Menu Control -gt Debug Movie
• The Flash player will run until it hits a
  breakpoint,
• It will pause and return you to the Actionscript
  code,
• Step through the code execution with the buttons
  at the top of the debugger.

29
(No Transcript)
30
trace()

• Flash provides the global trace(msgString)
  function to print information to the Output
  Panel.
• We can use this to see if a function is being
  called and if we are passing the correct
  information.
• This method can be quicker than using the
  debugger for narrowing down the problem we can
  print a series of debug messages in quick
  succession.

31
Tips for using trace()

• When using the trace() function it is important
  to output useful information.
• Not just information about the bug but
  information to help us locate the trace statement
  later.
• Find the specific bug location.
• So we cant lose it later on orphaned debug
  code.
• E.g. Compare the followingtrace(xStart)trace(
  xStart xStart)trace((MenuItem) onPress
  xStart xStart)

32
Tips for using trace()

• My debug standard (which you may choose to follow
  or not)
• trace((Class Name) function_name value1
  var1 , value2 var2 , value3 var3)
• For longer traces I usually place the variable
  name and value straight after the other
• value1 value1 value2 value2
  value3 value3)

33
Step 3 Fixing the Bug

• Once we have located the bug it can usually be
  fixed,
• In most cases bug fixes are trivial syntax
  errors, misnamed variables, etc.
• Logic errors can be a different situation,
• A major logic error can seriously affect multiple
  aspects of a large project.
• Important to plan things out before we dig
  ourselves into a hole.

34
Event Handling
35
Event Handler Limitations

• Flash event handlers can exhibit some unexpected
  behaviour
• Parent MovieClips consume events before their
  children.
• What does this mean?
• A child MovieClip will not receive any events for
  an event (or related event) that is also
  specified on the parent.

36
parentMC -childMC
-onRelease()
37
Flash event capturing stops propagation
parentMC -childMC
-onRelease() -onPress()
Parent receives andconsumes mouse events
38
Application Example

• Imagine a simple childrens application
• A child can drive a car around the stage by
  dragging a car with the mouse.
• Like a real car, all of the passengers move with
  the car.
• The child can click on a passenger to have them
  say their name.
• How can we implement this application?

39
Broken Example
carMC -person1 -onPress()
-onPress() -onRelease()
-onMouseMove()

• See Altering Hierarchy Broken.fla

40
Explanation

• We can see that the mouse events on the parent
  are interfering with the mouse event on the
  child.
• If we remove the mouse handlers from the parent
  MovieClip the event on person1 will respond to
  mouse events.

carMC -person1 -onPress()
-onPress() -onRelease()
-onMouseMove()
41
Review
Flash event capturing stops propagation
parentMC -childMC
-onRelease() -onPress()
Parent receives andconsumes mouse events
42
Event Handler Workarounds

• There are two options for working around this
  event behaviour.
• Implement Event Bubbling.
• Alter the movie hierarchy to make the MovieClips
  siblings instead of parent and child.

43
Event Bubbling

• For more information on how Flash handles events
  and an example of Event Bubbling visit the
  following tutorial by Senocular
• http//www.senocular.com/flash/tutorials/buttoncap
  turing/

44
Alter the MovieClip Hierarchy
emptyClip -carMC
-onPress() -onRelease()
-onMouseMove() -person1
-onPress()
See Altering Hierarchy Fixed.fla
45
carMC -person1 -onPress()
-onPress() -onRelease()
-onMouseMove()
Changed from parent/child relationship
emptyClip -carMC
-onPress() -onRelease()
-onMouseMove() -person1
-onPress()
To siblings children of thesame parent
46
Tweaks

• In the previous example we altered the MovieClip
  hierarchy.
• We also had to alter some of the code in Car.as
  to retain the correct click-and-drag behaviour.

47
Original Code
Altered Code
48
Altering MovieClip Hierarchy

• We can use the same trick with dynamically
  instantiated MovieClips.
• As well as instantiating library symbols at
  runtime it is possible to dynamically create
  empty MovieClips
• MovieClip.createEmptyMovieClip(clipNameString,
  depthNumber)MovieClip
• This allows us to quickly and easily alter our
  dynamic hierarchy without creating empty
  MovieClip symbols in the Flash IDE.

49
Drawing Functions
50
MovieClip Drawing Functions

• Flash provides several MovieClip methods for
  creating graphics at runtime.
• Drawing Functions
• moveTo(xNumber, yNumber)Void
• lineTo(xNumber, yNumber)Void
• curveTo(controlXNumber, controlYNumber,
  anchorXNumber, anchorYNumber)Void

51
moveTo(), lineTo()

• MovieClip.moveTo(xNumber, yNumber)Void
• Move the invisible drawing cursor to the
  specified location without drawing anything.
• MovieClip.lineTo(xNumber, yNumber)Void
• Draw a straight line from the current cursor
  position to the specified location.

52
curveTo()

• MovieClip.curveTo(controlXNumber,
  controlYNumber, anchorXNumber,
  anchorYNumber)Void
• Draw a curved line from the current cursor
  position to anchor(x, y) curving towards
  control(x, y)

Control Point
Anchor Point
53
Drawing Styles

• lineStyle allows us to specify the colour and
  thickness of our drawn lines
• Flash 8
• lineStyle(thicknessNumber, rgbNumber,
  alphaNumber, pixelHintingBoolean,
  noScaleString, capsStyleString,
  jointStyleString, miterLimitNumber)Void
• Flash 7lineStyle(thicknessNumber, rgbNumber,
  alphaNumber)

54
Colours

• Drawing colours follow the standard 3 byte RGB
  representation.
• Each colour - Red, Green and Blue can have a
  value between 0 and 255.
• Given a three byte size, flash can represent
  16,777,216 discrete colours (224).

55
Colours

• Drawing colours in Flash are often represented as
  a three byte hexadecimal value.
• Hexadecimal values are specified with a 0x
  prefix (zero and an x) and followed by the
  hexadecimal number.
• Hexadecimal numbers represent their values with
  the digits 0-9 and the letters A-F,
• A-F represent the decimal values 10 to 15.

56
Hexadecimal Numbers

• The three colour values are split along the byte
  boundaries
• 0xFF0055
• Each colour can have a value between 00 and FF (0
  and 255 respectively).
• White is 0xFFFFFF, black is 0x000000.

57
Shape Fills

• beginFill specifies a flat colour to fill our
  drawn shape
• beginFill(rgbNumber,alphaNumber)Void
• Each call to beginFill() should be matched by a
  call to endFill
• endFill()
• To remove all drawn graphics on a MovieClip call
  the clear function
• clear()

58
Special Fills

• beginBitmapFill(bmpBitmapData, matrixMatrix,
  repeatBoolean, smoothingBoolean)Void
• beginGradientFill(fillTypeString, colorsArray,
  alphasArray, ratiosArray, matrixObject,
  spreadMethodString, interpolationMethodString
  , focalPointRatioNumber) Void

59
Drawing Example

• function drawRect()
• this.lineStyle(1, 0xFF00FF, 75, false, none,
  miter, none)
• this.beginFill(0x00FF00, 100)
• this.moveTo(0, 0)
• this.lineTo(0, 10)
• this.lineTo(10, 10)
• this.lineTo(10, 0)
• this.lineTo(0, 0)
• this.endFill()

60
Drawing a Circle

• Bezier Curves (what we draw with the curveTo()
  function) are not very good for drawing circles,
• We can only approximate a circle with the
  curveTo() drawing function.
• See drawCircle.as for the function to draw a
  circle.

61
Array Sorting
62
Sorting

• There are times that we wish to sort array
  information.
• Luckily Flash provides us with an in-built
  sorting function
• Array.sort()
• Array.sort(compareFunctionFunction)
• Array.sort(optionsNumber)
• Array.sort(compareFunctionFunction,
  optionsNumber)

63
Array.sort()

• The basic sort function performs a case-sensitive
  string-wise comparison of the array information.
• This treats numbers and strings, so 100 is sorted
  before 99.
• The array is modified to reflect the sort order.

64
Array.sort(compareFunction)

• The sort function allows us to specify a custom
  comparison function that will be used to sort the
  values in the array.
• The function must take two arguments (A and
  B) and return a number
• -1, if A should appear before B in the sorted
  sequence,
• 0, if A equals B,
• 1, if A should appear after B in the sorted
  sequence.
• This is useful for comparing custom classes.

65
Comparison Function
66
Array.sort(options)

• The sort function can also take a number that
  specifies built-in sort options
• From the Flash help
• One or more numbers or names of defined
  constants, separated by the (bitwise OR)
  operator, that change the behaviour of the sort
  from the default.

67
Sorting Options

• The available sorting options are
• Array.CASEINSENSITIVE
• Array.DESCENDING
• Array.NUMERIC
• Array.RETURNINDEXEDARRAY
• Array.UNIQUESORT
• For the most part, the first three are the most
  useful.

68

• The numeric option compares numbers as numeric
  values instead of strings placing 100 after 99
  instead of before.
• Descending reverses the order of the sorted
  array giving highest-to-lowest values.

69
Array.sort(compare, options)

• The final usage of the sort function allows us to
  specify a custom comparison function along with
  the sorting options.

70
(No Transcript)
71
Co-ordinate Spaces
72

• As we have seen previously all MovieClips have
  their own relative co-ordinate spaces.
• That is, positions relative to a MovieClips
  registration point.
• Sometimes we need to calculate a point in one
  MovieClips co-ordinate space relative to another
  MovieClip.

73
Example

• Imagine a simple childrens application
• Drag-and-drop people into a Car MovieClip on
  stage.
• A child can drive the car around the stage by
  dragging the car with the mouse.
• Like a real car, all of the passengers move with
  the car.
• How can we implement this application?
• (This will be discussed in the tutorial)