Skins


Skins. What are they?

Many people have been familiarized with a term ‘skin’ through WinAmp music player or Windows Media Player from Microsoft. Skins are the styles, which user can simply change to give the application or control or webpage a definitely new look and feel. Currently skins are widely used as in software development and also for web resources. WordPress or Drupal template is nothing else but a skin for a web-site.

That’s not a secret, that there are as many preferences in colors/shapes/sizes/locations as people on the Earth. And nowadays, when competitors are struggling with each other to attract customers’ attention to their product, a possibility to allow a customer to customize the look and feel of everything by his own taste gives an advantage to those, who provide such a feature. You may select you favorite theme of the message board you visit, choose the colors for your Instant Messenger and of course can tune your desktop. In general, all this is about skins.

Flash websites and flash applications are also subject to the skinning tendency. And in this article I will explain some techniques you may use to skin your flash objects.

Basics.

Well, first of all, we need to understand what should be skinned in our flash component. We’ve chosen component as a type of flash objects which extremely need to support skins. And the best way to get this will be to go with a particular example. In this article we will try to add skinning functionality to a simple preloader component.

In this component we will have two parts:

  • Loading indicator
  • Text progress information

So, let us create a new Flash Document (we will use ActionScript3 for this article). Create new movie clip and name it ‘Preloader’ as shown on Figure 1. Leave all other field with default values.

new_symbol

Figure 1. Creating new symbol

Hint: You may click Ctrl+F8 (Comn+F8 for Mac users) to call a ‘Create New Symbol” dialog

Then add two layers to our Preloader movie clip, name them ‘label’ and ‘indicator’ as on Figure 2.

two_layers

Figure 2. Layers in Preloader movie clip.

We need to put text box on label layer and draw a place holder in indicator layer for our future progress animation.

Two ways

There are two ways to implement the skins. First one is to do customizations in code and second one to use different symbols in the library to display the proper part of the component. In this article I will explain them both.

Programming the skins.

How to code the skins? That must be pretty evident that our preloader may change the visual aspects depending on the parameters. The thing you should implement as a developer is to use the parameter values in code and hence change the appearance of our preloader object.

Look at Figure 3 to see how our preloader will look and what visual elements it consists of.

preloader-appearance

Figure 3. Preloader component.

Let us list the customizable visual properties:

  1. Color of loaded indicator (white )
  2. Color of remained indicator (red )
  3. Color of “Loading … %” label
  4. Font of “Loading … %” label

To let the user to change these values we need to add Inspectable meta tag to the variable declaration. See Listing 1 for the ActionScript code reference.

package
{
	import flash.display.Sprite;

	public class preloader extends Sprite
	{
		private var _loadedColor:Number;
		private var _remainedColor:Number;
		private var _labelColor:Number;
		private var _labelFont:String;

		[Inspectable(defaultValue="#FF0000",type=Color)]
		public function set loadedColor(clr:Number):void
		{
			_loadedColor = clr;
		}

		[Inspectable(defaultValue="#FFFFFF",type=Color)]
		public function set remainedColor(clr:Number):void
		{
			_remainedColor = clr;
		}

		[Inspectable(defaultValue="#FFFFFF",type=Color)]
		public function set labelColor(clr:Number):void
		{
			_labelColor = clr;
		}

		[Inspectable(defaultValue="Verdana",type="Font Name")]
		public function set labelFont(fntName:String):void
		{
			_labelFont = fntName;
		}

		public function preloader()
		{

		}
	}
}

Listing 1. Empty preloader class declaring parameters with Inspectable meta tags

linkage-menulinkage

Figure 4. Setting linkage with the preloader class, note “.as” extension is omitted.

componentdifenitionjpgcomponentdifenitionjpg-dlg

Figure 5. Setting Component Definition properties.

Now, if you link this class with the movie clip we created earlier and also set this class in Component Definition (see Figure 4 and Figure 5), you will have the following parameters pane’s content when placing an instance of Preloader movieclip at the stage.

programmed-parameters

Figure 6. Preloader properties when skinning with colors.

That’s it. You now simply need to use the values of our variables in a drawing code, so that component will always be using the specified colors. I will not list the code to draw the rectangles and set the font and color of the label as it’s pretty trivial task.

Second way.

To say the truth, drawing in code takes a lot of time, patience and resources. It will be much easier to draw the animation in timeline, and specify the label’s properties in IDE.

The second way to skin the component is to pass the names of proper symbols in the library, which will have all needed settings.

So, what do we need for our preloader component?

  1. One instance of animation
  2. And a textfield with proper text size, color etc.

These skin elements will have to be a movieclips, whose names we will be able to specify in our preloader properties and therefore select one or another skin.

At listing 2, you can see our preloader class modified to accept two movie clips as skinning elements.

package
{
	import flash.display.Sprite;

	public class preloader extends Sprite
	{
		private var _loadingSymbol:String;
		private var _labelSymbol:String;

		[Inspectable(name="Loading indicator", type="String", defaultValue="LoadingIndicatorSkin")]
		public function set loadingSymbol(loadingName:String):void
		{
			_loadingSymbol = loadingName;
		}

		[Inspectable(name="Label", type="String", defaultValue="LabelSkin")]
		public function set labelSymbol(labelName:String):void
		{
			_labelSymbol = labelName;
		}

		public function preloader()
		{

		}
	}
}

Listing 2. Empty preloader class, prepared for skinning with movie clips.

If now we check the properties pane of our component we will see Figure 7.

movieclip-parameters

Figure 7. Skins parameters.

Nice, now if we add a movie clip with animation which is played along while data is loaded and a movie clip with a textbox in it, we will have skin elements ready to be used. But how can we use them? In ActionScript 2 we have attachMovie() method which would come really handy in our case, but… it was removed in ActionScript 3.

See listing 3 for the alternative method which might be used instead of AS2’s attachMovie.

import flash.utils.getDefinitionByName;

	public function attachMovieAS3(parent:Sprite, className:String, name:String):*
	{
		var instance;
		var definition;

		try
		{
			definition = getDefinitionByName(className);
		}
		catch(error)
		{
			return;
		}

		instance = new definition();
		instance.name = name;
		parent.addChild(instance);
		return instance;
	}

Listing 3. Implementation of an alternative method to AS2’s attachMovie in AS3

Using this attachMovieAS3 method you will be able to use any animation for loading indication. Just attach the clip from the library with the linkage name specified in the component’s parameters.

We will have to compile in our default skins named ‘LoadingIndicatorSkin’ and ‘LabelSkin

Use this technique and give power to your customers enabling them to customize your components widely.

Summary and conclusion.

In this article, you’ve been introduced to the possible solutions, which might be used to implement the support of ‘skins feature’ in your flash project or component.
If the component can be customized to look tuned with any style of the flash project, then, this component will have more demand on the market.
Give more control to the customers – satisfy your clients and sell more copies to them.