SI-U: Decompiling SWF Files May, 03, 2011 Jeremy Loughnot

3 The Problem Many times we are not provided with enough assets to execute the concepts that are pitched to the clients even though we see similar assets used, or concepts executed on client sites. We are forced to be “resourceful” and utilize the web to get assets that can make our integrations come to life.

4 The Problem Screenshots from flash sites often come out looking blurry and slightly off. The assets are not pixel perfect and our integrations are lacking due to this.

5 The Solution Did you know that almost every flash site can be decompiled (broken apart) so that all of the elements that animate in the movie can be used as separate elements in another design. This process is called “Decompiling a SWF”.

6 Before Starting Be sure to check with your PM to make sure that we can use assets obtained from the web. In certain instances we won’t legally be able to reuse these assets due to copyright issues. Once you have your approval you’re good to go!

7 Download Safari Safari is a web browser just like IE, Firefox and Chrome. It’s FREE!! You can DOWNLOAD IT HERE. *If you have a Mac you already have Safari. Just search for it in your Finder.

8 Download Firefox Firefox is a web browser just like IE, Safari and Chrome. It’s FREE!! You can DOWNLOAD IT HERE.

9 Download Software You’ll need SourceTec Flash Decompiler to extract the assets out of your SWF files. If you have a PC you can DOWNLOAD IT HERE. If you have a Mac you can DOWNLOAD IT HERE. You’re ready to install! *Please email John Olmeda to obtain a product key for this software.

Let’s Get Started! 10 Open Safari. Open your activity panel by selecting “Window” -> “Activity”. Navigate to the flash website that you would like to decompile.

11 Woah! What’s going on?!? As your website loads your Activity panel will start to fill up with all sorts of text that you will most likely not understand. It’s all good!!!! Let the site load completely and navigate to whichever page has the content that you want to use.

Get Your Hunt On!!!! 12 Look at all this great (confusing) stuff!! Search for your bottle of advil, breathe into a bag, and grab a coke zero. We’re really only interested in a couple things here. SWF and MP3 files (sometimes you can find some good JPG, PNG or other graphic assets at this point too). When you’ve found what you’re looking for double click on it.

13 Mozilla Time!!! After the SWF page loads into Safari copy the url, which should look something like this, http://whatispaul.com/paul_epk.swf and paste it into Mozilla Firefox. Once the page loads completely click “File” -> “Save Page As” and save the page to your desktop or downloads folder. Pat yourself on the back. The confusing part is over!!!!!!!!

Decompile That SWF!! 14 Open your SourceTec Flash Decompiler. Select “File” -> “Open” and open the file you saved with your MozillaFirefox. (Our file was called “paul_epk.swf”)

15 Find Your Assets! On the right hand side of the screen you will find a folder structure that contains all the shapes, images, sounds, video clips, etc. used to create the flash animation. You can select the top check box next to the SWF file to select all of the elements.

16 Find Your Assets! Or you can drill down inside the various folders to see what you are dealing with and select only the assets that you want to use.

17 Exporting Assets Once you have everything selected click the “Export Resources” icon at the top of the screen.

18 Exporting Assets Select where you want your files to be exported to. Click “OK”.

Now that you have all these wonderful assets DESIGN AWAY!!!! 19 All Done!!! Now that you have all these wonderful assets DESIGN AWAY!!!!