Just a quick one for those of you pulling your hair out. Movie clip animations don’t work when exporting Flash to other formats or importing .swfs into external applications, like Quick Time, After Effects or image sequences.
Movie clips themselves are fine, but they only display the first frame. The secret is to convert all your movie clips to graphic symbols! They work just fine. If you scrub the play head through your timeline, whatever you see will probably render okay elsewhere.
If you are creating a Flash Banner and want to export frames to animated gifs it is a good idea to build your animation entirely on the root timeline, or use graphic symbols. It will save you a lot of hassle later.
Imagine you have a Flash website that makes use of hundreds of images that need to be regularly updated. Picture a virtual shop with a range of garments that need to updated seasonally. There are essentially three ways to help us manage these updates. That may be combined, extended and varied according to the needs of the specific project.
Content management system that allows administrators to select a garment from a list of thumbnails and upload another image to replace it,
Manually enter the Flash movie and import each new image and swap the old bitmaps for the new ones.
Externally loaded images that can be switched by swapping the old images with the new in a central image repository directory.
At first glance most developers would rule out option 2 but when combined with bitmap fills, a very powerful means of organising, exactly positioned, multiple bitmaps is revealed.
Take the following PNGs
So we can load one image into Flash that contains all the data of any number of separate bitmaps. Select the bitmap on the stage in Flash and Modify>Break Apart. You may now use the lasso tool to select regions of the bitmap and save them off as individual symbols. Positioning them within your “virtual shop” as required.
So what? Well the clever bit comes when you need to update the images. All you need to do is open the main bitmap .psd in photoshop and edit away, hundred of images may be swapped out and replaced etc. If you’re sensible and set up your original document with crop marks and guides, you can maintain absolute control over each symbol in Flash when you come to update the bitmap in the Library.
Once you’ve saved off your new image, select your bitmap in the Flash Library > right click >select Properties>Update. Flash with automatically replace the main image with the new one (if saved with the exact name and in the same location as the original) or allow you to navigate to another location to select the new bitmap.
Once this is done, not only will the main bitmap be updated, but so too with all the 100s of symbols you created with the lasso tool earlier. Magic!
There is a variation of this idea which may be a possible combination of options 2 and 3, using the beginBitmapFill function. The idea being, you import your original image lasso it into multiple symbols, position itcorrectly on your stage, then import the latest version of the bitmap via actionscript to replace the bitmapFill dymanically, meaning you don’t even need to open Flash anymore.
Note to self – when you have a moment check this out.
Here’s a nice design tip for those of you working on animations for CDROM or broadband projects. You can achieve a wealth of amazing effects very quickly by capturing areas of the screen as video when manipulating images using Photoshop or other graphics packages. All those sliders to alter blurs or outer glows etc can be used to serious effect and those transitions can be captured using tools like Snapz Pro or Camtasia and the video file imported back into Flash and integrated into your animations. Obviously it’s not a great solution for websites that require heavy optimisation but for multimedia stuff it can come in very handy.
Next stop those excellent wet media brushes in Corel Painter.
PAL 16:9 displays using rectangular pixels at 720×576. unfortunately Flash uses square pixels so you will need to set up your Flash stage slightly wider than the video 1024×576.
I export the video in three ways.
1) Set your publish settings to Flash 5 and select the Formats tab and check the Qucktime with Flash Track (.mov) radio button to export the video directly. Unfortuantely this method only supports Flash 5 graphical elements for not funky line strokes or filter effects show up. – I was reading an article that explained that this doesn’t actually create a video file – it embeds the Flash movie inside a quicktime.mov
2) Goto File > Export > Export Movie > Then select PNG sequence from tdrop down Format box. – You then use After Effects or some such video program to import the series of images as frames of a video project – easy.
3) If you’re on a Mac you get to export Quicktime directly – this supports later versions of Flash so – you can use your strok effects and filters after all!
The last two options seems to work best for me – personally the third option seems to be the best at dealing with more complex Flash animations. If you don’t have a mac – option 2 is your best bet.
Set up a project in After Effects whos export setting are set to PAL 16:9 High Quality 720×576 Next you open your quicktime.mov or .png sequence in After Effects and export out a new quicktime.mov file – hey presto rectangular pixels!! Unfortuantely the file will look rubbish on your monitor because your monitor uses square pixels but once you get the Flash into a video compositing application like Final Cut Pro or Avid Xpress it will ping back to clarity suitable for broadcasting.
Tips: Be aware that until we all go digital, which is still a couple of years away TVs are rubbish. They display substantially less information than a monitor and their gamut of colours is much smaller. Broadcast Safe Colours are as follows:
RGB between 16 and 235
Pure white= 235,235,235
Pure black= 16,16,16
The problem being this – when a complex Flash Vector is imported into Illustrator the objects are sometimes broken up into horizontal pieces, aligned perfectly editable and selectable etc. Unfortunately these pieces can show up in printed output. Not ideal.
Export the graphic out of Flash with an .ai extension and import it into Corel Draw – then export out again as an .ai file – import into Illustrator and copy and paste it into the InDesign document.
It’s still not perfect – but it will vastly improve the situation.