, Please 
0
I'm using the techniques discussed in this thread on ActionScript.org to load formatted HTML text into flash. I also want to scroll said text, and for that purpose I'd like to use Flashscaper's scrollbar. I've run into a bit of a snag, however.
The text displays fine. However, the scrollbar does not appear when initiated and the mask (a red rectangle) can be seen on the right side of the content area; not the entire thing, just a red area about 5-10 pixels wide. The text can be scrolled using the mouse wheel, so the scrollbar functionality is intact. I think this has something to do with the transition within the ContentText function, but when I comment that out, the text doesn't display at all, nor does the scrollbar. Listed below are the three components to this project.
ContentText.as:
package
{
import flash.display.MovieClip;
import flash.text.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.text.StyleSheet;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.*;
public class ContentText extends MovieClip
{
private var myURLLoader:URLLoader;
private var myURLRequest:URLRequest;
private var bodyTextField:TextField;
public var contentPage:String;
public var myTransitionManager:TransitionManager;
public function ContentText(paraString:String)
{
contentPage = paraString;
myURLLoader = new URLLoader();
myURLRequest = new URLRequest("data/styles.css");
myURLLoader.addEventListener(Event.COMPLETE, onLoadCSS);
myURLLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
myURLLoader.load(myURLRequest);
}
private function ioErrorHandler(evt:IOErrorEvent):void
{
trace('download failed');
}
private function onLoadCSS(event:Event):void
{
bodyTextField = new TextField();
var css:StyleSheet = new StyleSheet();
css.parseCSS(event.target.data);
myURLRequest = new URLRequest(contentPage);
bodyTextField.x = 50;
bodyTextField.y = 50;
bodyTextField.width = 200;
bodyTextField.height = 200;
bodyTextField.multiline = true;
bodyTextField.wordWrap = true;
bodyTextField.autoSize = TextFieldAutoSize.LEFT;
bodyTextField.selectable = false;
bodyTextField.styleSheet = css;
bodyTextField.condenseWhite = true;
addChild(bodyTextField);
myURLLoader.removeEventListener(Event.COMPLETE, onLoadCSS);
myURLLoader.addEventListener(Event.COMPLETE, onHTMLLoaded);
myURLLoader.load(myURLRequest);
}
private function onHTMLLoaded(evt:Event):void
{
// trace(evt.target.data);
bodyTextField.htmlText = evt.target.data;
myTransitionManager = new TransitionManager(this);
myTransitionManager.startTransition({type:Wipe, direction:Transition.IN, duration:5.5, easing:None.easeOut});
}
}
}
Scrollbar.as:
/**
* Flashscaper Scrollbar Component
* Customizable Scrollbar
*
* @author Li Jiansheng
* @version 1.0.0
* @private
* @website [url="http://www.flashscaper"]http://www.flashscaper[/url]
*/
package {
import caurina.transitions.*;
import flash.display.*;
import flash.events.*;
import flash.geom.*;
public class Scrollbar extends MovieClip {
private var target:MovieClip;
private var top:Number;
private var bottom:Number;
private var dragBot:Number;
private var range:Number;
private var ratio:Number;
private var sPos:Number;
private var sRect:Rectangle;
private var ctrl:Number;//This is to adapt to the target's position
private var trans:String;
private var timing:Number;
private var isUp:Boolean;
private var isDown:Boolean;
private var isArrow:Boolean;
private var arrowMove:Number;
private var upArrowHt:Number;
private var downArrowHt:Number;
private var sBuffer:Number;
public var scroller:MovieClip;
public var track:MovieClip;
public var downArrow:MovieClip;
public var upArrow:MovieClip;
public function Scrollbar():void {
scroller.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll);
}
//
public function init(t:MovieClip, tr:String,tt:Number,sa:Boolean,b:Number):void {
target = t;
trans = tr;
timing = tt;
isArrow = sa;
sBuffer = b;
if (target.height <= track.height) {
this.visible = false;
}
scroller.addEventListener(MouseEvent.MOUSE_OUT, stopScroll);
scroller.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
stage.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheelHandler);
//
upArrowHt = upArrow.height;
downArrowHt = downArrow.height;
if (isArrow) {
top = scroller.y;
dragBot = (scroller.y + track.height) - scroller.height;
bottom = track.height - (scroller.height/sBuffer);
} else {
top = scroller.y;
dragBot = (scroller.y + track.height) - scroller.height;
bottom = track.height - (scroller.height/sBuffer);
upArrowHt = 0;
downArrowHt = 0;
removeChild(upArrow);
removeChild(downArrow);
}
range = bottom - top;
sRect = new Rectangle(0,top,0,dragBot);
ctrl = target.y;
//set Mask
isUp = false;
isDown = false;
arrowMove = 10;
if (isArrow) {
upArrow.addEventListener(Event.ENTER_FRAME, upArrowHandler);
upArrow.addEventListener(MouseEvent.MOUSE_DOWN, upScroll);
upArrow.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
//
downArrow.addEventListener(Event.ENTER_FRAME, downArrowHandler);
downArrow.addEventListener(MouseEvent.MOUSE_DOWN, downScroll);
downArrow.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
}
var square:Sprite = new Sprite();
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(target.x, target.y, target.width+5, (track.height+upArrowHt+downArrowHt));
parent.addChild(square);
target.mask = square;
}
public function upScroll(event:MouseEvent):void {
isUp = true;
}
public function downScroll(event:MouseEvent):void {
isDown = true;
}
public function upArrowHandler(event:Event):void {
if (isUp) {
if (scroller.y > top) {
scroller.y-=arrowMove;
if (scroller.y < top) {
scroller.y = top;
}
startScroll();
}
}
}
//
public function downArrowHandler(event:Event):void {
if (isDown) {
if (scroller.y < dragBot) {
scroller.y+=arrowMove;
if (scroller.y > dragBot) {
scroller.y = dragBot;
}
startScroll();
}
}
}
//
public function dragScroll(event:MouseEvent):void {
scroller.startDrag(false, sRect);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
//
public function mouseWheelHandler(event:MouseEvent):void {
if (event.delta < 0) {
if (scroller.y < dragBot) {
scroller.y-=(event.delta*2);
if (scroller.y > dragBot) {
scroller.y = dragBot;
}
startScroll();
}
} else {
if (scroller.y > top) {
scroller.y-=(event.delta*2);
if (scroller.y < top) {
scroller.y = top;
}
startScroll();
}
}
}
//
public function stopScroll(event:MouseEvent):void {
isUp = false;
isDown = false;
scroller.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveScroll);
}
//
public function moveScroll(event:MouseEvent):void {
startScroll();
}
public function startScroll():void {
ratio = (target.height - range)/range;
sPos = (scroller.y * ratio)-ctrl;
Tweener.addTween(target, {y:-sPos, time:timing, transition:trans});
}
}
}
texttext.fla:
import ContentText;
var ct:ContentText;
var sb:MovieClip;
ct = new ContentText("data/loremipsum.htm");
ct.x = 100.0;
ct.y = 50.0;
addChild(ct);
sb = new Scrollbar;
sb.x = 500.0;
sb.y = 50.0;
addChild(sb);
sb.init(ct,"easeOutSine",2,true,2);
I know it's a lot of code, but any help that you can provide would be greatly appreciated! :cool:
