AS3 Simple Grids

Sat Nov 14 16:16:16 2009

I have decided to share a class with you that I recently developed for an ActionScript project that required a grid layout of MovieClips. Making grids in AS3 isn't really that difficult, but the class I've developed will save me a lot of typing and since building grid layouts is something that I may do a lot more of in future projects it seemed like a sensible thing to do.

It is quite a simple class but may come in handy from time to time. Please feel free to edit the code and do as you will. It's usage is simple. Just import it, create however many instances of an object you want to have in your grid, and apply the public static function createGrid(); from the Grid class. In the example grid below I used dark grey, 40 x 40 px MovieClips

Get Adobe Flash player

Grid.createGrid(); The parameters are (1:StageObject, 2:Array, 3:{Object})

Instructions of Use

1. The StageObject is simple. Just pass the stage of the first MovieClip your are throwing inside the grid. This will give us the ability to call the public static method without instancing the class itself, which I always find beneficial and try to do when I can.

2. The Array should be an array of all the names of the objects you want to place inside the grid. Objects will be ordered in the same order as they are placed inside this Array.

3. The Object can contain any of the 4 options available, which include col, spaceX, spaceY, and centered. col receives a Number and defines the number of columns the grid should have. spaceX and spaceY also receive a Number and respectively control the vertical and horizontal spacing between each object inside the grid. In other words, they control how big the gaps are inside the grid. The final parameter center:Boolean gives the option to offset the grid to the right by half the width of each instance fed into the array, so that the grid appears centered. If no parameters are given (Note* curly brackets are required {} even without parameters), the grid will set to a default of a non-centered, 6-columns grid with 10px vertical and horizontal spacing

Example Code

Grid.createGrid(this, nameArr, {cols:10, spaceX:10, spaceY:10, centered:false} );

For more info, just take a look at the fully annotated example files I've set up. They can be downloaded here

I would love to hear your opinions about this, but since I don't normally share my code, please be gentle with any criticisms. If you would like to host this code on your own website, please make sure to credit back to yours truly. Happy grid making!

New Apple Magic Mouse

Fri Nov 6 00:18:04 2009

I have to admit that I am a very big fan of Apple. Anyone who owns an Apple computer will probably comment on how reliable they are. However, with that said, I have to confess that I never really been impressed by the quality of Apple mouse technology.

About a year ago, I procured with great delight an Apple 'Mighty Mouse'. At the time, I was using Illustrator an awful lot and the 360 degree scroll ability of the Mighty Mouse was very desirable. However, now I have to say it is a constant battle trying to keep the scroll-ball working. Sending it to Apple for a clean every few months (maybe more often) just to have it scroll again would be an immense pain in the proverbial backside, and taking it apart to clean those little roller things inside time after time just to have it cease up on you again is tiresome, time consuming and down right infuriating, especially considering the price one costs. Let's face it, Apple products aren't cheap and you would expect them to do what it says on the tin.

With the new Apple Magic Mouse it looks as though Apple has realized their mistake and have completely got rid of the scroll-ball design. The Magic Mouse will interpret user input such as swipe and scroll actions reminiscent of the Apple iPhone, which although gimmicky, will surprisingly shave import seconds off your user experience.

If and when I come around to purchasing one, I will undoubtedly write a review here. Until then you can find more info at the Apple Magic Mouse webpage

Remove Spaces in PHP Strings

Mon Oct 26 01:07:57 2009

I'm still very much at the beginning of learning PHP and while programming this blog, I came across a wonderful PHP function that can be used to remove/replace spaces (amongst other things) in strings. I know it will come in handy for someone. It's called str_replace(); The syntax is as follows:

str_replace(item to be replaced, item to replace with, string to commit this function);
<?php	
 
//creating a string held inside a variable.
$origString = "This is the original string.";
//display the string.
echo $origString;

//replace " " width "". In other words, replace spaces with no spaces.
$newString = str_replace (" ", "", $origString);
//display the new string.
echo $newString;

?>

Counting PHP Array Repetitions

Sat Oct 17 04:07:54 2009

The ability to check an array in php and see if the items it contains reoccur somewhere else inside the array is something that comes in handy once in a while. If for example, you have a list of dates and you wanted to count how many times the same date reoccurs in the array and display the results, this is what you would do.

<?php
 $arrayToCount = array("1981","1973","2010","1973","1981","1973");

 foreach( $arrayToCount as $val ) {
   if ( array_key_exists( $val, $arrayCounter) ) { 
      $arrayCounter[$val]++; 
   }
   else { 
      $arrayCounter[$val] = 1;
   }
 }
	
 while( $element = each( $arrayCounter ) ){
 echo $element[ 'key' ].' ('.$element[ 'value' ].')';
}
?>

As is, the results of this would look like this

1981 (2)
1973 (3)
2010 (1)

Here's what's happening. Obviously, we have an array containing dates that we want to count shown on line 1. We use a foreach loop to run the contents of the loop for however many dates are contained inside the array. An if/else statement is used on line 4 through 9, which uses the PHP function array_key_exists()(line 4.), which checks to see if $val (the date being checked) matches a value previously looped through. If this function returns true the value inside $arrayCounter gets pushed up by 1 or ++ each time (see line 5). If the array_key_exists() on line 4 returns false, or in other words, no match is found, then the value 1 gets added to a new place in the $arrayCounter array. We then use a while statement to display each of the dates and their count values stored inside the associative array $arrayCounter(lines 12 ~ 14)

And that's about it. If you are new to PHP, I would recommend drilling this kinds of routine into your head and you'll get your head around it before you know it.

The Scope of Things

Wed Oct 14 02:20:48 2009

Sometimes it can be a little difficult to get the specific "child" you want in ActionScript 3 by calling its name directly. Also, the use of getChildAt() and getChildByName("") doesn't work because they are outside the scope of the current class in question. Well, this is where you could try casting.

For example, say that I have three classes. One called Main.as, one called Second.as and one called Third.as, each containing a single MovieClip containing a Square, Circle and Triangle respectively. Main imports Second and and Third and so becomes their "parent". The result is a Square, Circle and Triangle on the stage.

Now say that I want to access Third from Second to change the scale or some other property of Third's triangle. Well, I would need to use the this.parent.getChildAt(position).getChildAt(position) or maybe this.parent.getChildByName("second).getChildByName("triangle"), that is, if I had given them names. However, this is where you would run into problems. Flex/Flash just doesn't know what you are talking about. Instead, by casting all instances and clips to "MovieClip" and holding them inside variables, you will ensure that Flex/Flash knows exactly what you want to access and what type of object it is.

Here's what I'm talking about

    //this.parent.getChildAt(1).getChildAt(0) just doesn't work. It's outside the scope
    //of the class called Third.

    var sec:MovieClip = MovieClip(this.parent.getChildAt(1));
    var tri:MovieClip = MovieClip(sec.getChildAt(0));
    tri.scaleX = 2; 

I know that some will complain that there is a better way to code and a good coder wouldn't code this way, and I would say I agree for the most part. However sometimes, whether it be a quick fix, or a quick add-on to an existing application coded by someone else, sometimes this will come in handy. After all, we can't guarantee the work of others.

If you would like a closer look, I have provided some fully annotated files here

Most recent posts

  1. Convert Font Suitcase to TTF in 3 Easy Steps
  2. Rain or Shine - Weather Forecast Available Now!
  3. Getting around Apple's silly rules for iOS 10
  4. Localising App Names for iOS and Android
  5. Today - Powerful To-Do App Now Available on iOS & Android

Search site:

Apps by Ubacoda.com

Click the app icons to see more info


Archives

Categories