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

http://wonderfl.kayac.com

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;
7. class snakeNode extends Sprite{
8. private var child:Shape = new Shape();
9. public function snakeNode()
10. {
11. child.graphics.beginFill(0xFFCC00);
12. child.graphics.lineStyle(0, 0x666666);
13. child.graphics.drawCircle(5, 5, 5);
14. child.graphics.endFill();
15. addChild(child);
16. }
17. }

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. }
19. public function mouseDown(event:KeyboardEvent):void
20. {
21. if(event.keyCode == 37)
22. {
23. mysNode.x-=15;
24. }
25. else if(event.keyCode == 39)
26. {
27. mysNode.x+=15;
28. }
29. }
30. }
31. }

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. }
19. public function mouseDown(event:KeyboardEvent):void
20. {
21. if(event.keyCode == 37)
22. {
23. mysNode.x-=15;
24. }
25. else if(event.keyCode == 39)
26. {
27. mysNode.x+=15;
28. }
29. }
30. }
31. }
33. import flash.display.Sprite;
34. import flash.geom.Rectangle;
35. import flash.display.Shape;
36. import flash.display.DisplayObject;
39. class snakeNode extends Sprite{
40. private var child:Shape = new Shape();
41. public function snakeNode()
42. {
43. child.graphics.beginFill(0xFFCC00);
44. child.graphics.lineStyle(0, 0x666666);
45. child.graphics.drawCircle(5, 5, 5);
46. child.graphics.endFill();
47. addChild(child);
48. }
49. }

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)

Adobe BrowserLab

Adobe Browserlab is an application similar to Microsoft SuperPreview that competes with it. Basically, it allows you to test your web site and see how well it works on most popular web browsers. Once signed in, you will be able to choose browsers, operating systems to test and see them side-by-side. It is a flash cloud based application.

Adobe BrowserLab provides Web professionals with real-time accurate screenshots of browser renderings and includes multiple viewing and diagnostic tools to help designers pinpoint compatibility issues that can compromise the design and layout integrity of a Web site or page.

“Cross-browser testing has been one of the biggest challenges for Web designers because it is such an arduous and time-intensive task,” said Lea Hickman, director, Creative Solutions Business Unit at Adobe. “Now with Adobe BrowserLab, designers have a simple solution that enables comprehensive browser compatibility testing in just a matter of minutes, leaving Web designers with more time to be creative and deliver the high-impact sites customers are demanding.”

Key Features of Adobe BrowserLab:

• Support for all modern browsers and operating systems
• Eliminates the need to have browsers installed on a system before testing a site.
• Adobe BrowserLab includes multiple viewing and diagnostic tools to help Web designers easily spot potential issues. For example, designers can view two screenshots from different browsers side-by-side, or they can use the “onion skin mode” to overlay screenshots on top of one another with variable opacity.
• It provides Adobe Dreamweaver CS4 users extended capabilities to also test Flash technology-based and interactive site elements, including dynamic widgets, rollover effects and AJAX driven content.

Reference Links :

http://browserlab.adobe.com

http://www.photoshopsupport.com/photoshop-blog/09/cs4-06/adobe-browser-lab-browserlab-free-preview.html

http://www.adobe.com/aboutadobe/pressroom/pressreleases/200906/060309AdobeandBrowserlab.html

Have you heard of HTML5?

HTML5 is a new standard of the World Wide Web, HTML. The most important and amazing thing about html5 that can let everone thinking about is the "video" html tag. The video tag will make it possible to add video into html webpages and have it playback across different browsers that implements html5.

In addition to basic markup, HTML 5 specifies scripting application programming interfaces (APIs). Existing Document Object Model (DOM) interfaces are extended and de facto features documented. There are also new APIs, such as:

• The canvas tag for immediate mode 2D drawing
• Timed media playback
• Offline storage database
• Document editing
• Drag-and-drop
• Cross-document messaging
• Browser history management
• MIME type and protocol handler registration

Source : Wikipedia

The canvas element for drawing graphics on-the-fly is a good example; new in HTML 5, it’s already supported by every major browser except Internet Explorer (and there are workarounds for IE too).

Lesser-known HTML 5 features like offline data storage, cross-document messaging, and access to the back/forward stack, which are mainly of interest to JavaScript developers, are also popping up in the newest browsers, including IE8.

Source : Sitepoint

More Information could be gathered from links below:

http://blog.funciton.com/2009/06/what-do-i-think-about-html5.html

http://www.sitepoint.com/blogs/2009/05/26/html-5-now-or-never/

http://html5gallery.com/ideas/

http://forabeautifulweb.com/blog/about/more_on_developing_naming_conventions_microformats_and_html5/

http://en.wikipedia.org/wiki/HTML_5

-Nitin-

Using JavaScript and Flash Integration Kit

The JavaScript and Flash Integration Kit allows developers to get the best of the Flash and HTML worlds by enabling JavaScript to invoke ActionScript functions, and vice versa............

more information can be obtained from below link :

http://weblogs.macromedia.com/flashjavascript/readme.html#usage

Download link for the Classes and Javascript files below :

http://weblogs.macromedia.com/flashjavascript/

I found this technique pretty useful. It works well and we can communicate between JavaScript and Flash quite easily and with more flexibility as it supports passing of Objects and arrays.

For communication we need to import JavaScriptProxy Class.

A sample below :

import com.macromedia.javascript.JavaScriptProxy;

var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);

insertBtn.onRelease = function()

{

proxy.call("InsertFunction", nametxt.text, infotxt.text);

}

function displayfromJS(values:Object)

{

infotxt.text = values.Name;

}

Link for the source fla for the code above : http://www.box.net/shared/6mr5v77r4v

"proxy.call("InsertFunction", nametxt.text, infotxt.text)" this line calls a function on the html page with name "insertFunction". It is also taking two parameters here along with function call.

Lets look at the Html file

"example.htm"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="JavaScriptFlashGateway.js"></script>
<script type="text/javascript">
var lcId = new Date().getTime();
var flashProxy = new FlashProxy(lcId, "JavaScriptFlashGateway.swf");

function InsertFunction(item1,item2) {

alert("Text file will only be created in C:\ if you are using IE = "+item1);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.CreateTextFile("c:\\Test.txt", true);
fh.WriteLine("Name : "+item1);
fh.Close();
}

function transferItemToFlash() {
var toFlashVal = document.listForm.sendVal.value;
flashProxy.call("displayfromJS", {Name:toFlashVal,Val:"121008250"});
}
</script>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="5" width="400">
<tr>
<td width="116" valign="top">
<script type="text/javascript">
var sample = new FlashTag("main.swf", 216, 120, "7,0,14,0");
sample.setFlashvars("lcId=" + lcId);
sample.write(document);
</script>
</td>
<td width="269" valign="top">
<form name="listForm">
<input type="text" name="sendVal"/>
<input type="Button" value="transfer" onclick="javascript:transferItemToFlash();" />
</form>
</td>
</tr>
</table>

</body>
</html>

As you can notice html file has two javascript functions, "InsertFunction" which is called from flash and "transferItemToFlash" which is used to send data into flash.

var lcId = new Date().getTime();

var flashProxy = new FlashProxy(lcId, "JavaScriptFlashGateway.swf");

Above lines are required create an instance of the FlashProxy JavaScript class and pass in the unique ID you just created, and the path to the JavaScriptFlashGateway.swf file. Further details given at below link:

http://weblogs.macromedia.com/flashjavascript/readme.html#usage

The final source files along with the required classes can be downloaded from below link.

http://www.box.net/shared/7o0hsd25ti

-Nitin-