Deke, I was able solve my problems my sub classing the framework source code and modifying the pieces that were pertinent to my UI .. I am going to implement some of your suggestions as I really need to get my code organized .. I am starting to like flex more and more, and thank "God" for the open source! my next dilemma is the pre-loader ..
i'm preloading images in a directory .. I think I have it figured out ..I'll share my source with you for some good old peer review! Love getting feedback from my peers!!! you can check out the scrollbar change on the web site .. http://www.edwardrockwell.com/keithkitz/keithkitz.html I didn't publish out the source .. but will do so with my next build .. On Tue, Jul 29, 2008 at 1:37 PM, Deke Smith <[EMAIL PROTECTED]> wrote: > > 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> > > > > > > > > > > > -- Jamie
