Work on Log In Boxes - Action Script

I spent a few hours tonight putting to use some of my new-found Action Script knowledge. I was able to create a new Class object (the InBox) and then set up an Array to be able to display/use as many of these InBox objects as I need in the future.

Here is a set of five of them displayed in a row:

The idea is for one box to be the focus at a time (you can see the third box highlited at the moment) and when the user types a letter/number it fills in the box and moves its focus on to the next box. (The actual typing and inputs have NOT been worked on yet)

Two things HAVE been accomplished tonight.

First, the InBox Class was created:

In this section of code, (left), you can see some of the basic properties of this class.

line 11: TextIn.png is the frame graphic that you see on the actual chalkboard screen above.

line 17: is the text field called "output" that displays the letter in the box. line 28 sets the initial letter to "A" for now.

line 21: the "Focus" variable tells if this particular InBox has the focus or not. line 27 sets it to "false"

line 18: is a random number that is either 1,2,3, or 4. It is used starting at line 34 to determine the orientation of the frame. (I randomly flip each frame so that every InBox displayed doesn't look identical.)

(this is only part of the code for InBox)


Second, I also created a set of ARRAYS:

This is so I can easily place multiple InBox objects without having to type in code separately for each one. This example currently places five InBox blocks. The _boxPositions array has the x and y coordinates of the five blocks (you can see they are all at y = 100, which puts them in a horizontal line). In the middle you see a "for" loop that goes from i = 1 to the length of the _boxPositions array... then each InBox is added to the scene, and then pushed onto the _inBoxes stack so that I have access to those boxes later. (For example:If I enter the command " inBoxes[2].focusOn() " it will now set the focus on box index #2 (which is really the THIRD box, since the first box is called box #0)... which just happens to be the reason why box #2 is glowing in the picture at the top of this blog entry!

The idea is that now I can just set up the array to display any combination of InBox boxes, depending on the nature of the input that I am looking for. Log in names will have seven characters, for example. Log in keys from completion of lecture notes will have four characters.

Time: 3 hours

 

Photoshop Work --> "chalk log-in box"

I spent about an hour this evening in Photoshop creating a little log in box graphic. Almost everything seen in this image that is black will be transparent.

I might be using this in my Flash programs. My plan is to place one of these on the screen wherever their is a location for the user to enter a single letter or number. It will serve as a prompt.

For example: since the user name is exactly seven characters long, there will be seven of these "frames" placed next to one-another to prompt the user to type in seven letters/numbers. Below that there might be a four-letter log-in key, requiring four more of these frames. As the user types in letters, each block is "highlighted" in succession and then filled in with the key-press.

The sound FX that I downloaded previously are to be used to signify a "legal" key press or an "error" key press.

Time: 1 hour

Sound FX Downloads

I found this sight for sound effects to download.

 

 

freeSFK.co.uk

 



I just now downloaded a chalk-stick sound. I am not sure if I am going to use it yet.

ADDENDUM: I spent about an hour browsing various sounds on this web site and downloading a few that I might use for key presses and error sounds. I might be back here again some day.

Time: 1 hour

Flash Builder / Action Script Progress

This weekend I spent some time working with Flash Builder and Action Script. I almost want to say that MUCH TIME WAS WASTED.... But, I can not really say that since I LEARNED MUCH. There are a couple things I want to pass along from this (until you get involved in this sort of programming, it may not make sense to you... but, if you DO try it out, you will appreciate these little kernels of wisdom.)

(1) Flash Builder has a little BUG - If you have ANY ERRORS in your Action Script .as file there is a chance that Flash Builder will NOT COMPILE your file and run it for you. IT MAY SIMPLY RUN THE LAST, ERROR-FREE COMPILATION. THIS CAN CAUSE YOU TO BELIEVE THAT YOU ARE TESTING YOUR NEW CODE/CORRECTIONS, WHEN IN FACT YOU ARE ONLY SEEING THE RESULTS OF PREVIOUS CODE. I wasted many hours, and ended up deleting my previous project (see prior blog post) because I was so confused by this. THE KEY to avoiding this is to BE AWARE that you may not be looking at the most recent compilation. You can fix this by addressing all of the little "error" icons that are listed down the side of your .as program prior to running it in debug mode.

(2) GLOBAL VARIABLES - I needed a global variable to keep track of the LOG-IN NAME of the student. This name is to be displayed at the top of the screen at all times. Since I am using a system that "swaps out scenes" as the student progresses, I need to have a global variable that remembers the student's name the entire time, and can be accessed by various objects on the stage so that the name can be displayed. Here was the solution: Within the top-level code (called the "application class") I defined the variable as shown in the 4th line of code here:

The variable is "usersName" and I set it to public/static so that it can be accessed throughout the entire Flash program. Above you can see it in the main (application) class "CWVirtualLabGenaric" which is going to be the actual name of the .swf file once it is compiled and saved to my website. (Here you can see me setting the value of "usersName" to the word "<login>" which will then be the first 'name' that appears on the screen when the students open up the program.)

Later in the file I use it in the LogIn Class, which is the "first scene" that is displayed on stage.

On the 9th line of code above you can see that I am setting namefield.text to equal the contents of CWVirtualLabGenaric.usersName. This is done WITHIN the logIn object. The key to this was that in order to access this variable from within another object I had to type in the name of the application class "CWVirtualLabGenaric" first. It took me a couple hours to figure this out, with help online.

Now I can use global variables to keep track of other things, such as student's scores/grades, throughout an entire activity. Very important indeed!

(3) I have put this all to work in a new file that marks the very start of my "Virtual Labs". In this file there are TWO SCENES, in which the first one is the student logging in. Once he logs in the first scene is deleted, the user name is updated, and then the second scene is displayed. This is a very important step as now I can simply repeat the process for as many scenes as I need in any given virtual lab/tutorial.

 



If you look at the code above you can see that _logIn is first placed on the "stage" and then that object is displayed and "played" until the user has logged in. Once he logs in a "logInComplete" event signal is sent, which tells the program to run the SwitchSceneHandler, which swaps out the _logIn scene for the next scene, which I actually call _sceneOne. Later I will actually program SceneOne to display some sort of information that the user can interact with. The process will be repeated, with various scenes, until the user has reached the end of the lesson/lab.

Time: 8 hours

My FIRST ColbysWorld Flash File

I have successfully posted a running Flash file with the first steps designed for my project.

Here is what the running file looks like so far:

milestones passed with this posting:

(1) I have completed the Photoshop tweaking of the "frame" border to something that will most likely be a working format. (I added a "rubber bumper" around the border, a metallic/worked texture to the border, and the name tag has texture/drop shadow)

(2) Wrote my first 100 lines of Action Script for my project.

(3) embedded the frame and blackboard .png images. (embedding means to make the item an actual part of the .sws flash file itself so that the images do not have to be saved separately and stored in some other location on my server.)

(4) embedded the chalk Font. (If I don't embed the font then computers will likely use some default font, risking the project to come out not looking correct. Words could be too big, off-centered, etc. Plus, I like the chalk-looking font.)

(5) successfully displayed, formatted, and centered a text field.

(6) was able to get my flash file to post on colbysworld.net

NOTE: The word "DENNIS1" is an example of what a log-in name will look like. I want the student's names to be posted like this to help me monitor them while they are in the computer lab. I plan on making all log-in names exactly seven characters long.

Time: 4.5 hours

Interactive Frame - model 1.2 designed

I spent some time today on both Adobe Illustrator and Adobe Photoshop trying out various versions of a "frame" to place all of my interactive tutorials within. (It turns out that Photoshop was the easier program to use for this purpose.)

Here is my first version of a frame:

At the top is the largest "border" because that is where the main control buttons will go. I will have at least one button to "play" or advance forward... and one button to jump "back" a step/screen incase the student wishes to replay something.

The black rectangle at the top /enter is a "name tag" in which the student's log-in name will be displayed while they complete the tutorials. I want a way to monitor the students while they are in the computer lab taking the "puzzlers" for their grades. (I don't want a friend logging in for them to earn their grade.)

Time: 4 hours

My Website is UNBLOCKED

It turns out that it wasn't that hard to have my website unblocked.

I just needed to get my Principal's permission to unblock it. I found out on Sunday that my website was blocked... emailed the technology department that evening... Tuesday afternoon I heard back and forwarded an email on to my Principal. By today (Wednesday) students had access to my website.