Author Chris

Wacom Webinar – Flash Animation Techniques

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.

Flash CC – Top 10 reasons why it’s awesome

10. Core – Adobe has rewritten the very core, the foundation if you will, of Flash. Flash was originally built to be a 3 story home and we reached the roof level and kept trying to add on to it – which weakened the foundation. Now with Flash CC, the core of Flash has been rebuilt to support enough stories to justify a skyscraper. So think of this as Flash 2.0 moving forward. You’ll notice this new core every time you launch Flash CC. Instead of waiting 30+ seconds for Flash to start, Flash CC will only make you wait 3. If you blink you might miss it.

9. Dark user interface – For the first time, one thing does not look just like the others. Flash CC boasts the same dark user interface as the rest of Adobe’s software offerings. Don’t love it? Switch it back in Preferences.

8. Toggle Guides & Masks – There have been a few Timeline enhancements specific to layers. You can now toggle multiple selected layers between Guide and Mask behavior.

7. Multi-device connectivity – Authoring content for mobile? Test on a variety of devices in a single click (as long as they’re connected via USB). Flash will push builds to each and every one of them and launch them automatically.

6. DragonBones extension – This is one cool extension for authoring sprite animations and spit them out to XML and sprite sheets, ready to be plugged into the game engine of choice.

5. Distribute symbols & bitmaps to keyframes – I love this feature. Select multiple objects and tell Flash to place each in it’s own keyframe in its original position. Done.

4. Swap multiple symbols & bitmaps – Now we can select multiple instances of objects and swap them all out for another.

3. Scale to Anchor Point – Need to change the stage size and all the contents of your project along with it? Now you can and even better, choose the area of the stage to base the resize on.

2. Unlimited Pasteboard – Whoa! Unlimited! Yeah, just like the sky! We can now look back and laugh at the days we were limited to a puny 2,280 pixels to work with.

1. Video Export – It’s ok, you can let the tears of joy flow now. Adobe has not only solved the video export feature in Flash CC, but integrated the Adobe Media Encoder to boot! It’s all too much for animators to handle but I think you’ll find a way to handle it quite nicely.

Honorable mention: Line preview, Panel enhancements

A few things you might not like because they are now deprecated: Object-level Undo, Project Panel, ActionScript 1&2, TLF text, Motion Editor, Deco tools, Bone tool (IK), Project panel, Printing, Strings panel, Behaviors panel, Movie Explorer, Bandwidth Profiler, FXG format, Actions Toolbox, Kuler panel, Share my Screen, Code Hinting (JSFL), Video Cue Points, Close Captioning, Device Central, Customizable Tool Panel, Importing BMP, TIFF, AutoCad, AIFF, Sound Designer,, Around AU and Adobe Sounds Document formats, File Info (XMP Metadata), Fireworks PNG Import

Inspiration

If you are lucky, inspiration can drop right in your lap.

For me this could not have been more literal. My daughter Andrea had just turned two years old. She was quite precocious at an early age, with a confident command of the English language and a newfound singing voice. On one particular day she wandered into my home office to show off a new song that she had learned: Twinkle Twinkle Little Star, a popular English nursery rhyme from the early 19th century. Andrea asked to sit up on my lap and as usual I obliged. Being at my desk with my computer in front of us and my little plastic USB microphone at the ready, I discreetly clicked record and began capturing her entire performance in digital format.

Andrea was unaware she was being recorded. Her performance was completely natural and not without the human imperfections of a two-year old trying to perform to a level beyond her years. The recording captured all of her hits as well as misses. It was evident that she had not learned all the words to the song as she fumbled her way through the performance but that is precisely what made this recording special: it was real on a human level.

I saved the audio file to my hard drive and went about the rest of my day. It wasn’t until seven months later that I would resurrect this audio file for the purpose of using it as the soundtrack to an animation. Since it was the holidays, we tried to take a family photo to send to family and friends as our holiday card. Our efforts were thwarted by our five-year old who was expressing his disdain for being photographed in an emotionally unstable manner. Combined with the dog not posing ’correctly’ and various other photographic mishaps, we were unable to get that perfect family shot. Two weeks before Christmas and we had nothing to send to anyone.

andrea_drawing
I’m an optimist at heart and knowing every problem has a solution, I turned to software for help. I thought maybe I could use Photoshop to edit the best of each of us from all the photos and combine them into one single, perfect family picture. Then I thought of importing the photo into Flash and adding some animation, possibly some snow falling and maybe even some Christmas music. Then it hit me! The audio of Andrea singing Twinkle Twinkle Little Star would be perfect to use as a soundtrack to a holiday card. I should also mention that Andrea and I would spend time together drawing and each time I would ask her what she would like me to draw. Her response was always the same: ‘Draw me, Daddy!’ Using crayons, colored pencils, felt pens and various markers, I had drawn a large number of Andrea characters. Eventually I perfected my daughter as a cartoon character.

At this point I realized:
  • I have a recording of Andrea singing.
  • I have Andrea designed as a cartoon character.
  • I know how to animate in Adobe Flash.
  • I had all the ingredients to make an animated holiday card.
All I needed now was a concept.

Having done enough work for clients in the world of advertising, I knew that the most successful creative campaigns were the ones with the best concepts. I listened again to the recording of Andrea singing and noticed that she made several mistakes during her performance. The idea of pretending she was performing in an audition on a stage was an easy one to come up with. The rest just fell into place. This was one of those animations that miraculously created itself. It was inspired.


email_3
Once I finished the animation and uploaded it to my website, I sent the URL to family, friends and clients as our holiday ‘card’. The response was overwhelmingly positive. About a year later I received an email from someone in Australia with the link to my animation. ‘I love this and I hope that you will like this to.’ was the body of the message. This was the first time I had created something viral. A complete stranger sending me my own work. It’s something I’ll never forget.

The annual Georgenes holiday animation was born

Andrea_rigging_01

This is an excerpt from Pushing Pixels

 

No love for SWFs in Premiere Pro

Apparently one of my favorite and most efficient workflows when it comes to animating in Flash for video has been removed from Adobe Premiere Pro. Was I barely on the bubble with this workflow? Perhaps I was but it worked really well. It seems to me Adobe feels like the Flash > SWF > Premiere > (insert chosen video format here) workflow is not popular enough to support. That’s bad news because it’s a workflow I have detailed in a couple of my books.

Crap

So now what can we do?

Well this morning I opened up a project I created using the above mentioned Flash > Premiere path only to find all of the imported SWF media to appear as offline in Premiere. I used the “locate File” command only to find that the SWF format is completely invisible in my Finder window.

Double crap

It’s really true. Premiere Pro CC completely ignores SWF files.

Go to a happy place…go to a happy place…go to a happy place… 

 

My options are:

Open each FLA and use the “Export Video” feature in Flash and replace each footage with the resulting MOV file.

Import each SWF file in After Effects and import that After Effects project into Premiere.

The sad part about SWFs no longer supported in Premiere is that SWFs are much smaller in file size than MOV files. It was also much easier to make changes in Flash after editing in Premiere Pro. Simply updating the SWF by publishing from Flash was super quick and easy as the SWF compiler takes a fraction as long as exporting to Video.

Open plea to Adobe: We all just want the SWF > Premiere workflow returned to us – no questions asked. Just leave it on the front doorstep and walk away. Nobody else has to get involved.

There’s power in numbers folks. If you feel the same way as I do, go here to voice your request.

Character Design in Flash CC

hopperDesign is one thing, technique is another. Everyone has their own way of working in Flash, and there are many ways to go about designing in Flash. For this character I chose a technique that a friend and talented illustrator showed me. It involves using the Pencil tool with Object Drawing mode and the Union feature to combine multiple Object Drawings into a single object. I love her technique so much I’ve started to incorporate it more into my daily workflow.

Pencils, Pixels and the pursuit of Awesomeness.