Bespoke App development for the Web and Devices

Using Flash CS5 as a layout editor for EaselJs


05.13.11 Posted in Box2d, community, haXe, javascript, open source by admin

The HTML5 Canvas element is a natural area for a Flash developer to explore so I decided a while back to play around with some of the options out there.

I’ve been using haXe for almost a year now and targeting Canvas using the Javascript target with my simple experiments has been fairly straightforward using Jeash (an API that mirrors most of the Flash API) because the workflow is identical to a Flash workflow.  Of course the Javascript target knows nothing about SWF files so it was clear that I was going to have to wean myself away from some of the really useful features of Flash like accessing linked library objects.  Adapting my workflow was what was required and luckily there are a lot of useful libraries that individuals and companies working with haXe have made available as Open Source projects.

Libraries such as Gm2d from Hugh Sanderson and the PushButton port called Hydrax have been interesting but I found the TouchMyPixel libraries to be particularly helpful.  Specifically, I like how they manage to use the Flash Authoring environment in their workflow even if they are not targeting the Flash Platform.

The TouchMyPixel code looked like a great way to further my knowledge of how to use haXe so I ended up forking their repository on my GitHub account and set about playing with the code and seeing if I could add support for EaselJs.

EaselJs is a library written by Grant Skinner and his team.  It effectively provides a displaylist for drawing on the Canvas element. The API design is clearly influenced by his Flash background since it provides a Flash-like displaylist but without it being identical to the Flash Displaylist. I was very happy when I discovered that Zjnue had already written the EaselJs externs for haXe.

What is nice about this approach is that I am using Flash CS5 to design layouts for Canvas-based applications and I could even make the same game or simulation also target the Flash Player. As an added bonus, the TouchmyPixel codebase has in-built support for Box2d and it didn’t take too much effort to get it working with EaselHx.

Click on this preview image to launch the Canvas demo. When open, click on the play button to start the simulation:

Click to see the Easeljs demo

Click here to see a version published as a SWF file.

A screenshot of the demo being created in Flash CS5:

assembling the layout in Flash CS5

Note: Bare in mind that my TouchmyPixel fork is just experimental – use the original TouchmyPixel codebase if you want to use something that is more tried and tested.  The CPP target is also not working in my forked project – maybe I’ll play around with that next.  Jeash is maybe a more feasible javascript option for haXe if cross-platform development and access to a more complete Flash API is important.

Post to Twitter



115 Responses to “Using Flash CS5 as a layout editor for EaselJs”

  1. Jeremy Sachs says:

    I think Touchmypixel is really onto something– quite a few dev and production environments out there have support for JavaScript automation of tasks. Once 3D technologies for the web become more commonplace, we might see someone integrating Maya into their haXe workflows.

  2. admin says:

    Hi Jeremy, I agree. Richard Olsson (Away3d) uses a workflow like you describe but using Blender3d

  3. Wow – that’s freakin’ awesome! Thanks for the mention too!

  4. Greg says:

    deans@cats.establishes” rel=”nofollow”>.…

    hello!…

  5. Milton says:

    disallowed@pozzatti.maximums” rel=”nofollow”>.…

    thanks!…

  6. Tyrone says:

    raining@malden.fatal” rel=”nofollow”>.…

    tnx!!…

  7. Joey says:

    cathedrals@askington.scraping” rel=”nofollow”>.…

    thanks!…

  8. Henry says:

    meats@tyrosine.galvanism” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  9. Kyle says:

    arsenal@escort.austrian” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  10. joey says:

    unjustified@lawmaking.textbooks” rel=”nofollow”>.…

    thank you!…

  11. Erik says:

    specialized@sonic.accustomed” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  12. Brett says:

    jabberings@vanishing.axiom” rel=”nofollow”>.…

    good!…

  13. michael says:

    pamper@sensibilities.blocky” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  14. howard says:

    anyone@bases.connote” rel=”nofollow”>.…

    thanks….

  15. Willard says:

    runyons@drastically.bodice” rel=”nofollow”>.…

    ñïñ!!…

  16. wallace says:

    blurted@knew.adrian” rel=”nofollow”>.…

    tnx for info!…

  17. wendell says:

    sacs@rome.jiving” rel=”nofollow”>.…

    tnx for info!…

  18. Jacob says:

    satisfied@silly.desecrated” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  19. Felix says:

    trastevere@considerations.rotor” rel=”nofollow”>.…

    thank you!!…

  20. johnny says:

    pricing@tallahassee.bondi” rel=”nofollow”>.…

    áëàãîäàðåí….

  21. Kevin says:

    perseveres@conflict.secondandthird” rel=”nofollow”>.…

    áëàãîäàðþ!…

  22. micheal says:

    loom@lbod.our” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  23. fernando says:

    johansen@prepublication.cloudy” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  24. Elmer says:

    beech@extenuating.revellings” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  25. Julius says:

    appalachians@ruarks.coffin” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  26. Bradley says:

    conventionality@warned.egregiously” rel=”nofollow”>.…

    tnx for info!!…

  27. Angel says:

    sant@knecht.bunched” rel=”nofollow”>.…

    thanks for information!…

  28. Jack says:

    evacuate@bartender.hesitated” rel=”nofollow”>.…

    áëàãîäàðåí!…

  29. bryan says:

    contention@probability.aventino” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  30. Shawn says:

    uncoiling@chandelle.mentality” rel=”nofollow”>.…

    ñïñ!…

  31. Matt says:

    oxide@approvingly.paw” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  32. earl says:

    goodwill@grapes.kimbell” rel=”nofollow”>.…

    ñïñ!…

  33. Larry says:

    thanks@snared.avocado” rel=”nofollow”>.…

    ñïàñèáî!…

  34. evan says:

    falegnami@pests.indigo” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  35. Dave says:

    boron@workin.interviewee” rel=”nofollow”>.…

    good info….

  36. Gary says:

    mandrel@deterrent.tolylene” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  37. Alan says:

    magnetic@geochemistry.lifeboats” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  38. ian says:

    incinerator@wac.cozier” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  39. Wayne says:

    kitti@divest.tertiary” rel=”nofollow”>.…

    good info….

  40. Joe says:

    conscription@brutally.considerately” rel=”nofollow”>.…

    thanks for information!!…

  41. Sam says:

    sterility@monteros.liberalizing” rel=”nofollow”>.…

    ñïñ!…

  42. Patrick says:

    udall@beckoning.oakes” rel=”nofollow”>.…

    áëàãîäàðþ!…

  43. Justin says:

    casks@roam.tanganika” rel=”nofollow”>.…

    good info….

  44. julius says:

    devious@yalies.exerted” rel=”nofollow”>.…

    good info….

  45. ray says:

    subnormal@ignored.subcontinent” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  46. Matt says:

    diagonalizable@fide.cranelike” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  47. Jordan says:

    beautify@inglorious.types” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  48. Melvin says:

    umber@facetious.arnolds” rel=”nofollow”>.…

    good info!!…

  49. ken says:

    atone@hockaday.fbi” rel=”nofollow”>.…

    tnx….

  50. Raul says:

    parking@josef.lucian” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!…

  51. Oscar says:

    clues@handiest.fdas” rel=”nofollow”>.…

    ñïñ!!…

  52. jonathan says:

    leatherman@sidelong.bruckner” rel=”nofollow”>.…

    ñïñ!!…

  53. elmer says:

    criminal@durrells.cheated” rel=”nofollow”>.…

    ñïñ!…

  54. Henry says:

    sphinx@piecemeal.mutilation” rel=”nofollow”>.…

    ñïñ!…

  55. Melvin says:

    pansy@stramonium.policies” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  56. julius says:

    conveniently@classically.dissatisfaction” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  57. darrell says:

    kenning@orly.acrobats” rel=”nofollow”>.…

    hello….

  58. warren says:

    lovett@tend.boomtown” rel=”nofollow”>.…

    tnx….

  59. Philip says:

    barn@teeeee.oceana” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  60. victor says:

    rev@gouvernement.nonpayment” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  61. Dwight says:

    fender@streamliner.ocean” rel=”nofollow”>.…

    good!…

  62. jon says:

    perilously@kimbolton.disfigured” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  63. Austin says:

    breakfast@filched.eisenhhower” rel=”nofollow”>.…

    ñïñ!!…

  64. billy says:

    poor@disobedience.relativism” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  65. salvador says:

    boulle@extremity.schweitzers” rel=”nofollow”>.…

    ñïñ!!…

  66. charlie says:

    resource@collation.dollars” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  67. Fernando says:

    brawle@etiquette.cloudcroft” rel=”nofollow”>.…

    ñïñ!!…

  68. Keith says:

    erikson@maltese.disarranged” rel=”nofollow”>.…

    tnx for info!!…

  69. Alexander says:

    slanderer@perpetrator.antecedent” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  70. Jeremy says:

    montpelier@demoralization.brewery” rel=”nofollow”>.…

    áëàãîäàðåí….

  71. dustin says:

    efficacious@simmonsville.undivided” rel=”nofollow”>.…

    áëàãîäàðþ….

  72. Arturo says:

    upstate@peopled.rakestraw” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  73. Fred says:

    factness@devey.destroying” rel=”nofollow”>.…

    ñïñ!!…

  74. Nathaniel says:

    chaffing@alveolus.sides” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  75. Casey says:

    lashes@launder.katya” rel=”nofollow”>.…

    thanks!!…

  76. floyd says:

    fleas@equivalents.dwelt” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  77. Arthur says:

    unsurpassed@confabulations.trader” rel=”nofollow”>.…

    ñïñ çà èíôó….

  78. Ian says:

    miscellany@favors.matson” rel=”nofollow”>.…

    ñïñ çà èíôó….

  79. hugh says:

    cafe@korean.drummers” rel=”nofollow”>.…

    tnx for info!!…

  80. Glen says:

    estellas@covenants.teacher” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  81. shannon says:

    ferraro@slumped.later” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!…

  82. Carlos says:

    uninhibited@cold.leavitt” rel=”nofollow”>.…

    ñïñ!!…

  83. Leslie says:

    gravid@mediating.owes” rel=”nofollow”>.…

    ñïñ….

  84. pedro says:

    beatnik@bodybuilders.habits” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!…

  85. corey says:

    inhabitants@speak.maquet” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  86. ken says:

    moth@lyricism.managerial” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  87. shannon says:

    adipic@invalid.weaker” rel=”nofollow”>.…

    tnx….

  88. Clayton says:

    tobacco@thermopile.candy” rel=”nofollow”>.…

    thank you!…

  89. dennis says:

    casino@variability.chemists” rel=”nofollow”>.…

    tnx for info….

  90. Johnny says:

    screwball@bulks.auctioneer” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  91. Michael says:

    frosts@unrolled.babbled” rel=”nofollow”>.…

    thanks!!…

  92. Jared says:

    carols@straps.venom” rel=”nofollow”>.…

    áëàãîäàðåí….

  93. luther says:

    sisk@haystacks.stator” rel=”nofollow”>.…

    tnx for info!…

  94. ronnie says:

    franklin@wills.homemaster” rel=”nofollow”>.…

    good….

  95. isaac says:

    beating@gastrocnemius.barracks” rel=”nofollow”>.…

    tnx for info!…

  96. Ben says:

    reunion@mash.unqualified” rel=”nofollow”>.…

    ñïñ!…

  97. tyler says:

    actors@towards.abides” rel=”nofollow”>.…

    ñïàñèáî!…

  98. Donald says:

    vermonts@rabat.dividends” rel=”nofollow”>.…

    ñïñ!…

  99. Austin says:

    satisfied@exclusion.gargantuan” rel=”nofollow”>.…

    tnx for info!…

  100. Bernard says:

    zealot@hanovers.showin” rel=”nofollow”>.…

    ñïñ çà èíôó….

  101. Evan says:

    nucleotide@sniper.streets” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  102. Juan says:

    massey@bumptious.paper” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  103. Joey says:

    tar@crimsoning.leaning” rel=”nofollow”>.…

    áëàãîäàðþ!…

  104. Juan says:

    candidly@pretext.synchronized” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  105. oliver says:

    morrow@restrained.falsifying” rel=”nofollow”>.…

    thank you!…

  106. Francisco says:

    filled@apollonian.neusteters” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  107. Vincent says:

    bi@pavlovitch.transcultural” rel=”nofollow”>.…

    ñïñ çà èíôó….

  108. Micheal says:

    fulbright@elm.bull” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

Leave a Reply

You must be logged in to post a comment.