Friday, June 19, 2009

Build Flash Online - AS3.0 online compiler

This is very interesting stuff that you can explore. If you don't have programming resources for coding in AS3.0 then don't worry. You just need to go to


It really awsome. It has also support for many AS3.0 Libraries like as3corelib, tweener etc.

So you can do some great stuff here without much requirement of resource. Just logon and start coding :)

I will take you through one small example. Lets take a look @ the interface. Its too simple.



You just need to click the red pointed area shown above to start coding.



Doing coding is as simple as putting up some text line in notepad. The only disadvantage or advantage whatever u consider is that you don't get code hints. Lets go with a simple example. All I am trying to do is to create a simple circle and move it through Left and Right arrow.

The thing which i got to know while coding on wonderfl is that all the classes needs to be declared on the same screen - the package, classes etc. So, I need a circle shape which i am simple taking it through a class "snakeNode". This is just an example you can try with your own code.

  1. import flash.display.Sprite;
  2. import flash.geom.Rectangle;
  3. import flash.display.Shape;
  4. import flash.display.DisplayObject;
  5. class snakeNode extends Sprite{
  6. private var child:Shape = new Shape();
  7. public function snakeNode()
  8. {
  9. child.graphics.beginFill(0xFFCC00);
  10. child.graphics.lineStyle(0, 0x666666);
  11. child.graphics.drawCircle(5, 5, 5);
  12. child.graphics.endFill();
  13. addChild(child);
  14. }
  15. }

It goes something like above. Now the main document class where we would use this code.

  1. package {
  2. import flash.display.Sprite;
  3. import flash.events.KeyboardEvent;
  4. import flash.events.MouseEvent;
  5. public class sampleHitTest extends Sprite {
  6. private var mysNode:snakeNode;
  7. public function sampleHitTest() {
  8. init()
  9. }
  10. public function init():void
  11. {
  12. mysNode = new snakeNode();
  13. mysNode.x = 100;
  14. mysNode.y = 200;
  15. addChild(mysNode);
  16. stage.addEventListener(KeyboardEvent.KEY_DOWN,mouseDown);
  17. }
  18. public function mouseDown(event:KeyboardEvent):void
  19. {
  20. if(event.keyCode == 37)
  21. {
  22. mysNode.x-=15;
  23. }
  24. else if(event.keyCode == 39)
  25. {
  26. mysNode.x+=15;
  27. }
  28. }
  29. }
  30. }

In this way you can write your code. It compiles automatically as an when you are writing a code at the bottom.




Here is the complete code how it looks.

  1. package {
  2. import flash.display.Sprite;
  3. import flash.events.KeyboardEvent;
  4. import flash.events.MouseEvent;
  5. public class sampleHitTest extends Sprite {
  6. private var mysNode:snakeNode;
  7. public function sampleHitTest() {
  8. init()
  9. }
  10. public function init():void
  11. {
  12. mysNode = new snakeNode();
  13. mysNode.x = 100;
  14. mysNode.y = 200;
  15. addChild(mysNode);
  16. stage.addEventListener(KeyboardEvent.KEY_DOWN,mouseDown);
  17. }
  18. public function mouseDown(event:KeyboardEvent):void
  19. {
  20. if(event.keyCode == 37)
  21. {
  22. mysNode.x-=15;
  23. }
  24. else if(event.keyCode == 39)
  25. {
  26. mysNode.x+=15;
  27. }
  28. }
  29. }
  30. }
  31. import flash.display.Sprite;
  32. import flash.geom.Rectangle;
  33. import flash.display.Shape;
  34. import flash.display.DisplayObject;
  35. class snakeNode extends Sprite{
  36. private var child:Shape = new Shape();
  37. public function snakeNode()
  38. {
  39. child.graphics.beginFill(0xFFCC00);
  40. child.graphics.lineStyle(0, 0x666666);
  41. child.graphics.drawCircle(5, 5, 5);
  42. child.graphics.endFill();
  43. addChild(child);
  44. }
  45. }

You can also download this script in form of *.as file to use it anywhere you like. Its a great stuff and very useful. Cheers !!!

Nitin :o)

Using FormBuilder, Validators & FormGroup in Angular 2 to post data to Node server (node.js)

This blog explains usage of  FormBuilder , Validators , FormGroup classes in Angular 2 projects. In this post we will create HTML form a...