Archive for August, 2007

The Special Theory of Relativity

Thursday, August 16th, 2007

This site is not a resource for information about the special theory of relativity. However, what better place to go for information then wikipedia?

The Special Theory of Relativity on Wikipedia

UML Class Diagramming

Thursday, August 16th, 2007

A colleague posted this on our internal forums, found it to be a very good read. Worth sharing…

IBM UML Basics: The class diagram

as3-collections hosted on code.google.com

Tuesday, August 14th, 2007

Instead of posting a bunch of crap here about this project, I am just going to develop it, and then post when I feel it is important. The links relevant to the as3-collections project are the google code project home, the documentation, and the source code which you can browse:

Google Code and Repo Browser:
http://code.google.com/p/as3-collections/
http://as3-collections.googlecode.com/svn/trunk/src/com/as3collections/

Docs:
http://specialrelativity.org/projects/as3-collections/docs/

If you have an SVN client and would like to check out the code, you can do so with the following line:

svn checkout http://as3-collections.googlecode.com/svn/trunk/ as3-collections

Sorry for tearing down those other posts.

-M

Discussion: Collections in Actionscript 3?

Sunday, August 12th, 2007

I’ve seen a few collection frameworks in Actionscript, but you never really here of any of them being used as a standard. That kind of acceptance is hard anyway, but I’m really surprised that it hasn’t happened in the community. I think for the longest time the argument was simply that having that kind of extra weight was unjustified, and was strengthened by the fact that Arrays quite simply are much faster. But those are forgotten times, aren’t they? I mean with everyone on the OOP kick. I don’t know, I wanted to put some stuff together just to see how useful a collection framework would be, and how much of a performance hit I would take by using one.

Rather then adopt one I decided to take a stab at implementing it (silly me), after all it’s just for experimenting right now. I’m opening this thread as a discussion about what I plan on doing, and what I am thinking. I will work on it gradually, each time I change a major component, or release a new component altogether it will be in its own post.

Now unfortunately, I’m just not that smart :-\, sorry. So I’ve spent some time looking into it, and picked up some books. I wanted to make a note of one of them though, because it has proven to be incredibly helpful. It’s “Data Structures and Algorithms with Object-Oriented Design Patterns in Java by Bruno R. Preiss”. Check it out. If you’ve read it you would notice that it is an obvious source of the inspiration for my code. The thing to remember is that Java and Actionscript, while similar in syntax, are two very different languages, so my code will differ where things can be done in a way that is more appropriate for Actionscript.

For simplicity and the sake of performance I am going to stick with using Array and Dictionary objects for the implementations of the different data structures.

My initial effort is to get the following done relatively soon.

  • Collection
  • AbstractCollection
  • Stack
  • Queue
  • Tree
  • BinaryTree

There is a lot more to be done then that, but I think its a fair list to commit to for now. Of course any of these could probably be put together quickly if need be, however I want to focus on making a useful framework of collections, something reliable.

I decided to set up a google code project for it, who knows, may just be wasting time.

project:
http://code.google.com/p/as3-collections/

svn:
http://as3-collections.googlecode.com/svn/trunk/

So, if you don’t here from me for a few days, you know why :) Although I’m going to try and get at least the basic containers out tonight, or tomorrow morning.

Easy Cursor Management

Saturday, August 11th, 2007

This came up because we decided to refactor the cursor management in the project that I am on at work. It works, but the project has changed a lot since we first started writing it. We had to make changes to the way it worked, as well as accomodate for unexpected changes to the design. Like I said, it works, but it wasn’t as flexible as we would have liked. So I came up with this solution, and think it’s cool enough to share.

Lets take a look at the cursor manager stuff along with an example.

The example is going to be the most simple drawing app you have ever seen. It has two tools a rectangle drawing tool, a line drawing tool, and a canvas to draw onto. When you select a drawing tool and then mouse over the canvas you will see the mouse cursor change to a cross hair, indicating that you are in drawing mode.

Below is an example of the cursor demo in action.
[kml_flashembed movie=”http://specialrelativity.org/blogAssets/CursorDemo.swf” height=”306″ width=”426″ /]

The focus will only be on the code that is related to the cursor stuff we are talking about. We will be relying on event bubbling and a technique I talk about in this post.

(more…)

About

Wednesday, August 8th, 2007

“I’m Michael Avila, I’m currently employed at Schematic LA, where all the bitchiz and pimps are yo. Now youza gonna read my articliz fasho, oh-yo!”

Quoted from a hilarious friend… you know who you are.

I’m Michael Avila and I work as a software developer for Schematic which is located in Los Angeles, California.

Understanding Scrolling

Monday, August 6th, 2007

I have written a simple scrollbar to work with our examples. The only thing to note about the scrollbar is that it has a percent property which is a number from 0 - 1, and also that it broadcasts ScrollbarEvent.SCROLL events. You can see an example of it below, slide the marker back and forth and you’ll see the percentage displayed just above it.

[kml_flashembed movie=”http://specialrelativity.org/blogAssets/ScrollbarDemo.swf” height=”40″ width=”110″ /]

What we will spend most of our time talking about is how to find the position of the content you are scrolling with the scrollbar. We are going to use a very simple equation to solve this problem, and it looks like this:

content.position = content.iposition - ( scrolling.percent * content.scrollable )

Like I said a second ago this is really simple. We are going to briefly go over the different elements within it, and then take a look at some code.

  • content.position is the position of the content based on the scrolling, and is obviously what we are looking for.
  • content.iposition is the position the content would be at if no scrolling were applied to it.
  • scrolling.percent is the percentage of the content’s scrollable area which will be visible. This is usually provided by the scrollbar.

and finally

  • content.scrollable is how much of the content can be scrolled.

Now most of those are pretty simple, but I think the content.scrollable could use a little more definition. Scrollbars usually allow content that overflows some viewing area to be scrolled and seen. The area of the content that is actually viewable we’ll refer to as content.viewable. How much of the content can be scrolled can now be defined as:

content.scrollable = content.size - content.viewable

So that is enough of that, we want to see it in code. I’m going to build off of some of the more common techniques within flash. For our demo we will have content, which is 300×300 and contains 3 rectangular graphics stacked on top of one another. The viewable area of this content is going to be a 300×100 mask. The initial position of the content is going to be right at the top of the mask. And again we will be using the scrollbar I put together. You can see it at the top of this post. This will all exist in our ScrollbarContentDemo class.

There is a full listing of the class here: ScrollbarContentDemo.as. We are only going to go over the important part right now.

So essentially we create three different elements. The scrollbar, the content, and the content mask. Then we wait and listen for the user to scroll the scrollbar. When the scrollbar is scrolled is where we implement our equation from earlier. I’ll list these two lines.

var scrollable:Number = content.height - content_mask.height;
content.y = content_mask.y - ( scrollbar.percent * scrollable );

These lines should be familiar since we just talked about them a second ago. First we find how much of the content is scrollable, and then we apply the equation to the content. Here is the swf file so you can see the output.

[kml_flashembed movie=”http://specialrelativity.org/blogAssets/ScrollbarContentDemo.swf” height=”100″ width=”310″ /]

Here is the source code for both demos, the scrollbar itself will be listed first since it is used in both.

ScrollBar.as
ScrollbarEvent.as

ScrollbarDemo.as

ScrollbarContentDemo.as

Basic Concepts of Errors

Monday, August 6th, 2007

There’s not really that much out there on errors in Actionscript 3.0 other then the documentation which can be found at this link: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Error.html

So the goal here is to provide you with a better understanding of errors in general. We will touch on why, when and where we throw errors as well as what we can do to make those errors more effective. When used appropriately errors can do a lot for your code. By forcing a situation to be handled (throwing the error) you are making your system more reliable. If those errors convey the issue properly you are making your system more maintainable. It seems odd to learn to love the things you hate… but work with me here… :-)

I’m not going to go over the details of how you throw an error in code, check out the documentation as there is already plenty of info on that.

Errors are usually thrown from code that for some reason cannot complete execution. In most cases the situation is either the code not being used properly, or the code not being in a suitable state for execution. To illustrate this, suppose we are constructing the navigator of a website. The job of the navigator is to handle the details of moving between the pages in the website.

Our navigator’s navigateToPage( pageID ) method will throw two errors. One error will be thrown if you call navigateToPage with a pageID which does not exist, and the other error is thrown if you call navigateToPage while the navigator is already in the process of navigating to a page. The first error is an example of the code not being used properly, the second error is an example of the code not being in a suitable state for execution.

Errors themselves have two purposes. They notify the system that something has gone wrong, and provide the person maintaining the code in that system with information which helps them resolve that error. We can illustrate this by again taking a look at our navigator example from earlier.

Any time an error is thrown using throw the system is automatically notified. That means it’s really just about providing the right kind of information.

Remember that our navigateToPage method throws two errors. We could simply just provide a message for both errors that says “Navigator could not navigate to the page.”, or we could provide a little bit of information that helps narrow down the error. For instance, if an invalid page id is specified we could provide a message that says “Invalid page id specified”, and if the navigator is already navigating to a page we could say “Navigator is already navigating to a page”. Nothing new or complicated with any of this. It’s mostly just important that the issue that caused the error is immediately identifiable.

There is my view on errors. Here is a section on some basic things to think about regarding errors…

  • Do NOT ignore errors by having an empty catch block. Respect the error for what it is, and resolve it.
  • Remember that when you throw an error from a method of an object that the object and application can continue running. Always leave the object in a desirable state even if the desired state is some pre-defined undesirable state.
  • If an error is not caught it will throw a dialogue which lists the error’s name, the message and then the stack trace of where the error occured. This means that when throwing an error there is no need to specify where the error was thrown from.

Detecting key combinations

Sunday, August 5th, 2007

Actionscript 3 introduced a new system of events for dealing with when the user interacts with our applications. This system came in the form of InteractiveObjects and the various events that they broadcast. InteractiveObjects are what the user interacts with (go figure?). Interaction comes in a few flavors: mouse clicks, key presses, focus and tabbed. I’m not going to get into detail about any of these, we are going to talk about how we usually handle basic interactions and how to introduce a method for detecting key combinations that makes sense.

InteractiveObjects cannot be instantiated. They are instead integrated as part of the display api, which makes perfect sense.

Generally when you are listening for the usual interactions, such as key presses and mouse clicks, this is how it would go:

..

   addEventListener( MouseEvent.CLICK, clicked );

..

private function clicked( event:MouseEvent ):void
{
   trace( "Ack I was clicked!" );
}

This would usually be located somewhere within your subclass of one of the InteractiveObject types. To keep with this way of handling interactivity events here is the solution we are going to go with.

We will have a KeyComboDispatcher class. When you create an instance of KeyComboDispatcher you pass it the InteractiveObject instance which owns it. The KeyComboDispatcher class will listen to all events that its owner dispatches. When the KeyComboDispatcher recognizes a combination of keys that have been pressed it will dispatch a KeyComboEvent with information about the combination that was pressed.

You are able to register key combinations for the KeyComboDispatcher to listen for using its addKeyCombo method. The addKeyCombo method allows you to name the combination and set the key codes in their correct order. The KeyComboEvent that is broadcast if the combination is detected contains the name that you gave the combination, and the key codes that make up that combination.

And that’s pretty much how it works, the two classes are well commented so you should be able to learn their inner-workings by following the comments. You can find those classes here

KeyComboDispatcher.as
KeyComboEvent.as

Example use of Event bubbling

Sunday, August 5th, 2007

A few days ago a good friend of mine Ruben and I were talking about Events. Ruben was putting together a post about events. While we we’re talking about it we got into a discussion about bubbling events and cases where it is appropriate. You should definitely check out Ruben’s post he makes good points and forwards you on to some good resources.

I’m just going to continue on with a conversation we were having while he was writing his post. Hopefully you have read Ruben’s post as well as the adobe documentation on event handling since I’m assuming you know what event bubbling is and how to work with it.

So how about we put together a situation? We are making a web site. One of our goals is to allow flexibility in the look and feel as I guess it always is right? Here is the approach we are taking.

We have a Main file which creates an instance of our site’s controller. The Main class adds the view of our site to the root display list and then runs our site. We will take all of this a little further by saying that the site’s controller has a navigator property (which we won’t discuss) that is used to navigate between the pages of your site and contains the current page being viewed. The role of the site controller then is to prepare the different elements of the site, the screen, the navigator, the pages, and to facilitate what communication is to happen between them.

We are going to leave out a lot of the boring details since we are talking about a pretty specific piece of this whole system. One thing that is assumed is that when you run the site it builds the landing page and then navigates to it. All user interface elements of the site exist within the site’s screen.

In our look at this website we are focusing on one section, how the UI interacts with the controller. If you take a look back at what the role of our site’s controller is you will notice that all we really need to communicate with is the navigator, since all of the look and feel details are part of the page system and not part of the site’s controller.

(more…)