Search Widget – Robotlegs, Signals, Flight, Minimal Comps, Yahoo Astra

Man, long time, no post.

This video comes from a chat I was having with Renaun Erickson, Garth Braithwaite, and Jac Wright about the value of watching someone work towards a specific goal. So, this video isn’t really a tutorial, it’s more of me just building a search widget and talking about it as I go. Anyway, here it is:

Watch the Search Widget Video Tutorial

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

Download Source Code

Libraries used:

Robotlegs
Signals
signals-extensions-CommandSignal
Flight
MinimalComps
Yahoo Astra WebAPIs

haXe Tutorial

This tutorial is for anyone who has heard about haXe, but never had the time to figure out how to set it up. If you guys show a lot of interest in learning more about haXe, I’ll put together a few more tutorials on some of the features, but as of right now I have no idea what kind of interest is out there:

Watch the Intro to haXe Video Tutorial

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

*note – I tried “fast forwarding” through the download/install portions, but the camtasia “clip speed” couldn’t accurately fast forward only the parts I selected.

AS3 Signals Tutorial

AS3 Signals is an awesome open-source project created by Robert Penner that will make you re-think the way you approach events in all of your future projects. I put together this video tutorial (mostly to force myself to learn it) and I’ve been REALLY impressed with it so far. Go ahead and give it a watch:

Watch the Intro to AS3 Signals Video Tutorial

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

For more info on AS3 Signals, check out http://wiki.github.com/robertpenner/as3-signals/ and join the google group.

Download the swc: as3-signals.swc

*note – I just realized that I said, “it’s really, really easy and it’s also really simple” during the video. That’s really just a testament to how easy it is

*second note – thanks for all the votes on video resolution preferences. I’ll be sticking with 1024×768 from here on out.

TweenMax – Tweening a timeline (Advanced Tweening)

It’s been a really busy week doing a lot of interactive motion work, so no time to work on my Theme Designer, but here’s a little trick I picked up this past week from Jack. Tweening a timeline allows you to create multiple tweens and then apply one ease to the whole group. Neat trick, eh?

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

package  
{
    import com.greensock.TimelineMax;
    import com.greensock.TweenMax;
    import com.greensock.easing.Linear;
    import com.greensock.easing.Quart;
 
    import flash.display.Sprite;
 
    /**
     * @author John Lindquist
     */
    [SWF(width="900", height="480", frameRate="31")]
    public class EasingATimeline extends Sprite 
    {
        private var square:Sprite;
        private static const STEP_DURATION:Number = 1;
 
        public function EasingATimeline()
        {
            square = new Sprite();	
            square.graphics.beginFill(0xcc0000);
            square.graphics.drawRect(0, 0, 50, 50);
            square.graphics.endFill();
 
            square.x = 100;
            square.y = 50;
 
            addChild(square);
 
            //set all the eases of your steps to Linear.easeNone
            var step1:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 700, y: 50, ease: Linear.easeNone});
            var step2:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 700, y: 350, ease: Linear.easeNone});
            var step3:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 100, y: 350, ease: Linear.easeNone});
            var step4:TweenMax = TweenMax.to(square, STEP_DURATION, {x: 100, y: 50, ease: Linear.easeNone});
 
            var timeline:TimelineMax = new TimelineMax();
            timeline.append(step1);
            timeline.append(step2);
            timeline.append(step3);
            timeline.append(step4);
            //pause your timeline
            timeline.pause();
 
            //tween your timeline with whatever ease you want
            TweenMax.to(timeline, timeline.totalDuration, {currentTime: timeline.totalDuration, ease: Quart.easeInOut, repeat: -1});
        }
    }
}

Tags: tweenmax