Step by step wck quick start guide

sebbdk edited this page Feb 16, 2012 · 3 revisions

Create 4 Walls and a Box in Flash CS4

Setting up the Project: Creating the files

  • Open Flash CS4.
  • File→ New → Flash File (Actionscript 3.0)
  • File → Save As
  • Create new folder for project
  • Save .fla file
  • (In Windows Explorer)
    Create a new folder in project folder called wck-lib
  • copy the following WCK folders into wck-lib: Box2D, Box2DAS, extras, gravity, misc, shapes, wck

Setting up the Project: Project Settings

  • Switch back to Flash IDE
  • File → Publish Settings → Flash
  • Check Export SWC
  • Actionscript 3.0 Settings
  • Add ./wck-lib to the Source path
  • Document class: wck.WCK
  • Check definition found for the wck.WCK class
  • Add ./wck-lib/Box2DAS/Box2D.swc to Library path.
  • Click OK to close AS3 Settings dialog
  • Click OK Publish Settings dialog

Creating our World: Creating a Physics-Affected Box

  • Select Rectangle Tool
  • Draw a rectangle on the stage (approx. 100px by 100px)
  • Select the rectangle we just drew
  • Convert to symbol (F8)
  • Change Symbol name to MyRectangle
  • Change registration to centre (Important for physics to be generated correctly)
  • Check Export for ActionScript
  • Change Base class to shapes.Box
  • Check definition found for the shapes.Box class (Success!)
  • Click Ok to close Convert to Symbol dialog
  • Close warning for no class found on MyRectangle
  • Right Click on MyRectangle in the library and select ‘Component Definition’
  • Change class to wck.BodyShape
  • Click OK to close Component Definition dialog

Creating our World: Creating the World Instance

  • Select the MyRectangle instance on the stage (the one we drew)
  • Convert to symbol (F8)
  • Change Symbol name to MyWorld
  • Ensure Registration is centered
  • Check Export for ActionScript
  • Change Base class to wck.World
  • Check definition found for the wck.World class (Success!)
  • Click Ok to close Convert to Symbol dialog

Creating our World: Creating 4 Walls and a Box

  • Edit our new MyWorld instance by double clicking on it.
  • We’re going to make the world boundary now. Resize the MyRectangle to act as a floor, eg it’s as wide as the stage, and 40px tall & move to the bottom of the stage.
  • Open Component Inspector (Shift-F7)
  • Change ‘Type’ to ‘Static’ (right down the bottom of the list)
  • Copy your floor to create walls and a ceiling now, doesn’t matter if they overlap.
  • Drag a new ‘MyRectangle’ from the Library to the stage

Experiencing our World:

  • Save
  • Test Movie

And if everything went AOK, you should have a draggable, physics-affected box inside 4 walls!