New Flash Extension: MotionSketch

Justin | extensions,Flash | Tuesday, February 10th, 2009

I had the idea when Flash CS4 came out to create a tool that recorded drawing in real-time and created a tween based on that drawing. Because of the slick new object-tween in Flash CS4, the tween could be created with just a start and end keyframe, but at the same time, the motion path could be incredibly complex. Additionally, all of the timing could be stored within a single easing curve. The resulting tween would be super clean and super editable. So I was fairly disappointed to find out that none of this new functionality had been included in the  JSFL (extensibility) API when Flash CS4 came out. After a lot of digging behind the scenes in the Flash application, as well as a very useful article and helpful correspondence from Flash engineer John Mayhew,  I came up with a way to accomplish this extension. I will cover the somewhat daunting technical details of this process in a future another post (UPDATE: technical post now available). For now, enjoy the extension!

Want to see it in action? Check out the MotionSketch video demo.

UPDATE (5/1/09): Released the Actionscript class to produce the write-in effect shown in the demo.

Download

(Compatibility: Flash CS4)
MotionSketch.mxp

Thanks again to John Mayhew, Jen DeHaan, and Richard Galvan @ Adobe.

Related Articles

57 thoughts on “New Flash Extension: MotionSketch”

  1. This is pretty damn cool MotionSketch for Flash CS4 http://tinyurl.com/be5wj3

  2. celldrifter says:

    Looks awesome. Interested to see if i works with bones…

    1. Justin says:

      I had originally intended to create an extension like this for bones as well (similar to the one in After Effects). Unfortunately, there’s no access to the bones through the JSFL API (unless someone at Adobe wants to correct me on that). I was able to hack the motion tween because some of the functionality existed prior to CS4 even though the motion object tween itself is new to CS4.

      I know the IK tool is written in JSFL, so I may spend some more time combing through that code in the future, but at this point, I don’t know of a way to accomplish this functionality with the IK model.

  3. Keith says:

    Justin, this is brilliant!

    1. Justin says:

      Thanks, Keith!

  4. Abel says:

    Idon’t know why , it’s don’t installed ???

  5. Eric says:

    I get an error trying to install this in Extension Manager. “Cannot update a file. The extension will not be installed.”

    1. Justin says:

      Eric and Abel: Make sure have Flash CS4 and that you’re using Extension Manager CS4. If you’ve double-clicked the mxp file and you have CS3 or previous Macromedia products installed, it may open an older version of Extension Manager. If that’s the case, open Extension Manager CS4 first, and click the install button. Since this extension installs files in multiple locations and adds a tool to the toolbar, you’ll likely need to be logged in as an administrator on the machine to install the extension.

  6. Abel says:

    Hi, justin, yes i have CS4 installed , when i click install button , this ask me for accepted or refused this plugin, when i accepted , i can’t see this in the manager and not see the tools in Flash CS4, where it’s installed?, what files this installed?

    Thanks in advance…….

    1. Justin says:

      Abel,
      After installing with Extension Manager, check the left side of Extension Manager to make sure Flash CS4 is selected and that only extensions for Flash are showing in the list. If you still can’t see MotionSketch in the list, then you might want to contact Adobe or post on their forums. You can also try going to the Flash menu (edit menu in Windows) and select Customize Tools…you might be able to find the tool there and add it to your toolbar (assuming the extension was installed at all).

      Out of curiosity…what language did you use to install Flash CS4? Sometimes this changes folder names within configuration directory…that can lead to some extension issues.

  7. Abel says:

    Hi, Justin,
    Flash and other CS4 application are installed in English, i retry and nothing happen,

    1. Justin says:

      Abel,
      I’ve posted a zipped version of the extension. Inside you’ll find a file called, manual_install.rtf, that contains instructions on how to manually install the files. It’s a bit more involved, but hopefully it will allow you to get the extension installed.

      Anyone else who’s having trouble with Extension Manager is welcome to download these files as well.

  8. Abel says:

    Hi, Justin , Thanks , many thanks, that’s work perfectly, good work , it’s amazing !!!!

    1. Justin says:

      Thanks, Abel. Glad it’s working for you!

  9. Eric says:

    I was the Eric above who couldn’t install. I downloaded the zipped version to use, and realized I didn’t have a “Tools” folder in the “Configuration” folder (I’m on a Mac). It turns out I hadn’t run Flash CS4 yet, and the First Run hadn’t setup the config folder yet. I launched Flash CS4 and then quit it. Then I was able to use the Extension Manager to install. I don’t know if this is the trouble others are having, but I thought I’d let you know.

    Thanks for the great extensions.

  10. Justin says:

    Hi Eric,
    Thanks for the follow-up! I’m glad to hear that it worked out. Thanks for sharing that info, too. Hopefully it will help out others as well.

  11. hsgn (hsgn) says:

    FlashでMotionSketch。http://tinyurl.com/be5wj3

  12. DoofMoof says:

    Quality Tool! Thank you very much. You should be on the flash team dude! haha

    1. Justin says:

      Thanks, DoofMoof!

  13. eddj says:

    I can’t find the tool settings.

  14. eddj says:

    I should have said that there is no option for the tool settings. Or at least I can’t find it.

  15. Justin says:

    eddj,
    Deselect everything on stage and select the MotionSketch tool. The options button is underneath the “Tool Settings” heading in the Property Inspector (you may have to twirl open the Tool Settings).

  16. eddj says:

    THanks Justin, boy do I feel like an idiot, lol. It was there right in front of my face.

  17. Justin says:

    No worries. Happens to the best of us.

  18. parnac luft says:

    “Plugin tool script error in method mouseUp” from the output window

    1. Justin says:

      Parnac,

      Try restarting Flash and see if the problem still occurs.

  19. Jason says:

    Hi Justin,
    Thanks for this extension, it works great!

    I’m wondering if there’s a tool with this functionality to make a line that draws itself. Or a more controlled version that uses the pen tool?

    Jason

    1. Justin says:

      Thanks for your comment, Jason. There’s a little known extension called AnimationPencil that’s pretty darn cool. It draws a frame-by-frame animation of what you draw on stage. Here’s the English translation of the page.

      Or you can combine MotionSketch with my MotionBrush Actionscript class. That will leave you with an editable tween path, but may get more complicated with multiple lines. There’s video tutorial included on the page.

  20. Jason says:

    Looks great! I’ll play with these. Thanks again!

  21. Michael says:

    This is a great tool! Unfortunately, I am trying to use it to simulate a sketch-on effect – leading a pen around the page to draw on an object. If I do something simple, it works fine – but when I draw a complicated path, I get the error: The object you are trying to paste cannot be interpreted as a path. Only strokes with two endpoints are valid for this operation.

    Any idea? I am drawing a continuous path…

    1. Justin says:

      Michael,
      This is an error from Flash, not the tool. So it is unavoidable in some circumstances. This usually happens when I try to draw too much too fast, or when I accidentally close my path (i.e., drawing a circle). Once you figure out what part is causes that error, it can usually be avoided.

  22. Michael says:

    Thanks for the response! It seemed if my path crossed to many times or if parts of it were too close together, I would get the error. Really didn’t matter how fast or slow I drew. I managed a workaround by drawing parts of my path on different layers, then making sure the end of one illustration was very near the start of the next – kind of a pain, but not nearly as much as trying to animate along a path and manually set tween rates.. the project is still under construction, but the animation can be seen here: http://ftcholidaygiveback.com

  23. Justin says:

    Cool, Michael. Glad you could find a work-around. Nice job on the animation!

  24. Benimation says:

    I get an error message when I try to install it. It’s probably something to do with the extension manager being Dutch instead of English. for all your other extensions I had to move all files from an “nl” folder to an “en” folder. There seems to be no way to change the language, it simply detects it automatically.
    A .zip download of the content and stuff would be great, I know where to install them.

    1. Justin says:

      Benimation,
      Here’s the link with instructions.

  25. MotionSketch Flash CS4 extension http://bit.ly/npUcB + many more …

  26. JorgeR says:

    Hi Justin!
    Thanks for this great tool, very useful for everyone, mainly for the noobs like me.
    I´ve run thru the install issues but I sorted out reading the comments on install languages and doing the manual install. Everything seems to work fine except the “Undo last tween command” , whenever I try to redraw I get an error saying that “the current selection is a tween span which does not support drawing” I have to mention that I´m using CS5.
    Thanks again and congratulations for this.

    Jorge

  27. Justin says:

    Hi Jorge,
    It looks like they made a little change in CS5. I’ve posted an update (v 1.0.2) for both the MXP and ZIP packages. I’ve taken advantage of some of the native functions added to CS5. So, not only should the Undo last tween Command work completely now, but MotionSketch should render even faster in CS5.

  28. bluray says:

    I was gettin an error message but after some tweaking ok

  29. Justin says:

    Bluray, if you can tell the steps leading up to the error, what the error message said, and what you did to avoid it, perhaps I can post an update that resolves the error you encountered. Thanks!

  30. Lil'Herb says:

    Justin,

    This is a great effect… I’m looking for something simular. Do you guys know where I can find an effect for Flash Cs4 that will sketch out my drawing that I did in Photoshop of a sketched shoe. I want it to look as though someone with a pencil is sketching it out in flash. If anyone can’t help me please email me: herbspeters@yahoo.com

  31. Justin says:

    Lil’Herb, I don’t know of anything that will do this with a bitmap (like a Photoshop file). It’s much more difficult to simulate automated drawing with a bitmap than with a vector path, since the image information is stored as pixels (rather than lines and curves).

    Here are 2 ideas:
    1) If you converted the format to a vector format…I did see someone demo an ActionScript class a few years ago at Flash Camp in SF that would draw lines from an SVG file (the video demo has been removed, but maybe you can locate the author).

    2) Use MotionSketch + the MotionBrush Actionscript class to draw a mask that reveals your drawing as if it’s being drawn.

  32. Tosca says:

    HI.
    I’m a big user of your great extensions. Thanks for all!
    But Motion sketch doesn’t work with me.
    Install is OK, but when I use the tool…nothing happens.
    When I draw my path with the Motion sketch tool, it doesn’t stay on the stage and the symbol isn’t tweened. No error mesage. Just … nothing.
    A solution?
    Flash CS4 on iMac

  33. Justin says:

    Hi Tosca,
    Do you see lines as you’re drawing?
    Did you check out the video demo linked above?

  34. Tosca says:

    Hi,
    thanks for your quick reply.

    it’s OK now. I ‘ve restarted Flash and all works perfectly!
    As usually!

    Bug was mine. Sorry!

  35. Justin says:

    No problem, Tosca. Glad it’s working!

  36. TavoCello says:

    Is it updated to cs6? I NEED to know, i just love this thing SO much! Please?

    1. Justin says:

      Yes, MotionSketch should work with CS6.

      1. TavoCello says:

        Wow, thanks a LOT! I´m too amazed with what you´ve done, it really helps animation in flash. Thanks massively for the fast response! (and excuse my first post, wrong page)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>