Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 10-08-2010, 07:17 PM   #1
brianazlo
Registered User
 
Join Date: Jun 2008
Posts: 7
Default [AS3] Custom Chat Component

Okay, so I'm going through the fun and undocumented process of creating a custom component, which feels like placing my hand on a hard, flat surface, grabbing a hammer and...

What I'm trying to accomplish should not be this difficult, but I think I'm missing something important here. I'm trying to create a chat component with an optional initiation button, a chat box, an entry line, and a submit button. When you click on the component, all of the skins in it are right there, you edit them, add a little x and y, a little width and height, and presto, you have a functional chat component. The communication, the notifications, the everything else that should be the "difficult" part, I have figured out already. The wad of duct tape called component creation, eludes me. Any help would be much appreciated.

I think many of my problems come from the fact that my component is simply a set of other components.

My real question is how do I make these components in my custom component skinnable through the authoring tool? I've duplicated all of the component assets and brought them to the second frame of my component in a huge skin guide layer, but how do I reference the actual components themselves in AS3 and add these skinds? What needs to be in the compiled shim clip other than a reference to my main class? How do I access the chat components from my main AS3 class?
brianazlo is offline   Reply With Quote
Old 10-18-2010, 02:28 PM   #2
brianazlo
Registered User
 
Join Date: Jun 2008
Posts: 7
Default Answer

I'm going to answer my previous question, and post another, more specific question that I've seen in a few places around the Web, but never with an answer.

Quote:
How do I reference the actual components themselves in AS3 and add these skins? What needs to be in the compiled shim clip other than a reference to my main class? How do I access the chat components from my main AS3 class?
Yes, if using existing UI components in your custom component to add the source into the compiled clip, you find the ComponentShim.fla that's used by most of Flash's UI components, open it, create a compiled clip from ComponentShim source, remove source from the name, and drag it into your custom component shim (yours needs a different name). Using these classes will still produce errors, but if you skin the components, it should take care of these errors, and you're free to delete the component symbols from your library, with the exception of a couple, which brings up my next question.

Why does anything that instantiates a UIScrollBar throw a null pointer error? Everyone's probably seen this exact same error when compiling with some code that uses a component such as TextArea, but they forgot to include the TextArea component into their library; this option, however, is not possible when creating a component that you want to deploy without forcing users to include a TextArea in their library. There's specifically an error in the BaseButton's drawBackground() method. The background value is null; in my case, in debugging, it's looking for "disabledSkin", which it can't find, even if I add this value to the library and export for actionscript.

BaseButton's drawBackground:

Code:
protected function drawBackground():void {
			var styleName:String = (enabled) ? mouseState : "disabled";
			if (selected) { styleName = "selected"+styleName.substr(0,1).toUpperCase()+styleName.substr(1); }
			styleName += "Skin";
			var bg:DisplayObject = background;
			background = getDisplayObjectInstance(getStyleValue(styleName));
			addChildAt(background, 0);
			if (bg != null && bg != background) { removeChild(bg); }
		}
Here's how I'm skinning the component; I haven't made a style object yet:

Code:
cScrollBar=cBox.verticalScrollBar;
cBox.horizontalScrollPolicy="off";

cScrollBar.setStyle("downArrowDisabledSkin",LPRMC_ScrollArrowDown_disabledSkin);
			cScrollBar.setStyle("downArrowDownSkin",LPRMC_ScrollArrowDown_downSkin);
			cScrollBar.setStyle("downArrowOverSkin",LPRMC_ScrollArrowDown_overSkin);
			cScrollBar.setStyle("downArrowUpSkin",LPRMC_ScrollArrowDown_upSkin);
			cScrollBar.setStyle("upArrowDisabledSkin",LPRMC_ScrollArrowUp_disabledSkin);
			cScrollBar.setStyle("upArrowDownSkin",LPRMC_ScrollArrowUp_downSkin);
			cScrollBar.setStyle("upArrowOverSkin",LPRMC_ScrollArrowUp_overSkin);
			cScrollBar.setStyle("upArrowUpSkin",LPRMC_ScrollArrowUp_upSkin);
			cScrollBar.setStyle("thumbDisabledSkin",LPRMC_ScrollThumb_upSkin);
			cScrollBar.setStyle("thumbIcon",LPRMC_ScrollBar_thumbIcon);
			cScrollBar.setStyle("thumbDownSkin",LPRMC_ScrollThumb_downSkin);
			cScrollBar.setStyle("thumbOverSkin",LPRMC_ScrollThumb_overSkin);
			cScrollBar.setStyle("thumbUpSkin",LPRMC_ScrollThumb_upSkin);
			cScrollBar.setStyle("trackUpSkin",LPRMC_ScrollTrack_skin);
			cScrollBar.setStyle("trackDownSkin",LPRMC_ScrollTrack_skin);
			cScrollBar.setStyle("trackOverSkin",LPRMC_ScrollTrack_skin);
			cScrollBar.setStyle("trackDisabledSkin",LPRMC_ScrollTrack_skin);

cScrollBar.scrollTarget=cBox.textField;

Last edited by brianazlo; 10-18-2010 at 02:31 PM.
brianazlo is offline   Reply With Quote
Old 10-22-2010, 01:55 PM   #3
brianazlo
Registered User
 
Join Date: Jun 2008
Posts: 7
Default Answer #2

Okay, geez, I keep talking to myself here, but I'm posting this in case any else runs into these problems. There's so little info out there about this...

Quote:
Why does anything that instantiates a UIScrollBar throw a null pointer error? Everyone's probably seen this exact same error when compiling with some code that uses a component such as TextArea, but they forgot to include the TextArea component into their library; this option, however, is not possible when creating a component that you want to deploy without forcing users to include a TextArea in their library. There's specifically an error in the BaseButton's drawBackground() method. The background value is null; in my case, in debugging, it's looking for "disabledSkin", which it can't find, even if I add this value to the library and export for actionscript
The scrollbar styles are merged with the TextArea's styles. There's no need get a reference to the internal scrollbar at all, so to skin, simply include the scrollbar skins in the textarea's skins.

Answer #2
The way I'm skinning that component below, using setStyle, will absolutely not work. setStyle is taking a display object as the second argument, but when I'm creating the component shim, those display objects will not be present, and when I try to convert to compiled clip, it will throw errors in my main class. The workaround for this is to create a style object, that uses a string value to desribe the name of the display object you'd like, then the styleManager/UIComponent classes will convert that into a displayObject.

Note:
I now have an actual working component that has no bugs, doesn't interfere/confuse any built-in components, and can be installed easily anywhere. As a note to people trying to do this for the first time:
  • you're not going to find "good" documentation on this anywhere, and the best you'll find is that one terrible one Adobe released.
  • you're going to have to open the built-in as3 classes for components, particularly UIComponent, styleManager, and whatever component most closely resembles what you are trying to create
  • the Adobe documentation on these classes LEAVES OUT the methods you'll need to accomplish this! Look in the classes themselves as your "documentation".

Good Luck!
brianazlo is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:30 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.