I want to change the text in the text box when different images is dragged. However, I'm not so sure how to do the function for it. If anyone can help me an example of this, that'd be greatly appreciated. Thank you.
So far I only have the var of textfield and var of the textformat
var onStart:TextField = new TextField();
var onFormat:TextFormat = new TextFormat();
onStart.x = 76;
onStart.y = 60;
onStart.width = 162;
onStart.height = 68;
onFormat.font = "Calibri";
onFormat.size = 30;
onStart.defaultTextFormat = onFormat;
Add a MouseEvent.MOUSE_UP listener to each image (indicating the user has stopped dragging the image) and change onStart.text when the event is fired.
image1.addEventListener(MouseEvent.MOUSE_UP, changeText);
image2.addEventListener(MouseEvent.MOUSE_UP, changeText);
image3.addEventListener(MouseEvent.MOUSE_UP, changeText);
function changeText(e:MouseEvent):void
{
switch(e.target)
{
case image1:
onStart.text = "image 1";
break;
case image2:
onStart.text = "image 2";
break;
case image3:
onStart.text = "image 3";
break;
default:
break;
}
}
Related
I have a problem with formatting the text field. I have buttons + and - to size of text. TextField class has property defaultTextField for new text formatting. And when I change defaultTextFormat size property - whole text's size changes. I have searched for solution everywhere and I haven't found it yet. Text editor WISWYG (I am not sure if name is right) is working well with just changing defaultTextFormat property while I have issue. Maybe it happens because of difference between flash and AIR (editor on flash and my app on AIR). Please help.
Here code to set/get TextFormat:
public function set selectionTextFormat(value:TextFormat):void {
var begin:int = _textField.selectionBeginIndex;
var end:int = _textField.selectionEndIndex;
if (begin == end)
{
_textField.defaultTextFormat = value;
}
else
{
_textField.setTextFormat(value, begin, end);
}
}
public function get selectionTextFormat():TextFormat
{
var begin:int = _textField.selectionBeginIndex;
var end:int = _textField.selectionEndIndex;
if (begin == end)
{
return _textField.defaultTextFormat;
}
return _textField.getTextFormat(begin, end);
}
And code to change format:
private function setFormat(property:String, value:*):void
{
var tf:TextFormat = TextFormatter.TF.selectionTextFormat;
tf[property] = value;
TextFormatter.TF.selectionTextFormat = tf;
}
EDIT : IMAGE ON DROPBOX FOR EXPLANATION:
https://dl.dropboxusercontent.com/u/237572639/Capture.PNG
EDIT 2: IMAGE OF WHAT I NEED (CODE IS ABSOLUTELY SAME!) (WYSIWYG editor)
https://dl.dropboxusercontent.com/u/237572639/WYSIWYG.PNG
To change all future typed text, you can try this code ( the result is visible here ):
var text_input:TextField = new TextField();
text_input.border = true;
text_input.type = 'input';
text_input.text = 'hello world!';
addChild(text_input);
var new_fmt:TextFormat = new TextFormat();
btn_color.addEventListener(
MouseEvent.CLICK,
function(e:MouseEvent):void {
// set the new text color
new_fmt.color = 0xFF0000;
}
)
btn_size.addEventListener(
MouseEvent.CLICK,
function(e:MouseEvent):void {
// set the new text size
new_fmt.size = int(txt_size.text)
}
)
text_input.addEventListener(Event.CHANGE, function(e:Event):void {
text_input.setTextFormat(new_fmt, text_input.caretIndex-1);
})
Of course, this is just a manner to do what you want, you have to adapt it to your need and improve it.
i have a problem witch i cant solve, and i wanted to ask what am i doing wrong. The idea should be that when i create the textfield i want to read from it, but it doesnt
function click2(e:MouseEvent):void{
e.currentTarget.removeEventListener(MouseEvent.CLICK, click2);
fx=e.target.x+400;
fy=e.target.y+300;
var i:int;
i=2;
trace(str);
trace(e.target.name);
var line:Shape = new Shape();
line.graphics.lineStyle(1,0xFF0000,2);
line.graphics.moveTo(sx,sy);
line.graphics.lineTo(fx,fy);
this.addChild(line);
var inputField:TextField = new TextField();
inputField.border = true;
inputField.type = TextFieldType.INPUT;
inputField.width = 23;
inputField.height = 18;
inputField.x = (sx+fx)/2;
inputField.y = (sy+fy)/2;
inputField.multiline = false;
inputField.maxChars = 3;
inputField.restrict = "0-9";
str=inputField.text;
addChild(inputField);
}
In this code i create a line, and near it appears a textfield , where you need to input the value of the line, but i can`t get it , when i want to trace the STR value, it is null,the text should be written by the user and i should read it ...
If you want to check the data the user added to the textinput you have to listen for the change-event. After that you can access the provided text.
function click2(e:MouseEvent):void{
...
inputfield.addEventListener(Event.CHANGE, checkInput);
}
function checkInput(e:Event):void {
//receive input value and validate it
var textfield:TextField = e.target as TextField;
var str:String = textfield.text;
...
}
I've a problem to change the font-color of a TextField after it has been added as a child to a MovieClip.
My code:
var btn:MovieClip = new MovieClip();
// other code for button
var tf:TextFormat = new TextFormat();
tf.size = 12;
tf.bold = true;
tf.font = "Arial"
tf.color = 0x000000;
var capt:TextField = new TextField();
capt.defaultTextFormat = tf;
capt.width = 200;
capt.height = 50;
capt.text = "Test";
capt.y = 20;
capt.x = 20;
capt.border = false;
capt.selectable = false;
btn.addChild(capt);
// .....
How can I Change the font-color after the last line?
It sounds like you're looking for TextField.setTextFormat(). You can either adjust your original TextFormat or just make a whole new one.
tf.color = 0xFF0000;
capt.setTextFormat(tf);
Assuming the TextField falls out of scope after that last line (you don't show enough to know if it does or not), you'll need to loop through the button to get the TextField and do it from there.
var i:uint;
var l:uint = btn.numChildren; //numChildren and length are 'heavy' getters, never use them as restrictors in a loop
for ( i = 0; i < l; i++ ) {
var cur:DisplayObject = btn.getChildAt( i );
if ( cur is TextField ) {
( cur as TextField ).setTextFormat( /*set new TextFormat in here*/);
break;
}
}
That assumes there is only the single TextField, of course. If there are multiple, I would extend MovieClip and add a public property for the value you want to change.
You can also just use the textColor property of a textfield:
capt.textColor = 0xFF0000;
I'm doing a button on AS3 made out of a sprite wich (just a simple square). When I add the event listener so that it acts as a button it works but depending on button.x, so when I put the button where I want the button stops working.
Thanks
public function pintaInterficieTrad(){
while(numChildren != 0) removeChildAt(0);
var idioma = new TextField();
idioma.text=traductor.*[numTrad].*;
idioma.width=200;
idioma.selectable=false;
idioma.setTextFormat(format);
idioma.x=20;
idioma.y=20;
addChild(idioma);
var trad = new Sprite();
trad.graphics.lineStyle(5,0x00ff00);
trad.graphics.beginFill(0x000000);
trad.graphics.drawRect(300,20,150,70);
addChild(trad);
var textTrad = new TextField();
if(numTrad==0) {
textTrad.text="Traduir";
}else{
textTrad.text="Traducir";
}
textTrad.width=200;
textTrad.selectable=false;
textTrad.setTextFormat(format);
textTrad.x=270;
textTrad.y=40;
addChild(textTrad);
var getBack = new Sprite();
getBack.graphics.lineStyle(5,0x00ff00);
getBack.graphics.beginFill(0x000000);
getBack.graphics.drawRect(500,20,150,70);
addChild(getBack);
var textgetBack = new TextField();
if(numTrad==0) {
textgetBack.text="Tornar";
}else{
textgetBack.text="Volver";
}
textgetBack.width=200;
textgetBack.selectable=false;
textgetBack.setTextFormat(format);
textgetBack.x=470;
textgetBack.y=40;
addChild(textgetBack);
trad.addEventListener(MouseEvent.CLICK,traduirBtn);
getBack.addEventListener(MouseEvent.CLICK,tornarBtn);
var userBox = new Sprite();
userBox.graphics.lineStyle(2,0x00ff00);
userBox.graphics.beginFill(0xffffff);
userBox.graphics.drawRect(40,130,610,160);
addChild(userBox);
var tradBox = new Sprite();
tradBox.graphics.lineStyle(2,0x00ff00);
tradBox.graphics.beginFill(0xffffff);
tradBox.graphics.drawRect(40,320,610,160);
addChild(tradBox);
var formatTxt = new TextFormat();
formatTxt.color=0x000000;
formatTxt.size=14;
var textUser = new TextField();
var textTraduit = new TextField();
textUser.defaultTextFormat=formatTxt;
textUser.text = textUsuari;
textUser.width = 600;
textUser.height = 150;
textUser.x=45;
textUser.y=130;
addChild(textUser);
textTraduit.text = traduccio;
textTraduit.setTextFormat(formatTxt);
textTraduit.width = 600;
textTraduit.height = 150;
textTraduit.x=45;
textTraduit.y=325;
addChild(textTraduit);
}
public function traduirBtn(e){
while(numChildren != 0) removeChildAt(0);
tradueix();
pintaInterficieTrad();
}
public function tornarBtn(e){
while(numChildren != 0) removeChildAt(0);
pintaMenu();
}
}
If I put the squares on x=0 they do what they're suposed to do...
seems like the button you're talking about is trad. You're addChilding it quite early in your code, which means that antoher displayobject could get above it at the same position. When you click at that position, the click event will only get send to the top most element, so try adding the elements you want people to interact with as the last (buttons, text field inputs, etc.)
Your problem is in the fact that you are adding the text over the button and the text is being clicked, not the button.
Add the text to the button itself and your click event will work.
Also verify that no other component is covering the button. Even if transparent, like a textbox.
I'm having a really weird problem with the MOUSE_OVER event. I'm building dynamic tabs representing mp3 songs containing textfields with info and a dynamic image for the cover art. I am trying to get a simple MOUSE_OVER working over the whole tab, such that you can select the next song to play.
I am using a Sprite with alpha 0 that overlays my whole tab (incl. the textFields) as a Listener for MOUSE_OVER and _OUT... I've checked by setting the alpha to something visible and it indeed covers my tab and follows it around as I move it (just making sure I'm not moving the tab without moving the hotspot). Also, I only create it once my cover art is loaded, ensuring that it will cover that too.
Now, when the tab is in the top position, everything is dandy. As soon as I move the tab to make space for the next tab, the textFields break my roll behaviour... just like that noob mistake of overlaying a sprite over the one that you're listening for MouseEvents on. But... the roll area is still on top of the field, I've set selectable and mouseEnabled to false on the textFields... nothing.
It is as if the mere fact of moving the whole tab now puts the textField on top of everything in my tab (whereas visually, it's still in its expected layer).
I'm using pixel fonts but tried it with system fonts, same thing... at my wits end here.
public function Tab(tune:Tune) {
_tune = tune;
mainSprite = new Sprite();
addChild(mainSprite);
drawBorder();
createFormat();
placeArtist();
placeTitle();
placeAlbum();
coverArt();
}
private function placeButton():void {
_button = new Sprite();
_button.graphics.beginFill(0xFF000,0);
_button.graphics.drawRect(0,0,229,40);
_button.graphics.endFill();
_button.addEventListener(MouseEvent.MOUSE_OVER, mouseListener);
_button.addEventListener(MouseEvent.MOUSE_OUT, mouseListener);
_button.buttonMode = true;
mainSprite.addChild(_button);
}
private function mouseListener(event:MouseEvent):void {
switch(event.type){
case MouseEvent.MOUSE_OVER :
hilite(true);
break;
case MouseEvent.MOUSE_OUT :
hilite(false);
break;
}
}
private function createFormat():void {
_format = new TextFormat();
_format.font = "FFF Neostandard";
_format.size = 8;
_format.color = 0xFFFFFF;
}
private function placeArtist():void {
var artist : TextField = new TextField();
artist.selectable = false;
artist.defaultTextFormat = _format;
artist.x = 41;
artist.y = 3;
artist.width = 135;
artist.text = _tune.artist;
artist.mouseEnabled = false;
mainSprite.addChild(artist);
}
private function placeTitle():void {
var title : TextField = new TextField();
title.selectable = false;
title.defaultTextFormat = _format;
title.x = 41;
title.y = 14;
title.width = 135;
title.text = _tune.title;
title.mouseEnabled = false;
mainSprite.addChild(title);
}
private function placeAlbum():void {
var album : TextField = new TextField();
album.selectable = false;
album.defaultTextFormat = _format;
album.x = 41;
album.y = 25;
album.width = 135;
album.text = _tune.album;
album.mouseEnabled = false;
mainSprite.addChild(album);
}
private function drawBorder():void {
_border = new Sprite();
_border.graphics.lineStyle(1, 0x545454);
_border.graphics.drawRect (0,0,229,40);
mainSprite.addChild(_border);
}
private function coverArt():void {
_image = new Sprite();
var imageLoader : Loader = new Loader();
_loaderInfo = imageLoader.contentLoaderInfo;
_loaderInfo.addEventListener(Event.COMPLETE, coverLoaded)
var image:URLRequest = new URLRequest(_tune.coverArt);
imageLoader.load(image);
_image.x = 1.5;
_image.y = 2;
_image.addChild(imageLoader);
}
private function coverLoaded(event:Event):void {
_loaderInfo.removeEventListener(Event.COMPLETE, coverLoaded);
var scaling : Number = IMAGE_SIZE / _image.width;
_image.scaleX = scaling;
_image.scaleY = scaling;
mainSprite.addChild (_image);
placeButton();
}
public function hilite(state:Boolean):void{
var col : ColorTransform = new ColorTransform();
if(state){
col.color = 0xFFFFFF;
} else {
col.color = 0x545454;
}
_border.transform.colorTransform = col;
}
Fixed it. What was happening was that I didn't set the height of the textfield. That was overshooting the tab and hence lying over the previously instantiated tab, blocking MouseOver... don't even ask.