How to Crop Adobe Flash Movie in Flash CS4 : Cropping to Resize Flash Movie Output

I just ran into a situation where I needed to, for better lack of a term, "Crop" a Flash Movie using Adobe Flash Professional CS4 Professional.  I had an existing Flash animation at the top of my website that was 780-pixels wide by 205-pixes high — the width was fine, but I wanted to quickly perform some cropping on the Flash movie and remove a large portion of the height that I no longer needed (as I moved the navigation buttons out of the existing Flash movie and into CSS-based menu-buttons.  I wanted to resize the resulting .swf movie shown on my website, but  I was not resizing by scaling everything to my desired movie dimensions, but rather cropping out the parts of the existing movie that I no longer wished to be visible.

My goal was to preserve the middle-portion of the Flash Movie while chopping off the parts above and below that (i.e., cropping in order to resize the resulting movie people see), without spending a lot of time re-working the movie or its scenes.  So, I just assumed that Flash would have a cropping-tool or crop-movie feature included, but I quickly discovered otherwise.  I have the new movie cropped and ready to implement on my website in the coming days. Turns out it takes a few steps to "crop" a Flash movie, but it is not too bad.


Steps to Crop a Flash Movie (.fla and its .swf output)

1. The first assumption is that you have an existing Adobe Flash (.fla) movie file and a version of Flash Professional CS4 to edit that Flash Movie with (this may or may not work with CS2, CS3, CS5, CS5.5; but, I suspect it will be similar procedure). The next assumption is that your existing movie has larger dimension(s) currently than you wish it to have when you are finished cropping it.
   
   
   
2. Open the .fla file with Flash Pro or whatever Flash editor you are using.
   
   
   
3. Modify the Canvas Size: go to the top menu-bar and under the "Modify" menu, choose the "Document..." menu item (or, CTRL-J will get you here quickly). You will be presented with a "Document Properties" popup window in which you can specify the new desired dimensions (width/height) that you want your cropped-Flash movie to be.  This process is just re-sizing the Stage to your chosen dimensions.
   
   When you are done, your existing Flash movie will essentially be over-hanging the Stage a bit — we will correct that issue in the upcoming steps as we essentially re-position the Movie scene in such a way that only the cropped-portion will remain showing in our resulting .swf file.
   
   
   
4. Make sure all the layers in your movie are unlocked.  This is simple enough  — from the TimeLine view, just click the lock-symbol once or twice to make sure all are unlocked. See picture above: when all layers below the lock-symbol show just a bullet/dot in the column, they are unlocked.
   
   
   
5. From that same Timeline-view, you want to make sure the "Edit Multiple Frames" button (see picture above) is depressed (selected). Edit Multiple Frames lets you edit the contents of all the frames within the Start Onion skin and End Onion Skin markers, which brings us to the reason for the next step...
   
   
   
6. Also from within the Timeline-view, you want to click the "Modify Onion Markers" button (picture above); you will find this button just to the right of the button used for Step #5. When you click this button, a popup menu will appear from which you will want to select "Always Show Markers" (see picture below).  Once you do this, all frames of your movie will effectively be onion-skinned (which essentially allows you to view more than one frame at once, and in this case we will be viewing all frames at once).
   
   
   
   
7. It is time to select everything that will be moved within our cropping-area / cropping-region (i.e., our newly resized stage).  To do this, go to the main menu-bar (at top of Flash environment) and choose Edit... Select All (or, CTRL-A).  All objects should now be selected and all Frames containing objects should be selected.
   
   
   
8. Use your mouse and/or keyboard-arrow-keys to move the Flash movie objects as one large group now... you will want to change the position of these existing objects so that only the portion of the Flash movie that you wish to remain after cropping is what is positioned over the region of your Stage that is visible (this will be the white-rectangle in your work-area, by default).
   
   
   
9. Go ahead and publish your movie so you can test the positioning and resizing you have accomplished with this cropping technique.  You will be able to move / reposition the entire group of objects repeatedly until you get it right, so long as they all remain selected. Your movie should reflect your new stage-size (i.e., the "cropped stage"), and if all the steps were followed correctly, your movie should retain all of its original animation, motion tweens, and layers in their original sequence and position, but now "cropped" as you wanted.

When I first went hunting for a solution to this problem, all I found were notes that referenced buttons and menu-items and such that I could not find (perhaps older versions of Flash had slightly varied layouts?)  I will admit: I am not an "expert" Flash developer by any means, though I can usually accomplish most of what I want given enough time to play with it.  In the end, I managed to piece together the steps to form this quick "how-to crop a flash movie" blog that I hope helps others accomplish the same thing quickly.

This may not be a perfect solution, but it seems to work, and this method saved me a lot of time compared to totally re-working some of the embedded art-work and such.  I did take time to delete the timeline-layers no longer in use (animated buttons, etc), but that was about it aside from chopping down the size of my background image to match my new target "cropped movie size"; this saved some kilobytes in the output too.