blackcj.com » Flex 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 Post to TwitPic from Flash / Flex http://www.blackcj.com/blog/2010/09/16/post-to-twitpic-from-flash-flex/ http://www.blackcj.com/blog/2010/09/16/post-to-twitpic-from-flash-flex/#comments Thu, 16 Sep 2010 22:05:43 +0000 Chris Black http://www.blackcj.com/blog/?p=861 Problem:
TwitPic has a restricted crossdomain.xml file preventing your Flash web applications from posting directly to the service.

Solution:
Create a simple PHP script to proxy the request through a server that you do have access to!

Here is the code:

PLAIN TEXT
PHP:
  1. <?php
  2.   $post_tweet_url='http://twitpic.com/api/uploadAndPost';
  3.   $file=$_FILES['media'];
  4.   $postfields = array();
  5.   $postfields['username'] = $_POST['username'];
  6.   $postfields['password'] = $_POST['password'];
  7.   $postfields['message'] = $_POST['message'];
  8.   $postfields['media'] = "@$file[tmp_name]";
  9.   $curl = curl_init();
  10.   curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 2);
  11.   curl_setopt($curl, CURLOPT_HEADER, false);
  12.   curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  13.   curl_setopt($curl, CURLOPT_BINARYTRANSFER, 1);
  14.   curl_setopt($curl, CURLOPT_URL, $post_tweet_url);
  15.   curl_setopt($curl, CURLOPT_POST, 3);
  16.   curl_setopt($curl, CURLOPT_POSTFIELDS, $postfields);
  17.   $result = curl_exec($curl);
  18.   curl_close($curl);
  19.   header ("content-type: text/xml");
  20.   echo $result ;
  21. ?>

Just create a PHP file with the contents above and replace the post URL from my previous example with the path to this script.

Enjoy!

]]> http://www.blackcj.com/blog/2010/09/16/post-to-twitpic-from-flash-flex/feed/ 5 Fix Disappearing Fonts Caused by SWC’s http://www.blackcj.com/blog/2010/01/03/resolve-swc-font-conflicts/ http://www.blackcj.com/blog/2010/01/03/resolve-swc-font-conflicts/#comments Mon, 04 Jan 2010 01:15:47 +0000 Chris Black http://www.blackcj.com/blog/?p=659 Have you ever had that feeling that something is very wrong in your project? Maybe that some paranormal force is working against you? Well, when embedded text starts disappearing after adding a SWC to a project, that's the feeling I used to get.

Problem:
Let me start by saying SWC's are great. I've been using them more and more to include third party API's, utilities and assets. There is one problem, embedding a font into an asset in a SWC will override the internally defined fonts in a project. Why is that bad? Well lets say you have a static text field in your SWC using Georgia and a TextField instance in your Flex project using Georgia. No text will show up in your Flex TextField. Check out this example (notice it starts invisible):

SWC Text Embed Conflict:

Example of Conflicting Fonts

Get Adobe Flash player

(switch between MyGeorgia and Georgia fonts to see the disappearing text)

Full source code can be found here.

Solution:
Define your embed tags in ActionScript with a different fontFamily and fontName. So, if your font is Georgia than name it EmbedGeorgia. This will allow your TextField to reference the correct class definition. In my experience the SWC will always win if there is a conflict.

PLAIN TEXT
Actionscript:
  1. [Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="MyGeorgia",
  2.     fontName="MyGeorgia", fontWeight="normal", mimeType="application/x-font" )]
  3. private var MyGeorgiaFont:Class;
  4. public static const MY_GEORGIA:String = "MyGeorgia";

rather than...

PLAIN TEXT
Actionscript:
  1. // This will conflict with Georgia references in a SWC!!!
  2. [Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="Georgia",
  3.     fontName="Georgia", fontWeight="normal", mimeType="application/x-font" )]
  4. private var GeorgiaFont:Class;
  5. public static const GEORGIA:String = "Georgia";

It's that easy?
Yup.

What if you have two SWC's with Georgia embedded text?
Will they conflict with each other? Based on the example above the answer is no. Awesome!

What if my fonts are stored in a SWF file?
Than duplicate the above code but reference your SWF instead of the font in the assets folder.

Code that results in invisible text:

PLAIN TEXT
Actionscript:
  1. // This will conflict with Georgia references in a SWC!!!
  2. [Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="Georgia",
  3.     fontName="Georgia", fontWeight="normal", mimeType="application/x-font" )]
  4. private var GeorgiaFont:Class;
  5. public static const GEORGIA:String = "Georgia";
  6.  
  7. private var georgiaFormat:TextFormat;
  8. private var georgiaText:TextField;
  9.  
  10. public function ConflictingFonts()
  11. {
  12.     // Component from SWC which uses Georgia in a static text field
  13.     var cc:ColorComponent = new ColorComponent();
  14.     cc.colorPicker.addEventListener(ColorPickerEvent.CHANGE, selectColor, false, 0, true);
  15.     cc.y = 30;
  16.     this.addChild(cc);
  17.    
  18.     // Create the local TextFormat
  19.     georgiaFormat = new TextFormat(GEORGIA, 18);
  20.    
  21.     // Create the local TextField (the text won't show up!)
  22.     georgiaText = new TextField();
  23.     georgiaText.embedFonts = true;
  24.     georgiaText.width = 300;
  25.     georgiaText.height = 20;
  26.     georgiaText.defaultTextFormat = georgiaFormat;
  27.     georgiaText.setTextFormat(georgiaFormat);
  28.     georgiaText.text = "Hello World";
  29.     this.addChild(georgiaText);
  30. }

Swap out the Embed tag, update the TextFormat and you will be good to go.

Rant:

On the way to this solution I came up with a number of hacks that appeared to work only to break at the worst time. These hacks included storing a second reference of the font in the SWC (assuming you have access to the source), enumerating through the font list at runtime (which only fixes the problem in debug), and breaking apart the text into bitmaps (you don't want to know how long that takes). Rather than stop using SWC's I started to create more and more of them pushing towards an acceptable solution. This is what I ended up on. Hopefully it will save everyone some time and a little sanity ;)

]]> http://www.blackcj.com/blog/2010/01/03/resolve-swc-font-conflicts/feed/ 6 Don’t Forget to Update Your Adobe Products http://www.blackcj.com/blog/2009/12/27/dont-forget-to-update-your-adobe-products/ http://www.blackcj.com/blog/2009/12/27/dont-forget-to-update-your-adobe-products/#comments Sun, 27 Dec 2009 20:02:07 +0000 Chris Black http://www.blackcj.com/blog/?p=640 Is Flash CS4 crashing when you try to open an FLA? Are you pulling out your hair wondering why Flex 3 doesn't auto complete BitmapData? Adobe Updater may be the answer.

Flash CS4 10.0.2

One of my co-workers called me over to troubleshoot when a folder full of FLAs were crashing Flash CS4 every time he tried to open them. He had already tried a fresh install of the software and had all of the necessary fonts. So why did it crash? Well it turns out that Flash CS4 had a bug where it would crash when embedded fonts are used.

"FLA crash on open when fonts loaded." -Glavan on Flash (detailed list of what was fixed)

After running Adobe Updater everything worked great!

Flex Builder 3.0.2

How about Flex Builder? I recently installed Windows 7 with a fresh copy of Flex Builder 3 Professional. Unfortunately I pulled the install from one of my external hard drives and it was version 3.0.1 rather than 3.0.2. A major bug with version 3.0.1 using SDK 3.3 and higher is that BitmapData does not auto complete. After trying multiple versions of the SDK I finally found the bug report on Adobe Bugs citing that the problem was fixed in version 3.0.2.

After running Adobe Updater everything worked great!

See the common theme here? I tend to disable most of the automatic software updates since they are usually very annoying. After my experiences over the past week I will be checking Adobe Updater much more frequently! Always update after a fresh install.

]]> http://www.blackcj.com/blog/2009/12/27/dont-forget-to-update-your-adobe-products/feed/ 0 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 How to Fix Fuzzy Pixels in Flex http://www.blackcj.com/blog/2009/03/10/how-to-fix-fuzzy-pixels-in-flex/ http://www.blackcj.com/blog/2009/03/10/how-to-fix-fuzzy-pixels-in-flex/#comments Tue, 10 Mar 2009 16:16:52 +0000 Chris Black http://www.blackcj.com/blog/?p=264 What are fuzzy pixels? Semi-transparent lines that appear on the edges of your Sprites that make them appear fuzzy or blurry. This is the result of positioning a custom drawn Sprite (using the graphics property) on non-whole number pixels (for example myObject.x = 1.5).

Your probably wondering why anyone would set a Sprite to an decimal number of pixels? Well, most of the time this occurs when the positioning is based off of a mathematical equation. For example: myObject.x = this.width / 2. This would produce 50.5 if the width of the container is 101. One of the biggest problems with this is that the fuzzy pixel problem has a waterfall effect. Everything contained within that sprite placed at a decimal number position will have semi-transparent edges. Another reason would be designers that set positioning of items to half pixels in Photoshop and attempting to reproduce the design pixel perfect in Flex.

Here is a zoomed in picture of what fuzzy pixels look like. The first and second squares are drawn using the same drawing function. One is placed on an even pixel and the other at a decimal number.

Fuzzy Pixels (Semi-Transparent Lines)

Fuzzy Pixels (Semi-Transparent Lines)

Code that produces fuzzy pixels:

PLAIN TEXT
Actionscript:
  1. private var fuzzySquare:Sprite;
  2. private var square:Sprite;
  3.  
  4. private var squareContainer:Sprite;
  5.  
  6. public function draw():void
  7. {
  8.     squareContainer = new Sprite();
  9.     squareContainer.x = 1;
  10.     squareContainer.y = 1;
  11.  
  12.     square = new Sprite();
  13.     square.x = 0;
  14.     square.y = 0;
  15.     square.graphics.clear();
  16.     square.graphics.beginFill(0x0000FF);
  17.     square.graphics.drawRect(0,0,30,20);
  18.     square.graphics.endFill();
  19.     squareContainer.addChild(square);
  20.    
  21.     fuzzySquare = new Sprite();
  22.     fuzzySquare.x = square.x + square.width + 3.5;
  23.     fuzzySquare.y = 0;
  24.     fuzzySquare.graphics.clear();
  25.     fuzzySquare.graphics.beginFill(0x0000FF);
  26.     fuzzySquare.graphics.drawRect(0,0,30,20);
  27.     fuzzySquare.graphics.endFill();
  28.     squareContainer.addChild(fuzzySquare);
  29.  
  30.     container.addChild(squareContainer);
  31. }

Solutions:
Use Math.floor or Math.ceil on all mathematical calculations relating to the positioning of Sprites drawn with the graphics function.

or

Rather than draw out the Sprite using graphics you could convert your sprites to images, embed them, and position them on the stage. This is the best approach when tweening is necessary requiring the object to look crisp at all times.

Note: I've seen this occur on odd number pixels as well but that is most likely the result of a greater positioning problem. This generally only occurs in highly nested display objects.

]]> http://www.blackcj.com/blog/2009/03/10/how-to-fix-fuzzy-pixels-in-flex/feed/ 2 Registration Open for MN.swf Camp 2009 http://www.blackcj.com/blog/2009/03/05/mnswf-camp-2009/ http://www.blackcj.com/blog/2009/03/05/mnswf-camp-2009/#comments Thu, 05 Mar 2009 22:15:44 +0000 Chris Black http://www.blackcj.com/blog/?p=257 MN.swf Camp presented by Flashbelt

MN.swf Camp presented by Flashbelt

Who Should Attend?
Anyone interested in Flash, Flex, ActionScript or Adobe AIR.

What is MN.swf Camp?
A one-day event focused on connecting the local developer community and providing education on Flash Platform technologies. All for only $40!

When is it?
Monday, April 6, 2009 from 9:00am - 5:00pm

How do I register?
Go to http://mnswf.com/camp/ and register today!

Where will it be?
Minneapolis Central Library, 300 Nicollet Mall, Minneapolis, MN 55401 (Google Maps)

Speakers:
Jason Grey, Brad Bollinger, Chris Black, Nate Pacyga, Danny Patterson, Scott Langeberg, Wade Arnold, Jonathan Doklovic and Dustin Tauer

]]> http://www.blackcj.com/blog/2009/03/05/mnswf-camp-2009/feed/ 1 Display TwitPic Images in Flex & AIR http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/ http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/#comments Tue, 24 Feb 2009 00:50:37 +0000 Chris Black http://www.blackcj.com/blog/?p=230 Problem:
The TwitPic API does not currently support outgoing requests and the image source from amazon aws contains an AWS AccessKeyId, expiration time stamp, and signature. This would normally require a regular expression to rip the source JPG path out of the HTML. Ripping the source out of the HTML is a bit of a pain and is not a long term solution. It is possible to use the following shortened url to gain access to the full image path using the TwitPic image id.

Solution:
Use this url to gain access to the full http://twitpic.com/show/full/s0z4.jpg and thumbnail http://twitpic.com/show/thumb/s0z4.jpg images (replace the s0z4 with your image id). Notice that this shortened path returns the longer url that would normally have to be ripped out of the HTML to gain access to the image.

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.     id="rssParse"
  3.     url="php/twitpic.php"
  4.     result="processResult(event)"
  5.     resultFormat="e4x" />

PLAIN TEXT
PHP:
  1. <?php
  2.   $twitter_feed = 'http://twitpic.com/photos/chrisjblack/feed.rss';
  3.   $rawfeed = @file_get_contents($twitter_feed);
  4.   print $rawfeed; 
  5. ?>

PLAIN TEXT
Actionscript:
  1. import mx.collections.ArrayCollection;
  2. import mx.rpc.events.ResultEvent;
  3.  
  4. [Bindable]
  5. private var _rssResults:ArrayCollection;
  6.  
  7. // Define and use atom namespace.
  8. private namespace atom = "http://www.w3.org/2005/Atom";
  9. use namespace atom;
  10.  
  11. private function processResult(event:ResultEvent):void
  12. {
  13.     var xmlList:XMLList = event.result.channel.item as XMLList;
  14.     for each(var item:XML in xmlList){
  15.         // Formatt the date
  16.         var myDate:String = item.pubDate;
  17.         myDate = myDate.slice(0,22);
  18.        
  19.         // Pull the image id out of the link url
  20.         var imageId:String = item.link;
  21.         imageId = imageId.replace("http://twitpic.com/", "");
  22.        
  23.         // Push the results into our data array
  24.         _rssResults.addItem({title: item.title, date: myDate, id: imageId});
  25.     }
  26. }
  27.  
  28. private function init():void
  29. {
  30.     _rssResults = new ArrayCollection();
  31.     rssParse.send();
  32. }

PLAIN TEXT
HTML:
  1. <mx:VBox width="900" height="500" horizontalAlign="center"> 
  2.     <mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
  3.     <mx:VBox height="450" width="800" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
  4.         <mx:Repeater id="twitter" dataProvider="{_rssResults}">
  5.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
  6.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
  7.             <mx:Image source="http://twitpic.com/show/thumb/{twitter.currentItem.id}.jpg" />
  8.             <mx:Image source="http://twitpic.com/show/full/{twitter.currentItem.id}.jpg" />
  9.         </mx:Repeater>     
  10.     </mx:VBox> 
  11. </mx:VBox>

This allows for Adobe AIR applications to post to (Post to TwitPic from Adobe AIR) and retrieve images from TwitPic.

View Sample / Source Files

Links:
TwitPic Previewer

]]> http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/feed/ 2 Error Loading Project – Missing Project Files http://www.blackcj.com/blog/2009/02/22/error-loading-project-missing-project-files/ http://www.blackcj.com/blog/2009/02/22/error-loading-project-missing-project-files/#comments Mon, 23 Feb 2009 01:34:26 +0000 Chris Black http://www.blackcj.com/blog/?p=221 Problem:
An SVN conflict caused the .flexProperites and .asProperties files to be deleted. This caused Flex Builder to prompt "Error Loading Project" with the message "A problem occurred when opening project "Your Project". Try quitting and restarting the application. If the problem persists, you might be using an unsupported project version, or your project files might be corrupt.

Put simply, a developer checked in their .properties files, which cause an error when doing an SVN update, and was resolved by removing these files from SVN. The next time anybody did an update on the root directory of the project after the files were removed the local copies where removed.

Error Loading Project

Error Loading Project

Solution:
Add the missing files back to your root directory and use SVN ignore on the .flexProperties and .asProperties files. Best practice would be to set up SVN to ignore these project specific files. It is also important to rename and keep a 'copy' of your .asProperties file (for example asProperties, without the dot). This allows new team members to download the project, add the dot and have the project correctly set up.

Has anyone else come across this same prompt using Flex Builder 3 and found a different cause / solution? Please post a comment with any other insight on this error.

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

Links:
Subclipse
Tortoisesvn

]]> http://www.blackcj.com/blog/2009/02/22/error-loading-project-missing-project-files/feed/ 3 Skinning Flex Components – Part 1: CSS http://www.blackcj.com/blog/2009/01/06/skinning-flex-components-part-1-css/ http://www.blackcj.com/blog/2009/01/06/skinning-flex-components-part-1-css/#comments Wed, 07 Jan 2009 05:50:19 +0000 Chris Black http://www.blackcj.com/blog/?p=146 This will be a three part series on skinning Flex components. For part one I have chosen to desolve the myth that Flex 3 can't truly cascade styles. This three part series will start simple and get more complex with each post. You can use this code to mimic descendant selectors, dimensioning and multiple class names within Flex.

Problem:
Flex can't do true cascading styles like HTML (for example a black play button)

Solution:
YES, flex can do cascading styles. It just requires a different approach. A programmatic approach. Don't worry, I assure you that even a non-programmer can pick this one up.

Lets dive a little deeper. Cascading styles refers to the ability to start with a button, style it into a black button then go a step further and make it a play button. First, create a button and use some CSS to style various properties of that button.

PLAIN TEXT
HTML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:text="flash.text.*">
  3.     <mx:Style source="css/styles.css" />
  4.    
  5.     <mx:Button label="Click Me"/>
  6. </mx:Application>

PLAIN TEXT
CSS:
  1. Button {
  2.     cornerRadius: 12;
  3.     fontSize: 15;
  4. }

Simple enough, right?

Next we want a black button:

PLAIN TEXT
Actionscript:
  1. package com.cb
  2. {
  3.     import mx.controls.Button;
  4.  
  5.     public class BlackButton extends Button
  6.     {
  7.         public function BlackButton()
  8.         {
  9.             super();
  10.         }
  11.     }
  12. }

There it is. All the actionscript you will need. And to think it was all auto generated!

Actionscript Class Generation

Actionscript Class Generation

Add the MXML and CSS:

PLAIN TEXT
HTML:
  1. ...
  2. <button:BlackButton label="Click Me" /> 
  3. ...

PLAIN TEXT
CSS:
  1. BlackButton {
  2.     fillAlphas: 1.0, 1.0;
  3.     fillColors: #000000, #000000;
  4.     color: #FFFFFF;
  5. }

Now we have a black button. This process can be used as many times as you want to continually inherit properties from another object. You could have a small, blue button with red text all styled at each level.

Lastly, we need to add the play icon:

PLAIN TEXT
HTML:
  1. ...
  2. <button:BlackButton label="Click Me" styleName="playButton" /> 
  3. ...

PLAIN TEXT
CSS:
  1. .playButton {
  2.      icon: Embed(source='assets/play.png');
  3. }

Now we have a black play button. Add a stop, pause, and mute button as BlackButton's and they will all be updated when you modify the style for either the base Button class or the BlackButton class. Again, this tutorial is not very technical but the next two will be. This is meant to be the first step in bridging the gap between design and actionscript using Flex 3.

The number of comments I get on this post will exponentially increase the likelihood of part 2 coming out sooner :)


Sample

Source View



References:

The Woes of Flex

CSS in Flex is not real CSS at all

Adobe Bug Page


]]> http://www.blackcj.com/blog/2009/01/06/skinning-flex-components-part-1-css/feed/ 6 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