Posts Tagged: source code


27
Nov 09

MouseWheelTrap – how to stop simultaneous Flash / browser scrolling in AS3

Update: This project is now hosted at GoogleCode

I recently stumbled over a new AS3 gotcha that seems to be bugging a lot of the Flash community. Apparently a new 'feature' of AS3, whereby using the mousewheel inside an embedded Flash movie still scrolls the surrounding browser window (if it has enough content, that is).

This didn't happen in AS2. If a Flash movie had focus, mousewheel events weren't sent to the browser window. It wasn't a problem in FireFox either, until a recent update and adversely affects any AS3 Flash app embedded in an HTML page where you might want to scroll or zoom with the mousewheel while over the Flash, instead of the scrolling the browser window.

So, I decided to cook up some code to fix this. While it's early version and isn't perfect, it suits my purposes, is easy to set up and doesn't require any external JavaScript - so I'd thought I'd share it with the world, in case Adobe never get around to addressing this 'feature'.

Introducing MouseWheelTrap. A handy little utility class that traps mousewheel events while the mouse is over the Flash, so your app scrolls how it was intended to. I've tested it with SWFObject on PC IE and FireFox, but not with SWFMacMouseWheel on Mac (if someone could tell me if it works). I decided against using jQuery for trapping mouse events, partly out of laziness, partly because many people have no control over the HTML that embeds their Flash app and therefore can't add custom JavaScript.

Setting up MouseWheelTrap is easy:

  • Download the MouseWheelTrap ZIP package, or just the AS file.
  • Unzip the package and have a look at the demo, or just take the MouseWheelTrap.as file and put it in the com.spikything.utils folder into your own project or classpath.
  • Import the utility and set it up somewhere in your main class like so:
  • import com.spikything.utils.MouseWheelTrap;
    MouseWheelTrap.setup(stage);

    Simple huh? Let me know how you get on...


    23
    Oct 09

    CoolIris type thing in 30 lines

    package { // Piclens type thing in 30 lines (FP10+) Liam O'Donnell - spikything.com
        import flash.display.Sprite;
        import flash.events.Event;
        public class Main extends Sprite {
            private var container :Sprite;
            private var imageGrid :Sprite;
            private var images :Array = [];
            public function Main():void {
                container = addChild(new Sprite()) as Sprite;
                imageGrid = container.addChild(new Sprite()) as Sprite;
                for (var i:uint = 0; i <200; i++) images.push(getItem(i));
                images.sortOn("z", Array.NUMERIC | Array.DESCENDING);
                for each (var item:Sprite in images) imageGrid.addChild(item);
                addEventListener(Event.ENTER_FRAME, update);
            }
            private function getItem(index:uint):Sprite {
                var item:Sprite = new Sprite();
                item.x = -(200 / 3) * 210 / 2 + (index / 3) * 210;
                item.y = (index % 3) * 160 - 40;
                item.z = 100 + Math.random() * 2000;
                item.graphics.beginFill(Math.random() * 0xffffff);
                item.graphics.drawRect(0, 0, 200, 150);
                return item;
            }
            private function update(e:Event):void {
                imageGrid.x += ((stage.stageWidth / 2) - mouseX) * .2;
                container.rotationY = ((stage.stageWidth / 2) - mouseX) * .2;
            }
        }
    }


    6
    Sep 09

    How to embed fonts in pure AS3

    On my travels as a contractor, I've seen various methods used for embedding fonts in ActionScript 3 projects (code embedded, creating font SWFs, runtime loading, etc). Each of them has its own merits (and limitations), but generally you're looking for something that's easy to do, easy to maintain (for others, not just yourself) and of course that works!

    So, here's the method I use for pure AS3 projects I compile with the Flex SDK. I embed the TTF or OTF file in a 'Style' class and include those font files in the CVS/SVN repository too - it does my head in when fonts go missing, because a designer can't remember which font they used:

    import flash.text.Font;
    import flash.text.TextFormat;

    // UNICODE RANGE REFERENCE
    /*
    Default ranges
    U+0020-U+0040, // Punctuation, Numbers
    U+0041-U+005A, // Upper-Case A-Z
    U+005B-U+0060, // Punctuation and Symbols
    U+0061-U+007A, // Lower-Case a-z
    U+007B-U+007E, // Punctuation and Symbols

    Extended ranges (if multi-lingual required)
    U+0080-U+00FF, // Latin I
    U+0100-U+017F, // Latin Extended A
    U+0400-U+04FF, // Cyrillic
    U+0370-U+03FF, // Greek
    U+1E00-U+1EFF, // Latin Extended Additional
    */

    [Embed(source = '../fonts/myfont.ttf', fontName = 'MY_FONT',
    fontWeight = 'regular', unicodeRange =
    'U+0020-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E',
    mimeType = 'application/x-font')]
    public static const MY_FONT :Class;

    public static const DEFAULT_FONT :String        = "MY_FONT";
    public static const DEFAULT_TEXT_COLOUR :int = 0xFFFFFF;
    public static const DEFAULT_TEXT_SIZE :int = 14;
    public static const MY_TEXT_FORMAT :TextFormat = new
    TextFormat(DEFAULT_FONT, DEFAULT_TEXT_SIZE, DEFAULT_TEXT_COLOUR);

    Through experience, this seems to be the most robust and maintainable way of dealing with fonts (not to throw out more flexible, but perhaps less robust ways, such as runtime loading), especially when you need control of the unicode ranges you are embedding - which I have included for reference.


    23
    Aug 09

    How to use ExternalInterface to integrate AS3 with JavaScript

    Here's a quick snippet of code for integrating your SWFs with JavaScript, using ExternalInterface:

    import flash.external.ExternalInterface;

    // Calling a JavaScript function from AS3 (with optional parameters)
    if (ExternalInterface.available) ExternalInterface.call("javascriptFunction", param1, param2);

    // Implementing a JavaScript callback in AS3 (flashFunction is called when JavaScript calls javascriptFunction)
    if (ExternalInterface.available) ExternalInterface.addCallback("javascriptFunction", flashFunction);


    3
    Jun 09

    How Wonderfl

    I've been playing around a little with the online Flash building tool, Wonderfl. If you haven't seen it already, I urge you to create an account and have a go. You can browse the weird things that people have created, fork other users' code, or write you own from scratch and see the results compiled online in realtime. It's a great way to learn graphics coding in AS3 I reckon.

    Wonderfl


    25
    Sep 07

    XML within a class

    I was recently asked about the problem of loading XML from within a class to trigger an arbitrary method. The problem was: the onLoad event triggers on the XML instance, not the class creating it. This could probably be worked around with the Delegate class, but in the past I've simply extended the XML class itself, overriding the onLoad handler and adding a callback object that's passed in (along with some error checking). It's partnered with an XMLLoader class, the source and simple demo of which you can download here.