GhostWire Studios - Flash/Flex UI Components Development And Consulting Services
Quality User Interface Controls For Flash Application DevelopmentAspireUI Components

Aug 07 2009

Using uiWindow: Implementing Scrollable Content

Published by at 5:15 am under Aspire UI,Flash,Tips

The uiWindow container does not automatically embed any scroll pane since this is not always required by its content. For example, the window may be set to be non-resizable and is big enough to show all the content. Or you may decide that the content should be scaled/resized to fit the viewable area.

If scrollable content is required, you may implement it using the uiScrollPane class – create a uiScrollPane instance and add it to the content of the uiWindow instance. You would then add child display objects to the content of the uiScrollPane instance, instead of the content of the uiWindow container itself.

The fillX and fillY properties of the uiScrollPane instance should be set to true to enable automatic resizing when the uiWindow container is resized.

Example

package
{
	import com.ghostwire.ui.containers.uiScrollPane;
	import com.ghostwire.ui.containers.uiWindow;
	import com.ghostwire.ui.controls.uiImage;
	import com.ghostwire.ui.managers.uiCursors;
	import com.ghostwire.ui.managers.uiSkins;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ScrollWinDemo extends Sprite
	{
		public function ScrollWinDemo()
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(evt:Event):void
		{
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
 
			uiCursors.initialize(stage);
 
			uiWindow.initialize(stage);
 
			// ** create the content **
			var img:uiImage = new uiImage("flower.jpg");
 
			// ** create a scroll pane **
			var imgsp:uiScrollPane	= new uiScrollPane();
			imgsp.fillX = true;
			imgsp.fillY = true;
			imgsp.content.addChild(img); // ** add content to scroll pane **
 
			// ** create the window **
			var imgWin:uiWindow	= new uiWindow();
			imgWin.title		= "Flower";
			imgWin.content.addChild(imgsp); // ** add scroll pane to window **
 
			// ** show window **
			imgWin.open();
		}
	}
}


Demo

Get Adobe Flash player


Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

pixelstats trackingpixel
Share or Bookmark This Post:
  • StumbleUpon
  • email
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • Yahoo! Buzz
  • Netvibes
  • NewsVine
  • Reddit
  • Slashdot
  • Technorati
  • BlinkList
  • Mixx
  • Diigo
  • Faves
  • Suggest to Techmeme via Twitter
  • Twitter

Other Posts You Might Enjoy:

         

One response so far

One Response to “Using uiWindow: Implementing Scrollable Content”

  1. Fruitloopon 07 Aug 2009 at 4:38 pm

    Thanks for the updates, helps a lot when getting into the components. Helps a bit with getting into flash as well.

Comments RSS

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word