Archive for category components

Custom Component Crashes Flash CS4 (and how to fix it..)

By now some of you are probably familiar with Crash Flash CS4’s bad crashing habit.

The majority of these crashes can be fixed with the 10.0.2 Hotfix, but I was consistently seeing one that the update didn’t fix.

On Mac OS 10.5.8, with Flash CS4 10.0.2, Flash would crash anytime I tried to add a custom component I had built and put in the Components library. I have been developing and using this component for almost 4 years, and had never seen this problem before.

I tried every fix that Google had to offer, including dumping fonts, resetting flash, deleting preferences, re-building the component, and nothing worked. Every time I tried to add that component to my Flash file, it would crash without fail. (Or maybe with fail, since it was, after all, crashing….)

I was going through everything, trying to figure out what the problem could possibly be, and I noticed that in the component’s FLA file, there was an entry that was nothing but a period underneath the other folder locations.

That one little dot can crash Flash


Removing that period and re-exporting the SWC solved the crash problem.

Advertisements

, , , ,

Leave a comment

Disabling the FLVPlayback component’s controls (including seekbar!)

I’ve stumbled on another one of those “everyone wants to do it, but nobody knows how” issues in Flash: how to disable the controls on the FLVPlayback component.

After quite a bit of documentation-reading, web-searching, and forum-browsing, I’ve come up with a function for easy, on-the-fly toggling of controller-enable-ability.

with a FLVPlayback instance on the stage, add the following to your ActionScript:

 mx.video.FLVPlayback.prototype.enableButtons = function(bEnabled:Boolean){
this.skin_mc.seekBar_mc.handle_mc._visible = bEnabled;
if(bEnabled){
this.stopButton =this.skin_mc.stop_mc;
this.backButton = this.skin_mc.back_mc;
this.forwardButton = this.skin_mc.forward_mc;
this.seekBar = this.skin_mc.seekBar_mc;
}else{
this.onEnterFrame = function(){
this.stopButton = this.skin_mc.stop_mc.disabled_mc
this.backButton = this.skin_mc.back_mc.disabled_mc;
this.forwardButton = this.skin_mc.forward_mc.disabled_mc;
this.seekBar = null;
updateAfterEvent();
delete this.onEnterFrame;
}
}
}

Now, for a bit of explanation:

The first step is to simply toggle the visibility of the SeekBar handle. With it invisible, there is no way the user can use it, and this seems to be the simplest solution, rather than digging through the MC structure of a component skin and figuring out how that handle is, uh, handled. So, the bEnabled value can double as the visibility value for the handled: true (visible) for enabled buttons, or false (invisible) for disabled.

For the rest of the buttons, it’s not so simple. Users have come to expect a “ghosted” or “grayed-out” appearance for a disabled button, so simply removing them as we did with the scrollbar handle would be bad form. Luckily, the pre-made skin SWFs for the FLVplayback component include disabled states for everything, and we can use these.

Because the component skins use bitmap caching and 9-slice scaling to maximize their flexibility, simply setting the button properties to the disabled MC won’t work, and it requires a bit more of a brute-force approach to get those buttons to appear. Hence, the onEnterFrame and updateAfterEvent() commands. updateAfterEvent() forces an update of the stage, so it will make those disabled-states appear, but it only works as part of a clip event, such as onEnterFrame. So we wrap the whole thing in an onEnterFrame, and then delete the onEnterFrame function to save on processing and memory.

I should note that I developed this using the SteelExternalAll.swf skin. The documentation indicates that the skins are built using a universal structure, so it should work for any of them, but I’m not making any promises.

, , , ,

6 Comments

Customing icons on the Flash 8 Tree Component

Back to one of my favorite topics – UI Component customization. Flash’s Tree Component provides a Windows Explorer-like hierarchical menu for displaying data in a “folder” structure.

The structure it displays uses 2 separate icons, a “folder” icon for folder nodes, and a “disclosure” arrow for opening and closing the folders.

To see an example of this, place a tree component on the stage and give it an instance name of “myTree.” Then, use the following loops for some dummy data in the tree:

for(i=1;i

The Tree Component Documentation lists various styles that can be set on the component, and it seems that these properties work without first installing a theme.

I’m not sure the exact reason for this, but the component seems to want to open and close folders based on clicking the “disclosure” arrow, not the folder icon.

So, what if you wanted one icon only? For this example, I’ll use the +/- metaphor that the Windows registry and some other apps use. first, create your “plus” and “minus” movie clips, and give them linkage IDs of “plus” and “minus”, respectively.

Then, use setStyle to apply these to the tree:

myTree.setStyle("disclosureOpenIcon","minus");
myTree.setStyle("disclosureClosedIcon","plus");

This turns the disclosure arrows into plus an minus signs, but the cliché folders are still there:

tree_plusd_w_folders.gif

The solution is to create a blank movieclip and set it as the folder icon. To do this, create a new MovieClip symbol and give it a linkage ID of “blankicon.” Then, add the following to assign the empty icon:

myTree.setStyle("folderOpenIcon","blankicon");
myTree.setStyle("folderClosedIcon","blankicon"); 

And there you have it…

tree_plusminus_final.gif

, , ,

Leave a comment

On ScrollPane (or, “Scroll Pain”) Customization

It seems that documentation and clear examples for how to customize Flash 8’s ScrollPane component are somewhat scarce. In fact, just a quick Google search yields many messageboard postings bemoaning the difficulty of using ScrollPane, with little to nothing in response.

It’s important to note that the old methods of UI Component customization – setting values for “face”, “arrow,” “scrollTrack,” and the like, seem to have fallen by the wayside.

The recommended method these days is something much more in-depth and complicated, with poor documentation thrown in just to make sure you don’t get it right the first time. For example, the documentation on LiveDocs provides the following table of applicable styles for ScrollPane:

Style Theme Description
themeColor Halo The base color scheme of a component. Possible values are "haloGreen", "haloBlue", and "haloOrange". The default value is "haloGreen".
borderStyle Both The ScrollPane component uses a RectBorder instance as its border and responds to the styles defined on that class. See RectBorder class.The default border style is "inset".
scrollTrackColor Sample The background color for the scroll track. The default value is 0xCCCCCC (light gray).
symbolColor Sample The color of the arrows on the scrollbar buttons. The default value is 0x000000 (black).
symbolDisabledColor Sample The color of disabled arrows on the scrollbar buttons. The default value is 0x848384 (dark gray).

Great! Looks like we can change the arrow or track color of the scrollbar on a ScrollPain instance. All you need to do is set myScrollPane.scrollTrackColor, right?

Wrong.

Try it. Put a ScrollPane on the stage and set that scrollTrackColor. Set it all day long until you’re 0x0000FF in the face. You won’t see any changes to the scrollbar’s appearance.

Why?

Pay close attention to that “theme” column. It provides the key to why your customization isn’t going as planned. If you want to customize the scroll track or arrow color, those properties are available but what isn’t mentioned here is that you must first install the “Sample” theme from Macromedia’s libraries. A detailed description of how to do this is available in “About Themes” on LiveDocs.

So, we’ve dragged the Library over, installed the sample theme, and Presto! We now have a customized scrollbar color. We can also set symbolColor to change the color of the arrows.

It’s only a slight improvement. The problem is, we’ve now been left with chunky, gray, Windows 3.1-style scrollbars, and the only ActionScript customization options are for the arrows and the track.

You can improve the look and feel of the arrows manually, by editing the symbols in the Scrollbar Assets folder we dragged over during the Sample theme install. But who has the time or energy for that?

A little bit of digging around in the symbols that the Sample theme carried over reveals some hidden, undocumented goodness: there is also a highlightColor and shadowColor property available to these scrollbars. highlightColor applies to the “main” color of the arrow buttons and “thumb” element, while shadowColor is the small shadow to the bottom right of each piece.

(To see this for yourself, have a look at the “BrdrHilght,” “BrdrFace”, “BrdrBlk”, and “BrdrShdw” symbols.)

Here’s a diagram of the different parts of the scrollbar and where the different colors apply. Note: Please, never, under any circumstances, for any reason, use a color scheme like this. I only did it so I can show where the different parts are.

Sometime’s, it’s really amazing what you can find just by poking around in Macromedia’s samples.

, ,

9 Comments