Be a Supporter!

AS: Components Stuff

  • 2,543 Views
  • 17 Replies
New Topic Respond to this Topic
Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
AS: Components Stuff 2006-03-13 14:07:08 Reply

AS: MAIN, like sex with a n00b; as a very wise man has said

WHY!?
First of all, WHY bother with components, when you can have fancy MC's?
Because sometimes you JUST cant be bothered to draw. :P Not only that, but components have QUITE useful Stuff.

lol Wut will i learn?
Im going to go with a few components, comboBoxes, trees, and datagrids. In my opinion the most powerful/useful. Also, a bit of skinning and stuff.

INTRO
Whenever you hear "Components", you probably go all like "LOLWTFBBQ!!??11one". But no, Components are one of the biggest tools that flash can offer for you. I recently have been trying them out, and they are QUITE powerful for anything. ;) Most people dont even know how to use the components, though. Its NOT that simple.

Skinning Components
Firstly, ill begin with SKinning components. Skinning? not bbq. Its changing a components color. Like, have an example:

_global.style.setStyle("themeColor","haloG
reen");

What is ThemeColor?
Its the property of the components that we want to change.

halogreen? bbq?
No, not bbq you silly person. HaloGreen is the template of the components. The default one, Aside from haloGreen, there is haloBlue, and haloOrange. Try it out. ;)

<Note>
Any of the following will also work:
_global.style.setStyle("themeColor",0xFF00
00);// thats red

</Note>

basically, we are changing the STYLE of the global components. Which is EVERY silly thing you have on the flash.

You can, however, change styles to any single component. Like this:
component_instance.setStyle("themeColor","
haloBlue");

Which will just affect one component. Easy, huh?

Now, lets go a bit more detailed onto components themselves, k? k.

Lets start off with a comboBox,k ? Most of the components are used the same. I'll work with
arrays.

//creating an array
var people:Array = new Array();
//inserting stuff into the array
people.push({data:"",label:"Choose a person"});
people.push({data:"D", label:"Diego"});
people.push({data:"C",label:"Chad"});
people.push({data:"J",label:"Jay"});
// I will keep using this array from now on for every other component, so, dont lose it k.

The above just creates the array, now, assumming you named the comboBox "people_cbx", without the quotes. (CBX = comboBox).

people_cbx.dataProvider = people;
//setting size:
people_cbx.setSize(200);

wtf? Well, you see... dataProvider is a function (i believe), which provides the component with the data of something else. Its used on MOST components. setSize is used only for components, you dont use _width or _height for them, it just stretches them out. THAT ISIMPORTANT. Now your comboBox should be working. ;)

You can also make the combobox editable by just... going:

people_cbx.editable=true;
// get it?

DATAGRIDS.
Literally one of the most powerful tools that flash can lend you, really! XD

Now, drag a datagrid onto the stage.

give this code to the frame:

//track if any grid rows have been selected
var SelectedGrid:Boolean;
var GridRowSelected:Number;
//I'll just use the same ol people array.
//Assuming you instanced the grid "people_grid".
people_grid.dataProvider = people;
people_grid.setSize(300,100);
//DataGrids can also be editable:
people_grid.editable = true;

Test your movie out. The dataGrid will put everything, with two columns. Data, and Name. Which i provided in the people array. Its not too complicated, is it? :P Lets move on.

Now, lets see, a TREE component?

Tree Components can be QUITE useful. For keeping data ordered and stuff. Mostly for XML, i guess. So lets say, we CREATE our own XML file with Flash itself, like..

var stuff_xml:XML = new XML();
//creating elements
stuff_node = stuff_xml.createElement("node");
lol_node = stuff_node.cloneNode(true);
wtf_node = stuff_node.cloneNode(true);
//adding attributes
stuff_node.attributes.label = "STUFF";
lol_node.attributes.label = "LOL?";
wtf_node.attributes.label = "WTF!!1";
//placing elements on the Tree
stuff_xml.appendChild(stuff_node);
lol_node.appendChild(wtf_node);
/*placing it on the tree,
Assuming youve called it stuff_tree*/
stuff_tree.dataProvider = stuff_xml;

Test the movie. ;) Dont worry about the nodes and stuff, thats just an example on WHAT can you use a tree for, and howd it look. Nice, doesnt it?

Yes, i am learning XML (well, a little), so i wanted to try it out.

OTHER USEFUL STUFF TO KNOW ABOUT FLASH/COMPONENTS

You CANT change a component's size with _height or _width. That stretches them. You use setSize.
You MOVE a component using stuff.move(x,y);
for buttons, and most stuff, you use the "label" property. Thing_btn.label = "LOL";
For Grids, you can also use addColumn(columnName); spaceColumnsEqually(); and removeColumn(columnName);
most are self explanatory.
Skinning/setting styles is pwn. ;)

K, i guess thats all for this one. :) Pretty useless/stupid.
I came out with all of this after trying/testing/erroring most components and inspectionating around the *.as files that flash has. ;) Good luck silly person.

Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-13 15:41:02 Reply

At 3/13/06 03:37 PM, -Reedo11- wrote: Yey! Great tut! You taught me stuff.

YEY. I taught the great Reed something.

GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to AS: Components Stuff 2006-03-13 16:25:03 Reply

im having some truoble with the data grid component, you might be able to help.
i want a column that says "Time Playing", but when adding items the labels have to be one word.
i tried a bunch of stuff

addItemAt(0, {Time Playing:500});
addItemAt(0, {this["Time Playing"]:500});

timeColumn = getColumnAt(0);
addItemAt(0, {timeColumn:500});
addItemAt(0, {this[timeColumn]:500});

none of them work how can i have a column with a space on it?

Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-13 16:26:54 Reply

At 3/13/06 04:25 PM, ImpotentBoy2 wrote: im having some truoble with the data grid component, you might be able to help.
i want a column that says "Time Playing", but when adding items the labels have to be one word.
i tried a bunch of stuff

Let me see if i get it... you want to add items to a certain column, right? And that items have to be variables? or what? i dont quite get it.

GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to AS: Components Stuff 2006-03-13 16:34:48 Reply

At 3/13/06 04:26 PM, Darkfire_Blaze wrote:
At 3/13/06 04:25 PM, ImpotentBoy2 wrote: im having some truoble with the data grid component, you might be able to help.
i want a column that says "Time Playing", but when adding items the labels have to be one word.
i tried a bunch of stuff
Let me see if i get it... you want to add items to a certain column, right? And that items have to be variables? or what? i dont quite get it.

no i want to add items(rows) to a datagrid. i created a column called Time Playing,
but when you add an item you have to put an array for each column's value like say you have a column named "Name" and "Height" you would do this
addItemAt(0,{Name:"George",Height:'54"'})

but lets say you have a column named "Time Played"

you cant say
addItemAt(0,{Time Played:500})

because there cant be spaces on the left side of the :. how can i get around this?

Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-13 16:36:45 Reply

At 3/13/06 04:34 PM, ImpotentBoy2 wrote: because there cant be spaces on the left side of the :. how can i get around this?

oh i get it. Well, i havent faced that problem... but why not use an underscore? =?

GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to AS: Components Stuff 2006-03-13 16:40:22 Reply

At 3/13/06 04:36 PM, Darkfire_Blaze wrote:
At 3/13/06 04:34 PM, ImpotentBoy2 wrote: because there cant be spaces on the left side of the :. how can i get around this?
oh i get it. Well, i havent faced that problem... but why not use an underscore? =?

i guess ill have to

Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-13 16:43:18 Reply

At 3/13/06 04:40 PM, ImpotentBoy2 wrote:
At 3/13/06 04:36 PM, Darkfire_Blaze wrote:
At 3/13/06 04:34 PM, ImpotentBoy2 wrote: because there cant be spaces on the left side of the :. how can i get around this?
oh i get it. Well, i havent faced that problem... but why not use an underscore? =?
i guess ill have to

I really dont see any other way around it. =?

GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to AS: Components Stuff 2006-03-13 16:47:50 Reply

At 3/13/06 04:43 PM, Darkfire_Blaze wrote:
At 3/13/06 04:40 PM, ImpotentBoy2 wrote:
At 3/13/06 04:36 PM, Darkfire_Blaze wrote:
At 3/13/06 04:34 PM, ImpotentBoy2 wrote: because there cant be spaces on the left side of the :. how can i get around this?
oh i get it. Well, i havent faced that problem... but why not use an underscore? =?
i guess ill have to
I really dont see any other way around it. =?

no wait i figured it out
timeColumn.headerText = "Time Playing";

also is there a way to replace al the preset graphics of a component with custom made things?
and a list of setStyle options would be nice. other than that great tutorial, i never knew alot of this

Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-13 17:21:08 Reply

At 3/13/06 04:47 PM, ImpotentBoy2 wrote: no wait i figured it out
timeColumn.headerText = "Time Playing";

oh... niice. Didnt know you could use that.


also is there a way to replace al the preset graphics of a component with custom made things?

Yes you can. Somewhere around the Flash MX/8 folder there is the halo and sample skins, i believe.

and a list of setStyle options would be nice. other than that great tutorial, i never knew alot of this

Sure thing, let me write them all out:

backgroundColor
the background of the component, not all components have a background. This style works on TextArea, textInput, accordeon, and DataGrid.
datechooser.setStyle("backgroundColor",0xf
f0000);

borderColor
the black section of the default 3d border or the color section of a 2d border. It doesnt affect button, checkbox, label, combobox or menubar.
datechooser.setStyle("borderColor",0xff000
0);

borderStyle
doesnt affect button, label, or date chooser. Possible values are:
"none"
"inset"
"outset"
"solid" <-- default
combo.setStyle("borderStyle","inset");

buttonColor
the big face area of a button along with a section of the 3d border.
submit_btn.setStyle("buttonColor",0xff0000
);
this has no effect on HALO themes.

color
the color of the text on the component. Works on any component that has text.
checkbox.setStyle("color",0xff0000);

disabledColor
the disabled color for text. The default is 0x848384 (dark gray).
dateChooser.setStyle("disabledColor",0xff0
000);

fontFamily
the font name for text. The default values is _sans.
test_btn.setStyle("fontFamily","garamond")
;

fontSize
the point size, not pixel size of the font.
test_btn.setStyle("fontSize","20");

fontStyle
the font style, either normal or italic. Default is normal.
dateField.setStyle("fontStyle","italic");

fontWeight
the font weight, either normal or bold. The default is normal.
datefield.setStyle("fontWeight","bold");

marginLeft
a number indicating the left margin for the text. Default is 0.
textarea.setStyle("marginLeft","10");

marginRight
a number indicating the right margin for text. default is 0.
textarea.setStyle("marginRight","10");

scrollTrackColor
the scroll track for a scroll bar.
textArea.setStyle("scrollTrackColor",0xff0
000);

shadowColor
The bottom section of the 3d border. This affects the purely rectangular components.
stuff.setStyle("shadowColor",0xff0000);

NONE OF THE FOLLOWING WORK ON HALO

symbolBackgroundColor
the background color of checkboxes and radio buttons. Default is white. Doesnt work on halo either.

symbolBackgroundDisabledColor
The background color of checkboxes and radio buttons when disabled. Default is grey.

symbolBackgroundPressedColor
The background color of checkboxeds and radio buttons when pressed. Default is white.

symbolColor
The check mark of a checkbox or the dot of a radio button.

symbolDisabledColor
the disabled check mark or radion button dot color.

The following DO work on Halo

textAlign
the text alignment, left, right, or center. Default is left.

textDecoration
The text decoration, either none or underline.

textIndent
amount of the first line of the text is indented. A paragraph in a book. The defauls is 0.
textarea.setStyle("textIndent","5");

Hope thats more than enough. ;)

authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Components Stuff 2006-03-14 13:29:51 Reply

At 3/13/06 02:07 PM, Darkfire_Blaze wrote: AS: Components

thank you very much, actually. ive never known how to use components, but ive always wanted to. ive just never taken the time to learn and ive regretted it. this is just the thing ive needed. diego, you complete me...


BBS Signature
Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-14 14:50:51 Reply

At 3/14/06 01:29 PM, authorblues wrote:
At 3/13/06 02:07 PM, Darkfire_Blaze wrote: AS: Components
thank you very much, actually. ive never known how to use components, but ive always wanted to. ive just never taken the time to learn and ive regretted it. this is just the thing ive needed. diego, you complete me...

Hehe. <3

Also, for the radio buttons and checkboxes, there is a "selected" property, like...

if(myradiobutton.selected){
//bleah
}

I knew it has gonna be handy. ;) Thanks Chad

authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Components Stuff 2006-03-14 15:44:07 Reply

At 3/14/06 02:50 PM, Darkfire_Blaze wrote: I knew it has gonna be handy. ;) Thanks Chad

you guys can kiss my ass... :(


BBS Signature
Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-14 15:46:00 Reply

At 3/14/06 03:44 PM, authorblues wrote:
At 3/14/06 02:50 PM, Darkfire_Blaze wrote: I knew it has gonna be handy. ;) Thanks Chad
you guys can kiss my ass... :(

really?

And congrats on lvl 9, ;)

authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Components Stuff 2006-03-14 15:47:07 Reply

At 3/14/06 03:46 PM, Darkfire_Blaze wrote: And congrats on lvl 9, ;)

i dont think im gonna redeposit. i prefer being level 9 anyways.
its better than being a deposit whore ^^;


BBS Signature
Blaze
Blaze
  • Member since: Aug. 4, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to AS: Components Stuff 2006-03-14 15:48:05 Reply

At 3/14/06 03:47 PM, authorblues wrote:
At 3/14/06 03:46 PM, Darkfire_Blaze wrote: And congrats on lvl 9, ;)
i dont think im gonna redeposit. i prefer being level 9 anyways.
its better than being a deposit whore ^^;

Yeah right. Now YOU can kiss my ass. ^^;;

authorblues
authorblues
  • Member since: Jun. 21, 2005
  • Offline.
Forum Stats
Member
Level 12
Blank Slate
Response to AS: Components Stuff 2006-03-14 16:05:31 Reply

At 3/13/06 02:07 PM, Darkfire_Blaze wrote: AS: Components

flash component documentation


BBS Signature
GeoKureli
GeoKureli
  • Member since: Apr. 1, 2003
  • Offline.
Forum Stats
Supporter
Level 19
Game Developer
Response to AS: Components Stuff 2006-03-14 16:26:49 Reply

At 3/14/06 01:29 PM, authorblues wrote:
At 3/13/06 02:07 PM, Darkfire_Blaze wrote: stuff
thank you very much, actually. ive never known how to use components, but ive always wanted to. ive just never taken the time to learn and ive regretted it. this is just the thing ive needed. diego, you complete me...

components are really easy to use, it just takes a while to find out what does what. all i do is, i open up the help panel, and show the list of functions and properties for that component and it goes by relatively quickly.
here's my multiple save file thing. the components made it alot quicker.

although i want to learn to make my own components.