Jump to content
xisto Community
Sign in to follow this  
BlueInkAlchemist

Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3

Recommended Posts

Greetings, all!

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://forums.xisto.com/no_longer_exists/;	 */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:

Share this post


Link to post
Share on other sites

As an update, I did get this sort of working by adding a button that brings in the scrollbar as a separate function. This works after the text's transition has completed. Perhaps I can simply tie the scrollbar function to a timer that fires when the text begins to load?

Share this post


Link to post
Share on other sites

Hi everyone!I am facing a terrible problem with the UIScrollBar component.The script is pretty simple. It works fine at local. When I publish it on line doesn?t work fine. The ScrollBar is invisible (it seems disable). I would really appreciate if someone could give some tip why it happens.I would really appreciate if someone help me.Thanks in advance

Attach Code

The as3 script is:Import flash.Net.URLLoader;Import flash.Display.Sprite;Import fl.Controls.UIScrollBar;Import flash.Events.Event;Var myTxt:TextField = new TextField();MyTxt.Border = true;MyTxt.Width = 713;MyTxt.Height = 425;MyTxt.Border = falseMyTxt.X = 3;MyTxt.Y = 55;AddChild(myTxt);//Scroll controllerVar mySb:UIScrollBar = new UIScrollBar();MySb.ScrollTarget = myTxt;MySb.Direction = "vertical";MySb.X = 730;MySb.Y = 60;MySb.Height = 410;AddChild(mySb);Var info:URLLoader = new URLLoader(); Var url:URLRequest = new URLRequest("disserta.Html");Info.DataFormat = URLLoaderDataFormat.TEXT;Info.Load(url);Info.AddEventListener(Event.COMPLETE, leiaHTML); Function leiaHTML(evento:Event):void{Var info:URLLoader = URLLoader(evento.Target);	myTxt.HtmlText = info.Data;	myTxt.Multiline = true;	myTxt.WordWrap= true;	myTxt.Background = true;	myTxt.BackgroundColor = 0xffffff;	myTxt.X = 3;	myTxt.Y = 55;	myTxt.Width = 730;	myTxt.Height = 425;}
Thanks

 

Share this post


Link to post
Share on other sites

Hi everyone! I am facing a terrible problem with the UIScrollBar component.
The script is pretty simple. It works fine at local. When I publish it on line doesn´t work fine. The ScrollBar is invisible (it seems disable). I would really appreciate if someone could give some tip why it happens.
I would really appreciate if someone help me.

Thanks in advance

Attach Code

The as3 script is:

Import flash.Net.URLLoader;
Import flash.Display.Sprite;
Import fl.Controls.UIScrollBar;
Import flash.Events.Event;

Var myTxt:TextField = new TextField();
MyTxt.Border = true;
MyTxt.Width = 713;
MyTxt.Height = 425;
MyTxt.Border = false
MyTxt.X = 3;
MyTxt.Y = 55;
AddChild(myTxt);

//Scroll controller
Var mySb:UIScrollBar = new UIScrollBar();
MySb.ScrollTarget = myTxt;
MySb.Direction = "vertical";
MySb.X = 730;
MySb.Y = 60;
MySb.Height = 410;
AddChild(mySb);

Var info:URLLoader = new URLLoader();
Var url:URLRequest = new URLRequest("disserta.Html");
Info.DataFormat = URLLoaderDataFormat.TEXT;
Info.Load(url);
Info.AddEventListener(Event.COMPLETE, leiaHTML);

Function leiaHTML(evento:Event):void{
Var info:URLLoader = URLLoader(evento.Target);
myTxt.HtmlText = info.Data;
myTxt.Multiline = true;
myTxt.WordWrap= true;
myTxt.Background = true;
myTxt.BackgroundColor = 0xffffff;
myTxt.X = 3;
myTxt.Y = 55;
myTxt.Width = 730;
myTxt.Height = 425;
}
Thanks


did u figure it out?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.