December 9  |  Actionscript 3 + Tutorials  |  9 comments

Updates to Pixel Bender tutorial

Grant Skinner checked out my latest tutorial on animating Pixel Bender filters and sent a long some alternative approaches to using GTween for this purpose. After reviewing them, they are MUCH better than the code I was using. He sent along two possible implementations. This first one uses two GTween objects like I did, but it uses the nextTween property and also employs a getter and setter for the contrast property. I’m still to lazy to use those. Here is the code:

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
package
{  
    import com.gskinner.motion.GTween;
   
    import flash.display.MovieClip;
    import flash.display.Shader;
    import flash.events.Event;
    import flash.filters.ShaderFilter;
    import flash.utils.ByteArray;
   
    import fl.motion.easing.*;

    public class PBTransition extends MovieClip
    {  
        [Embed("DTW.pbj", mimeType="application/octet-stream")]
        private var pbj:Class;
       
        private var who:MovieClip;
        public var photo1:MovieClip;
        public var photo2:MovieClip;
        private var shader:Shader;
        private var filter:ShaderFilter;
        private var _contrast:Number = 1;
       
        public function PBTransition():void
        {
            init();
        }
       
        private function init():void
        {
            shader = new Shader(new pbj() as ByteArray);
            filter = new ShaderFilter(shader);
            who = photo1;
            photo2.visible = false;
           
            // set up a transition in and out tween and loop them:
            var tweenIn:GTween = new GTween(this, 1, {contrast:5}, {ease:Quadratic.easeOut, data:0});
            tweenIn.addEventListener(Event.COMPLETE, trans);
            var tweenOut:GTween = new GTween(this, 1, {contrast:1}, {ease:Quadratic.easeIn, nextTween:tweenIn, autoPlay:false});
            tweenIn.nextTween = tweenOut;
        }  
       
        private function trans(e:Event):void
        {
            // keep track of how many times the transition has run:
            e.target.data++;
            // after 5 full transitions, kill the cycle. This will also free both tweens for GC.
            if (e.target.data == 5) { e.target.nextTween.nextTween = null; }
           
            who.visible = false;
            who = (who == photo1) ? photo2 : photo1;
            who.visible = true;
            contrast = _contrast; // refresh filters on the new photo.
        }
       
        public function set contrast(value:Number):void
        {
            _contrast = value;
            shader.data.contrast.value = [contrast];
            who.filters = [filter];
        }
        public function get contrast():Number
        {
            return _contrast;
        }
    }
}

The next version is even better because it uses the autoReverse property so only one GTween instance is needed. Check out the code sample below:

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
package
{  
    import com.gskinner.motion.GTween;
   
    import flash.display.MovieClip;
    import flash.display.Shader;
    import flash.events.Event;
    import flash.filters.ShaderFilter;
    import flash.utils.ByteArray;
   
    import fl.motion.easing.*;

    public class PBTransition extends MovieClip
    {  
        [Embed("DTW.pbj", mimeType="application/octet-stream")]
        private var pbj:Class;
       
        private var who:MovieClip;
        public var photo1:MovieClip;
        public var photo2:MovieClip;
        private var shader:Shader;
        private var filter:ShaderFilter;
        private var _contrast:Number = 1;
       
        public function PBTransition():void
        {
            init();
        }
       
        private function init():void
        {
            shader = new Shader(new pbj() as ByteArray);
            filter = new ShaderFilter(shader);
            who = photo1;
            photo2.visible = false;
           
            // set up a tween that auto reverses
            var tween:GTween = new GTween(this, 1, {contrast:5}, {ease:Quadratic.easeOut, data:true, autoReverse:true, completeListener:trans});
        }  
       
        private function trans(e:Event):void
        {
            // check the tween data to see if we're coming or going:
            if (e.target.data) {
                who.visible = false;
                who = (who == photo1) ? photo2 : photo1;
                who.visible = true;
                contrast = _contrast; // refresh filters on the new photo.
            }
            e.target.ease = (e.target.data) ? Quadratic.easeIn : Quadratic.easeOut;
            e.target.data = !e.target.data;
        }
       
        public function set contrast(value:Number):void
        {
            _contrast = value;
            shader.data.contrast.value = [contrast];
            who.filters = [filter];
        }
        public function get contrast():Number
        {
            return _contrast;
        }
    }
}

Thanks to Grant for providing these much improved code samples.

Lee


Commentary

  1. Clemente G says:
    12/10/2008 at 1:05 am

    Nice code there. Lee in your opinion do you find GTween better than thw TweenLite family??

    Reply
  2. AS says:
    12/10/2008 at 7:46 am

    nice lee, Grant Skinner make a lot of classes for the community, is he better than you. you can make popular classes also.

    Reply
  3. AS says:
    12/10/2008 at 7:48 am

    You would add another “O” to “to” before lazy.

    that was nice, thanks lee & grant.

    Reply
  4. KL says:
    12/10/2008 at 9:13 am

    Great Stuff as usual Lee!

    Reply
  5. Alex B says:
    12/10/2008 at 12:16 pm

    Very nice work, Grant. I’m really liking the autoReverse feature of GTween and have started to adapt this more as I experiment with it.

    Also liked the slick who switcheroo in trans() and how everything in that function manipulates the e.target object.

    Cheers to Lee for putting this out there in the first place! Great tutorial for getting me started with PB.

    Reply
  6. Andrew says:
    12/10/2008 at 12:38 pm

    @Clemente G and @Lee, how about GTween vs TweenLite vs Tweener?

    Reply
  7. tecwzrd says:
    12/10/2008 at 3:01 pm

    I get this error message for both scripts

    1037: Packages cannot be nested.

    Can you provide a working example please?

    Reply
  8. jim says:
    12/10/2008 at 9:32 pm

    I’d like to know how much Pixel Bender’s effect can used in flash player,
    and other app about Pixel Bender

    Reply
  1. localToGlobal » Blog Archive » news review -> 50th week of 2008 linked here

    [... Grant Skinner checked out my latest tutorial on animating Pixel Bender filters and sent a long some alternative approaches to using GTween for this purpose. After reviewing them, they are ...]

Leave a Comment


Prev PostNext Post