Posts Tagged Flex and ActionScript
Stopp Internet Explorer’s CTRL – MouseWheel
As a Flex developer I come in contact with all sorts of problems when I run my applications in Internet Explorer 7. One of the most annoying ones is the one where CTRL – MouseWheel will resize the Flex application area itself, even when the application is scaled to 100% * 100% of your browser window and has focus. This is impossible to accept and here is the solution to the problem.
Assuming that you’re working with Flex Builder, all you have to do is edit the index.template.html file a little bit. Such that it contains the following JavaScript.
function catchCtrlMouseWheel() { if (window.event.type == "mousewheel" ) { if (window.event && window.event.wheelDelta ) { return window.event.ctrlKey ? false : true; } } return true; }
And in the <body>-tag:
<body onmousewheel="return catchCtrlMouseWheel()">
Use cacheAsBitmap correctly – or not at all
You may have heard that the cacheAsBitmap functionality introduced in FlashPlayer 8 and available since Flex SDK 3 can sometimes help you improve performance. That is true, but only as long as the disply object is only moved.
- If you apply any other transformation on the display object, FlashPlayer will cache a new rasterised version of the object for each iteration of the transformation.
- If you apply any filters to your object, two versions are cached, one “normal” and one for the filtered result.
Both of these things may result in a higher than necessary load on your CPU and memory resources, when doing anything but only moving the display object.
Therefore, use cacheAsBitmap only on display objects that you know will only be moved around the stage, never on objects that will have any other sort of transformation.
An added problem with cacheAsBitmap is a known “bug” in the Mac version of the FlashPlayer where display objects that are using it can misunderstand their own redraw regions, resulting in a corrupted view. It seems rather rare though.
Also, when extending UIComponents – the default FlashPlayer behaviour is to heuristically try to find out if you usually cacheAsBitmap. If you look at the code in UIComponent of Flex 3 SDK you will find the following statement:
private var _cachePolicy:String = UIComponentCachePolicy.AUTO;
To make sure that the default behaviour of all of your objects that inherit from UIComponent instead inherit from your own extension of UIComponent which could invoke
this.setCachePolity = UIComponentCachePolicy.OFFThere are many people out there who have opinions about the cacheAsBitmap functionality as it is implemented today. Two examples are:
MouseWheel Event on Mac
When working with Adobe Flex you may have encountered trouble when trying to get mousewheel functionality to work on Mac OSX. Even though Flex natively supports the MouseWheel event it does not trigger in the browsers that I have tried on Mac (Safari and FF3) – this is probably due to the OS or the browser “stealing” the MouseWheel event for its own purposes.
The solution for this is to get JavaScript to communicate with your Flex application and “forward” the MouseWheel event.
Gabriel @ Pixelbreaker has solved this with a really nice little implementation that he calls SWFMacMouseWheel. Read all about it here.
Step 1
Download the “source and demo” code found below the post. Move the file com.pixelbreaker.ui.osx.MacMouseWheel.as to your Flex 3 project.
Step 2
Create a folder called “js” in your html-template folder. Move the files swfmousewheel2.js and swfobject.js to that folder.
Step 3
In the html-template folder edit the index.template.html file to correspond with the file included in the zip you downloaded. It should contain roughly the following:
var vars = {}; var params = { scale:'noScale', salign:'lt', menu:'false' }; var attributes = { id:'testObject', name:'testObject' }; // give an id to the flash object swfobject.embedSWF("test_as3.swf", "flashContent", "100%", "100%", "10.0.0", "playerProductInstall.swf", vars, params, attributes ); swfmacmousewheel.registerObject(attributes.id);
Don’t forget to include the two javascript files you copied to the js-folder.
Final step
In your application startup code invoke the following code:
import com.pixelbreaker.ui.osx.MacMouseWheel; MacMouseWheel.setup( stage );
And you should be set to go.
Triggering a Save File Dialogue from Flex
With the recent release of the Adobe Flex SDK 3.3 comes the fantastic new FileReference class. Now, anybody who has ever worked in Flex must have been very annoyed with the fact that you actually sometimes have to write server side operations to be able to trigger normal loading and saving of files.
With FileReference it’s as simple as this:
var myFileReference:FileReference = new FileReference(); myFileReference.save("i just put some string data here lol", "filename.txt");
and you’re done!
To get access to this functionality you will need to download the Flex 3.3 SDK.
If you are using FlexBuilder:
- install the sdk in the “sdks” directory of your FlexBuilder installation
- in Windows » Preferences » Flex » Installed Flex SDKs: Add the new SDK by simply pointing to the SDK path (and set it as default)
- make sure that your project’s preferences is set to use the new SDK
- Finally, set your project to demand at least Flash Player 10 from users (if you plan on using any of the new Classes)
A very slight drawback for this simple but fantastic feature is that the code triggering the FileReference has to be initiated by a user Event. For security reasons of course.
This feature made me very happy and saved our project from at least a day of writing serverside crap.
HandCursor problems in Flex
Many times you will want any given component in Adobe Flex to use the hand cursor when you are hovering it, to indicate that you can click it. But on some components you will have to go through a few more steps than is intuitive.
Take for example the Label component. You may assign it as follows:
myLabel.useHandCursor = true; myLabel.buttonMode = true;
And hope that your are done.
WRONG!
You will need to set the property mouseChildren to false for it to work. Like such:
myLabel.useHandCursor = true; myLabel.buttonMode = true; myLabel.mouseChildren = false;
And now you are done, incidentally this will work for most Flex components. 
DragScrollingCanvas – from the wonderful flexlib
At Projectplace we are currently in the process of developing an exiting thing: a fast and easy to use planning tool (working name: Yap)! You can read more about that at Projectplace Labs.
The reason for this little post however is to promote the open source project flexlib and more specifically a component contained therein, the DragScrollingCanvas. Brad Rice covers the basics of this component.
We’ve had much use of this little component in our early development of our timeline view, and whatever your Flex needs might be, you are sure to find tons of helpful components in flexlib.
One thing that we were lacking was the ability to make some components contained in a DragScrollingCanvas move together with the view port. Basically, we wanted a few components to be able to “float” on top of the Canvas, keeping its relative position at all times. We solved this by dispatching an event from within the DragScrollingCanvas itself. So, first we typed up a little Event (the below event only allows relative positioning vertically).
package com.projectplace.graphics.events { import flash.events.Event; public class DragScrollEvent extends Event { public static const DRAGSCROLLED:String = "dragscrolled"; public var _y:Number; public function DragScrollEvent(type:String, y:Number) { super(type, false); this._y = y; } } }
and within DragScrollingCanvas we dispatched this event as soon as some scrolling occured, in the systemManager_mouseMoveHandler function. Last in this function we added:
dispatchEvent(new DragScrollEvent(DragScrollEvent.DRAGSCROLLED, this.verticalScrollPosition));
This allowed us to be able to listen for the event in the application, and move whatever component within the canvas to a new position on the canvas, while the user is scrolling. If you’re crafty you can easily expand this functionality to the horizontal axis as well. Anyway, this is the result, so far. Notice how the date bar on top, follows your scrolling vertically