|
|
Scrolling Html Formatted Text In Flash - Concerning ActionScript 3 in Flash CS 3 | ||
Discussion by BlueInkAlchemist with 3 Replies.
Last Update: December 13, 2009, 11:54 am | |||
![]() |
|
|
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:
CODE
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:
CODE
/*** Flashscaper Scrollbar Component
* Customizable Scrollbar
*
* @author Li Jiansheng
* @version 1.0.0
* @private
* @website http://www.flashscaper
*/
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:
CODE
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:
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
QUOTE (GAuthor Name e)
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
Link: view Post: 436641
did u figure it out?
Similar Topics:
Flash Vs. Html
Cartoonsmart.com Is Giving 8 Hours ...
Please Help... USB Flash Problem
280 Free Css Templates (3)
|
(9) Do Your Plan Your Design?
|
Loading...
HOME 





Flash Tutorial Load HTML Format External Text Into Dynamic Text Field CS3 CS4 CS5
Flash Tutorial: How To Make Scrolling Text
How to structure a full flash actionscript 3 web site tutorial CS3 + CS4 - Part 1

