Archive for the 'AS3' Category

onReleaseOutside: AS3 Button Engine revisited

Saturday, September 22nd, 2007 by Luis

A few months ago I wrote a post with a solution to the missing onReleaseOutside event in AS3.

Unfortunately the post has disappeared completely while upgrading some wordpress plugins.

Here there is a resume of the post, a swf demo and the source code of the Button engine that allows you to set sprites as buttons very easily, with some additional events such onReleaseOutside, onRollOutWhileMouseDown, onRollOverWhileMouseDown and the ability to manage in a very natural and intuitive way all the Button Instances in your project.


Download src code.

Simple Usage:

Actionscript:
  1. package
  2. {
  3.     import com.lessrain.as3lib.utils.stage.TopLevel;
  4.     import flash.display.Sprite;
  5.     import com.lessrain.as3lib.controls.button.Button;
  6.     import com.lessrain.as3lib.controls.button.ButtonEvent;
  7.     import com.lessrain.as3lib.controls.button.ButtonList;
  8.     import com.lessrain.as3lib.controls.button.ButtonListEvent;
  9.  
  10.     public class Test extends Sprite
  11.     {
  12.         private var _myButton : Button;
  13.         private var _mySprite : Sprite;
  14.        
  15.         public function Test()
  16.         {
  17.             TopLevel.getInstance().stage = this.stage;
  18.             initialize();
  19.         }
  20.        
  21.         public function initialize():void
  22.         {
  23.             ButtonList.getInstance().addEventListener(ButtonListEvent.BUTTON_ADDED,buttonAddedToList);
  24.             ButtonList.getInstance().addEventListener(ButtonListEvent.BUTTON_REMOVED,buttonRemovedFromList);
  25.            
  26.             _mySprite   =  new Sprite();
  27.             _mySprite.graphics.beginFill(0x660000);
  28.             _mySprite.graphics.drawCircle(250,250,50);
  29.             _mySprite.graphics.endFill();
  30.            
  31.             addChild(_mySprite);
  32.            
  33.             _myButton   = new Button();
  34.            
  35.             _myButton.addEventListener(ButtonEvent.RELEASE,release);
  36.             _myButton.addEventListener(ButtonEvent.RELEASE_OUTSIDE,releaseOutside);
  37.             _myButton.addEventListener(ButtonEvent.PRESS,press);
  38.             _myButton.addEventListener(ButtonEvent.ROLL_OVER,rollOver);
  39.             _myButton.addEventListener(ButtonEvent.ROLL_OUT,rollOut);
  40.             _myButton.addEventListener(ButtonEvent.ROLL_OVER_WHILE_DOWN,press);
  41.             _myButton.addEventListener(ButtonEvent.ROLL_OUT_WHILE_DOWN,rollOutWhileDown);
  42.  
  43.             _myButton.initialize(_mySprite,'myID','myGroup',false,true);
  44.  
  45.         }
  46.        
  47.         private function press(event_:ButtonEvent):void
  48.         {
  49.             trace(String(event_.type));
  50.         }
  51.        
  52.         private function release(event_:ButtonEvent):void
  53.         {
  54.             trace(String(event_.type));
  55.         }
  56.        
  57.         private function releaseOutside(event_:ButtonEvent):void
  58.         {
  59.             trace(String(event_.type));
  60.         }
  61.        
  62.         private function rollOutWhileDown(event_:ButtonEvent):void
  63.         {
  64.             trace(String(event_.type));
  65.         }
  66.        
  67.         private function rollOver(event_:ButtonEvent):void
  68.         {
  69.             trace(String(event_.type));
  70.         }
  71.        
  72.         private function rollOut(event_:ButtonEvent):void
  73.         {
  74.             trace(String(event_.type));
  75.         }
  76.            
  77.         private function buttonAddedToList(event_:ButtonListEvent):void
  78.         {
  79.             var myButton:Button = event_.getButton() as Button;
  80.             trace('--------------------------------------------------');
  81.             trace('Button has been added to the ButtonList:');
  82.             trace('Button GroupID: '+Button(event_.getButton()).groupID);
  83.             trace('Button ID: '+Button(event_.getButton()).id);
  84.             trace('--------------------------------------------------');
  85.         }
  86.        
  87.         private function buttonRemovedFromList(event_:ButtonListEvent):void
  88.         {
  89.             trace('button has been removed:'+event_.currentTarget);
  90.         }
  91.     }
  92. }




Related Links:

AS3: TextEvent.LINK and ContextMenu incompatibilities.

Monday, July 23rd, 2007 by Luis

This morning I run into a small problem when using the new TextEvent.LINK.

Basically as with ActionScript 1 and ActionScript 2, ActionScript 3 allows you to associate ActionScript events with links in a textfield.

In AS3, the LINK event is dispatched when a user clicks a hyperlink in an HTML-enabled text field, where the URL begins with "event:". The remainder of the URL after "event:" will be placed in the text property of the LINK event.

Everything is good until here, but the problem comes when you right-click the link in the textfield. By default the flash player shows one type of context menu that is not any of the 3 types defined in the docs.

contextmenu

According with the AS3 language reference the Flash Player has three types of context menus: the standard menu (which appears when you right-click in Flash Player), the edit menu (which appears when you right-click a selectable or editable text field), and an error menu (which appears when a SWF file has failed to load into Flash Player).

The problem with the context menu appearing when you right-click a link inside a textfield is basically that igonres completely the new LINK event and by default tries to open the link generating an obvious alert message from the browser:

'Firefox doesn't know how to open this address, becuase the protocol (event) isn't associated with any program'.

So far I don't think there is a way to edit or modify this type of context menu.

Sample swf:

Sample Code:

Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.events.TextEvent;
  5.     import flash.text.TextField;
  6.     import flash.text.TextFieldAutoSize;
  7.     import flash.text.TextFormat;
  8.    
  9.     [SWF(width="450", height="150", frameRate="31", backgroundColor="#FFFFFF")]
  10.    
  11.     public class TextEventLinkTest extends Sprite
  12.     {
  13.         private var myTextField     : TextField;
  14.        
  15.         public function TextEventLinkTest():void
  16.         {
  17.            
  18.             myTextField             =   new TextField();
  19.             myTextField.autoSize    =  TextFieldAutoSize.LEFT;
  20.             myTextField.multiline   = true;
  21.  
  22.             var format:TextFormat   =     new TextFormat();
  23.             format.font             =   "Verdana";
  24.             format.color          =  0xFF0000;
  25.             format.size             =   11;
  26.  
  27.             myTextField.defaultTextFormat = format;
  28.             myTextField.x=20;
  29.             myTextField.y=20;
  30.        
  31.             addChild(myTextField);
  32.        
  33.             myTextField.htmlText = 'With the new method of event handling in AS3,<br>' +
  34.                     'event (asfunction) no longer calls a method you defined but,<br>' +
  35.                     'rather, sends out a TextEvent (<b><u><a href="event:flash.events.TextEvent">flash.events.TextEvent</a></u></b>) of the<br>' +
  36.                     'type <b><u><a href="event: TextEvent.LINK">TextEvent.LINK</a></u></b> for the text field instance in which it exists.<br>' +
  37.                     '<br>The text following the event: keyword in the link is accessible from<br>' +
  38.                     'the TextEvent object through its text property.';
  39.            
  40.             myTextField.addEventListener(TextEvent.LINK, linkEvent);
  41.  
  42.         }
  43.        
  44.         private function linkEvent(event_:TextEvent):void
  45.         {
  46.             trace('click: '+event_.text);
  47.         }
  48.        
  49.        
  50.     }
  51. }


Papervision3D 1.5 (AS3) Official Release

Saturday, July 21st, 2007 by Torsten

So now it's official. The latest release of Papervision3D comes with merged and cleaned code, new objects and materials, interactive materials and performance updates.

John Grden gives an overview of the change list:

  1. Optimized main render loop.
  2. Implemented ‘plugable’ face culler - 1 extra available at this time.
  3. Moved rendering from Face3D to materials, adjusted all current materials to override drawFace3D().
  4. New Materials : BitmapWire, BitmapColor, and CompositeMaterial (add multiple materials to this one single material).
  5. Moved all instances to their respective classes…fixed stars, vertices and DisplayObject3D to do so.
  6. Face normals are implemented.
  7. BitmapFileMaterial bug fixed - if used more than once, bitmap was displayed flat within the model’s body.
  8. Added progress events to BitmapFileMaterial and Collada objects
  9. Integrated InteractiveScene3D to 1.5
  10. Added Interactive materials for use with InteractiveScene3D - makes displayObjects that use an interactive material dispatch mouse events via InteractiveSceneManager.

Have a look at the Demo and Download Papervision3D 1.5

And now let's have a closer look at it. Thanks papervision!

Flash full-screen mode and Flash Player Update 3 Beta 1 (build 9.0.60.120)

Monday, July 16th, 2007 by Luis

It seems to be a small problem when triggering the full-screen mode in AS2 with the Flash Player Update 3 Beta 1 (build 9.0.60.120).

When triggering the full-screen mode from a button by using onPress handler under the Flash Player Update 3 Beta 1 plugin, the swf gets stack showing the hand cursor and blocking any kind of interactivity, instead the same trigger mode under the latest stable Flash Player version (9,0,47,0) behaves correctly.

The behavior is normal when triggering the full-screen mode from a button by using onRelease handler rather than onPress handler.

Since the Flash Player Update 3 Beta 1 is not release yet, this behavior can't be considered as a bug (or maybe Adobe has changed the way you can trigger the full-screen mode) but just keep it in mind if you play around with this Flash player version and suddenly nothing works as you expected.

You can download the Flash Player Update 3 Beta 1 (build 9.0.60.120) here.

Test it here.

Image processing in Flash

Thursday, March 1st, 2007 by Patrick Juchli

Curves in Imageprocessing Library

Meet the Imageprocessing Library for Flash. It lets you manipulate images and synthesize textures in ActionScript3, most of it works in realtime and there are just too many filters to mention. Different kinds of blurs, bump mapping, encoding JPEG and PNG, curves as in Photoshop, etc. Truly a swiss army knife for your bitmap needs.

Check out the complete reference here and then procede to download!

Papervision 3D: Going Bananas

Friday, February 16th, 2007 by Luis

Most of you already know the meaning of "going bananas" expression. If you don't know it, just take a closer look at this new Papervision 3D demo (3D Bumpmapping) by Ralph Hauwert.

Going Bananas means to go wild or crazy.

rhino

Related Posts:

Papervision 3D Demos

Wednesday, February 14th, 2007 by Luis

Check out this examples of some fantastic work done with Papervision3D.

Related Posts:

Papervision3D: PaperDude Demo

Thursday, February 8th, 2007 by Luis

This is not about performance or Collada or clipping issues in PV3D, this is just about Paperfun and imperfections.

The very first time I heard about Papervision 3D I thought about my first experience with 3D when I was a little kid, it wasn't related with computers at all, it was a very basic set of plane paper dolls similar to this.

Based on that old memories I decided to have a bit of Paperfun and crete the Paperdude.
Paperdude

Click here to see the demo.

UPDATE 20-02-2008 (Paperdude Second Generation):

Paperdude

Related Posts:

AS3 + Java: Socket connections to ports below 1024

Monday, December 11th, 2006 by Thomas

Since people started to experiment with the new Socket class in AS3 I've often read that it wouldn't be possible to connect to any port below 1024 with it. While that's true if you want to connect to any server on the web, it is possible to connect to servers that run a special socket server returning cross domain policy information to the Flash Player. It's similar to putting a cross-domain-policy file on your web server - it just requires a little more effort.

Connecting to ports below 1024 opens some interesting possibilities, like tunneling multiuser apps through port 80 to avoid being blocked by strict firewalls, writing your own mail-client, ftp-client - any network client for that matter (that doesn't need the ability to listen for incoming connections, so forget about p2p in Flash). Joa Ebert for example has written an IRC client in Flash. You could also write a Proxy on your own server to forward access to any port on any server...

This is how you can allow the AS3 Socket and XMLSocket to connect to a low port number, for example to a web server's port 80.

AS3 commands

Whenever you call the connect method of a Socket class in AS3:

Actionscript:
  1. socket = new Socket();
  2. socket.connect("localhost", 80);


... the Flash Player implicitly opens a socket - in the example above to port 80 - and sends the following character sequence:

XML:
  1. <policy-file-request/>


If the server responds with a string formatted as a common policy xml file, Flash Player will open the real socket and will fire the Event.CONNECT event. If no policy string is returned the connection will fail.

XML:
  1. <?xml version="1.0"?><cross-domain-policy><allow-access-from domain="*" to-ports="80" /></cross-domain-policy>


Now you probably don't want to modify the source code of your preferred open source webserver to make it answer to Flash Player's policy requests. Luckily there is an AS3 command to make Flash connect to another port when looking for the policy:

Actionscript:
  1. Security.loadPolicyFile("xmlsocket://localhost:1008");


This will cause the Flash Player to open a socket to port 1008, send the policy-request and read the policy file. If access is allowed it'll open the desired Socket connection to port 80 without further delay.

It is important to know that only policy-files read from a port below 1024 can grant access to ports below 1024. If your policy file is served from a port, say 8008, access below 1024 is blocked even though the policy file might say differently.

Curious - Adobe's DTD defining the structure of a policy file doesn't mention the to-ports attribute, but the Flash Player definitely reads it.

Java socket server

I wrote a little Java-class that, when started, runs as a policy server. By default it listens on port 1008, allowing connections to any port. Which is good for testing but should be changed when running it publicly!

You can download the source code here, or a runnable jar-file here. Just install the Java-Runtime-Environment (you probably already have it) and on the command line type java -jar policyserver.jar.

Flex example client

I've also written a little example AS3/Flex application that connects to the localhost web-server, sends an HTTP GET command and reads the response including HTTP headers from the webserver. You could call it a browser ;) - unfortunately it only let's you connect to servers that have the policy server running.

You can download the source code here (just import it into a Flex project and mark WebReader.as as the Default Application).

Or view an example here - enter a path starting with "/" and click on connect and see what it reads from our blog webserver...

Flex: Customizing SWF Properties

Monday, November 27th, 2006 by Luis

There are two ways of changing the basic properties of your application in Flex, one is by passing multiple arguments to the command-line compiler and the second one by adding metadata in your Main class.

Yesterday I almost got crazy trying to figure out why one of my projects didn't work when changing the properties of the output swf adding metadata in my Main class, and the answer was very simple, basically the metadata statement has to be placed after any import statement. By placing the metadata statement before the imports, the application properties were set to the default parameters (500 x 375, 24 , blue background).

This doesn't seem to work:

Actionscript:
  1. package
  2. {
  3.     [SWF(width="200", height="200", frameRate="31", backgroundColor="#FFFFFF")]
  4.    
  5.     import flash.display.Sprite;
  6.    
  7.     public class Main extends Sprite
  8.     {
  9.         public function Main()
  10.         {
  11.             trace('stage width: '+stage.stageWidth);
  12.             trace('stage height: '+stage.stageHeight);
  13.             trace('framerate: '+stage.frameRate);
  14.         }
  15.     }
  16. }


This works:

Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.  
  5.     [SWF(width="200", height="200", frameRate="31", backgroundColor="#FFFFFF")]
  6.    
  7.     public class Main extends Sprite
  8.     {
  9.         public function Main()
  10.         {
  11.             trace('stage width: '+stage.stageWidth);
  12.             trace('stage height: '+stage.stageHeight);
  13.             trace('framerate: '+stage.frameRate);
  14.         }
  15.     }
  16. }