2533CIT: Multimedia IIB

1
2533CIT Multimedia IIB

• Week 3 Functions, MovieClips and Classes

Coridyn Fitzgerald-Hood
2
Object and Class Review

• Classes are a description of an object.

3

• State
• Information that can be stored in an object.

4

• Behaviour
• Actions and interactions the object can perform.

5
Class/Object Relationship

• All Objects are instances of a Class.
• Instances of Classes are stored in Variables.
• Variables give the third property of
  Object-Oriented programming Identity.

6
is_a

• Vertical mapping between Classes and Subclasses
  and Objects and Classes
• is_a

7
Inheritance

• Object is_an Object
• MovieClip is_an Object
• Array is_an Object
• String is_an Object
• Number is_an Object

8
Inheritance

• We inherit from a Class or extend a Class by
  using the extends statement.
• All public properties from the parent class are
  available in the sub-class.

9
Inheritance

• Vehicle is_a MovieClip
• Car is_a Vehicle
• Through the magic of inheritance
• Car is_a MovieClip

10
Inheritance

• Inheritance and is_a only work down the Class
  hierarchy.
• MovieClip is_an Object
• Object is_not_a MovieClip

11
has_a

• Objects and Classes have a horizontal mapping
  to their state and behaviour.
• has_a

12

• A has_a mapping is used to describe a property
  defined on a Class or object.
• MovieClip has_a _name
• Array has_a length
• MovieClip has_an onPress

13

• ASHolder has_a MovieClip
• (Really, ASHolder has_a mc)

14
Instantiation

• new keyword
• var aCar new Car()
• var bVehicle new Car()
• var cCar new Vehicle() // Error.

15
Review

• has_a is used to describe the relationship
  between unrelated classes.
• Properties
• is_a is used to describe the relationship
  between related classes.
• Inheritance

16
Purpose of Classes

• Classes, if utilised properly, are an excellent
  example of Divide and Conquer programming.
• Break a large, complex problem into small,
  discrete problems.
• Ideally, a class should do one thing and do it
  well.

17
Photo Gallery

• Problem Build an application that loads images
  from a server and displays them to the
  user. If an image is selected with the mouse
  show a larger version of the image.

18
Photo Gallery

• We could write a single class to solve our
  problem
• ... But it would be large, messy and hard to
  maintain.
• Instead, identify key areas of functionality and
  create classes to manage them.
• E.g.
• PhotoManager.as
• Image.as

19
Purposes of Classes

• Avoid re-writing code.
• Avoid redundancy, increase reusability, increase
  maintainability.
• E.g. Extending MovieClips

20
Dynamic MovieClips
21
Extending MovieClip

• Create a Class that extends MovieClip.
• Associate our class with the MovieClip symbol.
• Create instances of our custom code.

22

• Two major reasons for dynamically instantiating
  MovieClips
• Scalability,
• Avoid redundancy.

23
Scalability

• At design-time we cant anticipate the needs of
  the user
• How many instances of a MovieClip do we create?
• Large overhead
• What if we have lots of MovieClips that are never
  used?

24

• Tutorial 1 Ball example
• If we needed a new ball, we created a new
  instance from the library Boring and too much
  work!
• Dynamic MovieClips solve this create as many
  movieclips as we want when theyre needed.

25

• Example
• DesignTimeInstances.fla and RunTimeInstances.fla
• Example Drag and Drop Drawing Program
• See Drawing Example.swf

26
Instantiating MovieClips

• MovieClips are not instantiated with the new
  keyword.
• In keeping with the spirit of Actionscript, there
  are a number of different methods

27

• MovieClip.attachMovie()
• MovieClip.duplicateMovieClip()
• MovieClip.loadMovie()
• MovieClip.loadMovieNum()
• MovieClip.createEmptyMovieClip()
• MovieClipLoader Class

28

• To keep things simple we will just use
• MovieClip.attachMovie()

29
Creating MovieClips for Runtime Instantiation

• Write these steps down
• Create your MovieClip symbol - Enter the symbol
  name, - Open the Advanced properties.

30

• Select Export for Actionscript

31

• Enter the MovieClip Identifier
• This is the name we will use to reference the
  symbol in our code.
• Ensure Export in first frame is enabled (It is
  enabled by default).
• Press OKWe can now dynamically instantiate
  this symbol.

32
attachMovie() Syntax

• The attachMovie function allows us to instantiate
  a MovieClip from the library without needing an
  instance to the stage first.
• attachMovie Function Definition

33
MovieClip instance that will create the new
MovieClip
attachMovie function call
34
Symbol identifier in library
Instance name of our new MovieClip (_name
property)
35
Display depth must be unique within the calling
MovieClip (otherwise it will overwrite the
previous instance)
Returns a reference to the created MovieClip
36
attachMovie Examples

• See attachMovieExample.as

37
Associating MovieClip Classes

• Flash provides the ability to extend the
  MovieClip class and assign the class directly to
  a MovieClip symbol.
• This allows us to create classes that exist on
  the stage with a graphical representation.
• NOTE It is the graphical item itself.

38
Associating MovieClip Classes

• Enter the class name (not the filename) to
  associate with the MovieClip (with any classpath
  information.

39
MovieClip Depths

• The depth parameter passed to attachMovie(),
  createEmptyMovieClip() and duplicateMovieClip()
  determines the stage draw order.
• A MovieClip with a higher depth will be drawn
  above a MovieClip in a lower depth.
• MovieClip depths do not have to be sequential,
• Negative depths can also be used, but these
  values are usually used for clips placed at
  design-time.

40

• Only a single MovieClip can occupy a given depth
  on a MovieClip at a time.
• If a MovieClip is placed in the same depth as
  another MovieClip, the old movie is replaced.
• This code will only display 1 MovieClip on stage
• for (var i 0 i lt 10 i)
• _level0.attachMovie("Ball", "Ball" i, 1)

41

• Each MovieClip has its own set of depths.
• var clip1 _level0.createEmptyMovieClip(clip1,
  5)
• clip1.createEmptyMovieClip(clip2, 5)
• Both depths are valid because they exist on
  different MovieClip instances.

42
MovieClip Depths

• http//www.kirupa.com/developer/actionscript/depth
  s2.htm

43
Swapping Depths

• MovieClip.getNextHighestDepth()Number
• Return the highest unoccupied depth.
• MovieClip.getDepth()Number
• Retrieve the MovieClip depth.
• getInstanceAtDepth(depthNumber)MovieClip
• Determine if a particular depth is empty test
  if null
• if (getInstanceAtDepth(5))

44
Swapping Depths

• MovieClip.swapDepths()Void
• Alter the depth of a MovieClip, if the depth is
  already occupied the MovieClips are swapped.
• These functions allows us to control the
  hierarchy of the display items.
• See SwapDepths.fla

45
Removing MovieClips

• Just as MovieClips can be created at runtime,
  MovieClips can also be removed
• MovieClip.removeMovieClip()
• MovieClip.unloadMovie()
• See RunTimeRemoval.fla

46
Writing Classes
47
Writing Actionscript Classes

• Actionscript Classes are superficially similar to
  JavaScript or Java class definitions.
• If you are unsure of how to define/use a language
  feature, try it out and see what happens )

48
Example Class

• See ClassExample.as, Ball.as

49
Ball Class
50
Defining Classes Tips and Tricks

• Do not declare and instantiate complex member
  variables in the class header
• That is
• Anything created with the new keyword
• Arrays, Objects, User-defined classes,
• Or MovieClips.
• Otherwise the variable might be shared between
  all instances of that class (very strange bug).

51
TipsAndTricks.as
52
Avoiding Redundancy

• Photo Gallery
• Create n MovieClip symbols associated with our
  Photo class.
• Create an instance of each Photo MovieClip that
  loads its image and responds to user input.
• So far, so good?

53
Functions
54
Functions As Objects

• In Flash, all functions are Objects
• Instance of the Function class
• Function Objects allow
• Function sharing one function shared amongst
  multiple object instances,
• Parameter passing send a function as a
  parameter to another function,
• Scope control we can specify the execution
  scope of a function.

55
Function Definitions

• Two examples
• Whats the difference?

56
Function Definitions

• There is no difference!

57
Function Definitions

• Function (capital F) indicates the Function
  class.
• function (little f) is an instance of the
  Function class.

58
Anatomy of a Function
Variable called hangUp
Of type Function
That does not return anything
Assign it an instance of a Function
59
Side-by-Side Comparison

• Java
• Actionscript

60
Calling and Referencing

• Given the function
• function run()String
• trace(Hello, world)
• To call the function, use the round brackets
• var a run() // Assign the result of //
  run() to a.
• To reference the function, use the variable name
• var b run // Assign an instance of // the
  run function to b.

61
Conversion Exercises
Convert these Java functions definitions to
Actionscript functions