Tutorial: Customize using Adobe Flash

This page will tell you about how to create and edit skins using Adobe Flash CS3. It's pretty straightforward if you have a little Flash experience.

How It Works

You use Adobe Flash to create and export a SWF file. All the objects you create in the SWF file can then be used to change all the graphics (also called skin) in the viewer layout. If you do not have Adobe Flash, you can download a trial at www.adobe.com.

Movie clips

All the elements you want to use in your viewer design must be created as movie clips and exported for ActionScript 3.

The example below shows the Library panel inside Flash. Here we have defined a movie clip naming convention and a folder structure for all included buttons and the background.

The Issuu Viewer positions all movie clips starting at their 0,0 coordinate, so remember to keep your objects inside the movie clips aligned at 0,0 to get the positioning right later in the XML file.

Exporting

In order for the viewer to recognize the different skins, they need to be exported for ActionScript, meaning that each movie clip needs to be given an export name. You'll later use this name in the layout.xml file to tell the viewer what movie clips to use in your new custom layout.

To give a movie clip an export name, right-click on the movie clip in the Library panel, and select Properties. This will bring up the properties window. Under Linkage, enable Export for ActionsScript.

XML

What movieclips you want to use, where they should be positioned and in what order is defined in a XML file usually called layout.xml.

The skin source imports the SWF file as a skin library into the viewer. You can then skin individual objects and their states by assigning skins to them, e.g. like the index button shown below.

<skin source="skins.swf"/>

<button action="index" upState="#IndexButton_up" overState="#IndexButton_over"
 downState="#IndexButton_down" disabledState="#IndexButton_disabled"/>

Resources inside the SWF file are referenced using their export names. When the upState of the index button is set to #IndexButton_up, for example, the viewer looks for a skin named IndexButton_up in the SWF file.

That's really all there is to it. You can learn more about the XML format in the IML language reference section.

Tutorial: Customizing a Skin Library File

Start by downloading the tutorial theme: basicBlue-theme.zip.

The archive contains two files important to this tutorial:

skins.fla
skins.swf

You create your skins in Adobe Flash by editing the FLA file, export them as a SWF file, and position objects in the viewer by editing the XML file. All themes created by Issuu have the same structure, so feel free to start your creative work building on one of the available sample themes.

Open the skins.fla file in Adobe Flash.

Your screen should look like this:

In the Library panel, you can see a list of folders named after individual buttons. All the resources (movie clips) needed for these buttons are located inside each corresponding folder. You can also get an overview of the skin resources by looking at the stage. Adding objects to the stage is not necessary, but it's a good way to get an overview of all the included resources. This is especially useful when you're creating a skin library for others to use.

Example: Changing one of the buttons

Let's say we want to change the blue-colored NextButton button into a more subtle looking grey button. The easiest way to do this is to modify the existing movie clips that make up the button. This way you won't have to concentrate on anything besides designing the new look.

Expand the NextButton folder in the Library panel.

Inside the folder you'll find four movie clips. These are the different button states that are being used in the viewer, depending on different types of user interaction.

NextButton_up Default state
NextButton_over When the mouse is over the button
NextButton_down When the mouse is held down over the button
NextButton_disabled When the button is disabled

Let's start by editing NextButton_up. It's a good starting point for the overall look of the buttons, because it is the button state that is being displayed most of the time.

Double-click or right-click to edit the NextButton_up movie clip.

The button is created using two layers, one containing the white icon, and the other one containing the background shape. In this example we only want to change the color of the box.

Double-click on the blue background graphics

This will open up another movie clip containing the blue box with rounded corners. It's white dotted, indicating that you're currently editing it. We can now play around with the color settings in the color window.

Find a grey color that you like, and exit the movie clips by clicking on the Scene 1 button (located just above the stage area).

As you can see, all up states have now changed from blue to grey (not just the state you edited). This is because this skin library is using the same background movie clip for all up states. So changing the rest of the buttons is easily done simply by editing the color of the buttons background boxes.

Now edit the two remaining movie clips ButtonBackground_over and ButtonBackground_down in the Assets folder, and apply the same treatment to the remaining buttons in the skin library.

All the buttons are now grey, and the only remaining blue object is the background in the viewer.

Let's give it a similar treatment:

Double-click or right-click to edit the Background movie clip, and change the color to a dark grey.

Your final result should look something like this:

Save your FLA file for later editing, and export your new updated design by selecting File / Publish.

That's it. You have now updated the SWF file with the new design.

 

 

Overview