DanWasHere Flash Blog » Flash Tips & Notes

Last character getting cropped in a static textfield

admin — Wed, 08 Sep 2010 13:47:58 +0000

You have a static textfield, set to Anti-alias for readability, you put on a couple of filters and suddenly the end of your text gets cropped in the middle of a character.

Here’s what it looked like to me:

This doesn’t always happen, it seems to be something to do with the length of the text in your textfield – if it is some magic length then you get truncation. I added some test chars at the end to see if it was a problem with the letter e in this font, but you can make it happen with other letters when the text is a certain length. It’s pretty annoying to come across by accident.

This seems to be a Flash bug to me. So what are your options to work around it?
1. Remove the filters
2. Make the text field selectable
3. Add a space at the beginning of the field.
4. Add a character at the end of the field with Alpha 0%.

Input TextFields – auto select all text

dansearle — Thu, 04 Mar 2010 23:01:11 +0000

Sometimes you want to have all the text in an input field selected when the user clicks on the field – this makes it easier to enter data quickly on certain forms, particularly if the fields are pre-filled.
But it’s not so easy to do without breaking the standard functionality of the input field. This code hopefully does it without breaking anything, and without compromising on the new functionality.

Put this demo script in Frame 1 of a fresh FLA and give it a whirl:

// Create some text TextFields

var n:Number;
var tf:TextField;
var tfmt:TextFormat = new TextFormat("_sans", 20);
for(n = 0; n < 8; n++){
tf = new TextField();
addChild(tf);
tf.defaultTextFormat = tfmt;
tf.name = "inp" + (n+1);
tf.type = TextFieldType.INPUT;
tf.width = 300;
tf.height = 30;
tf.border = true;
tf.x = 20;
tf.y = 10 + (n * 35);
if(n > 2){
tf.text = "Test text for number " + (n+1);
}
tf.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
}
// Listen on the stage for the KEY_FOCUS_CHANGE event so that we can handle
// when the user tabs into a TextField.
addEventListener(FocusEvent.KEY_FOCUS_CHANGE, handleKeyFocusChange);
function handleKeyFocusChange($e:FocusEvent):void {
// If the user tabs to a textfield, cancel the focus in handler so that
// subsequent mouse clicks in that field DON'T highlight the whole field.
if($e.relatedObject is TextField){
var tf:TextField = TextField($e.relatedObject);
tf.removeEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
tf.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
}
}
function handleMouseUp($e:MouseEvent):void {
var tf:TextField = TextField($e.target);
if(tf.selectionBeginIndex == tf.selectionEndIndex){
// If the user hasn't dragged to select text already,
// select the whole text field.
tf.setSelection(0, tf.text.length);
}
tf.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
}
function handleFocusIn($e:Event):void {
var tf:TextField = TextField($e.target);
tf.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
tf.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
}
function handleFocusOut($e:Event):void {
var tf:TextField = TextField($e.target);
tf.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
tf.removeEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
}

Basically it works by listening for the side effects zeta clear
FOCUS_IN event on each TextField - when it gets it, it then listens for the MOUSE_UP event that normally follows. When that event happens it checks if a selection has been made (which happens when the user holds and drags to highlight characters in the field), and if not it highlights the whole field. Now since it's no longer listening for the FOCUS_IN nor the MOUSE_UP events, it lets the user click again in the same field and it won't highlight it all again - this is important to make it easier for the user to work with the field.
When the user moves away from the field, the FOCUS_OUT event fires, the TextField catches it and starts listening for the FOCUS_IN event again.

All this is fine unless the user uses the keyboard to TAB into the field - if the user tabs into the field, and then uses the mouse to select characters, we don't want the whole field to highlight again, so to prevent this we have the stage listen out for the FocusEvent.KEY_FOCUS_CHANGE event. When this event fires we check if the object the focus is moving to (the relatedObject property) is a TextField, if it is then we remove the listener on that field for the MOUSE_UP event - this disables the new highlighting feature. To make sure it works again properly when the user moves out again, we start it listening for the FOCUS_OUT event.

Have I typed enough now? To see it in action:
Auto Highlighting TextField
and
download the FLA (CS4)

Oh and this all works because of the order the events come in as. When you use the mouse to focus on an Input field it goes like this:
FocusEvent.FOCUS_IN
MouseEvent.MOUSE_UP

when you use the keyboard to tab in:
FocusEvent.KEY_FOCUS_CHANGE
FocusEvent.FOCUS_IN
MouseEvent.MOUSE_UP

If this comes in useful at all, please leave a comment?

AlivePDF and Popup Blockers

dansearle — Fri, 26 Feb 2010 00:34:06 +0000

I’ve been doing some headscratching and googling the last few days over a problem I had when using http://www.alivepdf.org/ to turn a movieclip into a PDF. The class is great, and gets you a PDF no problem, and when testing in Chrome all was fine, but when I tried it in IE or Firefox, the native popup blockers caused it to stop working.
The problem is that navigateToURL() always triggers the blockers, and AlivePDF uses it when you call the PDF.save method with Method.REMOTE, which is what you do if you want it to create the PDF and open it in a new window.
So how to get around that? Well firstly you need to avoid using navigateToURL(). Some googling turned up this code (found here http://www.blogs.abeazam.com/dev/?p=37):

//set the desired URL here

var url_str:String = "http://www.yoururl.com";
//checks to see if the browser has JS on and
//if ExternalInterface is compatible with the browser
if (ExternalInterface.available) {
//calls the JS function "window.open" in a new window
ExternalInterface.call( "window.open", url_str, "_blank" );
} else {
//the fall back call is "navigateToURL"
var urlRequest:URLRequest = new URLRequest(url_str);
navigateToURL(urlRequest,"_blank");
}

But there’s a zetaclear canada
problem - AlivePDF needs to use a POST request to send the PDF bytearray - that's not possible with the ExternalInterface.call alternative.

So the solution is to split up the PHP script into two: The first, create_pdf.php receives the bytearray POST and stores it in a session var, all it returns is ok or fail. The second script, fetch_pdf.php takes no parameters, and just outputs a PDF based on whatever's in the session.
To make that work you need to change the call to PDF.save so it uses Method.LOCAL, and saves the return value, which is the PDF bytearray. Then you send that bytearray via POST to the create_pdf.php script, when that returns you can call the fetch_pdf.php script to actually get it.

But now there's another problem - if you wait for a COMPLETE event to tell you when create_pdf.php has finished, and then try to load fetch_pdf.php - you'll still trigger the popup blocker, because now you're no longer calling the script as a result of a mouse click. So you have to add a little interface and button to the app to allow the user to click to fetch the PDF when it's ready.

So to sum up, here's how it goes:

User requests a PDF.
Use PDF.save(Method.LOCAL) and store the return PDF bytearray.
Use URLLoader to send that bytearray to the create_pdf.php script, listen for the COMPLETE event.
When the COMPLETE event triggers, show the user a button to allow them to fetch the PDF.
When the user clicks the button, use the above workaround with ExternalInterface.call to load fetch_pdf-php.

Here are the two PHP scripts.
create_pdf.php

session_start();

$_SESSION['pdf_data'] = '';
// Receive the data for a PDF, store it in a session so it can be converted by a
// subsequent call to the fetch_pdf.php script.
if ( isset ( $GLOBALS["HTTP_RAW_POST_DATA"] )) {
// get bytearray
$pdf = $GLOBALS["HTTP_RAW_POST_DATA"];
$_SESSION['pdf_data'] = $GLOBALS["HTTP_RAW_POST_DATA"];
echo 'ok';
} else {
echo 'error';
}

fetch_pdf.php

// Return the PDF that was previously created and stored in the user's session.

session_start();
//echo "HEADERS SENT? " . (headers_sent($file, $line) ? "YES" : "NO") . ", " . $file . ", line: " . $line;
if ( isset ( $_SESSION['pdf_data'] ) && $_SESSION['pdf_data'] != '' ) {
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=ybs_cover_choices.pdf");
header("Content-Type: application/pdf");
header("Content-Transfer-Encoding: binary");
echo $_SESSION['pdf_data'];
} else {
echo 'An error occured.';
}

Hope that helps someone else.

What am I clicking on?

dansearle — Wed, 11 Nov 2009 11:00:12 +0000

Sometimes when you have a zetaclear complaints
complicated layout with lots of overlapping clips, masks, transparencies and such, the mouse just doesn't seem to be hitting what's directly under it. Your button won't click. There's something invisible between the mouse and your button and you can't figure out what it is.

The thing to do here is to add a listener to the stage. All mouse events end up at the stage eventually, and when they get there they tell us what was clicked:

stage.addEventListener(MouseEvent.CLICK, handleStageClick);

..........
private function handleStageClick($e:MouseEvent):void {
var tmpDo:DisplayObject = DisplayObject($e.target);
var path:String = $e.target.name;
while (tmpDo.parent && tmpDo.parent.name) {
path = tmpDo.parent.name + "." + path;
tmpDo = tmpDo.parent;
}
trace("CLICK: " + path);
}

BitmapData – turning the image to greyscale

dansearle — Wed, 23 Sep 2009 16:29:21 +0000

Here’s a useful tidbit I picked up from here:
http://www.adobe.com/devnet/flash/articles/matrix_transformations_print.html

How to turn a colour bitmapdata into greyscale.

// Turn the zeta clear reviews
object graphics to greyscale.
var matrix:Array = new Array();
matrix = matrix.concat([0.33, 0.33, 0.33, 0, 0]); // red
matrix = matrix.concat([0.33, 0.33, 0.33, 0, 0]); // green
matrix = matrix.concat([0.33, 0.33, 0.33, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
// Note, bdItem has already been created with an image.
bdItem.applyFilter(bdItem, new Rectangle(0, 0, bdItem.width, bdItem.height), new Point(0, 0), filter);