Skip to main content
Inspiring
May 5, 2011
Question

Images miss-align after select scrolling

  • May 5, 2011
  • 1 reply
  • 1869 views

I have a movie in which images with no float set, miss-align after the user select scrolls the text.

This bug only occurs in TLF 2 - the code works in TLF 1.

I have made a movie to demonstrate the problem:

http://www.theyrule.net/test/tlf_images/images_tlf_2.html

To see the bug - select scroll the text - up and down a few times, it becomes more apparent when you then resize the movie (although resizing alone does not seem to trigger the bug).

Here is the same movie compiled in TLF 1:

http://www.theyrule.net/test/tlf_images/images_tlf_1.html

I can not reproduce the bug there.

You can download the project here:

http://www.theyrule.net/test/tlf_images/tlf_images.zip

A small description of what the code does:

Makes a textFlow.

The textflow resizes according to the size of the swf

Adds paragraphs of random text.

Each paragraph contains an inlineGraphicElement

     - a rectangular sprite which is colored the same as the text in the paragraph

The textflow has a selection manager attached to it.

Here is the source:

package

{

import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.Event;

import flashx.textLayout.container.ContainerController;

import flashx.textLayout.edit.SelectionManager;

import flashx.textLayout.elements.InlineGraphicElement;

import flashx.textLayout.elements.ParagraphElement;

import flashx.textLayout.elements.SpanElement;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.events.SelectionEvent;

import flashx.textLayout.events.TextLayoutEvent;

public class tlf_images extends Sprite

{

protected var _bdr :Sprite;

protected var _controller :ContainerController;

protected var _container :Sprite;

protected var _tf :TextFlow;

public function tlf_images()

{

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

_bdr = new Sprite();

addChild(_bdr);

// set up textflow

var w:int = 90;

var h:int = 80;

_tf = new TextFlow();

_container = new Sprite();

_controller = new ContainerController(_container, w, h);

addChild(_container);

_tf.interactionManager = new SelectionManager();

_tf.flowComposer.addController(_controller);

var num_paras:int = 100;

for(var i:int = 0; i < num_paras; i++){

addPara();

}

// add resize listener

stage.addEventListener(Event.RESIZE, draw, false, 0, true);

// add Textflow listeners (commented out because they did not fix the problem)

//_tf.addEventListener(TextLayoutEvent.SCROLL, tfScrolled, false, 0, true);

//_tf.addEventListener(SelectionEvent.SELECTION_CHANGE, tfSelChange, false, 0, true);

draw();

}

protected function addPara():void {

// add an image - using a sprite as the source

var w:int = 50;

var h:Number = 15;

var col:Number = Math.random()*0xFFFFFF;

var s:Sprite = new Sprite();

s.graphics.beginFill(col);

s.graphics.drawRect(0,0,w,h);

var p:ParagraphElement = new ParagraphElement();

p.color = col;

var sp1:SpanElement = new SpanElement();

sp1.text = "Some text before a graphic. "+randomString()+" [[[";

var ige:InlineGraphicElement = new InlineGraphicElement();

ige.source = s;

ige.width = w;

ige.height = h;

var sp2:SpanElement = new SpanElement();

sp2.text = "]]] "+randomString()+"  Some text after the graphic.";

p.addChild(sp1);

p.addChild(ige);

p.addChild(sp2);

_tf.addChild(p);

_tf.flowComposer.updateAllControllers();

}

public function draw(e:Event = null):void {

var w:int = Math.round(Math.max(stage.stageWidth-20,20));

var h:int = Math.round(Math.max(stage.stageHeight-20,20));

var margin:int = 10;

_bdr.graphics.clear();

_bdr.graphics.lineStyle(1,0xCCCCCC);

_bdr.graphics.drawRect(margin,margin,w,h);

_controller.setCompositionSize(w,h);

_controller.textFlow.flowComposer.updateAllControllers();

_container.x = margin,

_container.y = margin;

}

protected function randomString():String {

var chars:String = "abcdefghijklmnopqrstuvwzyz                    ";

var chars_len:Number = chars.length;

var random_str:String = "";

var num_chars:Number = Math.round(Math.random() * 100);

for (var i:int =0; i < num_chars; i++){

random_str = random_str + chars.charAt(Math.round(Math.random() * chars_len));

}

return random_str;

}

protected function tfScrolled(e:TextLayoutEvent):void {

trace("scroll");

_tf.flowComposer.updateAllControllers();

}

protected function tfSelChange(e:SelectionEvent):void {

trace("selection change");

_tf.flowComposer.updateAllControllers();

}

}

}

This topic has been closed for replies.

1 reply

Adobe Employee
May 6, 2011

Thanks for your post.

I once reproduced your case, but after that I cannot...so strange. Can some others have a try?

I suggest you take advantage of the latest tlf. I don't think we do regressions from 1.0 to 2.0.

Besides, updateAllControllers is not needed when it is scrolled or resized.

josh_onAuthor
Inspiring
May 6, 2011

I once reproduced your case, but after that I cannot...so strange. Can some others have a try?

Be sure to go to: http://www.theyrule.net/test/tlf_images/images_tlf_2.html

To see the bug click in the text and pull down to select and scroll - scroll down and up a few times.  The resize - by this stage you should see a major misalignment of the images.

I suggest you take advantage of the latest tlf. I don't think we do regressions from 1.0 to 2.0.

I am confused by this. TLF 2 is the version that I am having a problem with - it is the latest version right?

It is a major regression in my opinion - it make TLF 2.0 unusable for my purposes - unless I can find a work around. I don't think thatit is uncommon for a developer to require a textFlow with many inline images that can be select-scrolled. Perhaps it is a bug with my code?

Besides, updateAllControllers is not needed when it is scrolled or resized.

Those functions are not called - I left them in with the listeners the listeners commented out - to show that I tried that as a potential solution.

In an earlier edit of your comment - you suggested I use itmads instead of DisplayObjects.  I need to use DisplayObjects - because I have interactive elements that sit inline in the text.

I did try a version with bitmaps embeded as you suggested for the sake of testing the theory, unfortunately the bug persists:

http://www.theyrule.net/test/tlf_images/images_tlf_2_logo.html

Adobe Employee
May 6, 2011

tlf in SDK 4.5 of FlashBuilder 4.5 premium is 2.0.0.232.