How to create a custom skin

In this tutorial we will create a custom skin for our Scroller; we will try to obtain a „Marine” look by using the Scroller's customizability. I want to start by reminding you that, in order for the tutorial to work, you need to do one thing. You have to have the Creative Flash Scroller component installed using Adobe Extension Manager (if you encounter any problems doing that, please refer to the „How to install an extension” tutorial).


Click here to download the source file and the required files for solving this tutorial.


1. Let's start by opening Flash and creating a new file. (For CS3 and CS4 users: in order to set-up the frame rate, right-click the stage and select "Document properties")

Create file

Create file

2. In order for us to create a custom skin for a Scrollbar, we need to create its elements on the stage, and then save them as movie clips in the Library under specific names (you can read more about the naming procedure in the Complete Product's Documentation). The elements of the Scrollbar are: the scrolling buttons (up/left, down/right), the track and the knob. In order to create the shapes we need, we'll use three graphic tools: the Oval tool, the Rectangle Primitive tool and the Line tool.

Graphic tools

Graphic tools

3. Select the Rectangle Primitive tool and create a rectangle on the screen. Change its properties as in the next image; the colors used are: black (#000000) for the fill and blue (#0000FF) for the stroke.

Rectangle primitive

Rectangle

4. Now let's create the track; select the Line tool and draw a light-blue (#0066FF) line on the stage. Modify its properties as in the following image:

Line

Line

5. The final element we will use is the one which controls the scrolling – the button. Select the Oval tool and draw on the stage a small circle with the following properties:

Ellipse

Ellipse

Note that the colors for the circle are the same as the colors for the rectangle. Now select the circle by double-clicking it (be careful to select both the fill and the stroke) and press Copy, then Paste, in order to create another identical circle on the stage.

6. Now we'll deal with converting the shapes into movie clips and giving them proper names. Name them like this: one of the circles – btnl_up_marine, the other one - btnr_up_marine, the rectangle – knob_up_marine and the line – track_up_marine. For each of the skin element there are three states (up, over and down) but in order for the skin to work we need only one to exist – the others will be taken from it; for simplicity, we will use only one state (up).

7. Let's take a look at the stage now. The zoom level is set to 400%, in order to see better the elements; this is how one of our scrollers will look like:

Custom skin elements

Custom skin elements

8. Now we are almost done; let's work a bit on our Library and then we can finish. From the enclosed „.fla” file's Library, copy the „clip” element into your file's Library. As well create a new folder called „Marine” and put all the four Scrollbar elements inside.

Skin folder

Skin folder

9. The next step is to export all these elements for ActionScript. Select them one by one (each four), right-click them, select Properties, then Advanced and under Linkage check the Export for ActionScript check-box and Export in Frame 1.

10. Now if you have something left on the stage, delete it. Drag on the stage an instance of the „clip” movie clip. Set the instance name to "clip", open the Components and Component Inspector panels and drag an instance of Classic Scroller over „clip” (X=75, Y=75). Set the target "clip", and select Stage Item.

Open the Components and Component Inspector panels

Open the Components and Component

Inspector panels

11. Let's configure the scroller the way we want. Open the general tab from the Componenet Inspector and press on „Click here to create your custom skin!”; write „marine” in the Skin name field and click OK. Leave everything else as it is and preview your file.

Custom skin window

Custom skin window

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.