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>
