Getting Started: Modifying the Graphics

The graphics assets used by the viewer are all stored in one Flash SWF file called skins.swf.

Note: This section of the guide assumes that you're using Flash to create your graphics. If you instead want to use standart bitmap graphics, please continue reading the tutorial Customize using a bitmap file.

What is the skins.swf file?

The skins.swf file is a Flash 9 SWF file generated by Adobe Flash. The Basic Blue Theme you downloaded also contains a file called skins.fla. This is the original uncompressed file, so open this file in Flash to make changes to the SWF file.

Here's what the skins.fla file looks like when opened in Adobe Flash:

Modifying skins.swf

The easiest way to create a new theme is to start with an existing theme (in this case the Basic Blue Theme) and make modifications to it. Let's create a copy of the basic theme first:

Make a copy of the basicBlue folder under /issuu and call it basicGrey
Upload the new folder to your website, under the same /issuu directory

Now you have a new theme called Basic Grey that is an exact copy of the Basic Blue theme.

Change the background color

Now, to begin with, let's change the background. We'll modify the graphics in Adobe Flash and export a new skins.swf file.

Open skins.fla in Adobe Flash.
Edit the Background movieclip, and change the blue gradient color to a grey gradient color.

Generate a new skins.swf file, and upload it to your website in the basicGrey directory.

When you reload your browser, you should be able to see the new background:

Change the buttons color

Let's also modify the buttons to give them a similar grey look. A button is made up of four different movieclips. One for each state. Up, Over, Down, and Disabled.

Edit the PreviousButton_up movieclip.
Edit the ButtonBackground_up movieclip inside the PreviousButton_up. Change the blue color to a grey color.

The ButtonBackground_up movieclip is used in all _up states. So by changing the color inside this movieclip, we automatically change the color of all the other buttons at the same time. The ButtonBackground movieclips are found in the Assets folder.

Generate a new skins.swf file, and upload it to your website in the basicGrey directory, overwriting the previous file.

Ok, now that the graphics has been changed, the last step is to adjust the layout.
Next: Adjusting the Layout

 

Overview