This example and more, were presented by Lee Brimelow today in the FlashIsrael event and he said he just got these a few hours ago from Away3D devs, so chances are you never seen it before.

There were other impressive examples with even much more polygons and such. I’m sure we’ll get to play with all of it in a few weeks when the labs version of Molehill will be available along with the new Away3D engine – - Great!

It was great to finally be able to meet Lee and all the others. After years of reading Lee’s blogs and seeing him in videos, he seems like a truly funny, smart and nice dude… ah yeah… and tolerant for annoying people with cameras — Thanx

The first think that came to mind was, lets turn this into a screensaver. Which introduced me to this great 100% freeware, swf to screensaver, Instantstorm. Only then I’ve realized that, it fits too perfectly as a screensaver to not already be a screensaver. indeed, after googleing I’ve found it here and a similar concept here (I wouldn’t install these, might contain ad-wares).

The most interesting thing bout this is, how something that had almost no existent became as viral as hell when it was re-distributed as a simple link to a swf file. No play button, no scrubber, and no nothing, follow the link and you get it filling the whole browser space and the experience starts immediately. Sometimes a link to a swf may be the best way of distribution.

Creating a ticketing system with FMS couldn’t be easier, you can find some tutorials about it here, here and here. But let me summarize it for you. Create some kind of a temporary ticket (random number or GUID will do) and send it to the client (the Flash player), when the player request the video stream from the server, send this ticket to the FMS along with the request. The FMS in it’s turn validate this ticket against your server. Continue checking this ticket in a certain interval and as long as this ticket is valid, play the stream, if it become invalid kill the connection. Thats it. Most of the articles on the web about FMS tells you that Flash-Remoting is needed for any kind of communication from the FMS. It isn’t completely true. While using remoting may be beneficial in some cases, since FMS 2.0 it is easy to make asynchronous calls like webservices and loadvars. So you have more choise when developing your ticketing system. If you want to use Flash Remoting in dot.net consider using Midnightcoders WebOrb, as an alternative to Macromedia’s Flash Remoting MX (both didn’t install on Vista at the time, btw).
Since Jajah’s pay per view is only a demo, we didn’t exert ourselves to make it supper secure. you can learn more about securing your videos in this Adobe Flash Media Server article.

To watch the pay per view demo, go to jajah.com, login or register and make a (free) call to this number +43-123456789. Your phone will ring, answer the call and behold. You will see a cool animation, an homage to IceAge. When you’ll hang up your phone, the animation will stop. If you’ll try to watch the movie after hanging-up, the stream won’t be served from the FMS since the ticket isn’t valid anymore.

And what about the new kid animation abilities?! With what I’ve seen so far in the main WPF interactive editor CTP (beta) vesions, it fall short of Flash, it has an interesting concept of having the animation of an object as just another property of that object. But, it lake of satisfactorily key-frames controll and things like shape tween are not existent. These things might be improved in the final version, but it seems to me that Microsoft is still donesn’t pay atantion to creativity as it should have, and is mainly thinking about GUI creation.

I just hope that Adobe wont forget the origins of Flash and one of the main reasons it is such a terrific tool, and is planing a tons more of animation and creativity features in the next Flash IDE release.

Note: I’ve written this post some time back, before the announcement of the new Flash CS 3 (Flash 9) feature list. It seems that we’ll get some animation improvements, the two most interesting improvements looks like, Custom easing control and Copy and paste animations. The first will “provides independent control of position, rotation, scale, color, and filters”, it will give us much finer control over every keyframe in our animation similar to high-end animation software. The second will let us copy timeline animations as fully editable Actionscript 3.0 XML objects for easy duplication and modification. It looks like even complex tweening that uses a motion guide can be copied and edited, no clarity about the coping of a shape tweens though. I guess no one at adobe have the nerve to dive into the Flash core and update something as the Shape Hints or even the Timeline itself, but overall, it seems like a nice update in terms of the animation abilities of Flash.

Flash CS3 will be released in April 20th.

Behind The Curtains – Shape Hints Animation Tutorial

Hover above this box:
[kml_flashembed movie="http://blog.guya.net/wp-content/uploads/2007/04/curtain.swf" width="320" height="240" /]

I was amazed when I first saw shape animation in flash, create two different shapes on two different frames and easily get a morphing animation between them…

Few years back I was asked to make a flash banner for Habima Theater. I came with the, somewhat cheesy, idea of a animating a red curtain, and inside it, to fade images from few of the theater best shows.

Creating a curtain animation in Flash shouldn’t be a problem, I thought, I’ll create the start and finish frames and my beloved Flash will do the rest. The start frame of a simple curtain animation is simply a box and the end frame is an open curtain…

1. Create a new Flash Document, resize it to 320 x 240 and set the Frame rate to 30.

2. Create a red rectangle (R) anywhere on the stage no matter what size, select the rectangle and set it’s properties (Show/Hide Properties Ctrl+F3): width and height to 160 and 240 respectively, x and y both to 0.

3. With the rectangle still selected press F8 to turn it into a Movie clip, and name it curtain.

4. Inside the properties panel name the instance of the curtain on stage to leftCurtain.

5. Double click on leftCurtain to step inside it. On the Timeline (Show/Hide the Timeline Ctrl+Alt+T) name Layer 1 to curtain. Right click on the 30th frame and select Insert Keyframe (F6).

6. The first frame of our animation, the closed state of our curtain is already done on frame 1, we’ll now create the opened frame on frame 30. Deselect the red rectangle by clicking anywhere outside it on the stage. Point your mouse to the bottom right corner of the rectangle until the mouse cursor turns into a right angle shape, this indicates that you can grab the corner. With the Shift Key pressed click and drag the rect corner to the left and to about 45px from the left edge.

7. In order to achieve an open curtain look we’ll split it near the bottom. Point the cursor near the edge of the now diagonal line to about 50px from the bottom. When the cursor changes its shape to a small round line, press Ctrl and click to drag the new point to left to about 30px from the edge. Pressing on the Ctrl key while dragging a line breaks it and creates a new point where the break is.

8. Similar to the previous step, hover with the mouse near the right edge of the rectangle, when the cursor change it’s shape click and drag (without pressing Ctrl) the edge until it gets a nice belly, do the same for the small right edge.

9. We done the entire 2 frames of our animation, now it’s time to animate it. In the Timeline Select frame 1 and in the properties panel set Tween to Shape, also set Ease to 70, it will make the animation nicer by easing it near the end.

10. It looks like we got ourselves an opening curtain animation, but testing the movie (Ctrl+Enter) reveals that though we got an animation it’s nothing like a believable curtain. This is because Flash can’t know what exactly we’re animating and how we like the morphing to be done. Flash simply guess, and this time its guess is very wrong. This is where Shape Hints come to our aid.

11. Select frame 1 and click on Modify -> Shape -> Add Shape Hint (Ctrl+Shift+H) 5 times. This will create 5 Shape Hints identified by characters from a to e. Arrange the Hints in the 4 corners and 1 where the break is, look at the image. Go to frame 30 and arrange the Hints respectively to the 1th frame. Every Hint character in frame 1 must correspond to the Hint character in frame 30.

Tip: you can lock the layer and still be able to edit the Shape Hints.

Tip: Show/Hide all the Shape Hints Ctrl+Alt+H

12. Now lets test our movie (Ctrl+Enter) to see our curtain animate to its open state as it should.

13. To create the closing animation the simplest way is to duplicate the frames and then reverse it. Select all the frames in the curtain layer by clicking on its name and Right click -> Copy frame then Right click on frame 31 and select Paste frames. This will copy the opening animation, Shape Hints included. Click on frame 31 and while the Shift key is pressed click on frame 60 to select all of this frames range. Right click on the selected frames and click Reverse frames, it’ll reverse the animation but sadly it’ll also break the Shape Hints of this section, you’ll have to create it again for frame 31 and 60, similar to the previous step.

14. Select frame 31 and in the properties panel set the Ease to -50, this will create an ease-in effect so the closing animation will start a bit slower and then accelerate as it goes.

15. Test the movie to see the (half) curtain open and close. Thats it, we’re done our curtain animation it’s time to duplicate the half into a full curtain and put some interactivity into it.

16. Before you go back to the main stage add another Layer inside the curtain Movie clip and name it actions. Click on Window -> Actions (F9), while the first frame selected enter the code stop(); inside the Action panel. Create a new key frame on frame 30 of the actions layer and put a stop(); in there as well. This will prevent the curtain from animating on its own and we’ll control it with Actionscript.

17. Go back up to Scene 1 by double clicking on an empty area of the stage. Copy the leftCurtain Movie clip, paste it any where, set its x to 160, its y to 0 and its name to rightCurtain.

18. With the rightCurtain selected click on Modify -> Transform -> Flip Horizontal.

19. On the main Timeline in Scene 1 create another layer and name it actions open the actions panel (F9) and enter the following script:

function openCurtain():Void{
leftCurtain.gotoAndPlay(1);
rightCurtain.gotoAndPlay(1);
}

function closeCurtain():Void{
leftCurtain.gotoAndPlay(31);
rightCurtain.gotoAndPlay(31);
}

20. We can call these functions to open and close the curtain as we like, in this example we’ll open the curtain when the mouse roll over it and close it when it roll out.

21. Create another layer beneath the actions layer but above the curtain layer and name it hitArea. Draw a green rectangle and set it’s alpha to 0%, the color doesn’t really matter since this rect will be invisible, also set it’s width to 320, height to 240 and x, y to 0. Click F8 to turn this rectangle to a Movie clip and name it hitArea. in the properties panel name the hitArea instance on the stage to hit.

22. Add this code to the actions layer:

hit.onRollOver = openCurtain;
hit.onRollOut = closeCurtain;

Now every time we roll over the invisible hit Movie clip that is above the curtain the function openCurtain will be called and when we’ll roll out from it the closeCurtain will be called.

23. Test the movie to see that we now got our interactive animated curtain, roll over it and it opens, roll out and it closes. But, if you’ll play with it a little you’ll see that it’s not always act as it should. For example, when you roll out while the curtain is opening it jumps to beginning of the closing sequence instead of closing from the current position. To fix that we’ll add a simple calculation to find the right frame we need to jump to in order for the animation to look seamless.

24. Replace the code in the action frame with this:

hit.onRollOver = openCurtain;
hit.onRollOut = closeCurtain;

var nTotalFrames:Number = leftCurtain._totalframes;

function openCurtain():Void{
var nFrame:Number;
if(leftCurtain._currentframe > nTotalFrames / 2){
nFrame = leftCurtain._totalframes – leftCurtain._currentframe + 2;
}else{
nFrame = leftCurtain._currentframe;
}
leftCurtain.gotoAndPlay(nFrame);
rightCurtain.gotoAndPlay(nFrame);
}

function closeCurtain():Void{
var nFrame:Number = leftCurtain._totalframes – leftCurtain._currentframe;
leftCurtain.gotoAndPlay(nFrame);
rightCurtain.gotoAndPlay(nFrame);
}

We just changed the open and close functions to be a bit more smart ones, function that knows to which frame to gotoAndPlay, it does it according to the current frame and not just jump blindly to the beginning of each sequence.

Test the movie and behold, our interactive curtain is ready.

Tip: you can add this code, hit.useHandCursor = false; so the cusror won’t change into a hand when you hover the curtain.

Download Curtain Animation source files

Download Grand Theft Auto – Lego City

The guys from brickflick.com are creating scenes from famous video games using real lego blocks and stop-motion animation.

Check out the screens:

Download: Pirate Baby’s Cabana Battle Street Fight 2006 
Well worth it’s 112mb

For me, beside it is a great animation it reminds me of the good old arcade days in a funny and inspiring way.
Someone gotta make this into a real game.