Week 3: Drawing Application Part 3

Topics:

  • Homework Review and Troubleshooting
  • Programming Fundamentals:
    • Conditional Statements
    • Comparison Operators
    • Numerical Data Types
    • Mathematical Operators
  • Actionscript Fundamentals: Working with Dynamic Text
  • Drawing Application Part 3: Adding Clear and Line Thickness Settings

Programming Fundamentals

Before we go on to the next step of the Drawing Application, there’s a few basic programming concept we need to review.

Conditional Statements

If you took logic back in high school, these might ring a distant bell. The most basic conditional statement is an if statement, which runs code only if a certain condition is met:

if (something is true)
{ do something }

If you want to have other code run in the case that the condition isn’t true, you add an else statement:

if (something if true) { do something }
else { do something else }

To build your conditions, you are going to need …

Comparison Operators

Also from the pages of your high school text book, these symbols allow you to compare two values.

  • Less than
  • Greater than
  • <= Less than or equal to
  • >= Greater than or equal to
  • == Equality
  • != Inequality
  • === Strict equality
  • !== Strict inequality

The operators are used to compare the values of the expressions to the left and right of them. Take note of the difference between the assignment operator (=) and the equality operator (==). = is used to assign the value of the expression on the right to the left. == is used to compare the equality of two values. When you are comparing two things, never use =

So, if you want to see if one value is equal to another, use a comparison operator in a conditional statement like so:

if (value1 == value2) {
do something
}

Numerical Data Types

There are several different types that you can define as variables built into Flash.

  • Number – holds any numerical value, positive or negative, whole or decimal
  • int – positive or negative whole numbers
  • uint – unsigned whole numbers
You define a variable with a numerical data type like this:
var myNum:Number;

You can assign a value to the number at any point in your script:

myNum = 10;

You can also define the variable and assign a value at the same time:

var myNum:Number = 10;

Mathematical Operators

Once you start working with numerical values, you might need to do some math on them. You can use standard math operators to do this:

x+y;

You’ll need to capture this new value somewhere though, so you can assign the value of the mathematical operation to another variable:

z = x+y;

Just remember that the variable that you are assigning the value to needs to be on the left side of the equals sign:

x+y = z <--- wrong!

Other arithmetic operators:

  • –  Subtraction
  • *  Multiplication
  •  Division
  • % Modulo

Most of these whould be self explanatory, but the modulo operator may be new. This operator returns the remainder after the second operand has been divided by the first. For example, 4 goes into 10 twice with 2 left over – 10 % 4 = 2.

Actionscript Fundamentals: Working with Dynamic Text

Any text field on the stage can be altered with code if it is set to be one of the dynamic text types. For classic text this is the “dynamic” and “input” fields. When using TLF text, any of the types are re-writable with code.

First you need to give the Text Field an instance name in the properties panel.

Then, to change the value of the text, it’s a simple matter of accessing the text property of the field:

myTextField.text = "Some Text";

In-Class Exercise – Drawing Application Part 3: Adding Clear and Line Thickness Settings

All the above is going to help us do the next step in our drawing application project. This week we are going to add a button to clear the drawing from the screen and buttons to make the line thicker or thinner.

Homework

1. Take what you learned today about changing the line thickness, and add the ability to change the line color.

2. Based on your wireframes, create the interface design for your drawing application. Once again consider who you are making the application for. The type, size and placement of controls, instructions, icon style should be designed for your target user. Next week, bring a flash file that contains all the elements of your interface design ready to start coding!

This entry was posted in Lesson. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *