Loading...


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

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
 
bookmark - Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3  
Quickly Post to Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3 w/o signup Share Info about Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3 using Facebook, Twitter etc. email your friend about Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3 Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print

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:

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:

   Mon Dec 15, 2008    Reply         

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?

   Tue Jan 13, 2009    Reply         

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

 

   Mon Mar 9, 2009    Reply         


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?

   Sun Dec 13, 2009    Reply         

Quickly Post to Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3 w/o signup Share Info about Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3 using Facebook, Twitter etc. email your friend about Scrolling Html Formatted Text In Flash Concerning ActionScript 3 in Flash CS 3 Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print

Similar Topics:

Flash Vs. Html

Hey all, I have a question. Being that this is all based on personal opinion, feel free to share how you feel. I would also love to know *why* you feel that way. The question is regarding websites, and their setup. The first part of it is regarding "flashing&quo ...more

   25-Dec-2008    Reply         

Cartoonsmart.com Is Giving 8 Hours ...

Freebies Title: Cartoonsmart.com is giving 8 hours of free flash mx lessons Freebies Description: CartoonSmart is very popular, for google.com (Page rank: 5), and for flash geeks, developers and addicted to flash technology, like myself i should say, and this lessons are so good that yo ...more

   11-Apr-2009    Reply         

Please Help... USB Flash Problem

Please Help... USB Flash ProblemVirus On Your Flash Disk? (usb Devices)I have this USB flash that every time I connect it in my Computer (OS-Vista Starter Ed), it said the Drive is installed and ready to use.I already tried all possible solutions like downloading ...more

   16-Aug-2009    Reply         

280 Free Css Templates    280 Free Css Templates (3) (9) Do Your Plan Your Design?   Do Your Plan Your Design?