blackcj.com » ActionScript http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Google Maps: InfoWindowOptions and TextEvents http://www.blackcj.com/blog/2009/08/11/google-maps-infowindowoptions-and-textevents/ http://www.blackcj.com/blog/2009/08/11/google-maps-infowindowoptions-and-textevents/#comments Tue, 11 Aug 2009 17:11:34 +0000 Chris Black http://www.blackcj.com/blog/?p=489 Problem:
Info windows in Google maps are great but how do you pick up specific text events? It is very common to have a 'learn more' or 'click here' link nested in your text fields. Without direct access to the TextField class in the InfoWindowOptions how do we pick up these events?

Solution:
Well, we could set the customContent variable and pass in a custom DisplayObject but that sounds like a lot of work just to get some simple interaction with the text. Luckily the TextEvent class bubbles by default. This is important since we do not have direct access to the TextField within the info window.

Sample:

Google Maps Text Event

Get Adobe Flash player

(click learn more, close the window and click on the map to re-open)

Code:

PLAIN TEXT
Actionscript:
  1. private var _map:Map;
  2. private var _infoWindow:InfoWindowOptions;
  3. private var _ready:Boolean = false;
  4.  
  5. public function GoogleMapsTextEvent()
  6. {
  7.     stage.scaleMode = StageScaleMode.NO_SCALE;
  8.     stage.align = StageAlign.TOP_LEFT;
  9.  
  10.     _map = new Map();
  11.     _map.key = "YOUR GOOGLE MAPS KEY";
  12.     _map.setSize(new Point(300, 300));
  13.     _map.addEventListener(MapEvent.MAP_READY, onMapReady);
  14.     _map.addEventListener(MapMouseEvent.CLICK, addInfoWindow);
  15.    
  16.     _infoWindow = new InfoWindowOptions();
  17.  
  18.     this.addChild(_map);
  19. }
  20.  
  21. private function onMapReady(event:Event):void
  22. {
  23.     _ready = true;
  24.     _map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
  25.     _map.addEventListener(TextEvent.LINK, testFunction, false, 0, true);
  26.     addInfoWindow();
  27. }
  28.  
  29. private function addInfoWindow(event:MapMouseEvent = null):void
  30. {
  31.     if(_ready){
  32.         _infoWindow.contentHTML = "Simple... <a href='event:myEvent'>Learn More.</a>";
  33.         _map.openInfoWindow(_map.getCenter(), _infoWindow);
  34.     }
  35. }
  36.  
  37. private function testFunction(event:TextEvent):void
  38. {
  39.     _infoWindow.contentHTML = "Extended text.";
  40.     _map.openInfoWindow(_map.getCenter(), _infoWindow);
  41. }

Useful Links:
InfoWindowOptions
TextEvent
Custom Google Map Markers

Enjoy!

]]> http://www.blackcj.com/blog/2009/08/11/google-maps-infowindowoptions-and-textevents/feed/ 1 Compress Transparent PNGs with Flash http://www.blackcj.com/blog/2009/07/24/compress-transparent-pngs-with-flash/ http://www.blackcj.com/blog/2009/07/24/compress-transparent-pngs-with-flash/#comments Fri, 24 Jul 2009 14:52:48 +0000 Chris Black http://www.blackcj.com/blog/?p=465 Do you use transparent PNGs in Flash, Flex or AIR? Want to cut your application file size in half?

Problem:
Embedding transparent PNGs dramatically increases the size of your Flash, Flex and AIR applications. Photoshop and Fireworks dot not have any compression available for transparent PNGs (that I am aware of).

Solution:
Import your PNGs into Flash, give them a linkage id, and export the file as a SWF. Make sure to set your compression level in the publish settings (default is 80%). Using this method, I was able to cut the file size in half for a number of applications.

PLAIN TEXT
Actionscript:
  1. [Embed(source="/assets/images/images.swf#myImage")]
  2. private var MyImage:Class;
  3. private var myImage:Sprite = new MyImage() as Sprite;

rather than...

PLAIN TEXT
Actionscript:
  1. // Don't use this one ;)
  2. [Embed(source="/assets/images/myImage.png")]
  3. private var MyImage:Class;
  4. private var myImage:BitmapAsset = new MyImage() as BitmapAsset;

It is also much easier to manage your external assets from a SWF. Designers can set up a nice slice sheet using the stage in Flash. Much easier than managing tons of small PNGs in folders everywhere.

Image Manager

In addition to using the SWF it can also be very useful to set up an ImageManager to serve out images to your application. This prevents having to change code in multiple places to update the same image reference.

Image Manager Class:

PLAIN TEXT
Actionscript:
  1. package com.cb.utils
  2. {
  3.     import flash.display.Sprite;
  4.    
  5.     public class ImageManager
  6.     {
  7.         public static const MY_IMAGE_ID:String = "my_image_id";
  8.        
  9.         [Embed(source="/assets/images/images.swf#myImage")]
  10.         public static var MyImage:Class;
  11.  
  12.         public static function getMovie(id:String):Sprite
  13.         {
  14.             var result:Sprite;
  15.             switch(id){
  16.                 case MY_IMAGE_ID:
  17.                 default:
  18.                     result = new MyImage();
  19.                 break;
  20.             }
  21.             return result;
  22.         }
  23.     }
  24. }

To access an image from the manager class just make this call:

PLAIN TEXT
Actionscript:
  1. var myImage:BitmapAsset = ImageManager.getImage(ImageManager.MY_IMAGE_ID);

Importing PNGs into Flash

And for those of you that need a refresher on importing PNGs into Flash and setting up linkage IDs:

File->Import->Import to Stage...

File->Import->Import to Stage...

Right click on the image. Select 'Convert to Symbol'...

Step 2

Finally...

Step 3

Enjoy!

Disclaimer: It may be obvious but you must be using transparent PNGs in your app to see a decrease in file size ;) Most of the apps I work on have lots of transparent PNGs!

]]> http://www.blackcj.com/blog/2009/07/24/compress-transparent-pngs-with-flash/feed/ 2 Image Distortion and Tapering in ActionScript http://www.blackcj.com/blog/2009/06/24/image-distortion-and-tapering-in-actionscript/ http://www.blackcj.com/blog/2009/06/24/image-distortion-and-tapering-in-actionscript/#comments Wed, 24 Jun 2009 21:56:55 +0000 Chris Black http://www.blackcj.com/blog/?p=429 Distort and taper images in BOTH ActionScript 2 and 3 without a big 3D engine. Is it possible? YES!

**Update
(12/15/09): Alex Uhlmann made this class even better! Distortion Effects (AS3 only)

(06/24/09): After doing some more research I found that Ruben Swieringa re-wrote this same class into AS3 exactly two years ago. I wish I would have found his post earlier today :)
****

Problem:
ActionScript does not have native support image distorting and tapering (Flash Player 9 and below). After a lot of digging I stumbled upon an AS2 class that distorts images and it's less than 200 lines of code.

Solution:
You can use the AS2 class 'as is' from FlashSandy. Or, if you'd prefer to code in a AS3, I've ported it over and provided an example:

Alternate Page.

Get Adobe Flash player

Move the red squares by clicking, dragging, and releasing them on the stage. Source View

What's the total filesize?
Well, lets see. The demo above is 53KB for the swf- 41.5 for the embedded image - 3KB for TweenLite = 8.5KB :)

How does it work?
Embed an image:

PLAIN TEXT
Actionscript:
  1. [Embed(source="/assets/glacier.jpg")]
  2. private var Background: Class;
  3. private var _background:BitmapAsset = new Background();

Set up your DistortImage and DistortVO:

PLAIN TEXT
Actionscript:
  1. _image = new Sprite();
  2. _image.addChild(_background);
  3. this.addChild(_image);
  4.  
  5. _d = new DistortImage( _image, 2, 2 );
  6. _image.removeChild(_background);
  7.  
  8. _dVO = new DistortVO();
  9. _dVO.data = _image;

Use your favorite tweening engine to do the rest:

PLAIN TEXT
Actionscript:
  1. private function clickHandler(event:MouseEvent = null):void
  2. {
  3.     TweenLite.to(_dVO, 0.5, {x0:_tl.x, y0:_tl.y, x1:_tr.x, y1:_tr.y, x2:_bl.x, y2:_bl.y, x3:_br.x, y3:_br.y, onUpdate:applyMatrix, onUpdateParams:[_dVO], ease:Cubic.easeOut});   
  4. }
  5.  
  6. private function applyMatrix($dVO:DistortVO):void
  7. {
  8.    _d.setTransform($dVO.x0, $dVO.y0, $dVO.x1, $dVO.y1, $dVO.x2, $dVO.y2 ,$dVO.x3, $dVO.y3); 
  9. }

The following is ActionScript 2 related
I am re-posting the AS2 code for redundancy purposes. The original code (DistordImage) is sitting on a broken link and I feel lucky to have found the sample code on FlashSandy. The above example can be done in AS2 which is really cool. Thank you to all of the authors of the DistortImage AS2 class!

PLAIN TEXT
Actionscript:
  1. /*
  2. ****************************
  3. * From a first idea and first implementation of Andre Michelle www.andre-michelle.com
  4. * @version 2.0
  5. * @author Thomas Pfeiffer - kiroukou - http://www.thomas-pfeiffer.info
  6. * @author Richard Lester - RichL
  7. * @author Didier Brun - foxy - http://www.foxaweb.com
  8. * @website: http://sandy.media-box.net
  9. * @description: Tesselate a movieclip into several triangles to allow free transform distorsion.
  10. * *************************
  11. * Licensed under the CREATIVE COMMONS Attribution-NonCommercial-ShareAlike 2.0
  12. * you may not use this file except in compliance with the License.
  13. * You may obtain a copy of the License at
  14. * http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.en_GB
  15. ***************************
  16. * DistortImage class
  17. * Availability : Flash Player 8.
  18. **********************************************
  19. */
  20. import flash.geom.Matrix;
  21. import flash.display.BitmapData;
  22. class DistortImage
  23. {
  24.     // -- texture to distord
  25.     public var texture:BitmapData;
  26.     /*
  27.     * Constructor
  28.     * @param mc MovieClip : the movieClip containing the distorded picture
  29.     * @param symbolId String : th link name of the picture in the library
  30.     * @param vseg Number : the vertical precision
  31.     * @param hseg Number : the horizontal precision
  32.     * @throws: An error in the second constructor parameter isn't a BitmapData or a MovieClip
  33.     */
  34.     public function DistortImage( mc: MovieClip, ptexture, vseg: Number, hseg: Number )
  35.     {
  36.         _mc = mc;
  37.         if( ptexture instanceof BitmapData )
  38.         {
  39.             texture = ptexture;
  40.         }
  41.         else if( ptexture instanceof MovieClip )
  42.         {
  43.             texture = new BitmapData( ptexture._width, ptexture._height );
  44.             texture.draw( ptexture );
  45.         }
  46.         else
  47.         {
  48.             throw new Error('Second argument in DistortImage class must be a BitmapData object or a Movieclip');
  49.         }
  50.         _vseg = vseg || 0;
  51.         _hseg = hseg || 0;
  52.         // --
  53.         _w = texture.width ;
  54.         _h = texture.height;
  55.         // --
  56.         _aMcs   = new Array();
  57.         _p   = new Array();
  58.         _tri    = new Array();
  59.         // --
  60.         __init();
  61.     }
  62.     /**
  63.     * setTransform
  64.     *
  65.     * @param x0 Number the horizontal coordinate of the first point
  66.     * @param y0 Number the vertical coordinate of the first point
  67.     * @param x1 Number the horizontal coordinate of the second point
  68.     * @param y1 Number the vertical coordinate of the second point
  69.     * @param x2 Number the horizontal coordinate of the third point
  70.     * @param y2 Number the vertical coordinate of the third point
  71.     * @param x3 Number the horizontal coordinate of the fourth point
  72.     * @param y3 Number the vertical coordinate of the fourth point
  73.     *
  74.     * @description : Distord the bitmap to ajust it to those points.
  75.     */
  76.     function setTransform( x0:Number , y0:Number , x1:Number , y1:Number , x2:Number , y2:Number , x3:Number , y3:Number ): Void
  77.     {
  78.         var w:Number = _w;
  79.         var h:Number = _h;
  80.         var dx30:Number = x3 - x0;
  81.         var dy30:Number = y3 - y0;
  82.         var dx21:Number = x2 - x1;
  83.         var dy21:Number = y2 - y1;
  84.         var l:Number = _p.length;
  85.         while( --l> -1 )
  86.         {
  87.             var point:Object = _p[ l ];
  88.             var gx = ( point.x - _xMin ) / w;
  89.             var gy = ( point.y - _yMin ) / h;
  90.             var bx = x0 + gy * ( dx30 );
  91.             var by = y0 + gy * ( dy30 );
  92.             point.sx = bx + gx * ( ( x1 + gy * ( dx21 ) ) - bx );
  93.             point.sy = by + gx * ( ( y1 + gy * ( dy21 ) ) - by );
  94.         }
  95.         __render();
  96.     }
  97.     /////////////////////////
  98.     ///  PRIVATE METHODS  ///
  99.     /////////////////////////
  100.     private function __init( Void ): Void
  101.     {
  102.         _p = new Array();
  103.         _tri = new Array();
  104.         var ix:Number, iy:Number;
  105.         var w2: Number = _w / 2;
  106.         var h2: Number = _h / 2;
  107.         _xMin = _yMin = 0;
  108.         _xMax = _w; _yMax = _h;
  109.         _hsLen = _w / ( _hseg + 1 );
  110.         _vsLen = _h / ( _vseg + 1 );
  111.         var x:Number, y:Number;
  112.         var p0:Object, p1:Object, p2:Object;
  113.         // -- we create the points
  114.         for ( ix = 0 ; ix <_hseg + 2 ; ix++ )
  115.         {
  116.             for ( iy = 0 ; iy <_vseg + 2 ; iy++ )
  117.             {
  118.                 x = ix * _hsLen;
  119.                 y = iy * _vsLen;
  120.                 _p.push( { x: x, y: y, sx: x, sy: y } );
  121.             }
  122.         }
  123.         // -- we create the triangles
  124.         for ( ix = 0 ; ix <_vseg + 1 ; ix++ )
  125.         {
  126.             for ( iy = 0 ; iy <_hseg + 1 ; iy++ )
  127.             {
  128.                 p0 = _p[ iy + ix * ( _hseg + 2 ) ];
  129.                 p1 = _p[ iy + ix * ( _hseg + 2 ) + 1 ];
  130.                 p2 = _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) ];
  131.                 __addTriangle( p0, p1, p2 );
  132.                 // --
  133.                 p0 = _p[ iy + ( ix + 1 ) * ( _vseg + 2 ) + 1 ];
  134.                 p1 = _p[ iy + ( ix + 1 ) * ( _vseg + 2 ) ];
  135.                 p2 = _p[ iy + ix * ( _vseg + 2 ) + 1 ];
  136.                 __addTriangle( p0, p1, p2 );
  137.             }
  138.         }
  139.         __render();
  140.     }
  141.     private function __addTriangle( p0:Object, p1:Object, p2:Object ):Void
  142.     {
  143.         var u0:Number, v0:Number, u1:Number, v1:Number, u2:Number, v2:Number;
  144.         var tMat:Object = {};
  145.         // --
  146.         u0 = p0.x; v0 = p0.y;
  147.         u1 = p1.x; v1 = p1.y;
  148.         u2 = p2.x; v2 = p2.y;
  149.         tMat.tx = -v0*(_w / (v1 - v0));
  150.         tMat.ty = -u0*(_h / (u2 - u0));
  151.         tMat.a = tMat.d = 0;
  152.         tMat.b = _h / (u2 - u0);
  153.         tMat.c = _w / (v1 - v0);
  154.         // --
  155.         _tri.push( [p0, p1, p2, tMat] );
  156.     }
  157.     private function __render( Void ): Void
  158.     {
  159.         var vertices: Array;
  160.         var p0, p1, p2:Object;
  161.         var x0:Number, y0:Number;
  162.         var ih:Number = 1/_h, iw:Number = 1/_w;
  163.         var c:MovieClip = _mc; c.clear();
  164.         var a:Array;
  165.         var sM = {};
  166.         var tM = {};
  167.         //--
  168.         var l:Number = _tri.length;
  169.         while( --l> -1 )
  170.         {
  171.             a   = _tri[ l ];
  172.             p0  = a[0];
  173.             p1  = a[1];
  174.             p2  = a[2];
  175.             tM = a[3];
  176.             // --
  177.             sM.a = ( p1.sx - ( x0 = p0.sx ) ) * iw;
  178.             sM.b = ( p1.sy - ( y0 = p0.sy ) ) * iw;
  179.             sM.c = ( p2.sx - x0 ) * ih;
  180.             sM.d = ( p2.sy - y0 ) * ih;
  181.             sM.tx = x0;
  182.             sM.ty = y0;
  183.             // --
  184.             sM = __concat( sM, tM );
  185.             c.beginBitmapFill( texture, sM, false, false );
  186.             c.moveTo( x0, y0 );
  187.             c.lineTo( p1.sx, p1.sy );
  188.             c.lineTo( p2.sx, p2.sy );
  189.             c.endFill();
  190.         }
  191.     }
  192.     private function __concat( m1, m2 ):Object
  193.     {   //Relies on the original triangles being right angled with p0 being the right angle.
  194.         //Therefore a = d = zero (before and after invert)
  195.         var mat = {};
  196.         mat.a  = m1.c * m2.b;
  197.         mat.b  = m1.d * m2.b;
  198.         mat.c  = m1.a * m2.c;
  199.         mat.d  = m1.b * m2.c;
  200.         mat.tx = m1.a * m2.tx + m1.c * m2.ty + m1.tx;
  201.         mat.ty = m1.b * m2.tx + m1.d * m2.ty + m1.ty;
  202.         return mat;
  203.     }
  204.     /////////////////////////
  205.     /// PRIVATE PROPERTIES //
  206.     /////////////////////////
  207.     private var _mc:MovieClip;
  208.     private var _w:Number;
  209.     private var _h:Number;
  210.     private var _xMin:Number, _xMax:Number, _yMin:Number, _yMax:Number;
  211.     // -- picture segmentation properties
  212.     private var _hseg:Number;
  213.     private var _vseg:Number;
  214.     private var _hsLen:Number;
  215.     private var _vsLen:Number;
  216.     // -- arrays of differents datas types
  217.     private var _p:Array;
  218.     private var _tri:Array;
  219.     private var _aMcs:Array;
  220. }

Resources:
Understanding the Transformation Matrix in Flash 8
FlashSandy
Ruben Swieringa - DistortImage

]]> http://www.blackcj.com/blog/2009/06/24/image-distortion-and-tapering-in-actionscript/feed/ 1 Prevent Scaling in ActionScript Projects http://www.blackcj.com/blog/2009/05/11/prevent-scaling-in-actionscript-projects/ http://www.blackcj.com/blog/2009/05/11/prevent-scaling-in-actionscript-projects/#comments Mon, 11 May 2009 20:24:08 +0000 Chris Black http://www.blackcj.com/blog/?p=343 Problem:
The scale mode for ActionScript projects is set to allow zooming by default even when the width and height are set to fixed sizes. This can distort your website when the user uses ctrl-mouse scroll wheel or hits ctrl-plus / ctrl-minus.

Solution:
Set the stage scaleMode to "noScale" and configure the containing div to stretch at 100% for the height and with. You may also want to set the stage alignment to "T" which will align your content to the top of the page. This will work in AS2 as well but the 'S' is capitalized in Stage.

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.display.StageAlign;
  4.     import flash.display.StageScaleMode;
  5.    
  6.     import mx.core.BitmapAsset;
  7.  
  8.     [SWF(width="700", height="265", frameRate="27", backgroundColor="#ffffff")]
  9.     public class ScalingApplication extends Sprite
  10.     {
  11.         [Embed(source="assets/background.jpg")]
  12.         private var Background:Class;
  13.         private var _background:BitmapAsset = new Background();
  14.        
  15.         public function ScalingApplication()
  16.         {
  17.             // Prevents distortion / zooming
  18.             stage.scaleMode = StageScaleMode.NO_SCALE;
  19.            
  20.             // Aligns content to the top center
  21.             stage.align = StageAlign.TOP;
  22.  
  23.             this.addChild(_background);
  24.         }
  25.     }
  26. }

For full screen pages use the following CSS:

PLAIN TEXT
HTML:
  1. body {
  2.     margin-left: 0px;
  3.     margin-top: 0px;
  4.     margin-right: 0px;
  5.     margin-bottom: 0px;
  6.     background-color: #FFFFFF;
  7. }

You will also want to set your Flash element and div with / height to 100%.

Uses:
Setting the scaleMode to "noScale" allows the ActionScript project to behave more like a Flex application. Benefits to having an ActionScript project will come in a later post. The "noScale" mode gives the developer more control to create a pixel perfect design. The stage height and width variables are still available so the web application can be sized based on its own set of rules rather than having the whole application scale. This method can also be used to produce websites that scale to the full size of the browser, for example: JDesignFactory.

Disadvantages:
The scaling within browsers is intended for people that may need to have a larger font in order to read the text. From a design perspective you need to be aware that you are potentially limiting your audience by preventing the application scaling. This drawback can be overcome by setting up scaling rules within your ActionScript or allowing the user to change font sizes. Another solution would be to have an HTML version of your site that would allow users to scale the content without having to sacrifice your Flash design quality.

Sample Code

Resources:
Stage Livedocs link
StageScaleMode Livedocs link
StageAlign Livedocs link

]]> http://www.blackcj.com/blog/2009/05/11/prevent-scaling-in-actionscript-projects/feed/ 2 Embedded Fonts and Filters with Input Text in ActionScript http://www.blackcj.com/blog/2009/03/30/embedded-fonts-and-filters-with-input-text-in-actionscript/ http://www.blackcj.com/blog/2009/03/30/embedded-fonts-and-filters-with-input-text-in-actionscript/#comments Mon, 30 Mar 2009 22:21:14 +0000 Chris Black http://www.blackcj.com/blog/?p=287 Problem:
We need a TextField of type TextFieldType.INPUT that has embedFonts set to true and has an inner drop shadow filter. Sounds easy enough right? The first problem is that DropShadowFilter's don't work correctly with TextFields created using ActionScript. The second problem is that setting embedFonts to TRUE and leaving default text empty on a TextField with type TextFieldType.INPUT causes the field not to be selectable.

Solution:
Lets tackle the DropShadowFilter first. After many failed attempts at getting filters to render correctly on TextFields the next best solution was to create a sprite that sites right behind the text field that renders the filter.

Filters for Input Text Fields

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.filters.DropShadowFilter;
  4.     import flash.text.TextField;
  5.     import flash.text.TextFieldType;
  6.  
  7.     [SWF(pageTitle="Text Field Filter", backgroundColor="#FFFFFF", frameRate="30")]
  8.     public class TextFieldFilter extends Sprite
  9.     {
  10.         public function TextFieldFilter()
  11.         {
  12.             var myTextField:TextField = new TextField();
  13.             myTextField.type = TextFieldType.INPUT;
  14.             myTextField.width = 100;
  15.             myTextField.height = 20;
  16.             myTextField.border = true;
  17.             myTextField.borderColor = 0x000000;
  18.            
  19.             var sprite:Sprite = new Sprite();
  20.             sprite.graphics.beginFill(0xFFFFFF, 1);
  21.             sprite.graphics.drawRect(0, 0, myTextField.width, myTextField.height);
  22.             sprite.filters =  [new DropShadowFilter(4, 45, 0x666666, .4, 6, 6, 1, 1, true)];
  23.             this.addChild(sprite);
  24.            
  25.             this.addChild(myTextField);
  26.         }
  27.     }
  28. }

Filters for Input Text Fields Sample

Next lets create an TextField with type TextFieldType.INPUT and set the embed property to TRUE. Lets set the TextFormat using the setTextFormat function of the TextField and see what happens. The text is not selectable and the input field can not be used. Instead use the defaultTextFormat property of TextField to set the format. Everything works great! My best guess at the reasoning behind this is that when the TextField class is set to type INPUT the set focus attempts to reset the format to the default format. Since the setTextFormat function only sets the initial format subsequent calls break the TextField.

Embed Input Text Issue

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.text.AntiAliasType;
  4.     import flash.text.TextField;
  5.     import flash.text.TextFieldType;
  6.     import flash.text.TextFormat;
  7.  
  8.     [SWF(pageTitle="Embed Input Text", backgroundColor="#FFFFFF", frameRate="30")]
  9.     public class EmbedInputText extends Sprite
  10.     {
  11.         [Embed(mimeType='application/x-font', source="assets/arial.ttf", fontName="Arial")]
  12.         private var Arial:Class;
  13.  
  14.         public function EmbedInputText()
  15.         {
  16.             var myTextFormat:TextFormat = new TextFormat('Arial', 12, 0x000000);
  17.            
  18.             var myTextField:TextField = new TextField();
  19.             myTextField.x = 3;
  20.             myTextField.y = 1;
  21.             myTextField.text = "";  //<---SET TEXT HERE (*CURSOR FIX*)
  22.             myTextField.type = TextFieldType.INPUT;
  23.             myTextField.embedFonts = true;
  24.             myTextField.antiAliasType = AntiAliasType.ADVANCED;
  25.             myTextField.width = 100;
  26.             myTextField.height = 20;
  27.             myTextField.border = true;
  28.             myTextField.borderColor = 0x000000;
  29.             myTextField.selectable = true;
  30.             //myTextField.text = "";  //<---THIS PREVENTS THE CURSOR FROM WORKING (*CURSOR ISSUE*)
  31.            
  32.             //myTextField.setTextFormat(myTextFormat);  //<---THIS WILL NOT WORK (*EMBED ISSUE*)
  33.             myTextField.defaultTextFormat  = myTextFormat;  //<---THIS DOES WORK (*EMBED FIX*)
  34.             this.addChild(myTextField);
  35.  
  36.         }
  37.     }
  38. }

Comment out the FIX lines above and un-comment the ISSUE lines if you would like to see the fail cases.

Embed Input Text Sample

Cursor Issue:
Another interesting quirk. If you set the default text to an empty string AFTER setting the TextField properties when you initially click the input box the cursor is not displayed. The order of operations for setting properties of TextFields in ActionScript is VERY important.

Resources:
Flash Voodoo link
John Blanco's RIA Developer's Corner link
Adobe Livedocs DropShadowFilter link
Adobe Livedocs TextField link

]]> http://www.blackcj.com/blog/2009/03/30/embedded-fonts-and-filters-with-input-text-in-actionscript/feed/ 10 Flash Player 10: 48KHz Sound Playback Bug http://www.blackcj.com/blog/2009/01/30/flash-player-10-48khz-sound-playback-bug/ http://www.blackcj.com/blog/2009/01/30/flash-player-10-48khz-sound-playback-bug/#comments Fri, 30 Jan 2009 06:02:35 +0000 Chris Black http://www.blackcj.com/blog/?p=184 Update (2/25/2008): This bug has been fixed as of Flash Player version 10.0.22.87. Download the new version from Adobe: http://get.adobe.com/flashplayer/

Problem:
Flash Player 10 distorts sounds sampled higher than 44KHz when using the loadSound function within ActionScript 2.0. This is a problem since many of the Flash mp3 players that exist today are written with AS 2.0 using this function: soundContainer.loadSound(urltoplay, true);

Solution:
There are three solutions to this problem. One is to re-sample all of your audio down to 44KHz, which very few people are willing to do. Adobe's official fix is to set the stream property on the loadSound method to false, however, with this fix users must wait until the sound is completely loaded before they will hear anything.

That brings us to the third and in most cases, the best solution: re-write the audio player in AS 3.0. To start lets take a look at how AS 2.0 handles mp3 playback...

PLAIN TEXT
Actionscript:
  1. var my_sound:Sound;
  2.  
  3. var song = "demo.mp3";
  4.  
  5. function playMusic ()
  6. {
  7.     my_sound = new Sound();
  8.     my_sound.loadSound(song, true);
  9. }
  10.  
  11. function stopMusic ()
  12. {
  13.     my_sound.stop();
  14. }

Simple enough. The problem is that if a user has Flash Player 10 and tries to play a 48KHz sampling rate the sound is distorted and has popping and clicking sounds.

If you are interested in implementing Adobe's official fix of setting the stream property to false you would have this:

PLAIN TEXT
Actionscript:
  1. function playMusic ()
  2. {
  3.     my_sound = new Sound();
  4.     my_sound.onLoad = function(success:Boolean) {
  5.         if (success) {
  6.             my_sound.start();
  7.         }
  8.     };
  9.     my_sound.loadSound(song, false);
  10. }

You can try this fix out to see if it will work for your needs. If you prefer to allow your users to continue to stream the audio files as they load, your code would look like this:

PLAIN TEXT
Actionscript:
  1. import flash.media.Sound;
  2. import flash.media.SoundChannel;
  3. import flash.net.URLRequest;
  4.  
  5. var song = "demo.mp3";
  6. var snd:Sound = new Sound();
  7. var channel:SoundChannel = new SoundChannel();
  8.  
  9. function playMusic(songSource:String){
  10.     var req:URLRequest = new URLRequest(song);
  11.     snd = new Sound();
  12.     snd.load(req);
  13.     channel = new SoundChannel();
  14.     channel = snd.play();
  15. }
  16.  
  17. function stopMusic()
  18. {
  19.     channel.stop();
  20. }

If you are concerned about having to re-write a whole mp3 player UI just to fix the audio playback code you may want to consider using javascript to bridge AS 2.0 and AS 3.0. This would allow you to play 48KHz audio files without having to re-write a whole flash mp3 player.

Here is a link to Adobe's official bug site:
Adobe

ActionScript 3.0 Sound API
LiveDocs

And a couple of people that have implemented this fix:
Mike Breidegam
Noel Webb

Feel free to contact me or leave a comment if you have any questions about this implementation of the Sound class in ActionScript.

A little more information about 44.1 vs 48 KHz audio:
"There is relatively little difference in audible quality between 44.1KHz and 48KHz, since the slight increase in frequency response is outside the range of human hearing." And, "the improvement from 44.1 to 48 is marginal at best." However, "It also happens to be fairly difficult to do a good conversion from 48KHz to 44.1KHz..."

Why 44.1KHz? Why not 48KHz?

]]> http://www.blackcj.com/blog/2009/01/30/flash-player-10-48khz-sound-playback-bug/feed/ 10 Validate Twitter Credentials in AIR http://www.blackcj.com/blog/2008/12/21/validate-twitter-credentials-in-air/ http://www.blackcj.com/blog/2008/12/21/validate-twitter-credentials-in-air/#comments Sun, 21 Dec 2008 22:21:42 +0000 Chris Black http://www.blackcj.com/blog/?p=131 Problem:
Your AIR application needs to validate the username / password and handle failure gracefully within the application. If the user enters the wrong information you do not want them to be prompted with a windows prompt asking them to enter their Twitter username / password. If the application needs to hold on to the credentials for any reason the windows authentication to the API will break the AIR application.

"The server twitter.com at Twitter API requires a username and password."

Windows Authentication Pop-up Message.

Windows Authentication Pop up message.

Solution:
The URLRequest object has a property called 'authenticate' that must be set to false.

PLAIN TEXT
Actionscript:
  1. /**
  2. *
  3. * Setting result.authenticate to false prevents the operating system from
  4. * taking over and prompting the user to authenticate.  It allows the AIR
  5. * application to take the correct action.
  6. *
  7. */  
  8. private function twitterRequest (url : String):URLRequest
  9. {
  10.     var result:URLRequest = new URLRequest (url);
  11.     if (this.authorizationHeader){
  12.         result.authenticate = false;  // <--------- Most Important Line of Code!!!!
  13.         result.requestHeaders = [this.authorizationHeader]; 
  14.     }
  15.     return result;
  16. }

Most of the code from the example attached below is from the Google code repository:

http://code.google.com/p/twitterscript/

Here are the source files to an example AIR application that uses actionscript to verify Twitter credentials without prompting a windows box on failure:

Source Files

I would like to give credit to Clayton (file_cabinet) for coming up with the solution to this problem. Thanks Clayton!

]]> http://www.blackcj.com/blog/2008/12/21/validate-twitter-credentials-in-air/feed/ 7 Anchor Tags in ActionScript Textfields http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/ http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/#comments Mon, 01 Dec 2008 03:38:36 +0000 Chris Black http://www.blackcj.com/blog/?p=109 This example is for anyone who needs to use anchor tags in ActionScript TextFields. If using AIR than the best route is to use an HTMLLoader to load in the raw HTML. If an HTMLLoader is not an option you can use this example to create a wrapper class that mimics the anchor tag functionality. Before we get started it is important to note that TextFields have a number of properties, formats and styles available which all have an effect on the way text is rendered. This example takes advantage of a specific set of properties in order to accurately determine the line number and char location of certain strings. Variables may require some adjustments / tweaks (or may not work at all) if the TextField properties are changed.

To get started lets take a look at the HTML we plan to load in:

PLAIN TEXT
HTML:
  1. <b>Index</b>
  2. <a href="#sectionA"><u>Jump to Section A</u></a>
  3. <a href="#sectionB"><u>Jump to Section B</u></a>
  4. <a href="#sectionC"><u>Jump to Section C</u></a>
  5. <a href="#sectionD"><u>Jump to Section D</u></a>
  6. <a href="#sectionE"><u>Jump to Section E</u></a>
  7. <span name="sectionA"><b>Section A</b></span>
  8. <p>...</p>
  9. <p>...</p>
  10. <a href="#top">Back to Top</a>
  11. <span name="sectionB"><b>Section B</b></span>
  12. <p>...</p>
  13. <p>...</p>
  14. <a href="#top">Back to Top</a>
  15. <span name="sectionC"><b>Section C</b></span>
  16. <p>...</p>
  17. <p>...</p>
  18. <a href="#top">Back to Top</a>
  19. <span name="sectionD"><b>Section D</b></span>
  20. <p>...</p>
  21. <p>...</p>
  22. <a href="#top">Back to Top</a>
  23. <span name="sectionE"><b>Section E</b></span>
  24. <p>...</p>
  25. <p>...</p>
  26. <a href="#top">Back to Top</a>

The content of the paragraph files has been removed to save space (you can view the source below to get a copy of the full file). Notice that the 'a name' tags have been replaced with 'span name.' This was a quick way to prevent the styling of the link tags from modifying the style of the headers. There is probably a better way to get around this but it's not within scope of this example. Speaking of the style sheet... here it is:

PLAIN TEXT
CSS:
  1. /* CSS file */
  2. a:hover {
  3.     color: #0000FF;
  4. }
  5.  
  6. a:link {
  7.     color: #555555;
  8.     text-decoration: underline;
  9. }
  10.  
  11. a:active {
  12.     color: #FF0000;
  13. }
  14.  
  15. a:visited {
  16.     color: #555555;
  17.     text-decoration: underline; 
  18. }

Lets start by loading in the HTML text:

PLAIN TEXT
Actionscript:
  1. import com.cb.util.AnchorText;
  2. import flash.text.TextField;
  3. import flash.events.TextEvent;   
  4.  
  5. private var _htmlLoader:URLLoader = new URLLoader();
  6.  
  7. private var html_url:String = "assets/test.html";
  8. private var myText:AnchorText;
  9.  
  10. private function init():void
  11. {
  12.     _htmlLoader.addEventListener(Event.COMPLETE, htmlLoadHandler);
  13.     _htmlLoader.load(new URLRequest(html_url));
  14. }
  15.  
  16. private function htmlLoadHandler(event:Event):void
  17. {
  18.     myText = new AnchorText(_htmlLoader.data, 300);
  19.     myTextComponent.addChild(myText);
  20. }

Now lets take a look at some of the key functions within the Anchor Text class. First we will want to replace the a href # tags with something ActionScript can understand:

PLAIN TEXT
Actionscript:
  1. // Replaces '#' with 'event:' to trigger actionscript events                   
  2. protected function createAnchors():void
  3. {
  4.     var regEx:RegExp = new RegExp("<a href=\"#", "ig");
  5.     _text = _text.replace(regEx, "<a href=\"event:");            
  6. }

Next we will want to add event listeners for the event and set up our dynamic text field:

PLAIN TEXT
Actionscript:
  1. // Constructor
  2. public function AnchorText(text:String, width:Number = 200, height:Number = 300)
  3. {
  4.     _width = width;
  5.     _height = height;
  6.     _text = text;
  7.    
  8.     // Add event dispatching to the a href tags
  9.     createAnchors();
  10.    
  11.     _dynamicText = new TextField();
  12.     _dynamicText.addEventListener(TextEvent.LINK, anchorText);
  13.     this.addChild(_dynamicText);
  14.  
  15.     _styleSheet = new StyleSheet();
  16.    
  17.     // Comment out the following three lines if you don't have an external stylesheet
  18.     _styleLoader = new URLLoader();
  19.     _styleLoader.addEventListener(Event.COMPLETE, styleLoadHandler);
  20.     _styleLoader.load(new URLRequest(css_url)); 
  21.    
  22.     updateFormat();  
  23. }
  24. // Set up the TextField
  25. protected function updateFormat():void
  26. {
  27.     _dynamicText.width = _width;
  28.     _dynamicText.height = _height; 
  29.         _dynamicText.styleSheet = _styleSheet;
  30.     _dynamicText.wordWrap = true;
  31.     _dynamicText.htmlText = _text;
  32.     _dynamicText.selectable = true; // Text MUST be selectable     
  33. }

Finally we will want to handle the mouse clicks to the events that we set up within the text string:

PLAIN TEXT
Actionscript:
  1. protected function anchorText(event:TextEvent):void
  2. {
  3.     // Recognize 'back to top' links
  4.     if(event.text == "top"){
  5.         _dynamicText.scrollV = 0;
  6.         return;
  7.     }
  8.    
  9.     // Set up ghost text field to match properties of the current one
  10.     var anchorText:TextField = new TextField();
  11.     anchorText.wordWrap = true;
  12.     anchorText.width = _width;
  13.     anchorText.styleSheet = _styleSheet;  // This is REQUIRED
  14.  
  15.     // Replace the name tag with a unique pattern (^#^)
  16.     var regEx:RegExp = new RegExp("<span name=\""+ event.text +"\">", "ig");
  17.     anchorText.htmlText = _text.replace(regEx, "^#^"); 
  18.    
  19.     // Replace newlines with '&' to keep char count consistant
  20.     regEx = new RegExp("^", "gm");
  21.     anchorText.htmlText = anchorText.htmlText.replace(regEx, "&"); 
  22.  
  23.     // Remove duplicate newlines
  24.     regEx = new RegExp("&&", "g");
  25.     anchorText.htmlText = anchorText.htmlText.replace(regEx, "x"); 
  26.    
  27.     // Find the char location of the unique pattern   
  28.     var myIndex:int = anchorText.text.indexOf("^#^") + 3;
  29.    
  30.     // Set the scroll index to the line number of the char index
  31.     var scrollIndex:int = _dynamicText.getLineIndexOfChar(myIndex) + 1;
  32.    
  33.     // Scroll to the necessary line
  34.     _dynamicText.scrollV = scrollIndex;
  35. }

Some key things to note would be:

  • The TextField MUST be selectable
  • A StyleSheet must be applied to the TextField (even if you don't load one in)
  • This example assumes '^#^' and '&&' are unique sequences
  • A TextFormat can not be used along with a StyleSheet
  • There are always exception cases when dealing with RegExp and TextFields (no warranty provided)


View Sample / Source Files

Here are a few resources I found helpful along the way:
http://www.kirupa.com/forum/showthread.php?t=303186

http://troyworks.com/blog/2008/03/14/flash-textfield-actionscript-hyperlink-in-as30/

]]> http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/feed/ 1 Post to TwitPic from Adobe AIR http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/ http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/#comments Fri, 21 Nov 2008 00:19:44 +0000 Chris Black http://www.blackcj.com/blog/?p=103 TwitPic is a service that lets you share photos on Twitter by generating a tiny url to the image being uploaded. The flash.filesystem.File class allows Adobe AIR to post an image to TwitPic. By specifying the username, password and posting method it is possible to submit a query to the TwitPic API.

PLAIN TEXT
Actionscript:
  1. package com.cb.twitpic
  2. {
  3.     import flash.events.DataEvent;
  4.     import flash.events.Event;
  5.     import flash.filesystem.File;
  6.     import flash.net.FileFilter;
  7.     import flash.net.URLRequest;
  8.     import flash.net.URLRequestMethod;
  9.     import flash.net.URLVariables;
  10.    
  11.     public class TwitPic
  12.     {
  13.         private var _file:File;
  14.        
  15.         public function TwitPic()
  16.         {
  17.             _file = new File();
  18.             _file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
  19.             browse();
  20.         }
  21.         private function browse():void {
  22.             _file.addEventListener(Event.SELECT, fileSelected);
  23.             _file.browse( new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" ) ) );
  24.         }
  25.        
  26.         private function fileSelected(event:Event):void {
  27.             var urlRequest:URLRequest = new URLRequest("http://twitpic.com/api/upload");
  28.            
  29.             // The API requires the request be sent via POST
  30.             urlRequest.method = URLRequestMethod.POST;
  31.            
  32.             // Enter a valid Twitter username / password combination
  33.             var urlVars:URLVariables = new URLVariables();
  34.             urlVars.username = TWITTER_USERNAME;
  35.             urlVars.password = TWITTER_PASSWORD;
  36.             urlRequest.data = urlVars;
  37.            
  38.             // The API requires the file be labeled as 'media'
  39.             _file.upload(urlRequest, 'media');
  40.         }
  41.        
  42.         private function uploadCompleteDataHandler(event:DataEvent):void
  43.         {
  44.             var resultXML:XML = new XML(event.text);
  45.            
  46.             // Trace the path to the resulting image tiny url (mediaurl)
  47.             trace(resultXML.child("mediaurl")[0]);
  48.         }
  49.     }
  50. }

This can be used within an AIR application by importing TwitPic and initializing the class.

Sample Code
http://www.blackcj.com/PostTwitPicFromAIR.zip

]]> http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/feed/ 17 SQLite in AIR http://www.blackcj.com/blog/2008/10/20/sqlite-in-air/ http://www.blackcj.com/blog/2008/10/20/sqlite-in-air/#comments Mon, 20 Oct 2008 20:36:00 +0000 Chris Black http://www.blackcj.com/blog/?p=55 When doing research on integrating a SQLite Database into AIR I came across the following useful resources:

Learn what SQLite is About:
Introduction to the SQLite Database - David Tucker

Getting Started:
Introduction to SQLite in Adobe AIR

Tool for Creating and Modifying SQLite Databases:
SQLite Firefox Extension

By using a SQLite database it will be easy to filter data returned by services based on tags. A demo application that uses SQLite will be coming soon. Feel free to comment with any additional resources or cool demo applications that use SQLite.

]]> http://www.blackcj.com/blog/2008/10/20/sqlite-in-air/feed/ 0