Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rate Thread Display Modes
Old 10-26-2006, 08:01 PM   #1
sa6k0o0
Registered User
 
Join Date: Oct 2006
Posts: 33
Default custom components

is there any way to make the scrollbar without the arrows ?
Or the way is just to build a new scrollbar component in flex ?

And I have build already many components in flash 8 (UI Components and more complex like Menu etc)
is it possible to use them in flex2, or it is needed to rebuild them in flash 9 with actionscript3 ?
sa6k0o0 is offline   Reply With Quote
Old 10-26-2006, 08:26 PM   #2
Assertnfailure
as[org].addListener(this)
 
Assertnfailure's Avatar
 
Join Date: Dec 2005
Location: LA, California
Posts: 837
Default

A scrollbar without arrows would be a VSlider.

You can't use AS 2 code with flex 2, you'd have to rewrite them...
Assertnfailure is offline   Reply With Quote
Old 10-26-2006, 09:01 PM   #3
sa6k0o0
Registered User
 
Join Date: Oct 2006
Posts: 33
Default scrollbar

But I don't thing that I can skin the vslider so that to become a real scrollbar.
I just want the scrollbar to have specific Scroll Track and specific Scroll Thumb, and to get rid of the buttons up and down (arrows).

It is supposed to be something like the about section in http://www.espacestudio.com ( there is a scrollbar without arrows[scrollUp,scrollDown])

thanks

Alex
sa6k0o0 is offline   Reply With Quote
Old 10-26-2006, 09:05 PM   #4
sa6k0o0
Registered User
 
Join Date: Oct 2006
Posts: 33
Default in the worst case

Well if there is no way to do this on an easy way , I am ready to make my own scrollbar component in flex or flash9 ( I don't thing that my scrollbar component in flash 8 will work in flex2)

So if somebody can give me some directions I really will appreciate it.
sa6k0o0 is offline   Reply With Quote
Old 10-26-2006, 10:09 PM   #5
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

You can write your own ScrollArrowSkin class and assign it to as VScrollBar or HScrollBar as downArrowDisabledSkin, downArrowDownSkin, downArrowOverSkin, downArrowUpSkin, upArrowDisabledSkin, upArrowDownSkin, upArrowOverSkin, upArrowUpSkin.

take a look at the deafult class in Adobe/Flex Builder 2 Plug-in/Flex SDK 2/frameworks/source/mx/skins/halo/ScrollArrowSkin.as

The arrow is drawn at line 359
Code:
		// Draw up or down arrow
		g.beginFill(arrowColor);
		if (upArrow)
		{
			g.moveTo(w / 2, 6);
			g.lineTo(w - 5, h - 6);
			g.lineTo(5, h - 6);
			g.lineTo(w / 2, 6);
		}
		else
		{
			g.moveTo(w / 2, h - 6);
			g.lineTo(w - 5, 6);
			g.lineTo(5, 6);
			g.lineTo(w / 2, h - 6);
		}
		g.endFill();

Last edited by Tink; 10-26-2006 at 10:11 PM.
Tink is offline   Reply With Quote
Old 10-27-2006, 10:13 PM   #6
sa6k0o0
Registered User
 
Join Date: Oct 2006
Posts: 33
Default almost done

I removed the scroll arrows, that is cool, but now the scrollthumb doesn't go all the way up and all the way down.

I put also to my CustomScrollArrowSkin class

override public function get measuredHeight():Number
{
return 0;
}

but it still is not working exactly on the way it is supposed to be.....

Here is the final example http://code-craft.net/Sa6k0o0/test/flex/1/Aurora.html

If somebody knows what else has to be chanded , in which class should I look or just some information how to continue it would be great.
sa6k0o0 is offline   Reply With Quote
Old 10-27-2006, 10:36 PM   #7
colfaxrev
bit chez fr.digital house
 
colfaxrev's Avatar
 
Join Date: Mar 2006
Location: Los Angeles
Posts: 688
Default ...

i say keep the arrows. some people DO use them!
__________________
Music is life
colfaxrev is offline   Reply With Quote
Old 10-27-2006, 10:55 PM   #8
sa6k0o0
Registered User
 
Join Date: Oct 2006
Posts: 33
Default I Can Not Use Them

I have a specific design that I have to follow, and there are no arrows.
I didn't chane the core classes for the arrows, I made just a css that has ClassReference('CustomScrollArrowSkin' ); where CustomScrollArrowSkin is my specific class for building arrows ( in this case the class is almost empty).

But for the project I am doing I have somehow to get rid of the arrows.
sa6k0o0 is offline   Reply With Quote
Old 10-27-2006, 11:06 PM   #9
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

looks like ScrollBar uses Button.getExplicitOrMeasuredHeight(). It then adds your skins to the button.

Code:
                                scrollThumb.setRange(upArrow.getExplicitOrMeasuredHeight() + 0,
                                 virtualHeight -
                                 downArrow.getExplicitOrMeasuredHeight() -
                                 scrollThumb.height,
                                 this.minScrollPosition,
                                 this.maxScrollPosition);
try extending VScrollBar and overriding setScrollProperties()
Code:
    override public function setScrollProperties(pageSize:Number,
                                        minScrollPosition:Number,
                                        maxScrollPosition:Number,
                                        pageScrollSize:Number = 0):void
    {
        var thumbHeight:Number;

        this.pageSize = pageSize;

        _pageScrollSize = (pageScrollSize > 0) ? pageScrollSize : pageSize;

        this.minScrollPosition = Math.max(minScrollPosition, 0);
        this.maxScrollPosition = Math.max(maxScrollPosition, 0);

        _scrollPosition = Math.max(this.minScrollPosition, _scrollPosition);
        _scrollPosition = Math.min(this.maxScrollPosition, _scrollPosition);

        // If the ScrollBar is enabled and has a nonzero range ...
        if (this.maxScrollPosition - this.minScrollPosition > 0 && enabled)
        {
            upArrow.enabled = true;
            downArrow.enabled = true;

            addEventListener(MouseEvent.MOUSE_DOWN,
                             scrollTrack_mouseDownHandler);
            addEventListener(MouseEvent.MOUSE_OVER,
                             scrollTrack_mouseOverHandler);
            addEventListener(MouseEvent.MOUSE_OUT,
                             scrollTrack_mouseOutHandler);

            if (!scrollThumb)
            {
                scrollThumb = new ScrollThumb();

                scrollThumb.focusEnabled = false;

                // Add the thumb above the up arrow but below the down arrow
                addChildAt(scrollThumb, getChildIndex(downArrow));

                scrollThumb.styleName = this;

                // This button is a 4-state Button
                // that by default uses the ScrollThumbSkin.
                scrollThumb.upSkinName = "thumbUpSkin";
                scrollThumb.overSkinName = "thumbOverSkin";
                scrollThumb.downSkinName = "thumbDownSkin";
                scrollThumb.iconName = "thumbIcon";
            }

            thumbHeight = trackHeight < 0 ? 0 : Math.round(
                pageSize /
                (this.maxScrollPosition - this.minScrollPosition + pageSize) *
                trackHeight);

            if (thumbHeight < scrollThumb.minHeight)
            {
                if (trackHeight < scrollThumb.minHeight)
                {
                    scrollThumb.visible = false;
                }
                else
                {
                    thumbHeight = scrollThumb.minHeight;
                    scrollThumb.visible = true;
                    scrollThumb.setActualSize(_minWidth, scrollThumb.minHeight);
                }
            }
            else
            {
                scrollThumb.visible = true;
                scrollThumb.setActualSize(_minWidth, thumbHeight);
            }

            scrollThumb.setRange( 0,
                                 virtualHeight - scrollThumb.height,
                                 this.minScrollPosition,
                                 this.maxScrollPosition);

            scrollPosition = Math.max(Math.min(scrollPosition, this.maxScrollPosition), this.minScrollPosition);
        }
        else
        {
            upArrow.enabled = false;
            downArrow.enabled = false;

            if (scrollThumb)
                scrollThumb.visible = false;
        }
    }
Tink is offline   Reply With Quote
Old 10-27-2006, 11:13 PM   #10
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

bugger that has private props in it. try
Code:
    public function setScrollProperties(pageSize:Number,
                                        minScrollPosition:Number,
                                        maxScrollPosition:Number,
                                        pageScrollSize:Number = 0):void
    {
        super.setScrollProperties(pageSize
                                        minScrollPosition,
                                        maxScrollPosition,
                                        pageScrollSize)

        // If the ScrollBar is enabled and has a nonzero range ...
        if (this.maxScrollPosition - this.minScrollPosition > 0 && enabled)
        {

scrollThumb.setRange( 0,
                                 virtualHeight - scrollThumb.height,
                                 this.minScrollPosition,
                                 this.maxScrollPosition);

    }

}
its a bit hacky
Tink 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 On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Embed Fonts in Custom Components clinch Components 3 03-05-2008 11:50 AM
Order of method execution in custom components?? PowerfulWebsites Components 2 11-15-2006 09:35 PM
Focus on custom components don simon Components 0 06-21-2006 02:08 PM
custom components not updating their as2 code vesoljc ActionScript 2.0 0 06-18-2005 08:44 AM
showing custom components in the component panels ??? [CVX] lucas Components 0 01-05-2005 03:45 PM


All times are GMT. The time now is 12:36 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.