dcsimg
A Flash Developer Resource Site

Results 1 to 13 of 13

Thread: use this to customize your components look

  1. #1
    Senior Member
    Join Date
    Jan 2001
    Posts
    146

    Post

    Ok, posted twice on this subject but havn't got any useful replies. after some digging up, ive made some code you can use to customize the look and feel of your components (the font, size, colours etc.) here goes...


    ************************************************** *************

    say you have a list box on stage and you want to change the font and font size. do this

    1. drag a component on stage. in this case it is a list box.
    2. give it an instance name. i have used 'myListBox'
    3. Select this component by clicking on it, then create a new layer above it - name it if you want. select any frame in this layer and open the actions panel.
    4. enter this code.

    //set style for only this component - myListBox
    myListBox.setStyleProperty("textFont", "Courier New");
    myListBox.setStyleProperty("textSize", 10);

    add other properties as required. thats it.

    ************************************************** *************

    in case you want to apply style changes throughout any component that appears in your swf, then use this code in the first frame of your fla.

    // apply global style format.
    // this will affect any component in the movie
    globalStyleFormat.textFont = "Teachers Pet Sans Serif";
    globalStyleFormat.textSize = 8;
    globalStyleFormat.addListener(emailCheckBox, myListBox, myRadio, myRadio2, myRadio3, myRadio4);


    ************************************************** *************

    say you have a group of components on stage (say a listbox - instance name 'myListBox', a checkBox - instancename 'myCheckBox', and a combo box - instance name 'myComboBox')

    now you want to apply a particular style to just these three components without affecting any other components on the stage.

    use this code in the first frame of the movie. change the properties as required.

    //define the new style
    var myStyleFormat = new FStyleFormat();
    //define your new styles properties
    myStyleFormat.arrow = 0x333300;
    myStyleFormat.background = 0xffffff;
    myStyleFormat.backgroundDisabled = 0xccffcc;
    myStyleFormat.darkshadow = 0x333300;
    myStyleFormat.foregroundDisabled = 0x999999;
    myStyleFormat.face = 0x99cc99;
    myStyleFormat.textSize = 12
    myStyleFormat.highlight = 0x99cc00;
    myStyleFormat.highlight3D = 0x333300;
    myStyleFormat.radioDot = 0x333300;
    myStyleFormat.scrollTrack = 0x99cc99;
    myStyleFormat.selection = 0x333300;
    myStyleFormat.selectionDisabled = 0x999999;
    myStyleFormat.selectionUnfocused = 0x999999;
    myStyleFormat.shadow = 0x99cc00;
    myStyleFormat.textColor = 0x000000;
    myStyleFormat.textDisabled = 0x999999;
    myStyleFormat.textSelected = 0x000000;
    // add a listener for each instance the style is required
    myStyleFormat.addListener(myComboBox, myListBox, myCheckBox);

    ************************************************** *************

    sid

  2. #2
    Arckid - Curving the Web
    Join Date
    Dec 2000
    Location
    India
    Posts
    1,412
    thanks for your functions ...

    added to MyFK.

    one thing to ask ... what exactly the listner thing do?

  3. #3
    Senior Member
    Join Date
    Jan 2001
    Posts
    146
    found a bit of documentation in the flash help file that makes global changes easier. the listener basically links the instances to any style changes that you have made.

    To change one or more properties in the global style format:

    1 Make sure the document contains at least one component instance. See Adding components to Flash documents.

    2 Create a new layer in the Timeline and give it a name.

    3 Select any frame in the new layer.

    4 Open the Actions panel in expert mode.

    5 Use the following syntax to change any or all of the properties listed in the style format properties table. You only need to list the properties whose values you want to change.

    globalStyleFormat.darkshadow = 0x333300;
    globalStyleFormat.shadow = 0x99cc00;
    globalStyleFormat.highlight3D = 0x333300;
    globalStyleFormat.highlight = 0x99cc00;
    globalStyleFormat.face = 0x99cc99;
    globalStyleFormat.background = 0xffffff;
    globalStyleFormat.text = 0x000000;
    globalStyleFormat.radioDot = 0x333300;
    globalStyleFormat.check = 0x333300;
    globalStyleFormat.arrow = 0x333300;

    6 Following the list of object properties, use the following syntax to insert the method for the globalStyleFormat object:

    To update all properties in the globalStyleFormat object (including those whose values you are not changing), enter globalStyleFormat.applyChanges();. Properties whose values you are not changing will be updated with the same values.

    To update only those properties in the globalStyleFormat object whose values you are changing, enter globalStyleFormat.applyChanges("propertyname1", "propertyname2");, where propertyname1, propertyname2, and so on, refer to the names of the properties being updated. For example, if you changed the properties check and arrow in step 5, enter globalStyleFormat.applyChanges("check", "arrow");.

    7 Choose Control > Test Movie to see the changes.

  4. #4
    Junior Member
    Join Date
    Mar 2002
    Posts
    6

    calendar component properties

    This is quite helpful, however I tried it with the Calendar component and not many of those properties seem to do anything, you can only seem to change the titlebar (month/year and arrows) and text size/colors..

    None of those properties you listed change the color of selected or unselected days. Do you know how I can change them or where I can find a list of the properties for each component?

  5. #5
    Junior Member
    Join Date
    Mar 2002
    Posts
    8

    Post helpfull

    I found your scripts to be very helpfull. Maybe you can tell me why the scroll bar works on a dynamic text box when the text is inserted directly into the text box while in the fla but the same scroll bar does not work when you try to insert the text into the dynamic text box via a variable. Any ideas?

  6. #6
    Stupid Little Dreamer
    Join Date
    Aug 2000
    Location
    Toronto
    Posts
    583

    Re: helpfull

    Originally posted by stuntpig
    I found your scripts to be very helpfull. Maybe you can tell me why the scroll bar works on a dynamic text box when the text is inserted directly into the text box while in the fla but the same scroll bar does not work when you try to insert the text into the dynamic text box via a variable. Any ideas?
    While it's true that dynamic and input text boxes in FlashMX feature places to specify both an instance name and variable name, this is for backward compatibility only (they've been deprecated, essentially). If you are authoring for MX only, it is better programming practice to avoid variable names for text boxes altogether.

    All textbox objects include a parameter called text, so to change the contents of a textbox named responseToUser, you simply use:
    responseToUser.text = "Thanks for your comments.";

    While this deprecation might appear to remove some functionality (you have to assign the text parameter to equal some other variable, instead of it just happening automatically), it's a good idea to break away from such a 'hard-wired' approach to maximize the adaptability of your code.

  7. #7
    Junior Member
    Join Date
    Mar 2002
    Posts
    8

    Post thanks

    Thanks, that was a lot of help. It seems so simple after someone tells you how to do it...

  8. #8
    Senior Member
    Join Date
    Jan 2001
    Posts
    146
    krisis,
    This is quite helpful, however I tried it with the Calendar component and not many of those properties seem to do anything, you can only seem to change the titlebar (month/year and arrows) and text size/colors..

    None of those properties you listed change the color of selected or unselected days. Do you know how I can change them or where I can find a list of the properties for each component?
    there are tons of parameters to change for look and feel. if you installed MX in the default c:prog files direcory, then use this url file:///C:/Program%20Files/Macromedia/Flash%20MX/Help/Flash/html/15_components46.html to see the complete list. there are options for selected and unselected text as well.

    sid

  9. #9
    Junior Member
    Join Date
    Mar 2002
    Posts
    6
    Sid, I had already found that help file and the list of all the properties (which you have also previously listed) but none of them change the highlighting color of selected items on the calendar component. I went through one by one and testing each property to see what it did. I have read about modify the 'skin' of a component. Would this be the only way I could change those kind of attributes of the calendar component?

  10. #10
    Senior Member
    Join Date
    Jan 2001
    Posts
    146
    i've found a couple of properties that affect the calendar component and am still digging through the component code to find more. here they are. will post when i get the list.

    globalStyleFormat.focusRectInner = 0x33FF66;
    globalStyleFormat.focusRectOuter = 0x000000;
    globalStyleFormat.dateBackground = 0xFF0000;
    globalStyleFormat.applyChanges();

    sid

  11. #11
    Arckid - Curving the Web
    Join Date
    Dec 2000
    Location
    India
    Posts
    1,412
    gr8 ...

    and thank u so much guyz

  12. #12
    Senior Member
    Join Date
    Jan 2001
    Posts
    146
    heres a list of properties for the calendar object

    globalStyleFormat.face = 0x000000;
    globalStyleFormat.textColor = 0xFF9900;
    globalStyleFormat.shadow = 0xCCCCCC;
    globalStyleFormat.darkshadow = 0xCCCCCC;
    globalStyleFormat.highlight = 0xCCCCCC;
    globalStyleFormat.highlight3D = 0xCCCCCC;
    globalStyleFormat.arrow = 0xCCCCCC;
    globalStyleFormat.foregroundDisabled = 0xCCCCCC;
    globalStyleFormat.dayBackground = 0x000000;
    globalStyleFormat.background = 0x000000;
    globalStyleFormat.dayBorder = 0xFFFFFF;
    globalStyleFormat.dateBackground = 0x000000;
    globalStyleFormat.dateBorder = 0xFFFFFF;
    globalStyleFormat.emptyDateBackground = 0x666666;
    globalStyleFormat.emptyDateBorder = 0xFFFFFF;
    globalStyleFormat.selectedDateBackground = 0x666666;
    globalStyleFormat.selectedDateBorder = 0xFF9900;
    globalStyleFormat.applyChanges();

    the best way to find these is to open your library, open the flash UI components folder > component skins > and then in the subfolder, select the skin and edit. the actions in the layer README has the property name listed here.

    sid



  13. #13
    Junior Member
    Join Date
    Nov 2005
    Posts
    7
    Does this work in MX 2004?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center