Flash tutorial: Creating a desktop image using HYPE frameworks

Step 1: Download and extract the HYPE frameworks files from here. http://www.hypeframework.org/

Step 2: Open the file 02_soundAnalyzer.fla

Step 3: Change to stage size so that it’s relatively close to what the size of your display is. This will vary from person to person. For this tutorial, 1260x780 seems to work well for my display. Adjust they stage size accordingly to fit your display.

Step 4: If you hit Command or Ctrl + Enter to play it, you’ll notice that the shapes only occupy about half the space. Go to the “Actions” section under the “Window” drop down menu. Change the var pool:ObjectPool = new ObjectPool(MyCircle, 72); to var pool:ObjectPool = new ObjectPool(MyCircle, 350);

Change the line: var layout:GridLayout = new GridLayout(45, 45, 50, 50, 12); to var layout:GridLayout = new GridLayout(45, 45, 50, 50, 25);

Now when you test it out, the shapes should take up the entire screen.

Step 5: Depending on what song you want to have playing inside the file, you may want to adjust the actual images appearing on screen and the colours to fit the song accordingly. When I developed this tutorial, I chose “Hard to See” by Five Finger Death Punch. Since it’s a heavy metal song and band, I’d like to go with something a little more metal, say, a skull and cross bones.


In order to change the song that's playing, either upload an mp3 file to your server and then copy and paste the link into flash and replace the  green text is or link it from your desktop and replace that link where the green text is

Step 6: Save that skull image onto your desktop

Step 7: In the library, double click on the “MyCircle Linkage MyCircle” symbol. Create a new layer within the MyCircle symbol and bring the skull image into Flash using the “Import to Stage” option under the “File” dropdown menu.

Step 8: Change the ‘x’, ‘outlines’, ‘shadows’ and ‘fills’ layers to Guide layers by right-clicking on the layers and selecting "Guide".  The guide icon in the layers palette looks like a hammer


This way, they won’t show up when you test your Flash movie. The only thing that should appear on screen are the skulls and the default colours.

Step 9: Replace var color:ColorPool = new ColorPool(

0x587b7C, 0x719b9E, 0x9FC1BE, 0xE0D9BB, 0xDACB94, 0xCABA88, 0xDABD55, 0xC49F32, 0xA97409 

);

with var color:ColorPool = new ColorPool(

0xEE0000, 0xCC1100, 0x330000, 0xCDC9C9, 0xFF030D, 0x9E0508, 0x856363, 0xC49F32, 0xA97409

);

You should now see the change in colours to the skull.

Step 10: Now whenever you think it’s a good time to take a picture of the Flash movie while playing, hit either ‘Print Screen’ or Command+Shift+3 to snap a picture of the movie. Drag that image to your pictures folder and apply it to your desktop as a background image.

I ended up with something like this