Hey Jamie,
You got a lot of things going on in there. You can simplify it quite and
bit, reduce the complexity and get it to work more reliably.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application ... no changes ...>
... script, no change except remove function moveContent ...
.. remove all other canvases ...
... height="{height - 485}" <<< bad code. very bad code. binding the
height of a child to the height of a parent will sometimes cause an
infinite loop, use stage height instead; at best it makes your
application sloooooowww .....
... change HBox to canvas, with only one child you don't need it;
besides, you are specifying an x property anyway ...
<mx:Canvas id="brandingBar" width="100%" height="{stage.height - 485}"
alpha="0.95"
bottom="0" right="0"
verticalScrollPolicy="off" horizontalScrollPolicy="on">
<mx:Image id="kkImage" source="{kkCls}" autoLoad="true"
x="10"/>
... scale content with probably not give you what you want, I would have
to fiddle around to get it to fill vertically and not fill horizontally....
</mx:HBox>
</mx:Application>
Then you will need to create some classes that extend ProgrammaticSkin
to replace the UI of the scrollbar with. Set it with
horizontalScrollBarStyleName. There is documentation on Adobe's site on
how to use a class as a skin. Also, see the ScrollBar class in livedocs
to find all the different skins you can specify.
Here's the fun part. I am not 100% sure it will work like I told you: I
am not going to create a project to test it. Let me know what goes boom.
But this general direction should work fine.
rockwellej wrote:
> All .. I sent a post earlier on this .. but I'm attaching some code now ..
>
> essentially I want to display a scrollable canvas with an array of pics the
> also scroll in
> columns .. I have a custom loader the loads the pics from directory on the
> web server so
> the client can swap out pics at will ... the problem is how the client wants
> the scroll bar(s)
> ..
>
> go here to see a flat of the proposed product ..
>
> http://www.edwardrockwell.com/keithkitz/pics/kkflat.png
>
> here's the mxml .. I've been trying a whole bunch of different stuff ..
> I thought it would be as easy as skinning the scroll bar for the outer
> canvas and moving the position of the scroll bar ..
>
> the properties that are set now on the components are obviously wrong ..
> it's just the last state of the xml that I've gotten to .. I don't think
> that the
> "content" canvas is expanding to the total height and width of the pics, but
> when I
> re-size the browser window more pics are revealed .. so I guess I'm wrong
> about that .. at this point I'm not sure how these components work
> internally.. that
> are loaded into it .. I set the clipContent to true just for the hell of it
> to see
> how it would affect things .. .. the content canvas just contains VBoxes
> filled
> with Images .. the images are 480x680 and there are 8 VBoxes total with around
> 4 to 6 images in each in the content canvas .. o
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
> layout="absolute" width="100%" height="100%" backgroundColor="black"
> applicationComplete="initApp();"
> xmlns:kk="*">
>
> <mx:Style source="kk.css"></mx:Style>
>
> <mx:Script>
> <![CDATA[
> import mx.events.ScrollEvent;
>
> [Embed(source="kk.svg")]
> [Bindable]
> public var kkCls:Class;
> public var m:Main;
>
> public function initApp():void {
> //content.horizontalScrollBar = kkScrollBar;
> m = new Main();
>
>
> }
>
>
>
>
> // Event handler function to display the scroll location.
> private function moveContent(event:ScrollEvent):void {
> trace("moveContet");
> content.x += event.currentTarget.scrollPosition;
>
> //content.move(event.currentTarget.scrollPosition, content.y);
> this.validateNow();
> // "Current scroll position: " +
> // event.currentTarget.scrollPosition + '\n' +
> // "The maximum scroll position: " +
> // event.currentTarget.maxScrollPosition + '\n' +
> // "The minimum scroll position: " +
> // event.currentTarget.minScrollPosition;
>
> }
> ]]>
> </mx:Script>
>
> <mx:Canvas height="100%" width="100%" horizontalScrollPolicy="off"
> verticalScrollPolicy="off">
> <mx:Canvas horizontalScrollPolicy="on" autoLayout="false" top="0"
> left="0"
> id="content" visible="true" clipContent="true">
> </mx:Canvas>
>
> <mx:HScrollBar left="0" visible="true" width="100%" id="kkScrollBar"
> enabled="true" minScrollPosition="0"
> maxScrollPosition="{content.width}"
> lineScrollSize="685" pageScrollSize="685" bottom="{height -
> 485}"
> scroll="moveContent(event);">
> </mx:HScrollBar>
>
> <mx:HBox id="brandingBar" width="100%" height="{height - 485}"
> alpha="0.95"
> bottom="0" right="0"
> verticalScrollPolicy="off" horizontalScrollPolicy="off">
> <mx:Image id="kkImage" source="{kkCls}" scaleContent="true"
> autoLoad="true"
> x="10"/>
> </mx:HBox>
> </mx:Canvas>
> </mx:Application>
>
>
>
>
