Actionscript's TextField.htmlText property allows for img tag. I''m wondering if it's somehow possible to make image clickable. More specifically, I would like to open a new window where I can display more information.
you can surround it in a <a> tag. like so:
var tt:String = '<img src="image.jpg">';
var tf:TextField = new TextField;
tf.htmlText = tt;
tf.addEventListener("link",clickHandler);
addChild(tf);
then in callback:
public function clickHandler(e:TextEvent):void{
trace(e.text); // someThing
}
of course once you have it in callback you can do whatever you want. open dialog, open webpage etc...
Related
I have textInput on stage, it's not the component; but rather a textField which is set to behave as inputText. I also have a button on stage to bold the selected portion of the text in the inputField.
Here's the code, which works perfectly fine:
var formatDefBold: TextFormat = new TextFormat();
formatDefBold.bold = false;
var formatBold: TextFormat = new TextFormat();
formatBold.bold = true;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event: MouseEvent):void
{
var sbi:Number = myInputField.selectionBeginIndex;
var sei:Number = myInputField.selectionEndIndex;
if (sbi != sei)
{
var section:TextFormat = myInputField.getTextFormat(sbi,sei);
if (section.bold == false)
{
myInputField.setTextFormat(formatBold, sbi, sei);
}
else
{
myInputField.setTextFormat(formatDefBold, sbi, sei);
}
stage.focus = this[selectedTextField]; // highlight the selected text again.
}
}
PROBLEM:
When I rotate the textInput, the text disappears. If I embed the font and choose another anti-aliasing method like "Anti-Alias for animation", the rotated textInput displays the text fine, but the makeBold function doesn't work.
I've tried different fonts. Sans, Arial, which I embedded all it's styles (Bold, Italic, Bold-Italic). nothing!
I've tried placing the textInput inside a movieClip and rotate the movieClip instead. doesn't work.
I've also tried setting the embedFonts parameter for the textInput too, not sure if I did it correctly
myInputField.embedFonts = true;
this time the text disappears even when the textField is not rotated.
I'm really stuck and can't think of anything else to make the bold function work with a rotated textInput.
Embedding method
For any operations like rotation applied to a text field, you should first embed the text font.
myText.text = "rotation with embed font";
myText.rotation = 10;
Your text field 'myText' is physically put on the scene. When you click on it, in the window 'Properties', do that:
anti-alias (Anti-alias for animation)
font embed
To embed the font, click on 'embed' button > window 'Font Embedding' > 'Character ranges' > select: 'Uppercase', 'Lowercase', 'Numerals', 'Punctuation'. (don't click on 'All')
3D method
You can also rotate a dynamic text field without embedding fonts using the 3D methods available in Flash Player 10.
var myTextField:TextField = new TextField();
this.addChild(myTextField);
var fo:TextFormat = new TextFormat("Arial", 11, 0xFF0000);
myTextField.defaultTextFormat = fo;
myTextField.text = "3D rotation";
myTextField.rotationZ = 45;
In your case...
In your case, the following code works perfectly (you just have to put a button named 'boldBtn' on your scene):
var myInputField:TextField = new TextField();
this.addChild(myInputField);
var fo:TextFormat = new TextFormat("Verdana", 12, 0x000000, false);
myInputField.defaultTextFormat = fo;
myInputField.text = "3D rotation";
myInputField.rotationZ = 45;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event:MouseEvent):void
{
fo.bold = !fo.bold;
myInputField.setTextFormat(fo);
}
I set the anti-aliasing to it's default value which is "use device fonts" and used rotationZ to rotate the text field. and it worked!
using rotation (not rotationZ) with default anti-aliasing doesn't show the text.
and using rotation (not rotationZ) with anti-aliasing makes the bold function not work.
so this is solved with just adding this line of code:
myInputField.rotationZ = 45;
I have this function:
private function boldVerb(_phrase:String, _verb:String):String
{
var newHtmlText:String = "";
var pattern:RegExp = new RegExp([_verb]);
newHtmlText = _phrase.replace(pattern, "<b>" + _verb + "</b>");
return newHtmlText;
}
And I want to change the color of this "verb" that the function receives. Is it possible in AS3?
Sure. You can either use a stylesheet or you use the font tag (assuming it's an html textfield).
<font color='#FF0000'>This is red</font>
See documentation here.
Also, as this is the HTML formatted text you could have a stylesheet with .verb class and then tag span with class attribute verb will paint it however you want - this is for greater flexibility.
private function boldVerb(_phrase:String, _verb:String):String
{
var newHtmlText:String = "";
var format:TextFormat = new TextFormat();
format.color = 0x990000;
var pattern:RegExp = new RegExp([_verb]);
newHtmlText = _phrase.replace(pattern, "<b>" + _verb + "</b>");
textField.setTextFormat(format);
return newHtmlText;
}
If textField is a text field on the stage this should work, but this is how you do text formatting in AS3, do a google search on "AS3 TextFormat" for more info. First, create a new TextFormat object, and give it a property, I chose a dark red #990000 (0x990000 in AS) and then applied it to the text field. I am sure you're wanting to format the string itself, which I don't recall if that's possible in Flash, but you can certainly edit the text field itself. So you may have to string together some text fields to get a string of text with one accented word. hopefully that gets you a step closer! Good luck!
Problem is this: I need to add image to textField using img tag, but I cannot reference a symbol from a library in my swf file.
txt.htmlText = "test <img src='symbol1' height='10' width='10' align='right'/>";
AS linkage for this symbol is symbol1 and i tried embedding this swf in my class but it always gives error #2035 - URL not found
Adobe says that img tag accepts a library symbol, but I couldn't find any example where this is true.
Any help would be appreciated.
It's a while since I did this but I think you need to create a movie clip in the library with the bitmap inside it, then export that for ActionScript, then add that as the linkage in the tag.
So, if your movieClip is exported as 'myImage_mc", your html will be:
<img src="myImage_mc" width="100" height ="100"/>
Update.
To clarify, here's my symbol in the library:
Here's my actionscript:
import flash.text.TextField;
var textField:TextField = new TextField();
textField.htmlText = "<p>HKP</p><img src='HKP'/>";
textField.x = textField.y = 100;
stage.addChild(textField);
And here's the result (which admittedly needs a bit of tweaking):
Note: this doesn't seem to work if the img is the only tag in the field. You have to add some text, even if it is not visible. An empty P won't work, so either of these will fail:
textField.htmlText = "<img src='HKP'/>";
textField.htmlText = "<p></p><img src='HKP'/>";
... but this works:
textField.htmlText = "<p> </p><img src='HKP'/>";
... which is pretty much a classic Adobe gotcha ;)
for your source try adding the image extension, such as image.jpg or image.png
textfield.htmlText = "<img src='image_name.jpg' width='100' height='100'/>";
//Displays img on stage. No text is necessary
var txt:TextField = new TextField ();
txt.wordWrap = true;//this is necessary or img won't display
txt.width = 400;//size up to avoid cutting off image
txt.height = 200;//this doesn't affect the image size or proportion
txt.htmlText = '<img src="yourimage.png" />';
addChild(txt);
I am having some problems getting this code to work properly. I want to change the text on a textfield inside a button. It works, but only for the upState. As soon as I hover or click the button, it changes back to the original name. Is there any way I can define it as anyState?
var doc:DisplayObjectContainer = m1.upState as DisplayObjectContainer;
var tf:TextField = doc.getChildAt(1) as TextField;
var boldText:TextFormat = new TextFormat();
boldText.bold = true;
tf.text = "Sterno Cleido Mastoid";
tf.setTextFormat(boldText);
Example:
http://www.testdummies.dk/dynamictext.fla
Your issue is that your code is only changing the text for the up state of the button. The other states remain unaffected.
You could simply copy and paste your code to do the same change for the over and down states - adding this code after your existing code would do just that:
doc = m1.overState as DisplayObjectContainer;
tf = doc.getChildAt(1) as TextField;
tf.text = "Neck";
tf.setTextFormat(boldText);
doc = m1.downState as DisplayObjectContainer;
tf = doc.getChildAt(1) as TextField;
tf.text = "Neck";
tf.setTextFormat(boldText);
This is an awkward way though to code a simple text change for a button. Creating a custom button class, or even making a movieClip work as a button would be much cleaner. Create a new question if you need help learning either of these things.
I would put the text field on its own layer on top of the button, so it always has the same text regardless of button state.
or, alternatively, you could copy and paste that code into each button state and then alter the code to reflect the current state. (the first solution is faster/easier though)
I having some trouble with TextFields and caracter embedding. As I have understood, the way to embed character in Flash, is to have a TextField in a movieclip that is exported to actionscript via some classname. Then have the TextField embed the characters.
But when i try to use that TextField in my project, I cannot auto resize the field any longer!? Is there a better way to embed charactes? or am I missing some unknow attribute? (and yes i have tried TextField.autoSize = "left" (or "center" or "right")).
The TextField is configured like this in Flash CS4:
Properties:
http://screencast.com/t/0VB6KnNO6G
Library implementation:
http://screencast.com/t/w3yQLqit0veI
And I embed the MovieClip containing the TextField like this:
protected var tabname:MovieClip = new Text(); // The property on the object
Adding the text and setting its Settings:
var txt:TextField = tabname.txt;
if( !contains(tabname) )
{
addChild(tabname);
var format:TextFormat = new TextFormat();
format.bold = true;
format.font = "Arial";
format.size = 12;
format.align = "left";
var dropShadow = new DropShadowFilter(0);
dropShadow.color = 0xFFFFFF;
dropShadow.strength = 2;
dropShadow.blurX = dropShadow.blurY = 5;
dropShadow.alpha = .7;
txt.type = TextFieldType.DYNAMIC;
txt.multiline = tabname.wordWrap = false;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.defaultTextFormat = format;
txt.filters = [dropShadow];
txt.mouseEnabled = false;
txt.x = 10;
}
txt.text = value;
txt.y = Math.ceil((tabmask.height - txt.height) /2);
To embed fonts, don't rely on wrapping them in MovieClips in the library. They should be embedded correctly as Fonts. I have included some basic steps below for embedding fonts, then an example for your particular situation:
1 - Make the textfield Dynamic and click the Embed.. button
2 - Name the font with something meaningful (like the fonts name) and tick the character sets you will be using (usually I select caps, lowercase, numbers and punctuation). Also note the Style is 'Bold', you will need to embed a font set for each style. So if you want to use Bold and Regular, you need to embed 2 fonts.
3 - If you plan on adding textfields dynamically through ActionScript, goto the ActionScript tab and add a class for it (again, use a meaningful name)
4 - Finally click ok, and away you go. I have setup an example, using these steps, and the auto size method, you can see the results below
In Flash, you can click the [Embed...] button below the TextField's character properties. In the window that you get then, you can specify which characters you want embedded in your textfield.
There's a lot more to say about font embedding but this is the simple story. Flash CS5 added TLF TextFields but I don't think you were referring to those, right?
The autoSize property really has nothing to do with font embedding but I guess your TextField is not Dynamic when you cannot auto resize it?
Are you using CS5 or CS4 or earlier by the way?