Oct 04 2011

How to detect mouse over / out on href links?

Category: AS3,TextArea — admin @ 12:47 am

Introduction to com.doitflash.text.TextArea (Part 3)

You’re able to use basic CSS for styling your HTML content being used in TextFields via the htmlText property. you can change the color, size or put an underline when rolling over an href link in TextField.

it’s good and makes your content look better, but what if you want to call a custom function when you mouse over a link? what if, I donno, what if you have a tooltip enabled in your project and wish to show a tooltip window when you mouse over a specefic link in your text block?

TextArea is here to help you with that! with a little change in your html content and you will be able to call custom functions inside your text blocks.

If you have not downloaded the TextArea class yet > http://doitflash.com/, download it now. install the classes in your class path and try the following sample code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import flash.text.TextFieldAutoSize;
import com.doitflash.text.TextArea;
     
var _textArea:TextArea = new TextArea();
_textArea.condenseWhite = true;
_textArea.autoSize = TextFieldAutoSize.LEFT;
_textArea.embedFonts = false;
_textArea.border = true;
     
_textArea.holder = this;
_textArea.client = this; // must be where you have your 'allowed functions' saved
_textArea.funcSecurity = true;
_textArea.allowedFunctions(myCustomFunction, funcOnOver, funcOnOut);
_textArea.mouseRollOverEnabled = true;
_textArea.fmlText = "<p>This is a <a href='event:myCustomFunction();onMouseOver:funcOnOver();onMouseOut:funcOnOut()'>link</a>.</p>";
     
this.addChild(_textArea);
     
function myCustomFunction():void
{
     trace("custome function");
}
function funcOnOver():void
{
     trace("rollOver text = " + _textArea.rolledOverText);
     trace("rollOver url = " + _textArea.rolledOverUrl);
}
function funcOnOut():void
{
     trace("rollOut");
}

Tags: , , , , , , , , , ,

Oct 03 2011

how to load animated gif inside text field?

Category: AS3,TextArea — admin @ 3:02 am

Introduction to com.doitflash.text.TextArea (Part 2)

it’s easy to load external images into your text fields, you just use the native img tag like below and it will load and be shown inside your text block.

1
<img src="image.gif" alt="" width="150" height="150" align="left" />

I’m not going to talk about how you initialize the TextField class and then set the htmlText property of it, it’s easy and there are millions of samples on the net to show you how you can create a TextField instance to load external data.

what I’m going to talk about in this post is how you can load animated gif files inside your Text field! because trying to load a gif file in TextField will just result in showing the first frame of the gif file. follow steps below and you will be able to load and play external animated gif files in no time.

You need to have downloaded the TextArea class > http://doitflash.com/
You should also have downloaded the image module > http://doitflash.com/?portfolio_mod=image-module

Downloading a module package means you will be able to use a new tag in your text field. to use a new tag you need the tag’s module swf file and the module package has all the files you need to compile the required swf file.

so, after downloading the image module package, go to “Src” folder to create the “TextModule_image.swf” file. leave this file for a while and we’ll get back to it a bit later.

now, open your AS3 project and insert this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import flash.text.TextFieldAutoSize;
import com.doitflash.text.TextArea;
     
var _textArea:TextArea = new TextArea();
_textArea.condenseWhite = true;
_textArea.autoSize = TextFieldAutoSize.LEFT;
_textArea.embedFonts = false;
_textArea.border = true;
_textArea.multiline = true;
_textArea.wordWrap = true;
_textArea.width = 200;

_textArea.holder = this;
_textArea.client = this;
_textArea.assetsPath = "assets/"; // where you have stored your module swf files
_textArea.fmlText = "load an image with the \"image\" tag: <image src='image.gif' width='140' height='140' align='left' id='id1' />";
     
this.addChild(_textArea);

Using TextArea instead of the classic TextField is the key and as you see in the above sample, you initialize and use the TextArea class just like how you used to work with TextField, the only changes are that you are setting the location of your module swf files with the “assetsPath” property and you use the “fmlText” rather than the classic “htmlText”.

the assets path is the location where you will store all your tag swf modules.

I hope this has been helpful.

Tags: , , , , , , ,

Sep 30 2011

What is TextArea and why/where to use it?

Category: AS3,TextArea — admin @ 11:10 pm

Introduction to com.doitflash.text.TextArea (Part 1)

Have you ever wished you could detect mouse rollover/rollout on href links inside your TextFields?
Have you ever tried to load an animated gif file but were disappointed to see animated gif files are not supported with the img tag?
Have you ever wished to load an external swf inside your TextField and be able to interact with it?
Have you ever happened to need to call custom functions in your AS3 project from your text field links and be able to pass arguments with it?

You may be surprised to know that with the original TextField class from adobe, you can make all wishes above come true! but doing them all will take a bloody long time and there are many small facts that you should be aware of before you can do all these stuff with TextField. I’m talking about little facts that there are no documents about them anywhere on the net.

to save time, you could easily use the new TextArea class. TextArea can be a full alternative to TextField and working with it is just exactly similar to how you work with TextField. it’s just that it does some more stuff than TextField which will solve all the questions above.

check out the demo here: http://doitflash.com/demo/main/ here you’ll find all the powers of TextArea.

to start using TextArea, download it for free from here: http://www.doitflash.com/ then copy the classes to your class paths and replace the TextField with TextArea everywhere in your project! replacing TextField with TextArea will not change any behavior in your projects :)

read documentation there and you will see how you can use the new features. in my next posts I will try to talk more about TextArea and how you can solve the above questions.

Tags: , , , , , , , , , , ,