how to write on screen in AS3 - actionscript-3

So I am creating a module and I have a screen that I need to be able to allow the users to write questions that they have on their screens in a text box. Does anyone know how to do this?
This is the basic setup that I use for every screen:
package screens
{
import flash.filters.*;
import flash.text.*;
import mapSystem.screenSystem.*;
import mapSystem.*;
import screens.*;
import caurina.transitions.Tweener;
public class screen4 extends screenBase
{
public function screen4(pSystem:mapManager)
{
super(pSystem);
numActions = 1;
}
public override function onAction()
{
if (actionStep == 1)
{
map.fID("54");
}
}
public override function onEnter()
{
map.zoomTo("full");
}
}
}

For users to input text, simply create a textfield and set its "type" property to TextFieldType.INPUT. When you go to retrieve this data, just access the textFields "text" prop.
Update -
Ok = simple google search on "AS3 textField tutorial", first hit was this tutorial, which I yanked and added a couple things to for you. Its fairly basic and well documented, so, depending on your level of experience, should prove illuminating.
//Creating the textfield object and naming it "myTextField"
var myTextField:TextField = new TextField();
//Here we add the new textfield instance to the stage with addchild()
addChild(myTextField);
//Here we define some properties for our text field, starting with giving it some text to contain.
//A width, x and y coordinates.
myTextField.text = "input text here";
myTextField.width = 250;
myTextField.x = 25;
myTextField.y = 25;
//#b99 addition
myTextField.type = TextFieldType.INPUT;
//This is the section for our text styling, first we create a TextFormat instance naming it myFormat
var myFormat:TextFormat = new TextFormat();
//Giving the format a hex decimal color code
myFormat.color = 0xAA0000;
//Adding some bigger text size
myFormat.size = 24;
//Last text style is to make it italic.
myFormat.italic = true;
//Now the most important thing for the textformat, we need to add it to the myTextField with setTextFormat.
myTextField.setTextFormat(myFormat);
Hope that helps!

Related

ActionScript 3.0 function for modify TextField

I started one week ago to study ActionScript 3.0. I would like to do a simple game. It will start with a window displaying a welcome message( "press the button to start"), and a arrow that start from the text and point to the button. I want to create everything from code. I'm using a TextField for the welcome message but I have some trouble. I created a file .fla AIR for Destkop. Then I associated to that file a class called mainFunzioneModidificaTest.as . In this class I wrote a function to set the text of the first window. I use the TextFormat but when I run the .fla file I see the text but without any formatting.The color, the dimension and the font dosen't change Here is the code. Can someone help me? Thank you!
package {
import flash.display.MovieClip;
import flash.text.TextField;
import flash.text.TextFormat;
public class mainFunzioneModificaTest extends MovieClip {
public function mainFunzioneModificaTest() {
setText();
}
function setText(): void {
var text: TextField = new TextField();
var myFormat: TextFormat = new TextFormat("Arial", 39, 0xFF0000);
text.setTextFormat(myFormat);
text.text = "Hello";
addChild(text);
}
}
}
You need to set the text first before calling setTextFormat(), or alternatively use text.defaultTextFormat = myFormat;
From the TextFormat documentation:
Use the TextField.defaultTextFormat property to apply formatting BEFORE you add text to the TextField, and the setTextFormat() method to add formatting AFTER you add text to the TextField
Set text before calling setTextFormat():
function setText(): void {
var text: TextField = new TextField();
var myFormat: TextFormat = new TextFormat("Arial", 39, 0xFF0000);
text.text = "Hello";
text.setTextFormat(myFormat);
addChild(text);
}
or set defaultTextFormat:
function setText(): void {
var text: TextField = new TextField();
var myFormat: TextFormat = new TextFormat("Arial", 39, 0xFF0000);
text.defaultTextFormat = myFormat;
text.text = "Hello";
addChild(text);
}

AS3 - Dynamically re-populate a series of textFields held within a group of MovieClips

I’ve come across a problematic issue with some functionality I’m attempting to develop in ActionScript3 on the Flash Professional CS5 platform and was wondering if anybody could point me in the right direction with it?
Background
Within my ActionScript Class, I have written a MouseEvent function which dynamically adds multiple instances of the same MovieClip (user_shape) on to the stage in the formation of a shape that the user has designed in an earlier stage of the program.
This shape effect is achieved through a For Loop that loops through the entire length of a Multi-Dimensional Boolean based array looking for an instance of true (determined by the user’s actions earlier) and then adding a MovieClip to the stage if this is the case.
Each group of MovieClips added with a single click, while always having the same instance name (user_shape), is always assigned a unique ID, which I've set up by including a numerical variable that increments up by 1 each time I add the batch of 'user_shape' MovieClips through left click to the stage.
The user can pick from up to eight different colours to assign to their shape (via selection boxes) before adding it to the stage. For each of these eight colours I have added a numerical variable (shapeCounterBlue, shapeCounterRed etc.) which basically counts ++ every time I add a shape of a certain colour to the stage and likewise it counts -- if I chose to remove a shape.
As a shape is added through my main function I attach a dynamic textField to each MovieClip and populate it with the variable counter number for the particular colour I have selected (see image below).
Problem
OK, so here is my issue. I need my unique number (displayed in white) for each coloured shape to dynamically re-populate and update when I remove a shape from the stage. As you can see in the image I’ve attached, if I were to remove the second blue shape, my third blue shape’s numbers would need to revert from 3 to 2.
Likewise if I had six red shapes on the stage and I decided to remove the third one, then shapes 4,5,6 (before 3 is deleted), would need to have their numbers changed to 3,4,5 respectively.
Or I could have four green shapes and remove the first shape; this would mean that shapes 2,3,4 would actually need to change to be 1,2,3.
You get the idea. But does anybody know how I could achieve this?
My problem has further been hampered by the fact that the textFields for each MovieClip are added dynamically through my For Loop to the user_shape Child. This means that within my AS class, I haven’t been able to publicly declare these textFields and access the values within them, as they only exist in the For Loop used in my add shape function and no where else.
Many thanks in advance.
as to the targeting dynamically created text fields. In your loop assign a name that you can later access.
for(i:int=0;i<myArray.length;i++){
var txt:TextField = new TextField();
txt.name = "txt_" + i;
this.addChild(txt);
}
Then to access your textfields outside the loop target them like this:
var targetTxt:TextField = this.getChildByName("txt_10");
UPDATE
Ok so I had some time and went ahead and solved your entire problem
(Download Source FLA/AS files)
Ok so there are some MCs in the library that I call in my code. I created a Box MC that has a label textfield, a border, and a background MC that I can target to color.
I created a countColors() that loops over all the boxes once you have click on one (triggered from a mouseEvent within each box). It counts the different colors totals in an array and then sends a custom event to let all the boxes know they can fetch the color totals to update their labels.
I hope this helps.
main.as
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
public class main extends MovieClip {
public static var ROOT:MovieClip;
public var totalBoxes:int = 100;
public var boxContainer:Sprite;
public static var colorArray:Array = [0xFF0000, 0x0000FF, 0x00FF00];
public static var colorCount:Array = [0,0,0];
public static var currentColor = 0;
public function main() {
// set ref to this
ROOT = this; // so I can get back to it from the boxes
// color selection
redBtn.addEventListener(MouseEvent.CLICK, chooseColor);
blueBtn.addEventListener(MouseEvent.CLICK, chooseColor);
greenBtn.addEventListener(MouseEvent.CLICK, chooseColor);
// add box container to stage
boxContainer = new Sprite();
boxContainer.x = boxContainer.y = 10;
this.addChild(boxContainer);
var row:int=0;
var col:int=0;
for(var i:int=0; i < totalBoxes; i++){
var box:Box = new Box();
box.x = col * box.width;
box.y = row * box.height;
box.name = "box_" + i;
box.ID = i;
box.updateDisplay();
boxContainer.addChild(box);
if(col < 9){
col++;
}else{
col = 0;
row++;
}
}
}
private function chooseColor(e:MouseEvent):void
{
var btn:MovieClip = e.currentTarget as MovieClip;
switch(btn.name)
{
case "redBtn":
currentColor=0;
break;
case "blueBtn":
currentColor=1;
break;
case "greenBtn":
currentColor=2;
break;
}
// move currentColorArrow
currentColorArrow.x = btn.x;
}
public function countColors():void
{
colorCount = [0,0,0]; // reset array
for(var i:int=0; i < totalBoxes; i++){
var box:Box = boxContainer.getChildByName("box_" + i) as Box;
if(box.colorID > -1)
{
colorCount[ box.colorID ]++;
}
}
// send custom event that boxes are listening for
this.dispatchEvent(new Event("ColorCountUpdated"));
}
}
}
Box.as
package {
import flash.display.MovieClip;
import flash.geom.ColorTransform;
import flash.events.MouseEvent;
import flash.events.Event;
public class Box extends MovieClip {
public var ID:int;
public var colorID:int = -1;
private var active:Boolean = false;
private var bgColor:Number = 0xEFEFEF;
public function Box() {
this.addEventListener(MouseEvent.CLICK, selectBox);
main.ROOT.addEventListener("ColorCountUpdated", updateCount); // listen to root for custom event to update display
}
public function updateDisplay() {
if(active == false){
boxLabel.htmlText = "<font color='#000000'>"+ ID +"</font>";
}else{
boxLabel.htmlText = "<font color='#FFFFFF'>"+ main.colorCount[colorID] +"</font>";
}
var myColorTransform = new ColorTransform();
myColorTransform.color = bgColor;
boxBG.transform.colorTransform = myColorTransform;
}
private function selectBox(e:MouseEvent):void
{
// set bgColor
if(active == false){
bgColor = main.colorArray[main.currentColor];
colorID = main.currentColor;
}else{
bgColor = 0xEFEFEF;
colorID = -1;
}
// set active state
active = !active // toggle true/false
main.ROOT.countColors();
}
private function updateCount(e:Event):void
{
updateDisplay();
}
}
}

AS3 Text Input accents

I create an AS3 TextField set to Input mode dynamically through code, but when the user tries to input some special characters (eg. á à é è í ì ó ò ú ù ç) they simply do not appear on the TextInput.
Copying and pasting them to the textfield works, but I'd prefer if the user could directly type them.
Here's a quick test demonstrating this:
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldType;
public class TextInput extends Sprite
{
public function TextInput()
{
super();
var t:TextField = new TextField;
t.type = TextFieldType.INPUT;
addChild(t);
}
}
}
This creates a textfield where the user can type, but I can't type special characters like à.
Many thanks.
If you can paste it into the Input field, you should be able to type it.
If you start a new Flash document, using the same font as you are above create an Input textfield on the stage with the following settings:
Embed the normal glyphs
Embed the extended latin glyphs
And this should work, as:
Now if all this works, it might have something to do with the way the class is written.
Writing classes that embeds fonts is frankly a pain. Make sure you embed the font in the library and export it for action script:
Following that, you need to use the following code:
// The name of the font class
var _font:Calibri = new Calibri();
var _textFormat:TextFormat = new TextFormat();
_textFormat.font = _font.fontName;
_textFormat.size = 16;
// For some weird reason the ordering here is important. I remember mucking around with this for ages for an old project. EmbedFonts must come last
var _textField:TextField = new TextField();
_textField.defaultTextFormat = _textFormat;
_textField.type = TextFieldType.INPUT;
_textField.embedFonts = true;
addChild(_textField);
And that should have it all working:
** EDIT **
To those using FlashDevelop, etc you can use the following method:
public class Main extends MovieClip {
[Embed(source='assets/HOBOSTD.OTF', fontName='_hobo', embedAsCFF="false")] public static const HOBO:Class;
public function Main() {
var _font:Font = new HOBO() as Font;
var _textFormat:TextFormat = new TextFormat();
_textFormat.font = _font.fontName;
_textFormat.size = 22;
var _textField:TextField = new TextField();
_textField.embedFonts = true;
_textField.defaultTextFormat = _textFormat;
_textField.autoSize = TextFieldAutoSize.LEFT;
_textField.antiAliasType = AntiAliasType.ADVANCED;
_textField.type = TextFieldType.INPUT;
addChild(_textField);
}
}
And you will get the following:
Now note, the font file must be either relative to your project, or the source can point to the C:\windows\font folder if you choose. In the above example, I copied the font to my assets folder.

AS3 Rounded Text Field

Does anyone know how to create a dynamic textfield with a visible border and rounded corners in AS3?
I think I might have to create a rounded movieclip, resize and place it behind the text.
I tried this, but I don't see any changes.
var styleRound:StyleSheet = new StyleSheet();
styleRound.parseCSS("h4{cornerRadius:10;borderStyle: solid; borderThickness: 1;}");
tf.htmlText = "<h4>" + hotspotData.caption + "</h4>";
tf.styleSheet = styleRound;
Here is a list of the available CSS styles for TextFields in ActionScript 3. Sorry, there is no corner radius.
You can turn on a border for a textfield on the TextField objects border property. But there is not a property available to round the corner.
I suggest you create a new component and add the border yourself as a Sprite underneath the TextField. Something like:
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class TextBorder extends Sprite
{
private static const CORNER_RADIUS:int = 5;
// display objects
private var background:Sprite;
private var field:TextField;
// properties
private var _text:String;
public function TextBorder()
{
background = new Sprite;
field = new TextField;
field.autoSize = TextFieldAutoSize.LEFT;
addChild(background);
addChild(field);
// TESTING:
text = "Hello World";
}
public function set text(newText:String):void
{
_text = newText;
display();
}
public function get text():String
{
return _text;
}
private function display():void
{
field.text = _text;
var g:Graphics = background.graphics;
g.clear();
g.lineStyle(0, 0x0);
g.beginFill(0xFFFFFF);
g.drawRoundRect(0, 0, field.width, field.height, CORNER_RADIUS);
}
}
}
I ended up creating a rounded rectangle in flash and exporting it as its own class - hotspotBG.
var hotspotBackground:hotspotBG = new hotspotBG();
hotspotBackground.width = textField.width + 10;
caption.addChild(hotspotBackground);
You cannot change the text field it self, as of 2014 flash does not allow that.
What you can do is delete the background and the borders,
which will leave the text field completely transparent,
then add an image (rectangle tool is the easiest way to do this) at back of the text field,
so that the text field is on top of the image (z-axis-wise)
It may not be the way you thought of but hell it works!
//you are deleting the background and the borders
//and replacing them with an image
textbox.background=false;
textbox.border=false;
Can you just use the CSS styles? Something like:
TextInput {
borderStyle: solid;
borderThickness: 1;
cornerRadius: 2;
}
I haven't tested this, but that should give you a rounded corner.

How to Draw a circle displaying a number in flex

I am flex newbie , so please forgive me if i am not using the right words to ask the following question. I want to know if there is a way to draw a circle which shows a number , like for ex. Graduated Circles representing its radius to show it's relevance. Is there a component which already do so , if not what is the best way to do this.
thanks.
Here's a quick example on how you could do it (to be continued to achieve your particular needs)
package
{
import flash.text.TextFormatAlign;
import flash.text.TextField;
import flash.display.Sprite;
import flash.text.TextFormat;
public class LabeledCircle extends Sprite
{
private var textField:TextField;
public function LabeledCircle(radius:Number, label:String = "")
{
// Prepares the textField
var textFormat:TextFormat = new TextFormat();
textFormat.align = TextFormatAlign.CENTER;
textField = new TextField();
textField.defaultTextFormat = textFormat;
addChild(textField);
// Sets the default parameters
this.radius = radius;
this.label = label;
}
public function set radius(radius:Number):void
{
// redraws the circle
graphics.clear();
graphics.beginFill(0x000000, .5);
graphics.drawCircle(0, 0, radius);
// recenters the textfield depending on the radius
textField.width = radius * 2;
textField.x = -radius;
}
public function set label(label:String):void
{
textField.text = label;
}
}
}
Flare has a component which is similar to the concentric circle example in the link you have posted. See Layouts > CirclePack in the demo.
I am not yet sure what you mean by 'associating a number'. Try this: Rendering text on a path.
Actionscript Drawing API - example here
Degrafa - Graphics framework which makes the Drawing API easier to use and includes a circle class