Nov 21, 2009

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

free web hosting
Open Discussion > MODERATED AREA > The Internet > Web Design

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

BlueInkAlchemist
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:

 

 

 


Comment/Reply (w/o sign-up)

BlueInkAlchemist
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?

Comment/Reply (w/o sign-up)

(G)Author Name - e.g. John, Mike

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

 

 

 

 


Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords :

  1. Displaying Html In Flash
    Using ActionScript (9)
  2. Help Me Flash My Website.
    web designing (7)
    Hey...guys ...I have a website ...which is sort of a personal website.. But now I want to change it
    to a blog site for my college... I want the site to be cool...and awesome Its an engineering
    college....so I want the site to look...techie...sci-fi...you know what I mean... I know that I can
    make it look that way if I use..flash ... I want the site to look just a little bit like the
    www.2advanced.com...u will what I mean if u visit that site.. I have no experience in flash so
    what I want is -how to include flash in my website -what softwares do i need -where can i g....
  3. How To Add The Flash In Our Website ?
    Animated image in website make the site atractive, but take more time (4)
    Animation in this world: We see in most of the website that company icon, logos, memorandom,
    Advertisement, smily,even todat Button etc. in the website are animated in a sequencial manner so
    any body who see this get impressed, even so many time i also get impressed and want to give thanks
    that one who creates this logic a fantastic idea, adobe website we read some articles, i want a
    proper process or command from starting to end till image(how many types of image) animated in my
    website. what software, hardware, required to do complete this task. any idea, tutorial, not....
  4. Website Structure
    PHP, MySQL, HTML, etc. (3)
    Hey guys, I am a very, VERY, curious person on finding out how things work on the computer if I find
    them interesting and I can't stop thinking about the thing until I find the answer. The sooner
    I find the answer, the less time I get a headache.

    So I was wondering how websites work. I mean how
    everything would be put together. Like how a game would be put together lin....
  5. Stop Your Html Codes From Being Stolen
    Stop your Html codes from being stolen on your HTML pages. (16)
    Hello people! Obviously a lot of people use these little scripts to stop you from right clicking on
    websites/HTML pages etc. I know many many people use near enough the same kind of coding as the one
    I just made. I decided not to put this in the Tutorials section because I know alot of other codes
    do exactly the same thing as this one I am going to be sharing with you! This code may be
    re-distributed if you wish. I have no copyright on it, but please put some kind of "Thanks for the
    no right-click script". Here it is: QUOTE oncontextmenu="return false" onselectsta....
  6. Flash Navbar: Populate From Center
    Looking for advice or a tutorial (0)
    I'm working with Flash CS3, ActionScript 3, and items in an XML document. I'm looking for
    advice or a tutorial on making a navigation bar that loads items dynamically and populates from the
    center of the bar rather than the left side. I know there'll be some coordinate math to be done,
    but I'm unsure where to begin. Can you suggest a site like gotoandlearn, or is there something
    already there that I'm missing? Thanks in advance.....
  7. Actionscript 3 & Xml Error #1010
    Why must it vex me so? (0)
    This post is about a project I'm working on in Flash CS3, using ActionScript 3 and an external
    XML file. I am trying to populate dynamic text fields in a movie clip generated by ActionScript
    using data from XML. The line is formatted like so (leaving out the array brackets to avoid code
    confusion): CODE clip.txt = xmlList.vname When I run the file like this, the movieclips
    appear but are empty. I then modify the code this way: CODE clip.txt.htmlText = xmlList.vname
    This generates Error #1010: "A term is undefined and has no properties." Can any ....
  8. Actionscript 3
    (0)
    Just a quick question... would discussions on ActionScript programming, ideas and troubleshooting be
    here, or in another forum? Thanks in advance.......
  9. Flash And Transparency
    (7)
    Hi folks. I want to know if its possible to modify the transparency of an image in flash to give a
    gradual transparent gradient? EG like the T17 banner where the text "Trap17" reflects. I know i
    can do this in the GIMP but i need the background of the image/text to be transparent, and GIF is
    the onyl format i can do that reliably and of course GIF is indexed and so i cant have a gradual
    fade effect. Im really stuck on this one and im no Flash expert so any ideas? Ive attached a
    screenie. Thats the effect i want (the black background is there so the effect is easy....
  10. Text Size In "fill-in" Form Blanks
    How do you change the size of the text in the fill in form entry boxes (2)
    Thanks for all the help on my previous question about adding an address to a "Submit" button.
    I've also been able to add a "print page" button through the help from group members. I now have
    another question. I've created a form using the Input commands that ask for name, address,
    state, etc. My computer is set to use 12 point text on a 800 x 600 screen resolution. When I hit the
    print screen button, everything is printed out fine, but I would like the information that people
    will be entering into the various boxes to be of a larger or bolder style. The whole re....
  11. Flippingbook Html Edition
    download FREE version (6)
    You can create professional online albums/books with this simple and convenient tool: FlippingBook
    HTML Edition . The main attraction with this Javascript+SWF application is the page-flipping or
    page-turning feature, like we are used to do with physical publications like books, magazines, etc.
    http://www.page-flip.com/downloads.htm this free version has several limitation however: up to 10
    pages only, and you gotta retain the copyright link embedded in it. of course there is the paid
    edition too, in case you want to use it beyond the limitations of the free version.....
  12. Flash Header Edit?
    flash header edit (2)
    Can someone help me edit a flash header from a template. I can figure out MX 2004. I am a novice web
    designer at best and need some help editing this header. Thanks so much ....
  13. Cms For Video, Embedding Flash
    (4)
    Hello, I was wondering if anyone knew of a good open source CMS that allows dynamically embedding
    flash videos such as those from youtube (needs to be able to embed flash with parameters), and also
    allows uploading any type of file to the main server. Thanks! =)....
  14. What Is The Best Free Html Editor?
    (24)
    im looking for any kind that is free really.... i use windows but if you have one for a different
    platfor, go ahead and add it for reference for other users. If you have one for normal text editor
    and wysiwyg, add them both. i have been using notepad as my normal html editor but im looking for
    something different... at least so i can see the different colors of the codes. Right now i am
    downloading moxilla's seamonkey suite but im not sure how good it is... i will post a review if
    i ever use one. If you have used the html editor you suggest or you just heard abou....
  15. Scroll And Pan The Screen Via Mouse In Flash
    does anyone know how to pan across the screen using the mouse in flash (2)
    Hi Need help for a project , hope u guys could help out and teach me a little something. I saw some
    flash that if you click on a icon or if u point ur mouse to the left of the screen it will keep
    going left, and if right it'll keep scrolling right, as if ur checking out a room Or something
    like this website.. www.mcdonalds.com.au , and choose broadband if you see on that site, when user
    clicks on the icon to the right. the rest of the icons would kinda shift.. does anyone know how to
    do that or know if there is anywhere out there a tutorial to do that? if u do.. it&....
  16. Flash Media Into Html/css Website
    does anyone know how to import a flash into a webpage with transparenc (3)
    Hi I need some help , Im designing this website for school studies However, I made a flash drop down
    menu, works perfectly, but you know how flash has a background when you export it in to a SWF file?
    For example my flash is width= 800, and height = 200 but my div box on my html page for my
    navigation is only 50 px my buttons is width of 50px and the rest of the content is the drop down
    animations i want to insert it into my navigation div box but i want to set the flash background to
    transparent so that when the drop down menu comes down it overlaps the text or whateva....
  17. Flash Newbie Question
    question (6)
    hello i'm new to flash. i have a .swf movie which i decompiled with Sothink SWF Decompiler in
    .fla and I also exported the resources. so far so good, i entered the resources directory,i changed
    the names and texts with my own and now I am wondering how do i rebuild the whole "resources"
    directory as a .swf ? can someone help ? thanks.....
  18. A Twist On Basic Authentification
    html help (4)
    Alright, i am working on a website where a number of different users from different companies will
    be looking hooking into one website. What i want is to know how i can differentiate between the
    users based on the information passed by the webserver. I've been told to that information
    will be passed along html_user(and if i have a distinct user then i can just query the database with
    that info and get what i want) But how does this work? I am sorry i know this is cryptic i'm
    kind of searching to see if this strikes a bell with anyone. So to sum, many user....
  19. I Need Some Help With Flash And Div Overlay
    using wmode in IE problems (6)
    Hi guys, I have a problem with one of my designs at the moment. Here's the problem: I have a
    flash game in the middle of a page. However, the site navigation has dropdown menus that go on top
    of the flash. Now, the navigation works if I use "wmode = transparent" or "wmode = opaque" in the
    flash code. Yet, there is another problem: In Internet Explorer (I'm running version 7) the
    arrow keys "up" and "down" in most flash games will not work properly. Instead, they will make the
    page scroll up and down, even if the flash file has focus. This situation does not exi....
  20. What Program Do You Use To Design Your Web?
    Frontpage, Dreamweaver, a good text editor? (103)
    I personaly choose frontpage because its easy to use but.....I use dreamweaver for PHP.....
  21. Flash Actionscript Help
    i need help on some actionscript for flash galleries and such (10)
    Hi guys i was hoping if anyone that is good at coding could pretty please help me out im rather
    good at designing compared to coding for flash.. so here goes.. Im trying to make a flash gallery..
    ive started. and i know how to make buttons to go nxt and back and so forth... but i want to know if
    anyone knows the actionscript to make a thumbnail .. so that you click on it .and it will load the
    larger version on a little flash popup screen or just somewhere on the page.. its hard to explain
    but ill try to find an example to show u /smile.gif" style="vertical-align:middl....
  22. Help! Php Or Just Html?
    i want to start buliding my website. which is better, php or basic htm (16)
    i try to start this topic in webhost category but it seems like i cant. i dont have the permission
    so i just post my topic here. im sorry mod.. i want to build a website which contains: - Links to
    videos - Informations - photos - flash i don't know if i should use php or just HTML. guys,
    what are your opinions..??....
  23. A Small Html Problem
    How to display foreign characters correctly when designing a site. (5)
    I was wondering how I could solve a small problem. I was told that some people see accented and
    umlauted letters (such as " é " and " ė ") as question marks (" ? ") on my website. I come across
    the same thing sometimes when looking at websites which use non-English characters. Funnily enough,
    the other day, I looked at a site and the apostrophy ( ' ) was also shown as a question mark.
    That is a very common character usually, I would think. I thought it had something to do with the
    character encoding settings, and let me also mention I use Mozilla Firefox as my brows....
  24. Psd --> Editable Html
    (4)
    Here's the deal. I am new at working with web objects in photoshop. I have CS3, and I created a
    really nice template. I'm told I have to do something with slicing. So I have the template, and
    it has images, buttons, and text on the buttons, and text fields, etc. How can I export this to HTML
    and images, and be able to open it up in dreamweaver in an editable web page? I've tried
    exporting to "web and devices" and exporting as HTML and Images, but when I open it up in
    dreamweaver, it looks right, but it is all images. Thanks....
  25. Php Or Html?
    which do you use? (54)
    Well being a HTML its easy for me but what do people use the most? Is it HTML or PHP. It depends
    really on which you learnt first. So im gonna have a poll.Post HTML for Html and PHP for php and we
    will see which is more popular.....
  26. Giving A Flash Button A Link
    i get errors (15)
    oke well i made my button and i addet the actionscript to give the button an url,see the screenshot
    below now for some reason it gives me errors,and i don't know what i did wrong to be
    honest,so can some one help me out with this p.s i do use flash cs3 so i dunno maybe its another
    way to put an url on ur button with this version cause with flash pro8 and mx i never had a problem
    with this....
  27. Making A Scroll Bar In Flash
    with an image and words on it (7)
    does anybody know how to make a scrollbar for my game page I am making on my site. This whole site
    is completely in flash. I know how to make a scrollbar for just words but not when there is an
    image on there also. Does anybody know?....
  28. Flashing Text?
    can u help me (13)
    Is there a way to make text flash on a webpage as i think it would be cool can anyone help??????? i
    just want to be able to make text flash cheers chris....
  29. Html Editors That Work With Asp Php
    wondering mind (10)
    Out of the many editors that i have seen not to many support asp or php those that do its more of
    converting so i was wonder which ones do have full blow asp and php capabilities on them?....
  30. Best Free Flash Editor
    (12)
    Anyone know where I can find the best free Flash editor?....

    1. Looking for Scrolling, Html, Formatted, Text, In, Flash
Similar
Displaying Html In Flash - Using ActionScript
Help Me Flash My Website. - web designing
How To Add The Flash In Our Website ? - Animated image in website make the site atractive, but take more time
Website Structure - PHP, MySQL, HTML, etc.
Stop Your Html Codes From Being Stolen - Stop your Html codes from being stolen on your HTML pages.
Flash Navbar: Populate From Center - Looking for advice or a tutorial
Actionscript 3 & Xml Error #1010 - Why must it vex me so?
Actionscript 3
Flash And Transparency
Text Size In "fill-in" Form Blanks - How do you change the size of the text in the fill in form entry boxes
Flippingbook Html Edition - download FREE version
Flash Header Edit? - flash header edit
Cms For Video, Embedding Flash
What Is The Best Free Html Editor?
Scroll And Pan The Screen Via Mouse In Flash - does anyone know how to pan across the screen using the mouse in flash
Flash Media Into Html/css Website - does anyone know how to import a flash into a webpage with transparenc
Flash Newbie Question - question
A Twist On Basic Authentification - html help
I Need Some Help With Flash And Div Overlay - using wmode in IE problems
What Program Do You Use To Design Your Web? - Frontpage, Dreamweaver, a good text editor?
Flash Actionscript Help - i need help on some actionscript for flash galleries and such
Help! Php Or Just Html? - i want to start buliding my website. which is better, php or basic htm
A Small Html Problem - How to display foreign characters correctly when designing a site.
Psd --> Editable Html
Php Or Html? - which do you use?
Giving A Flash Button A Link - i get errors
Making A Scroll Bar In Flash - with an image and words on it
Flashing Text? - can u help me
Html Editors That Work With Asp Php - wondering mind
Best Free Flash Editor

Searching Video's for Scrolling, Html, Formatted, Text, In, Flash
See Also,
advertisement


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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com