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!
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.
Get updates from Ajar Productions
Sign up today and get the InDesign Split Text premium extension for free!
This is pretty damn cool MotionSketch for Flash CS4 http://tinyurl.com/be5wj3
Looks awesome. Interested to see if i works with bones…
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.
Justin, this is brilliant!
Thanks, Keith!
Idon’t know why , it’s don’t installed ???
I get an error trying to install this in Extension Manager. “Cannot update a file. The extension will not be installed.”
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.
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…….
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.
Hi, Justin,
Flash and other CS4 application are installed in English, i retry and nothing happen,
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.
Hi, Justin , Thanks , many thanks, that’s work perfectly, good work , it’s amazing !!!!
Thanks, Abel. Glad it’s working for you!
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.
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.
a Motion Sketch plugin for Flash ::
http://tinyurl.com/be5wj3
a Motion Sketch plugin for Flash ::
http://tinyurl.com/be5wj3
RT @masondixon: a Motion Sketch plugin for Flash :: http://tinyurl.com/be5wj3
FlashでMotionSketch。http://tinyurl.com/be5wj3
Quality Tool! Thank you very much. You should be on the flash team dude! haha
Thanks, DoofMoof!
I can’t find the tool settings.
I should have said that there is no option for the tool settings. Or at least I can’t find it.
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).
THanks Justin, boy do I feel like an idiot, lol. It was there right in front of my face.
No worries. Happens to the best of us.
“Plugin tool script error in method mouseUp” from the output window
Parnac,
Try restarting Flash and see if the problem still occurs.
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
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.
Looks great! I’ll play with these. Thanks again!
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…
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.
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
Cool, Michael. Glad you could find a work-around. Nice job on the animation!
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.
Benimation,
Here’s the link with instructions.
MotionSketch Flash CS4 extension http://bit.ly/npUcB + many more …
Tá em ksa? veja isso, motionSketch: http://ajarproductions.com/blog/2009/02/10/flash-extension-motionsketch/
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
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.
I was gettin an error message but after some tweaking ok
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!
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
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.
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
Hi Tosca,
Do you see lines as you’re drawing?
Did you check out the video demo linked above?
Hi,
thanks for your quick reply.
it’s OK now. I ‘ve restarted Flash and all works perfectly!
As usually!
Bug was mine. Sorry!
No problem, Tosca. Glad it’s working!
Is it updated to cs6? I NEED to know, i just love this thing SO much! Please?
Yes, MotionSketch should work with CS6.
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)
Glad to help!
You do great work. I always use SmartMouth and FrameScrub for my lipsync projects. Will this and some of the other older extensions like “timeline to graphic” ever get Flash CC versions?
Thanks, Nickquest!
Unfortunately, with the CC 2015 update, Adobe broke the extension installer process for all versions of CC. Once they get that up and running we can release new versions of extensions. Feel free to check in with us again.
We’ll also share updates via our newsletter.