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