Since attending 360Flex in Atlanta, I wanted to learn a bit about skinning with Degrafa. For one of my own personal projects, I needed to create some nice scrollbars that would go with my black and purple color scheme. Now keep in mind that I am NOT a designer. Most of my coding experience before learning Flex/AIR centered around backend Java Servlets and other hidden technology. View-Source is enabled if you wanted to see how it’s done. I still don’t know how to get rid of the stupid white box between the two scrollbars. If someone would like to comment and let me know, that’d be great.

ScrollbarSkinning

Post to Twitter

Posted by Andrew, filed under 360 Flex, as3, Degrafa, Flex. Date: March 9, 2008, 1:07 pm | 7 Comments »

7 Responses

  1. Jason Hawryluk Says:

    Sweet! Though the view source doesn’t seem to work. For some reason it’s opening the post in a new window, at least when using IE. Looking good though.

    - jason

  2. Tom Says:

    Hi there,

    just discovered your blog in the comments to doug mccunes speach at 360. ^^
    Nice work with degrafa!

    Regards, tom

  3. BaRoN! Says:

    Hi there,

    1st of all, the view source doesn’t work for me, I got returned to the same page :-(.

    If you still care about the whiteBox, you can either set its alpha to 0, or remove it from the rawChildren list.

    addEventListener(Event.ADDED, whiteBoxCheck);
    private function whiteBoxCheck(event:Event):void {
    if (event.target.name == “whiteBox”) {
    FlexShape(event.target).alpha = 0;
    }
    }

    Or, you can:

    private function removeWhiteBox(): void {
    var wb: DisplayObject = rawChildren.getChildByName(“whiteBox”);
    if (wb) {
    wb.alpha = 0;
    }
    }

    override public function validateDisplayList(): void {
    super.validateDisplayList();
    removeWhiteBox();
    }

    You may be interested in the following:
    This discussion on flexcoders list about the white box and Tommy Baggett tutorial about creating a custom scrollbars

  4. TicTacToe Using Degrafa Says:

    [...] new examples every week that are using Degrafa in a variety of ways. From data visualization, to skinning, games and more. It really shows just how flexible Degrafa can [...]

  5. Tom Nussbaumer Says:

    Just want to note that the viewsource url seems to be broken.

  6. Chris Parker Says:

    Here’s a hack to the whiteBox in the corner problem.. http://custardbelly.com/blog/?p=70

  7. Andrew Says:

    Looks like the wordpress search-engine-friendly urls aren’t friendly to my view-source link. Here’s the source: http://www.flexjunk.com/examples/ScrollbarSkinning/srcview/

Leave a Comment

 
Your comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.