ActionScript

Unit 4: Using Text, Dates, Math, and Paths

Topics

• Creating objects in Flash

• Formatting TextFields with TextFormat objects

• Creating TextFields at run time

• Using the Date class to display date and time information

• Creating random numbers and integers

• Understanding nested Timelines and their paths

Formatting TextFields with TextFormat Objects

What is an Object?

• “An object is an instance of a class"• A class describes a category of things

• It's not the thing itself

• A Flash symbol describes a category of things• You don't put a symbol on the Stage, you put an instance of that symbol on the Stage

• Symbols are classes, instances of it are objects of that class

What is a Class?

• A class is a blueprint of the variables and functions to be attached to each instance ("object") of that class• Property: a variable attached to an object, describing its

characteristics

• Method: a function attached to an object, enabling its behaviors

How Do I Create an Object?

• Objects may be instantiated visually or through code• Not all objects can be created both ways• Visual creation only

• Button symbol instances• Insert New Symbol

• Visual creation or ActionScript• MovieClip symbol instances

• Insert New Symbol• createEmptyMovieClip, attachMovie()

• TextField objects• Text tool• createTextField()

• ActionScript only (because they're not visual)• TextFormat, Date, ColorTransform, Sound, Array, etc.

Clase Cómo se crea la instancia

Button Nuevo símbolo o Convertir en símbololuego, se arrastra al escenario

MovieClip Nuevo símbolo o Convertir en símbolo luego, se arrastra al escenario- o -this.createEmptyMovieClip()this.attachMovie()this.duplicateMovieClip()

TextField Herramienta Texto- o -this.createTextField()

TextFormatDate

TransformColorTransform

SoundArrayObject

var instanceName:ClassName =new ClassName();

How Do I Create a Non-Visual Object?

• You call a class name as a function, preceded by the new keyword

• A new instance of that class is returned from this function call

• You assign it to a variable … it's instance name

var instanceName:ClassType = new ClassType();

• To create a TextFormat object

var tfFormat:TextFormat = new TextFormat();

How Do I Format a TextField Using Code?

• TextFormat objects have the same properties you might otherwise set using the Properties panel• color, font, url, bold, align, leading, etc

• setTextFormat() applies a TextFormat object's properties to a TextField instance

var tfInputStyle:TextFormat = new TextFormat();

tfInputStyle.font = "Courier";

tfInputStyle.bold = true;

txtUserName.setTextFormat(tfInputStyle);

Formatting TextFields Using ActionScript

• wt2-4.fla

• var thisFormat:TextFormat = new TextFormat();

• with(thisFormat)

{align = "right";

bold = true;

italic = true;

color = 0xFF0000;

size = 18;

font = "Arial";

}

set property values

• Run now• txtField1.setTextFormat(thisFormat);

• Aplicar al Field 2 y al Field 3 en diferentes tiempos

wt4-1.fla

Creating TextFields using ActionScript

How do I create a TextField using ActionScript?

• createTextField() is a method of the MovieClip class• Call it to create a TextField in a MovieClip

this.createTextField("instanceName",depth,x,y,width,height);

• this refers to the object your code is running inside, often the main document Timeline, attaching the new TextField to the Stage

• type property determines whether TextField is "input" or "dynamic"

instanceName.type = "input"; // or "dynamic"

• wt4-1.fla• Crear instancias en crear objetos

• comentar la declaración, eliminar objetos diseño

• this.createTextField("txtField1", 1, 20, 40, 200, 30);

• this.createTextField("txtField2", 2, 20, 70, 200, 30);

• this.createTextField("txtField3", 3, 20, 100, 200, 30);

• Establecer propiedades• txtField1.text = “UNO";• txtField2.text = “DOS";• txtField3.text = “TRES";

Walkthrough 4-2

Displaying Date and Time Information Using Date Objects

How Do I Tell What Time and Date It Is?

• Date objects have methods providing date/time info• getMinutes(), getDay(), getDate(),

getMonth(), etc

• Months begin at 0 (December is month 11)

• They may also be set to a specific date/time• setYear(), setMonth(), setDate(), setDay(), etc

• They support Coordinated Universal Time (UTC)• Milliseconds elapsed between midnight 1/1/1970

and whatever time has been set for the Date object

• getUTCHours(), setUTCDate(), etc

How Do I Quickly Assemble Several Strings?

• Compound concatenation works like other compound operators

var timeString:String = "The time is: ";

var dtNow:Date = new Date();

timeString = timeString + dtNow.getHours();

– means the sames as –

timeString += dtNow.getHours();

• Saves a lot of typing when formatting date/time info

LA FECHA …

• var timeString:String = "The time is: ";

• var dtNow:Date = new Date();

• timeString = timeString + dtNow.getHours();

• - significa lo mismo que -

• timeString += dtNow.getHours();

• Para mes/fecha/año:

• var txtDate:TextField;

• var dateString:String = "";

• var dtNow:Date = new Date();

• dateString += dtNow.getMonth() + "/";

• dateString += dtNow.getDay() + "/";

• dateString += dtNow.getFullYear();

• txtDate.text = dateString; // podría mostrar “27/10/2010"

• Assembling Date and Time Information • Create current Date objects

• Create date/time specific Date objects

• Calculate elapsed years

• Assemble formatted date/time information

Walkthrough 4-3

Generating Random Numbers and Integers

What is a “Static" Class?

• Math is a static class• You do not create Math objects

• PI is always PI, and cosines are always figured the same

• Classes are used "statically" when there's only one of whatever they refer to• Math, Mouse, System, Key, Stage, etc

var matMyMath:Math = new Math();

var circumference:Number = Math.PI * (2 * radius);

How Do I Calculate a Random Number?

• Math supports several useful methods including• random()

• Returns a random value between 0 and .9999999999999999

• round([number])• Rounds a number to the nearest integer and returns it

How Do I Calculate a Random Number?

• Math can be used to• Generate a random number ( 0 to .9999999999 … )

var random:Number = Math.random();

• Generate a random number in a range ( 0 to 9.99999 … )var random:Number = Math.random() * 10;

• Generate a random integer in a range (0 to 10)var random:Number = Math.round(Math.random() * 10);

• Generate a random integer in an offset range ( -5 to 5 )var random:Number = Math.round(Math.random() * 10) – 5;

• Generating Random Numbers • Generate random numbers

• Generate random numbers in a range

• Generate random integers

Walkthrough 4-4

Understanding Nested Timelines and their Paths

What Do _root, _parent, and this Mean?

What Does an Absolute Path Look Like? (not recommended)

What Does a Relative Path Look Like? (recommended)

Is it Safe to Use Absolute Paths?

• Understanding Nested Timelines and their Paths • Change properties between objects using relative

paths

Walkthrough 4-5

Summary

Summary

• “An object is an instance of a class"

• Objects are created visually or by code, and some either way

• Insert New Symbol

• createEmptyMovieClip(), createTextField()

• TextFormat objects format TextField objects

• Date objects inform about now or a date you set

• Math is a static class of useful functions and constants

(properties)

• var integer0to10:Number = Math.round(Math.random() * 10);

• One object refers to properties or methods of another through

an absolute or relative path

• Displaying Date Information in Created TextFields, and Randomly Positioning MovieClip Instances • Create TextFields

• Format date/time information

• Assign random _x and _y positions

Lab 4