LogoLogo
  • Home
  • Projects
  • About
  • Contact

Active Window Blur

Devon O. · July 03, 2008 · Actionscript, Flash · 52 comments
2

I was checking out a website yesterday when it suddenly reminded me of a Pixelfumes experiment I remembered seeing many moons ago. After finding it with a quick Google search, just for kicks, I decided to play around and update the idea to AS3. I didn’t bother with the constant updating to accomadate video as that seemed a tad processor hungry, but it wouldn’t be difficult to implement at all. What I would rather do with it is make it possible to open several windows at once all masking the same background image. Maybe later on tonight.

Anyway here’s the script for interested parties. An example follows below. Thank you to Pixelfumes for the original idea and AS2 script.

WindowBlur.as:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
package com.onebyonedesign.extras {
    
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.DisplayObjectContainer;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.filters.BlurFilter;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    
    /**
    * Blurs a background (MovieClip or Sprite) behind a transparent window (MovieClip or Sprite).
    * Based on Pixelfumes AS2 class
    *
    * @author Devon O.
    */
    public class WindowBlur {
        
        private var _background:DisplayObjectContainer;
        private var _window:DisplayObjectContainer;
        
        private var _blurredImageData:BitmapData;
        private var _blurredImage:Bitmap;
        private var _mask:DisplayObjectContainer;
        private var _blurAmount:int;
        
        private var _blur:BlurFilter;
        private var _point:Point = new Point();
        
        /**
         *
         * @param    background        MovieClip or Sprite which will be blurred behind window.
         * @param    window            (Semi) transparent MovieClip or Sprite behind which will be a blurred background.
         * @param    blurAmount        The amount of blur to apply to background image.
         *
         * NOTE: background and window objects *must* be added to display list before instantiating an instance of this class.
         * TODO: allow multiple window instances with same background.
         * FLASH BUG:     If window instance is created programatically, it cannot have filters applied.
         *                 If window instance is linked to MovieClip in library it CAN have filters applied.
         */
        public function WindowBlur(background:DisplayObjectContainer, window:DisplayObjectContainer, blurAmount:int = 8 ):void {
            _background = background;
            _window = window;
            _blurAmount = (blurAmount >= 0 && blurAmount < = 255) ? blurAmount : 16;
            _blur = new BlurFilter(_blurAmount, _blurAmount, 3);
            
            initBlur();
            initMask();
        }
        
        private function initBlur():void {
            _blurredImageData = new BitmapData(_background.width, _background.height, false);
            _blurredImageData.draw(_background);
            _blurredImageData.applyFilter(_blurredImageData, _blurredImageData.rect, _point, _blur);
            _blurredImage = new Bitmap(_blurredImageData);
            
            _background.addChild(_blurredImage);
        }
        
        private function initMask():void {
            var MaskClass:Class = Object(_window).constructor;
            _mask = new MaskClass();
            _mask.filters = _window.filters;
            _blurredImage.mask = _mask;
            _mask.visible = false;
            
            _window.addChildAt(_mask, 0);
        }
        
        private function update():void {
            _background.removeChild(_blurredImage);
            _blurredImageData.dispose();
            initBlur();
            _blurredImage.mask = _mask;
        }
        
        public function kill():void {
            _background.removeChild(_blurredImage);
            _window.removeChild(_mask);
            
            _blurredImageData.dispose();
            
            _blurredImage = null;
            _blurredImageData = null;
            _mask = null;
            _blur = null;
        }
        
        public function get blurAmount():int { return _blurAmount; }
        
        public function set blurAmount(value:int):void {
            _blurAmount = value;
            _blur.blurX = _blur.blurY = _blurAmount;
            update();
        }
    }
}

Main.as (document class):

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
package {
    
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.filters.DropShadowFilter;
    import com.onebyonedesign.extras.WindowBlur;
    import com.onebyonedesign.ui.OBO_ValueSlider;
    import com.onebyonedesign.ui.events.ValueSliderEvent;
    import flash.geom.Rectangle;
    import flash.text.AntiAliasType;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    
    /**
    * Demonstrates WindowBlur Class
    * @author Devon O.
    */
    public class Main extends Sprite {
        
        // GraphicWindow is MovieClip in .fla library
        private var _window:GraphicWindow;
        // Background is MovieClip in .fla library
        private var _bg:Background;
        private var _windowBlur:WindowBlur;
        private var _shadow:DropShadowFilter = new DropShadowFilter(2, 90, 0x000000, 1, 2, 2, 1, 3);
        private var _dragBounds:Rectangle;
        
        public function Main():void {
            // Background is MovieClip in .fla library
            _bg = new Background();
            addChild(_bg);
            init();
        }
        
        private function init():void {
            initWindow();
            initBlur();
            initControlPanel();
        }
        
        private function initWindow():void {
            // GraphicWindow is MovieClip in library
            _window = new GraphicWindow();
            _window.x = int(stage.stageWidth * .5 - _window.width * .5);
            _window.y = int(stage.stageHeight * .5 - _window.height * .5);
            _window.filters = [_shadow];
            
            _dragBounds = new Rectangle(0, 0, stage.stageWidth - _window.width, stage.stageHeight - _window.height);
            
            addChild(_window);
            _window.addEventListener(MouseEvent.MOUSE_DOWN, pressHandler);
        }
        
        private function initBlur():void {
            _windowBlur = new WindowBlur(_bg, _window);
        }
        
        private function initControlPanel():void {
            var cp:Sprite = new Sprite();
            cp.graphics.beginFill(0xEAEAEA);
            cp.graphics.drawRoundRect(0, 0, 150, 30, 10, 10);
            cp.graphics.endFill();
            cp.filters = [_shadow];
            cp.x = 10;
            cp.y = stage.stageHeight - cp.height - 10;
            
            var tf:TextField = new TextField();
            var fmt:TextFormat = new TextFormat("_sans", 11);
            tf.defaultTextFormat = fmt;
            tf.autoSize = TextFieldAutoSize.LEFT;
            tf.selectable = false;
            tf.mouseEnabled = false;
            tf.antiAliasType = AntiAliasType.ADVANCED;
            tf.text = "Blur amount:";
            tf.x = 5;
            tf.y = 5;
            cp.addChild(tf);
            
            var blurSlider:OBO_ValueSlider = new OBO_ValueSlider(tf.textWidth, 0, 64, _windowBlur.blurAmount);
            blurSlider.x = tf.x + tf.textWidth + 8;
            blurSlider.y = 13;
            blurSlider.addEventListener(ValueSliderEvent.DRAG, blurChangeHandler);
            cp.addChild(blurSlider);
            
            addChild(cp);
        }
        
        private function blurChangeHandler(event:ValueSliderEvent):void {
            _windowBlur.blurAmount = int(event.value);
        }
        
        private function pressHandler(event:MouseEvent):void {
            stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandler);
            _window.startDrag(false, _dragBounds);
        }
        
        private function releaseHandler(event:MouseEvent):void {
            stage.removeEventListener(MouseEvent.MOUSE_UP, releaseHandler);
            _window.stopDrag();
        }
    }
    
}
  Facebook   Pinterest   Twitter   Google+
  • Old Skool Demoscene FX as 3D Textures
    July 31, 2011 · 1 comments
    6637
    11
    Read more
  • Sleep Has His House
    February 23, 2008 · 0 comments
    2080
    3
    Read more
  • UV Scrolling in Starling
    May 07, 2012 · 5 comments
    4945
    14
    Read more
52 Comments:
  1. Nice work! I’ll have to do a cross post on this one ;)

    Ben · July 13, 2008
  2. Looks great ! I was looking for a way to do this just the other day, thanks

    Marc Pelland · July 14, 2008
  3. Thank you for the comments, Ben and Marc. You might also want to check out the post after the next post (“Active Window(S) Blur”).. I came up with a way that will allow multiple windows blurring the same background. Uses an enter frame event though which I’m not really happy about..

    Devon O. · July 15, 2008
  4. Hello,
    Very good effect =)
    In the last week, I have to make this effect in a
    temporarily website.
    Today, I see your blog and I wish to kill me….lol
    My blur mask is very good too, but i did doubling my image with blur and applying a mask.
    Congratulations, your blog is very nice.
    Sorry my terrible English …lol

    Yves · August 27, 2008
  5. Hello Yves.. Doubling the image and using a mask is essentially the same thing I did here. The effect on your site looks quite nice..
    Thank you for the comments. And I can guarantee you that your English is much better than my Portuguese..

    Devon O. · August 29, 2008
  6. NOTE:

    If you copy and paste from the WindowBlur.as source above it will not compile.

    This line has a space between the < and the = in the = 0 && blurAmount = 0 && blurAmount <= 255) ? blurAmount : 16;

    Skye · September 08, 2008
  7. Doh, it appears the comment submission didn’t escape the greaterthan and less than characters. Let’s try again:
    NOTE:
    If you copy and paste from the WindowBlur.as source above it will not compile.
    This line has a space between the < and the = in the <= comparison operator:
    _blurAmount = (blurAmount >= 0 && blurAmount < = 255) ? blurAmount : 16;

    It should read:
    _blurAmount = (blurAmount >= 0 && blurAmount <= 255) ? blurAmount : 16;

    Skye · September 08, 2008
  8. Hi. Great class, it;s saved me a ton of hassle. Any ideas though why only a small section of my stage gets blurred? Is there something I need to do to alter the size of the allowed blur area?

    But yeah, sweet class. :)

    Andrew · November 28, 2008
  9. Nice class – how do I get it to work over a video? I’ve tried h264 (NetStream), FLV (FLVPlayback Component and embedded on stage) – and it shows up as a solid square when dragged over the video. Any advice?

    Thanks

    Jonathan · December 10, 2008
  10. Is there an FLA download

    t · December 29, 2008
  11. Hey folks,
    When I use an fla to call the Main.as I get two errors in the WindowBlur.as

    **Error** WindowBlur.as, Line 45: 1084: Syntax error: expecting identifier before assign.
    _blurAmount = (blurAmount >= 0 && blurAmount < = 255) ? blurAmount : 16;

    **Error** WindowBlur.as, Line 46: 1084: Syntax error: expecting rightparen before _blur.
    _blur = new BlurFilter(_blurAmount, _blurAmount, 3);

    can anyone help

    tim · December 29, 2008
  12. there is a download here: http://www.onebyonedesign.com/downloads/window_blur.zip – it doesn’t include the ValueSlider however. You can either replace it with your own component or download the full UI library here: http://www.onebyonedesign.com/flash/ui/ . Hope it helps out..

    Devon O. · December 30, 2008
  13. Outstanding work. It apparently does not work over video however. Has this been fixed?

    Villmer · January 09, 2009
  14. I don’t know if it’s a case of considering it “fixed” or not as it was never intended to work with video. Check out the link to the Pixelfumes blog at the top of the post. His AS2 version works with video – you could just do a port to AS3 as I did..

    Devon O. · January 11, 2009
  15. this is a great port to as3 of the mighty pixelfumes code.
    i was planning to do something similar in one of my as3 projects and google brought me to you.

    i tried looking at the example zip file & it gives a ‘unexpected file format’ error.

    any chnage a repost of the zip ? or is it just me.. :o)

    MUX · January 14, 2009
  16. ps. dont worry i got your second example to work..
    great job..

    MUX · January 14, 2009
  17. Very nice code.

    Could i have, please, a .fla version where the main.as class is not linked in the document property, where i can call directly from the actionscript code?.

    Thank you very much

    Davide · July 10, 2009
  18. I m trying to implement this effect on one of my websites, I do not have access to the libraries

    import com.onebyonedesign.ui.OBO_ValueSlider;
    import com.onebyonedesign.ui.events.ValueSliderEvent;

    Is there anyway to import them from somewhere..I think the effect is worth it

    Carlos Ramirez · January 12, 2010
  19. Hey Carlos, those are classes from a package of ui items I put together long ago. You can see examples of all the items and download them here: http://www.onebyonedesign.com/flash/ui/

    Devon O. · January 13, 2010
  20. I don’t think the OBO classes work…

    I posted about them in Devon’s Kirupa Source/Experiments page, but no response.

    BHJodoKast · February 18, 2010
  21. which classes are you having problems with, BHJodoKast? All of them should work fine.

    Devon O. · February 19, 2010
  22. _blurAmount = (blurAmount >= 0 && blurAmount = 0 && blurAmount <= 255) ? blurAmount : 16;

    also, unfortunaly this doesnt work with multiple windows masking the same bg yet..

    92Garfield · July 31, 2010
  23. hey 92garfield. I’m not sure what is meant by the first question but for multiple windows on the same bg, try this post: https://blog.onebyonedesign.com/actionscript/active-windows-blur/

    Devon O. · July 31, 2010
1 2 Next »

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang