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.

53 Comments »

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

    Comment by yapiodesign (John Olson) — February 12, 2009 @ 12:38 am

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

    Comment by celldrifter — February 12, 2009 @ 1:14 am

  3. 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.

    Comment by Justin — February 12, 2009 @ 1:45 am

  4. Justin, this is brilliant!

    Comment by Keith — February 12, 2009 @ 10:59 pm

  5. Thanks, Keith!

    Comment by Justin — February 12, 2009 @ 11:18 pm

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

    Comment by Abel — February 16, 2009 @ 3:55 am

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

    Comment by Eric — February 16, 2009 @ 4:52 pm

  8. 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.

    Comment by Justin — February 16, 2009 @ 8:49 pm

  9. 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…….

    Comment by Abel — February 17, 2009 @ 7:05 pm

  10. 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.

    Comment by Justin — February 19, 2009 @ 4:49 am

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

    Comment by Abel — February 19, 2009 @ 9:33 am

  12. 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.

    Comment by Justin — February 20, 2009 @ 6:53 pm

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

    Comment by Abel — February 21, 2009 @ 11:18 pm

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

    Comment by Justin — February 21, 2009 @ 11:26 pm

  15. [...] used some of the techniques that I created for the MotionSketch tool to interact with the new tweening model. I’m still planning to post a technical explanation [...]

    Pingback by The Missing Flash Panel: EaseCaddy | Ajar Productions — February 26, 2009 @ 7:33 am

  16. 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.

    Comment by Eric — March 3, 2009 @ 6:00 am

  17. 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.

    Comment by Justin — March 3, 2009 @ 6:23 am

  18. a Motion Sketch plugin for Flash ::
    http://tinyurl.com/be5wj3

    Comment by mgfest (mgfest) — April 8, 2009 @ 11:38 pm

  19. a Motion Sketch plugin for Flash ::
    http://tinyurl.com/be5wj3

    Comment by masondixon (Mason Dixon) — April 8, 2009 @ 11:38 pm

  20. RT @masondixon: a Motion Sketch plugin for Flash :: http://tinyurl.com/be5wj3

    Comment by rawss (Ross Gerbasi) — April 8, 2009 @ 11:49 pm

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

    Comment by hsgn (hsgn) — April 29, 2009 @ 11:09 am

  22. [...] idea that I had when creating the MotionSketch extension was that it could be used to do write-on effects. I was going to write an Actionscript [...]

    Pingback by MotionBrush: Free Actionscript Class | Ajar Productions — May 2, 2009 @ 12:43 am

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

    Comment by DoofMoof — May 9, 2009 @ 11:46 am

  24. Thanks, DoofMoof!

    Comment by Justin — May 10, 2009 @ 2:59 am

  25. I can’t find the tool settings.

    Comment by eddj — May 19, 2009 @ 10:18 pm

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

    Comment by eddj — May 19, 2009 @ 10:43 pm

  27. 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).

    Comment by Justin — May 21, 2009 @ 2:55 pm

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

    Comment by eddj — May 21, 2009 @ 9:28 pm

  29. No worries. Happens to the best of us.

    Comment by Justin — May 21, 2009 @ 9:33 pm

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

    Comment by parnac luft — August 19, 2009 @ 4:31 pm

  31. Parnac,

    Try restarting Flash and see if the problem still occurs.

    Comment by Justin — August 27, 2009 @ 1:21 am

  32. 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

    Comment by Jason — September 11, 2009 @ 5:49 pm

  33. 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.

    Comment by Justin — September 11, 2009 @ 6:35 pm

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

    Comment by Jason — September 11, 2009 @ 6:53 pm

  35. 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…

    Comment by Michael — November 29, 2009 @ 5:22 pm

  36. 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.

    Comment by Justin — December 1, 2009 @ 8:59 pm

  37. 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

    Comment by Michael — December 1, 2009 @ 9:33 pm

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

    Comment by Justin — December 1, 2009 @ 9:39 pm

  39. 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.

    Comment by Benimation — December 4, 2009 @ 10:52 pm

  40. Benimation,
    Here’s the link with instructions.

    Comment by Justin — December 4, 2009 @ 10:57 pm

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

    Comment by flanture (Flash Adventure) — February 27, 2010 @ 12:18 am

  42. Tá em ksa? veja isso, motionSketch: http://ajarproductions.com/blog/2009/02/10/flash-extension-motionsketch/

    Comment by erickjones (Erick Jones) — April 6, 2010 @ 1:22 pm

  43. 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

    Comment by JorgeR — August 14, 2010 @ 7:39 pm

  44. 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.

    Comment by Justin — August 15, 2010 @ 1:42 am

  45. I was gettin an error message but after some tweaking ok

    Comment by bluray — September 17, 2010 @ 11:48 pm

  46. 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!

    Comment by Justin — September 18, 2010 @ 4:31 am

  47. 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

    Comment by Lil'Herb — September 25, 2010 @ 2:36 pm

  48. 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.

    Comment by Justin — September 25, 2010 @ 8:30 pm

  49. [...] MotionSketch: http://ajarproductions.com/blog/2009/02/10/flash-extension-motionsketch/ [...]

    Pingback by Professional Web Page Design Company & Flash Banner Ad Design Ottawa, Canada - Useful Free Flash Extensions - Wilder Tweedale Web Design Blog — November 26, 2010 @ 4:16 am

  50. 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

    Comment by Tosca — November 7, 2011 @ 11:24 am

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

    Comment by Justin — November 7, 2011 @ 5:24 pm

  52. Hi,
    thanks for your quick reply.

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

    Bug was mine. Sorry!

    Comment by Tosca — November 7, 2011 @ 7:40 pm

  53. No problem, Tosca. Glad it’s working!

    Comment by Justin — November 7, 2011 @ 8:10 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment

You may use the following html tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .


4 × two =

Subscribe without commenting