GhostWire ScrollPane
This Flash component allows you to create ScrollPanes
for scrolling images and movieclips. The component
reuses the GhostWire ScrollBar and replacing the
default scrollbar used in the scrollpanes shipped
in the package is easy. The package ships with
three scrollpane components - two with frames
(one of which uses the Silver scrollbar), and
the other without frame (bare bones).
Example
Here is an example of the ScrollPane (filesize 11KB including embedded font):
Features Load Progress Tracking
The scrollpane has three methods that help to track the loading progress of the content (only applicable if the content is loaded from external file) - getProgress(), getBytesLoaded() and getBytesTotal(). In addition, the scrollpane also has an event 'onComplete' which is triggered when the external file has completed loading into the scrollpane.
Drag OnKey
Dragging of the content in the scrollpane is enabled by default. There are three modes - "onKey", "true" and "false". By default, the "onKey" mode is selected, meaning the content is draggable by mouse if the CONTROL key is down. The "true" mode means the content is draggable always and "false" disables dragging. The hand mouse cursor is shown only when the mouse is pressed down, not when over the content.
Frame
The ScrollPane has a frame (see examples) that can be configured for colors (and look). This makes the scrollpane looks like the ones seen in Windows OS.
Snap to Pixel
The component snaps to pixel when published, ensuring that it looks crisp and sharp when the movie plays. Usually to achieve this, you need to ensure that you place your movieclips at integer coordinates (no decimal place) during authoring time. This is not necessary with the GhostWire components, which will automatically snap to pixel when published. For example, if the component was placed at x coordinate 20.2, when published it will be placed at x coordinate 20.0 instead. In addition, the component also resizes itself to integer widths and heights.
Sharp Bitmaps
This is the result of the Snap to Pixel feature. Because the scrollpane not only positions itself to snap to pixel, it also ensures that the content embedded within is scrolled to integer coordinates. This is vital to making sure that bitmaps look sharp instead of blurred when scrolled. Example:
EdgeSense
The component comes with an EdgeSense Behavior, an addon that can be dragged-n-dropped onto your scrollpane on the stage to add the feature of allowing users to scroll the content by moving the mouse to the edges of the scrollpane. There are two modes - "MovieClip" (scrolling occurs when mouse is moved with X pixels outside of scrollpane) or "Stage" (scrolling occurs when mouse is moved to edge of application, useful for fullscreen applications).
Example, edgeSize set to "-20":
*Note that you still can have scrollbars, this example set them to "false" for clarity. If you wish to use scrollbars with EdgeSense, it is recommended that you set the edgeSize to positive value (hotspot is X pixels outside of scrollpane, instead of within).
KeySense
This is another addon behavior for the scrollpane, which adds keyboard controls to the component. The purpose of these addon behaviors is to demonstrate the extensibility feature of the GhostWire Component Architecture. You can similarly code your own extensions following these examples, or easily modify these behaviors, without modifying the main scrollpane class.
Truly Skinnable
The component reuses the GhostWire ScrollBar, and its code is packed away from the visuals in a separate class/symbol. This allows for efficient code reuse when you want scrollpanes with different skins (eg. different scrollbars) within the same application.
GhostWire ScrollPane
