BitmapData, Textfield and CSS

[Morg]

Hola people!

Here is my dillema. I need to present articles in Flash. It needs to show pullquotes as "div" inserts... So, the text would wrap around the block of text so that it looks like the magazines do.

See sample here

Those pullquotes are images. I don't want them to be (More work in terms of PHP to create those thumbnails)...
I was thinking - Is it possible to use the BitmapData class and add text to it dynamically, and then put that into the textfield? something like... <img src="myBitmap">?

Can anone shed some light on this for me? Am I wasting my time? ANy direction would be greatly appreciated.

Thanks in advance.

[pixelwit]

The Help files say you can use any clip in the library with a linkage identifier as a source image in an HTML textfield so you don't really need the BitmapData class.

If you're not loading dynamic text, you can just create your pull-quote as a clip in the library and attach it to your HTML textfield.

If you are using dynamic text you can attach a blank clip from the library to the inside of your HTML textfield then create a textfield inside that and fill it with your dynamically generated pull-quote text using script. The real trick is identifying the name of the blank clip after it's been inserted into the textfield. After a little testing, it appears as if the first "image" clip is named "instance1" and can be accessed with "MyTextField.Instance1".

Hope that gets you headed in the right direction.

-PiXELWiT
http://www.pixelwit.com

[Morg]

Hey!

Thanks for replying!

Yeah, I did this litlle test to create me some BitmapData:

import flash.display.BitmapData;
depth = 10;
// Create the movieCLip >>
var myBitmapData:BitmapData = new BitmapData(100, 100, false, 0x00CCCCCC);

this.createEmptyMovieClip("pullQuote",depth++);
pullQuote.createTextField("title",10,0,0,100,100);
pullQuote.title.text = "\"Hello world!\"";

myBitmapData.draw(pullQuote);

this.createEmptyMovieClip("pullQuoteFinal",depth++);
pullQuoteFinal.attachBitmap(myBitmapData, 2, "auto", true);

pullQuote.removeMovieClip();

I am receiving the pullquote dunamically, so I will have to try and go that route... How exactly do you attach a blank movieCLip to your textfield? createEmptyMovie?

[pixelwit]

Just specify the clip's LinkageID as the "src" property for the "img" tag.

-PiXELWiT
http://www.pixelwit.com

[Morg]

I have tried the following:

this.createTextField("myTxt",10,0,0,1000,100);
myTxt.html = true;
trace(myTxt)
myTxt.htmlText = "<img src='blank'> --"

But to no avail... I just get an undefined in the output window.. I also tried attachMovie... that does not work.

Pixelwit - what did you search under? I have trawled the help file...

[pixelwit]

Open the help panel in Flash.
Search "All Books" for "CSS image".
Select "About Supported HTML tags".
Check out the listing for "Image Tag".

As long as you have a clip in the library with a linkageID of "blank" the following code should work:

//
//
this.createTextField("myTxt",10,0,0,1000,100);
myTxt.wordWrap = true;
myTxt.multiline = true;
myTxt.html = true;
myTxt.htmlText = "<img src='blank'> --"
trace(myTxt.instance1._width);
//
// 

-PiXELWiT
http://www.pixelwit.com

[Morg]

YES! it works!! Wonderful!!

But now... little problem. I have put a textfield INSIDE that clip that I am attaching... I cannot write anything into it though...

this.createTextField("textField_txt", 10, 0, 0, 300, 200);
textField_txt.html = true;
textField_txt.multiline = true;
textField_txt.wordWrap = true;
textField_txt.htmlText = "<img src='img_id' id='pullquote' align='left'><p>Here's a movie clip symbol";
textField_txt.pullquote.titleTxt.text = "hallo there"
trace(textField_txt.pullquote.titleTxt.text)

The trace gives me the value, but I cannot see it... If I can get this to work, my problem is solved..

[Morg]

E U R E K A!!

Ok, so you can access the properties, but you cant actually do anything inside the clip in terms of text...

SO!

// Create bitmap data that contains text >>

import flash.display.BitmapData;
depth = 10;
// Create the movieCLip >>
var myBitmapData:BitmapData = new BitmapData(100, 100, true, 0x00CCCCCC);

this.createEmptyMovieClip("pullQuote",depth++);
pullQuote.createTextField("title",10,0,0,100,100);
pullQuote.title.text = "\"Hello world!\"";

myBitmapData.draw(pullQuote);

this.createEmptyMovieClip("pullQuoteFinal",depth++);
pullQuoteFinal.attachBitmap(myBitmapData, 2, "auto", true);
//myTxt.attachBitmap(myBitmapData, 2, "auto", true);
pullQuote.removeMovieClip();

this.createTextField("textField_txt", 10, 0, 0, 300, 200);
textField_txt.html = true;
textField_txt.multiline = true;
textField_txt.wordWrap = true;
textField_txt.htmlText = "<img src='img_id' id='pullquote' align='left'><p>Here's a movie clip symbol";
// Create dynamically >>

textField_txt.pullquote.attachBitmap(myBitmapData, 2, "auto", true);
pullQuoteFinal.removeMovieClip();

And that is that Thanks for all your guidance Pixelwit! Much obliged.

[pixelwit]

The following code works for me:

this.createTextField("myTxt",10,0,0,1000,100);
myTxt.wordWrap = true;
myTxt.multiline = true;
myTxt.html = true;
myTxt.htmlText = "<img src='blank'> --"
myTxt.instance1.createTextField("Fred", 10, 0, 0, 100, 50);
myTxt.instance1.Fred.text = "Cows!";

The main problem I see right now is that the blank clip needs a width and height when it's first placed in the textfield so the text can flow around the image. You can get around this by placing a clear rectangle the size of your pull-quote in the blank clip. But then you'll need different sized "blank" clips for different sized quotes.

-PiXELWiT
http://www.pixelwit.com

[Morg]

thats not fair... I tried doing that, and mine just would not respond. I got a big fat zero... FTW???

Now mine is a mega workaround

(Nice one though!!!! )