Easy ActionScript Chain Events

Fri Feb 5 15:19:45 2010

Ok, so this week I have been playing around with events and building all kinds of useless applications... and all while trying to further my education in the Flex Framework and Papervision 3D, which is all going ever so slowly. However, something interesting came from all my futility when I created a class that would pass multiple EventListeners together in a single sentence, giving you something that resembles the functionality of jQuery, albeit a lot less advanced. Allow me to explain...

FIrst of all, this class requires instantiation. Therefore, you will need the following import statement and the call for instantiation.

import Bind;
private var bind:Bind = new Bind();

Ok, so now that we have our Bind class ready, next we need something to test it on. Let's make a quick button.

var btn:MovieClip = new MovieClip();
btn.graphics.lineStyle(2, 0xffffff, .5);
btn.graphics.beginFill(0xCCCCCC);
btn.graphics.drawRoundRect(0,0,100,30, 10);
btn.graphics..endFill();
addChild(btn);
btn.mouseChildren = false;

var btnTxt:TextField = new TextField();
btnTxt.text = "Button";
var format:TextFormat = new TextFormat("Courier", 16, 0x333333);
btnTxt.autoSize = TextFieldAutoSize.LEFT;
btnTxt.setTextFormat(format);
btn.addChild(btnTxt);
btnTxt.x = btn.width/2-btnTxt.width/2;
btnTxt.y = btn.height/2-btnTxt.height/2;
btn.x = btn.y = 10;

Nothing special so far. Basically, all this code does is makes a slightly rounded rectangle and puts some text in it with the label 'Button'. We also set a TextFormat to set the style of the text and move the entire button 10px from top and left of the screen, just so we can see it properly.

Now, if we call the following code, the button will come to life.

bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

private function overHandler(event:MouseEvent):void{
   //do something
}

private function outHandler(event:MouseEvent):void{
   //do something
}

private function clickHandler(event:MouseEvent):void{
   // do something
}

Ordinarily you would write this...
btn.addEventListener(MouseEvent.CLICK, clickHandler);
btn.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
btn.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
instead of this...
bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

Quick example

The following example simply shows that in one line of code, you can add a remove multiple listeners from an object. Get Adobe Flash player

As you may see, the bind method allows you to string together Events and MouseEvents in one single sentence in the form of an object. Other parameters include "down" (MOUSE_DOWN"), "up" (MOUSE_UP), "move" (MOUSE_MOVE), "doubleClick (DOUBLE_CLICK), added (ADDED_TO_STAGE), enterFrame (ENTER_FRAME).

In addition to the bind method. there is an unbind method. If bind works the same as addEventListener, then unbind would be it's removeEventListener. In fact, not too surprising is the fact that both methods call add/removeEventListener.

I will try to update this class if I feel it is worth continuing, in which I case will write the version alongside the download below. It is currently version 1.0. If that is a different number to the one shown on the download link, then you will know I have updated it. On the other hand, I may never update it. In either case, I hope you enjoy it. I really don't expect you to use it in the place of addEventListener, but it should be good educational material.

Anyway, that's all for now, so get downloading it and see what you think.

Download Bind.as (Version 1.0) Class here

Update to Clock Class

Tue Jan 26 08:57:45 2010

Get Adobe Flash player

This is just to let you know that I have updated the DigitalClock class that I posted a little while back. The class is now called simply Clock.as. New functions include clockAnalogue() and clockDigital(). Just take a look below to see how to use them.


import Clock;

var clockAnalogue:Clock = new Clock();
var clockDigital:Clock = new Clock();

clockAnalogue.tickAnalogue(hourhand, minuteHand, secondHand, true);
clockDigital.tickDigital(textField, textFormat, true);

In the above code, we first import the Clock class and make two instances of it. One called clockAnalogue and the other clockDigital. These names can be anything you like.

Next we call the tickAnalogue function on the clockAnalogue instance. On the instance clockDigital, we call the tickDigital method. tickAnalogue and tickDigital tell the clock class whether it will be an Analogue or Digital style clock.

tickAnalogue takes four parameters, the first 3 are mandatory MovieClips and the last parameter is optional. The first paremeter represents the hour hand, the second the minute hand, and the third represents the seconds Hand. You can draw these just in code or create them in Flash, and then just pass them in.
The fourth and final parementer is just a Boolean. Setting it to true gives you GMT time. false gives you local time.

The tickDigital method takes 3 paremeters. The last of which is a Boolean and sets GMT or local time in the same way that it does in the tickAnalogue method. The first parameter takes the TextField that will display the time. The second takes a TextFormat to style the time.

..and that's it folks. Again, I hope you find this useful.

Download the Clock.as Class here

Little Known CSS List Styles

Sun Jan 24 02:38:47 2010

Even though HTML is not a programming language, but rather a markup language, it sometimes amazes me how much HTML has to offer. Just today, for example, I was reading a magazine and discovered some very useful CSS list styles. Most of them I has already seen, but those I hadn't still looked useful. As I live in Japan, the Japanese list styles look particularly useful. Anyway, just take a look below to check them all out. Just click on any of the links to see the style effect in real time.

Useful List Styles

  1. list-style:none;
  2. list-style:circle;
  3. list-style:disc;
  4. list-style:square;
  5. list-style:lower-greek;
  6. list-style:lower-roman;
  7. list-style:uppper-roman;
  8. list-style:lower-latin;
  9. list-style:upper-latin;
  10. list-style:lower-alpha;
  11. list-style:uppper-alpha;
  12. list-style:upper-latin;
  13. list-style:lower-latin;
  14. list-style:decimal;
  15. list-style:decimal-leading-zero;

Useful List Styles in Japan

  1. list-style:cjk-ideographic;
  2. list-style:hiragana;
  3. list-style:katakana;
  4. list-style:hiragana-iroha;
  5. list-style:katakana-iroha;


To use these styles, either put style="list-style:'style';" on the tag you would like to style. Otherwise, import a external stylesheet or use the styles tags at the top of your HTML page and write li{list-style:'style';}

As you can see, there are some really useful ones. It is just such a shame that most coders only get to use some more than others. I would love to see a wider use of these incorporated into the designs of more of the websites that I see on a daily basis. It just seems such a waste not to use them!

ActionScript 3 Digital Clock Class

Thu Jan 21 04:10:47 2010

Something as simple as putting the time on your site shouldn't be a difficult task and so I thought I would share a quick class with you that when instantiated creates and Textfield and tells the current time.

Here's the code.

import DigitalClock;

var clock:DigitalClock = new DigitalClock();
var clockGMT:DigitalClock = new DigitalClock(true);

addChild(clock);
addChild(clockGMT);
clock.x = 10;
clockGMT.x = 100;
	

Here's the result

Get Adobe Flash player

In the example above, we import and make two instances of the class DigitalClock. I have named them 'clock' and 'clockGMT' for obvious reasons.

You will noticed that we pass the Boolean true to the clockGMT instantiation to create a clock that displays Greenwich Mean Time (GMT) which is the local time in the UK. If you don't pass true or false the class will default to the local time (false) of the computer viewing it.

After that, all that's left is to add the clocks to the display list using addChild() passing in the name of each instantiation. I have also set the x position of the clocks so they don't appear on top of one another.

Download the DigitalClock Class here

Getting MySQL Auto Increment

Tue Jan 12 14:52:00 2010

If you have ever written a program that connects to a database using PHP, then there may have been times when you wanted to find the next available Auto Increment value in an MySQL database. The code below will allow you to do just that and it's very simple to use.

$row = mysql_fetch_assoc(mysql_query("SHOW TABLE STATUS LIKE 'votes'"));
echo $increment = $row['Auto_increment'];

Here's how it works. On the first line, we query the database and store the result in the variable $row. You could write this so that you store the query string in a variable and then pass that variable into the mysql_fetch_assoc() function, which is probably more usual. However, I was looking for the minimum amount of code possible for a project that I'm currently working on, so that's the way I wrote it.

On the second line, we store the the value of 'Auto_increment' in the variable $increment and echo it back to see the results. Depending on the database you connect to, you will obviously get different results.

Information about the SHOW TABLE STATUS syntax used and more can be found here at the online SQL 5.1 reference where 'Auto_increment is also listed.

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