Articles

The LocalStyleManagers flash extension consist of 3 separate components that work together towards a common goal of providing skinning functionality to the Flash UI Components in the Flash MX IDE itself, in real time as well as runtime. This article will explain how to use these components.

Attention: This article refers to the original component developed by Darshan Sawardekar. The functionality and features may not work as expected in the current Flash version, but the code can be rewritten for the current ActionScript version.

Please Note :

The LocalStyleManager Manual component is based on Samuel Wan's FStyleManager component. Many thanks to Samuel Wan for letting me use it.

The FStyleManager component allows you the ability to skin components visually in Flash MX, by changing it's parameters. But you still have to test the movie to actually see the changes applied. The LocalStyleManager goes one step further, in that it allows you to see the styles applied in the respective component live preview's in real-time, inside Flash MX itself.



FCalendar and LocalStyleManager Manual components with live preview turned off.[u][/u]



FCalendar and LocalStyleManager Manual components with live preview turned on.

These 3 components are :
[olist]

LocalStyleManager Manual :
Allows you finer control over every style element of a Flash UI Component

FStyleUpdater :
Create live previews for Flash UI Components which can be styled in the Flash MX IDE itself

LocalStyleBroadCaster :
This component has no use outside the Flash MX IDE. It is used inside the live previews of the LocalStyleManager Manual component to communicate with the live previews of the other FUI components on the stage. It is included nonetheless, if you are interested in seeing how this functionality is achieved:)Downloads for this tutorial

[/olist]Downloads for this tutorial :

1. Flash UI Components Set 1 (Modified now with "live" previews)
2. Flash UI Components Set 2 (Modified now with "live" previews)3. LocalStyleBroadCaster (Used only inside the live preview of the LocalStyleManagers)
4. Samples discussed here.

This article is divided into the following 5 sections,

1. Using the LocalStyleManager Manual component.

2. Creating "live" previews for Flash UI components using the FStyleUpdater component. (See how the calendar live preview is built).

3. Explanation on how the "live" previews in the Flash MX IDE are achieved.

4. Extending the LocalStyleManager Manual component.

5. Known Limitations and Issues.

Section 1 : Using the LocalStyleManager Manual component

The Macromedia Flash UI Components are created in such a manner that various skin elements like face, background, bevel sides, etc. are inside separate movieclips. So "skinning" a FUI component involves changing properties of those movieclips itself. Each FUI component brings together such movieclips/skins to the create the interface of the component. At runtime by apply colors to these movieclips via the Color Object we can easily change the look of any FUI component. Other text styles can be skinned just as easily.

The LocalStyleManager Manual component contains most of the Flash UI Component styles in it's parameters. By modifying these parameters the styles of FUI components can be changed easily. Lets see the component in action. You will need to install the LocalStyleManagers and modified Flash UI Component extensions first. After that follow these simple steps,

1. Create an empty Flash Movie.
2. Drag the LocalStyleManager Manual component onto the stage.
3. Drag any Flash UI Component onto the stage, and give it an instance name. For this example i will use the calendar component, and name it myCalendar.
4. If your Flash UI Component is from the modified sets, you should be seeing its changed styles right away, as per the default styles of the LocalStyleManager Manual component parameters.



Make sure live preview has been turned on. You can find it in the Control Menu >> live preview. Note the bevel on the buttons.

5. Now select the LocalStyleManager Manual Component and in the first parameter, Target Components, provide it an instance name say, myCalendar.



Here there is only one component myCalendar. But you could include as many as you wish.

6. Apart from the usual styles for background and beveling, the Calendar component also uses some extra styles. Scroll down and change parameters like dateBorder, dateBackground, selectedDateBorder, etc. The live preview will show these new styles immediately.



Here's a look at the calendar after a few changes to its styles, inside Flash MX.

7. When you are satisfied with the look. Export the movie. You should see the changed styles at runtime as well. You have just skinned the calendar component without adding a single line of code!

The LocalStyleManager also has some API methods like applyTo which can be used to apply styles to components at runtime. For more information on these methods see the reference panel documentation.

In the next section we will see how to create live previews for your own components so that they reflect style changes in the Flash MX IDE as well.

Section 2 : Creating Live Previews for your Flash UI Components

Obviously the live preview of a Flash UI Component must be somehow connected to the LocalStyleManager live previews, otherwise you won't see style changes in the live previews in the IDE. This is where the FStyleUpdater component comes into the picture. All the modified Flash UI Components live previews are using the FStyleUpdater component, with the exception of the ticker component, which doesn't fully exploit the FStyleFormat styles.

Most FUI components have very well defined API methods to change their parameters hence creating live previews for them is very simple. You have to just code for 2 events Stage.onResize and onUpdate.

Here we will see how the "live" preview of the calendar component was created. Follow the following simple steps,

1. Create a new flash movie.
2. Drag the calendar component to the stage. It does not matter which component it is. Give it an instance name, say comp.
3. Now we write the actionscript for the calendar live preview. Enter the following actionscript on a separate scripts layer,
//Since the calendar's registration point is at (0,0)
Stage.align = "TL";
Stage.scaleMode = "noScale"

obj = new Object ();
obj.onResize = function () {
// to scale the calendar when the component is resized in the Flash MX IDE
comp.setSize (Stage.width, Stage.height);
}

Stage.addListener (obj);

function onUpdate () {
// when the calendar parameters are updated change these
comp.setDayOfWeekNames (xch.dayOfWeekNames);
comp.setMonthNames (xch.monthNames);
comp.setFirstDayOfWeek (xch.firstDayOfWeek);
}This should create a normal FUI component live preview, which can be used in your component right away. The remaining simple steps will make it a "live" preview, that can communicate with the LocalStyleManager components.

4. Drag the FStyleUpdater component onto your calendar component from the components panel.
5. It should automatically take the name of your component's instance i.e. : comp. If it hasn't then provide it the instance name comp as the Target component parameter.
6. Now export the movie and update the live preview of the calendar component with this newly created live preview.

That's all!!! Now when your component is on the same timeline as the LocalStyleManagers any style changes in the LocalStyleManagers will be reflected in your component's live preview. In the modified Flash UI Components this is already done by me.

In the next section we will look at extending the LocalSyleManager components for FUI components that require additional styles properties.

Section 3 : Extending the LocalStyleManager Manual component.

If the component you are trying to skin uses styles that are not listed in the LocalStyleManager Manual component's parameters, you can add them to the component easily. The process is very simple,

1. Right-click the LocalStyleManager Manual Component and open the Component Definition window.



It shows all the parameters of the component. All these are styles that are used in the FUI components.

2. Now scroll down and click the + button to add a new parameter to the component.



3. Give the new parameter a name say myStyle.
4. In the variable field enter myStyle_prm. Any parameter you add to the component must be suffixed with _prm. If your don't give the _prm suffix to your style it will not work.
5. If it is a color style then give it a type color and specify a default color.



That's all. Now when you change this style in the LocalStyleManager Manual Component it will be reflected in your component both in the live preview and at runtime!

Next we will see how the LocalStyleManagers talk to other components in the live previews on the stage.

Section 4 : A brief explanation on how the "live" previews in the Flash MX IDE are achieved.

Inside the live preview of the LocalStyleManager Manual component, a special LocalStyleBroadcaster class is used. It controls the behavior of all Flash UI components on the stage. The entire functionality is achieved through the LocalConnection Object. SharedObjects are used to give unique id's to each instance of a Flash UI Component on the stage.

When any FUI component with a "live" preview is dragged to the stage containing a LocalStyleManager, it registers it's unique connection name with the LocalStyleManager on stage. When the LocalStyleManager gets updated it connects to the live preview with that unique connection name and passes on the updated styles. When the FUIComponents live preview receives such a notification it refreshes itself with the new styles. Simple:)

In an ideal scenario only the modified style should be refreshed. However i have not yet found a working solution to either using getter/setter "lazy evaluation" or Object.watch inside the xch object. That could ease off a bit of the performance load from the IDE, and since individual component skin elements can be refreshed, it could work quite nicely. Alas, Both these techniques give very funky results when used inside the xch object. If anyone has an idea on how to achieve this, Please do let me know.

Another possibility that i have tried, is storing the styles in the SharedObject itself. However this fails because even after flushing the newly assigned values they don't get updated in other connected swfs. And more importantly it would involve creating a lot more SharedObjects since styles in different documents would not be the same. Meaning not only do we need unique ID's for the components themselves but unique ID's for separate documents as well. And since the live preview's _url does not resolve to the document's _url, this would involve further calculations, from time stamps for instance. In short something that should definitely be avoided in the live preview!!!

Live previews can be made to do some very interesting things but only at 1 FPS!

Finally lets look at some of the known limitations and issues to note when using the LocalStyleManager components.

Section 5: Known Limitations and Issues

1. Multiple text styles in the same component are not yet supported. This may be added in the future. Components which support multiple text styles like MessageBox, Calendar, etc. will show the same text style throughout.

2. If you replace the LocalStyleManager component on stage or add a LocalStyleManager component to the stage when previous FUI components are already present on it, styles don't refresh.

Solution : You will need to turn off live preview and back on again, to get the LocalStyleManagers to refresh styles in the live previews of the components.

3. Multiple documents with separate live previews controlling them are not yet supported. The Flash MX IDE is treated as a single unit and live previews in all open documents can communicate to each other (Actually this is true for all swfs running inside the IDE!). Hence if a LocalStyleManager is present in one document it will refresh styles in live previews in other documents as well.

Solution : In such scenarios you will need to turn off the live preview in the documents that are currently open but not active. And just keep the active document's live preview on.

4. Similarly multiple instances of the Flash MX IDE itself may not work well with the LocalStyleManagers.

5. Performance of the Flash MX IDE can be affected when a lot of components are used together with live preview enabled. This is true irrespective of whether the LocalStyleManagers are used with them or not. Still the performance difference between a flash movie with regular live previews and "live" previews on components is very small. The real performance drop comes from having to init live preview swfs themselves. I don't think using these live previews will greatly slow down the IDE any further.

Solution : Use it judiciously, once you have finalized the styles, turn live preview off, for smoother workflow. I do it anyway:)

6. When you turn on embed fonts in the LocalStyleManager Manual component, all text in the live previews of components goes blank. This is because the font is embedded in your movie and not in the live preview swf.

Solution : The component author has no control over what fonts you have installed on your system and would never really know which ones to embed. However, if you have embedded the font correctly in your movie then your embedded fonts will work at runtime.

Best regards,
Darshan Sawardekar