Extending Components

1
(No Transcript)
2
Extending Components

• Darron Schall

FlashintheCan
Saturday, April 9 2005
3
Target Audience

• Familiar with AS2
• Basic OOP experience
• Component Experience
• Should have at least used one in a project
• Dont have to have creation experience

4
Topic Clarification

• What this presentation is
• Leverage fundamental OOP principles to allow for
  easy component creation by reusing existing
  component functionality
• What this presentation is NOT
• Introduction to creating components
• Introduction to the v2 framework
• Components 101

5
Topics to Cover

• Why?
• Ways to extend
• Finding components
• Gathering Information
• Creating the component
• Examples
• Deploying the component
• Further Exploration / Resources
• The secret password

6
Why Extend?

• Save time
• Avoid reinventing the wheel
• Change default (undesired?) behavior
• Add new (missing?) functionality
• OOP makes it easy!

7
Ways to Extend

• Inheritance
• Composition
• Prototype
• Proto-hacking

8
Inheritance

• A fundamental concept of OOP
• Accomplished via the extends keyword
• Parent / Child association
• is a relationship
• Superclass / Subclass
• Does not respect visibility
• public / private
• Inspectable meta-data gets inherited in child
• Override methods in the parent
• Use super to access original parent method

9
Composition

• One class uses another
• has a relationship
• Class is just a member variable
• private var listList
• More coding required
• Have to re-create component API
• Forward methods to internal component
• Have to re-create Inspectable meta-data
• Easier to keep API consistent if parent changes?

10
Proto-hacking

• Ugly
• Modifying a class at runtime
• Save a reference to original function to override
• cp _global.com.whatever.TheComponent.prototype
  
• cp.oldMethod cp.method
• cp.method function()
• this.oldMethod.apply(this, arg1, arg2)
• // add code here..
• Useful to modify a common base class that
  multiple components inherit from
• Easy way to change functionality without going
  through the process of creating a component

11
Finding Components

• The v2 components
• BJC Bit components - http//www.beamjive.com
• XP Components - http//www.epresenterplus.com
• B-Line Charting Components - http//www.blinex.com
  
• Flashloaded - http//www.flashloaded.com
• Flash Sim - http//www.flashsim.com/FMXISComponent
  s
• Macromedia Exchange - http//www.macromedia.com/fl
  ash/exchange

12
Gathering Information

• Check Documentation for the public API
• Check Source Code
• V2 components ship with source
• Check Intrinsic Classes
• Debug -gt List Variables
• ActionScript Viewer

13
Creating the component

• Create a MovieClip with 3 layers
• Actions stop()
• boundingBox boundingBox_mc
• dead preview
• Assets everything that the component will rely
  on, placed on a keyframe at frame 2
• The original component
• Any skins
• Extra classes (blank MovieClips with AS2 class
  linkage)
• All symbols should not be export in first frame
• Right click the symbol in library -gt Component
  Definition
• Set up AS 2.0 class

14
Example - DraggableList

• 3 Classes
• DraggableList extends List
• DragAndDropManager to keep track of data
• DraggingVisual to update mouse cursor
• Skins for Cursor
• dragValidSkin
• dragInvalidSkin
• See Skinned.fla for example

15
Example - FormattedTextInput

• A single class FormattedTextInput
• Helper class for some Character methods
• isCharacter, isUpperCase, isLowerCase, isDigit
• Authortime label textfield
• Pain the butt!
• Had to re-create in FormattedTextInput because it
  didnt inherit correctly
• Had difficultly creating via code only
• Added format and value properties
• Adds itself as an event listener to monitor input
  and text property changes

16
Example DoubleClick proto-hack

• AS1 style code on the first frame
• Modifies a common base class
• All List-based components now broadcast
  doubleClick
• Ugly, but works

17
Example Sephiroth DND Tree

• Composition
• Component itself extends UIComponent
• Component has a v2 tree component

18
Deploying the Component

• Export .SWC file
• Right click in library
• Place in directory like C\Documents and
  Settings\username\Local Settings\Application
  Data\Macromedia\Flash MX 2004\en\Configuration\Com
  ponents
• Reload components panel for it to appear
• Package as .MXP file for easy install/uninstall
  through Extension Manager
• Search google for how to do this -)
• EULA?

19
Further Explanation / Resources

• Inheritance vs. Composition debate
• Sephiroth Drag and Drop Tree
• http//sephiroth.it/file_detail.php?id133
• Creating Components
• Building and Testing Components in Flash MX 2004
  Allen Ellison and Nigel Pegg
• http//www.macromedia.com/devnet/mx/flash/articles
  /buildtest_comp.html
• Components Learning Guide Macromedia
• http//www.macromedia.com/devnet/mx/flash/componen
  ts/components05.html
• Introduction to the v2 component architecture
  Chafic Kazoun
• http//www.ultrashock.com/tutorials/flashmx2004/v2
  a-01.php
• Developing Components in Flash MX 2004 Chafic
  Kazoun
• http//www.ultrashock.com/tutorials/flashmx2004/co
  mponents.php
• FITC 2004 Presentation Component Development -
  Chafic Kazoun
• http//www.rewindlife.com/archives/000153.cfm

20
The secret Password

• http//www.darronschall.com/fitc2005
• Contact
• E-mail darron_at_darronschall.com
• Weblog http//www.darronschall.com