10 Replies Latest reply: Mar 2, 2013 9:34 AM by dj.michaud RSS

    ScrollPane - Changing various colors and appearance

    dj.michaud

      I am trying to change the color layout of my ScrollPane boxes.  My website (removed) has a clean, white background.  The default white and light grey color of the standard ScrollPane scheme blends in too much.  I would like to change the color of the vertical scrollbar so that it stands out more.  Also, maybe have the background of the text box a light blue hue with black lettering to give it some "pop" also.

       

      I am running Flash CS5 in AS 2.  I have read on another website to do the following in ActionScript:

      1. ScrollPane.setStyle("themeColor", "haloOrange")
      2. ScrollPane.setStyle("borderStyle", "none")
      3. ScrollPane.setStyle("scrollTrackColor", 0CC333)
      4. ScrollPane.setStyle("symbolColor", FF00FF)
      5. ScrollPane.setStyle("symbolDisabledColor", FFFF00)

       

      This did not work.

      Look at the bottom of the website for "Terms - Credits - Policies".  On this page there are three scrollPanes.  This is where I want to create these colorful ScrollPanes.  Please help.  If you want me to send you screenshots, I can do that, but looking at the live website might be all you need.  By the way, I am a novice in ActionScripting.  Thanks.  djm

        • 1. Re: ScrollPane - Changing various colors and appearance
          Ned Murphy MVP

          You can edit the component manually to change the colors of it svarious elements.  Just doubleclick it in the library and edit any of the graphic elements you wish to.

          • 2. Re: ScrollPane - Changing various colors and appearance
            dj.michaud Community Member

            Group/Ned:

            a. I tried to double click the ScrollPane element in the Library... no action that brings up any color elements. 

            b. I double-clicked the ScrollPane box in the actual page.  Again, no action.

            c. I double-clicked the Movie Clip that contains the text that is being scrolled.  Again, no action related to changing the color elements.

            I viewed the same components using the Component Inspector, again, no color elements displayed. 

            Double-clicking only allows for the name to be altered.  If I right-click, nothing pertaining to elements is displayed.

            I have four of these ScrollPane boxes I want to alter.

             

            What am I missing?  I am running Flash CS5 with AS2 scripting.

            • 3. Re: ScrollPane - Changing various colors and appearance
              Ned Murphy MVP

              Sorry, I missed your mention of using AS2 earlier... AS3 alows you to physically modify the component in the manner I mentioned, editing it like you would any symbol.

               

              Chances are you are going to have to try to owrk your way down to the style elements that can be modified for the scrollpane, which might need to be further broken down to target the subcomponents, like the scrollbar.

               

              You mentioned a textbox and font color.... scrollpanes are not textfields, so I don't know what that is referring to.  If you want to change the background color of the scrollpane, in AS2 you can use...

               

                  sp.setStyle("backgroundColor", "0XEEEEFF");

              • 4. Re: ScrollPane - Changing various colors and appearance
                dj.michaud Community Member

                I kept getting "Statement must appear within on/onClipEvent handler" errors for each line typed.  I did a liitle more reading about the error and modify the scpripting to the following:

                 

                  onClipEvent (load) {

                    sp.setStyle("backgroundColor", "0xFF0000");

                    sp.setStyle("themeColor", "haloOrange");

                    sp.setStyle("borderStyle", "inset");

                    sp.setStyle("scrollTrackColor", "0x0CC333");

                    sp.setStyle("symbolColor", "0xFF00FF");

                    sp.setStyle("symbolDisabledColor", "0xFFFF00");

                  }

                 

                I am no longer getting error messages, but nothing is changing.  Based on your sample line, I read on another forum that your "sp" in the beginning needs to be substituted for an <Instance Name> in Properties section.   I want to duplicate this ActionScripting in each of the four ScrollPanes.

                 

                Nothing is working.  Please help.  Thanks!

                • 5. Re: ScrollPane - Changing various colors and appearance
                  Ned Murphy MVP

                  You are getting that error because you are attaching it to the object.  Copy/cut the code from where you have it and click anywhere off of any objects and paste the code into the Actions window so that it gets planted in the timeline where the scrollpane is (preferably on a separate layer for actionscript).

                   

                  Note that "sp" is just what I was using as an instance name representation.  You need to assign such a name to your scrollpane and use it.  You can assign "sp" as an instance name if you like, though if you have more than one you will need to assign the code for each individually where each will need to have a unique instance name.

                  • 6. Re: ScrollPane - Changing various colors and appearance
                    dj.michaud Community Member

                    OK.  We made a liitle progress. 

                      a. Moved the script to a new layer, named "Custom Scripting".

                      b. Modified the scripting to be the following:

                     

                                onClipEvent (load) {  

                                     Terms.setStyle("backgroundColor", "0xFF0000");

                                     Terms.setStyle("themeColor", "haloOrange");

                                     Terms.setStyle("borderStyle", "inset");

                                     Terms.setStyle("scrollTrackColor", "0x0CC333");

                                     Terms.setStyle("symbolColor", "0xFF00FF");

                                     Terms.setStyle("symbolDisabledColor", "0xFFFF00");

                                }

                     

                      b. Labeled each ScrollPane with a unique Instance Name (Terms, Credits, Privacy, Services)

                     

                    I was getting an error message as follows:

                       "Clip events are permitted only for movie clip instances."

                     

                    So then I noticed that the ScrollPane feature in the Library was labeled as a "Compiled Clip" and the text content that scrolls inside the ScrollPane box is a "Movie Clip" type.  Therefore, in the scripting above, I changed the "Terms" to "Terms Content" to reflect the name associated with each unique ScrollPane content assignment.  This did NOT work either.

                     

                    The ScrollPanes are working as they are supposed to, except that I cannot change the colors/features like I want.

                    • 7. Re: ScrollPane - Changing various colors and appearance
                      Ned Murphy MVP

                      Get rid of the "on..." code . that stuff is for when you place code on objects like you were doing (a bad practice)  You only need to use the code inside....

                       

                                       Terms.setStyle("backgroundColor", "0xFF0000");

                                       Terms.setStyle("themeColor", "haloOrange");

                                       Terms.setStyle("borderStyle", "inset");

                                       Terms.setStyle("scrollTrackColor", "0x0CC333");

                                       Terms.setStyle("symbolColor", "0xFF00FF");

                                       Terms.setStyle("symbolDisabledColor", "0xFFFF00");

                       

                      The word "Terms" in the code that you show needs to be the instance name you assign to the Scrollpane that you place on the stage.  You assign the instance name by selecting that one scrollpane and entering that name in the Properties panel where it says <Instance Name>

                       

                      If you have more scrollpanes, they will each need their own unique names and their own lines of code like the above, just using their names.

                      • 8. Re: ScrollPane - Changing various colors and appearance
                        dj.michaud Community Member

                        Thanks Ned.  You have been very helpful.  Here is the latest....

                        The ScrollPanes are only partially working now.  I am able to get the background color to change, but none of the other components are being altered with whatever I insert as its new value.  The main goal at this point is to change the color of the vertical scroll bar.  Here is the new Action Script that is partially working:

                         

                        Terms_ScrollPane.setStyle("backgroundColor", "0xDCE0E0");

                        Terms_ScrollPane.setStyle("themeColor", "haloBlue");

                        Terms_ScrollPane.setStyle("borderStyle", "inset");

                        Terms_ScrollPane.setStyle("scrollTrackColor", "0x0CC333");

                        Terms_ScrollPane.setStyle("symbolColor", "0xFF00FF");

                        Terms_ScrollPane.setStyle("symbolDisabledColor", "0xFFFF00");

                        //

                        Credits_ScrollPane.setStyle("backgroundColor", "0xDCE0E0");

                        Credits_ScrollPane.setStyle("themeColor", "haloBlue");

                        Credits_ScrollPane.setStyle("borderStyle", "inset");

                        Credits_ScrollPane.setStyle("scrollTrackColor", "0x0CC333");

                        Credits_ScrollPane.setStyle("symbolColor", "0xFF00FF");

                        Credits_ScrollPane.setStyle("symbolDisabledColor", "0xFFFF00");

                        //

                        Privacy_ScrollPane.setStyle("backgroundColor", "0xDCE0E0");

                        Privacy_ScrollPane.setStyle("themeColor", "haloBlue");

                        Privacy_ScrollPane.setStyle("borderStyle", "inset");

                        Privacy_ScrollPane.setStyle("scrollTrackColor", "0x0CC333");

                        Privacy_ScrollPane.setStyle("symbolColor", "0xFF00FF");

                        Privacy_ScrollPane.setStyle("symbolDisabledColor", "0xFFFF00");

                        • 10. Re: ScrollPane - Changing various colors and appearance
                          dj.michaud Community Member

                          Thank you.  We are one step closer....

                          Here is what I have done with its results.

                           

                          I removed the action scripting in the ScrollPane page noted in previous replies.  I left in your original step of "backgroundColor".  This is the only step that works.  I altered the "ThemeColor" from "haloBlue" to "haloOrange" to see if the buttons change, and they do.  So that is a good thing.  I then removed the scripting altogether because they are not the corect color selections for my website.

                           

                          Now, I followed your suggestions found on both links noted above.  There must be something I am missing. 

                          I opened the HaloTheme.FLA file and FLASH opened it in a separate window.  From that window, I located "VScrollBarAssets" movie clip.  I dragged that movie clip into my document's library.  FLASH created a new folder with the following format:

                                Flash UI Components 2 >  Themes > MMDefault > Scrollbar Assets

                          In the last folder, VScrollBarAssets Movie Clip exists with "States" and "Elements" folders.

                           

                          I am able to change the colors in "VScrollBarAssets", but when I test the movie (either by Publishing (F12) or selecting "Control -Test Movie"), there is no change in the tested version.

                           

                          I do the same by changing the colors of  "ScrollThemeColor1" and "ScrollThemeColor2" in Elements folder.  Still no change when tested.

                           

                          I made the color choices a brown color to make it obvious.  The default light blue and grey colors remain.  What am I missing?  THANKS!!  djm