Wacom makes cool products. Wacom loves the artists that use their products. Wacom also loves the graphic design and animation community. But most of all, Wacom is cool because of people like Westom Maggio and Joseph Sliger, the hosts of a regularly scheduled webinar that showcases artists, designers and animators of all walks of life and how they integrate Wacom products into their workflow. This week I was asked back to present again on Flash design and animation techniques because contrary to popular belief, Flash as a development tool is very much alive and well.
Toon Boom vs Flash: Drawing Subtitutions
More Toon Boom love from Tony Ross. Learn how to use drawing substitutions in Animate Pro!
Adobe Edge Animate Test
The above animation may not seem like much but consider the fact that it was created entirely in Adobe Flash (I know, still not impressed), exported using the Sprite Sheet Generator (yeah…big whoop again), imported into Adobe Edge Animate and published to HTML5 and embedded into this WordPress theme using a plugin (admit it, it’s kind of cool now – especially if you are seeing this on your iOS mobile device).
The new Citrus game engine
In an effort to step up my Adobe Flash Pro game, I’m learning about, well, Flash gaming – specifically the new Citrus game engine. I recently worked with Tom Krcha by supplying him with a couple of animations for his recent Citrus article. I used the new DragonBones extension, a new open source skeletal animation extension that outputs texture atlas sheets and animation metadata all within the Flash Pro IDE. Check out Tom’s complete tutorial. Meanwhile, I’ll be building my own simple game engine to use as an example for a future book update
Advanced copies!
Just when I almost stopped thinking about it entirely, it shows up on my doorstep. The FedEx box was placed on the cold dark steps leading to my front door. I noticed it as soon as I got out of my car. The sender on the package said ‘Taylor & Francis‘, and I just knew it was a copy of Pushing Pixels. Coincidentally I had emailed my production editor this morning about the status of the book and just a few hours later I was holding it in my own hands.
I have been more eager to see this book than my previous titles because of the difficult printing issues we’ve experienced during production. Taylor & Francis uses an American printer while previous titles such as the How to Cheat in Adobe Flash series have used a printer in China. The difference between the 2 printers? The HTCIF series printed successfully without any technical issues. I submitted my print ready PDFs and a few weeks later the book were shipped. The same process of screen capturing, preparing files, InDesign layout and exporting didn’t yield the same results with the American printer. After numerous failed tests I had to edit every single image in the book manually by increasing the resolution and changing their color profiles. It was grunt work at its purest.
I carefully removed the shrink wrap, a production detail that was missing from previous titles, and could immediately smell the faint traces of untainted paper and fresh ink. I cracked the binding and went through every single page, one by one, until I reached the back cover. I examined every word and image, with the fear of discovering the inevitable; typos. The strange thing about writing a book is, you proof read your own words countless times, as does the technical editor, proof reader and ultimately the production editor. We all find various spelling and syntax errors. The corrections are made and the the book is scrutinized several more times thereafter for inconsistencies. When the book finally goes to print, at least 10 people have examined the entire contents from cover to cover. But inevitably, assuredly and without fail, with the printed book held firmly in hand, you will always find at least 1 blatantly obvious grammatical or layout mistake glaring at you from the page.
I found 2.
On page 32 the alignment of an entire block of text overlaps a screenshot image. It wasn’t like that in the source file or PDF, but it’s there in the printed book.
My bio on the back cover is the outdated version. It was rewritten and submitted in time, but for some reason, it’s not there.
At the end of the day, these are only 1st world problems and I will certainly go on living with them. Some of the screenshot images in the book are slightly fuzzy too. But there’s nothing that can be done about it. It’s just a book. It’s just a book that I hope helps anyone trying to tread water in the deep dark sea of digital animation.
Pushing Pixels
I’m long over due for an update as to what’s going on with that new book title you may have heard I was writing this past year. If you haven’t heard, I was asked by Focal Press to write a brand new animation title. I told them I’m not smart enough to write another book on the same subject matter and my fear was duplicating my efforts and diluting the sales of the existing book. After all, how many ways can I explain tweening or inverse kinematics in Adobe Flash?
Focal Press didn’t care. They told me the book could be about anything I wanted to write about. So I reached deep down inside myself (which is illegal in some states) and realized I may actually have a small nugget of knowledge to offer the digital animation world. My current articles, titles and tutorials teach readers individual animation techniques using Flash but I failed to recognize the most important technique of all; how to take all those tips and tricks to create an entire project from start to finish. From concept to storyboard, design to rigging, and ultimately editing and publishing to the web and mobile devices.
The idea for a new book title was fully realized.
This is what Pushing Pixels is all about. The book walks you through 3 of my own personal and professional animation projects from blank canvas to a format suitable for viewing across a myriad of platforms.
But wait! There’s more!
The final chapter of the book focuses entirely on creative apps for mobile devices. I wrote about everything from Adobe Touch Apps to sophisticated drawing and animation apps. I feature a few of my favorite styluses and the Wacom Inkling. If you are curious about being creative while mobile, this chapter may pique your interest.
Pushing Pixels, as of this writing, is in the hands of the printer and according to my wonderful production editor, the advanced copies look awesome. If you’ve preordered the book already, I humbly thank you with warm and fuzzy feelings. I seriously hope you enjoy the shit out of this book because I think I’ve exhausted all the knowledge I have left in my aging brain. Please let me know if you have any feedback (good or bad) by posting it on the Pushing Pixels Facebook page.
Drawing & Animating in Adobe Flash CS6
Get the number of selected frames (Flash)
Someone on the Adobe Flash forum was asking how to get the number of selected frames in a Flash timeline. Since Flash doesn’t do this natively I started writing a JSFL extension to run from the Command menu. With some help from Justin Putney we came up with this:
var sel = fl.getDocumentDOM().getTimeline().getSelectedFrames();
alert(sel[2] – sel[1] | 0);
All you need to do is launch Flash and create a new file. Select Flash JavaScript File from the New Document panel and paste the code above into it. Save the file into your Commands folder and you are now ready to run the command. I recommend using a descriptive naming convention for your file such as “getSelectedFrameCount.jsfl” or similar so you can discern it from the rest of the commands. You can even create a keyboard shortcut to the command if you’re super lazy (like me).
If you want to create another command that returns the total number of frames in the current timeline, copy and paste the following code into a new JSFL file and save it with a new name to the Commands folder also:
alert(fl.getDocumentDOM().getTimeline().frameCount);
Using the Adobe Flash Sprite Sheet Generator
Adobe Flash Professional CS6 introduces a new tool called the Sprite Sheet Generator. This feature lets you generate a sprite sheet from any symbol or image on the Stage or in the document Library. Sprite sheets are an efficient way to add looping animations to games because they can be rendered using the GPU.
This article examines how to convert a looping animation into a sprite sheet using the Flash Sprite Sheet Generator. Continue reading →
How to Cheat in Adobe Flash CS6
The 4th edition of How to Cheat in Flash is in production! The cover has been approved and I’m gathering content to add in the next couple of months. Not sure of the publication date yet so look for updates later this year.
HTCIF has its own Facebook page – hit the Like button to keep up with news and general updates or if you’d like to discuss any topics related to the book – you are encouraged to do just that
Brush Animation
This is an animated effect for a GSN (Game Show Network) game. The entire animation was created from start to finish using Adobe Flash CS5. I initially sketched the basic motion, then used a home-grown technique of shape tweening strokes to get the 3D effect of the brush, then ultimately animated the dust using frame-by-frame techniques.
Presentation template design
Starling Framework logo…
Thibault Imbert and Daniel Sperl needed an avatar for their Starling Framework. So I created one for them.
I also designed the avatar for the Sparrow Framework:
Downsizing: Adobe Flash Style
Twitter feeds have been blowing up in the past 24 hours ever since Adobe announced they are no longer going to support the Flash Player mobile browser plugin. Social feeds quickly embellished this news as “Adobe kills Flash”, and “Flash is dead” with predictions that the desktop version is next or at least should be. This behavior reminds me of a childhood game called “Telephone” where you whisper a short phrase in your friend’s ear, they repeat it to someone else and your story goes around the room until it gets whispered back in your own ear as something completely different. The only difference is that with today’s rapid-fire social mindset, the game only requires two people, in this case Adobe and anyone with a Twitter account.
Continue reading →
Adobe Flash “Speed” Feature
Here’s a quick tutorial on how to use the “Speed” feature in Adobe Flash. If you use the Bone tool (Inverse Kinematics) you may find this hidden gem useful.
Adobe Flash Professional CS5.5
Multimedia designer, interactive multimedia | Adobe Flash Professional CS5.5.
Adobe has just announced the release of a major update to CS5. Check out the link to see what’s new for Flash. I will try and post my own articles here before the actual release
The Edge of Flash
“The reality is that Flash is stronger than ever as the weapon of choice to create the most memorable, exciting, and interactive experiences online.”
-Rob Ford, The FWA Network
Read the full story here.
Using Inverse Kinematics
Using Spring Properties with IK Bones
Constraining Bone Rotation
Problem
How can the articulation of a bone or a series of bones be constrained in an IK armature using Adobe Flash CS5?
Solution
First you need to create an armature using the Bone tool in Flash CS4 or CS5. Next simply select a single bone and then enable the Constrain option in the JOINT: ROTATION section of the Properties panel. Use the hot text sliders to adjust the amount of minimum and maximum constrain the bone should have.
Detailed explanation
Create an armature and select one of the bones.
Make sure the Properties panel is visible and then select one of the bones by clicking on it. The Properties panel will update with several options that can be applied to the selected bone.

Properties panel
In the JOINT: ROTATION category, select the Constrain box to activate the Min and Max hot text sliders. Adjust the amount of constraint using the hot text sliders by clicking and dragging horizontally over them. Alternatively you can click to select the text and type in the exact amount. I personally find it easier to drag over the value and visually watch the handle rotate around the joint until it reaches the desired angle (below).
To test the articulation and the bones new constraint, hold down the Shift key and click/drag the bone (holding down Shift will rotate the bone independently).
You can see in the image above how the fore arm, with applied constraints, will not rotate beyond what would be anatomically impossible. I apply constraints to almost every bone when using IK for character animation. In this example where I am animating the hula girl’s arm, I have 3 symbols that make up the arm (upper arm, fore arm, hand). But that means i would only need 2 bones to link them all. Without that 3rd bone for the hand, I can not set any constraints for the hand symbol itself. This is why you will notice a red dot at the end of each limb. This red dot is a circle converted to a symbol. I place it just beyond the hand so that I can drag a 3rd bone to it. With this extra bone, I am now able to turn on rotational constraints and limit the articulation of the hand. Works just as great for the feet and head of a character.
So what happens to that extra symbol containing the red circle? Double click it and convert the layer to a guide layer. When you publish the movie, the circle will not be included in the animation.
That’s pretty much all there is too it. The next blog update I will talk about playing with the “Speed” of bones in Flash.





