Identifying Flash Plugin or method??

[Jeff E]

I am looking for the method for accomplishing this effect..

http://www.hagginmarketing.com/



The Tiles flip in SWF file. ITs pretty cool..

Thanks

Jeff

 

[SrWebDeveloper]

Couple of comments on this.

First, it's a custom design, but it's based on tile transition filters (flipping) which is well documented in Flash. For the basic effect, online demo and instructions please visit this site:

Tile Transition Effect (Flash Filter)

Secondly, don't be too impressed with how the site you posted here as an example was implemented. Turn off Javascript and visit it. It relies on the swfobject.js framework which allows interaction between JS and Flash. This means JS is required and the site you listed does not handle it gracefully when it is disabled. Just an FYI that the effect is cool, but do it right when you do it - don't "rely" on Flash or JS in your final implementation. This means proper object/embed tags with plugin link for Flash and possible use of the noscript tag for non-JS browsers or at least a non-Flash pure HTML version. FYI only.

-jim

 

[Jeff E]

Thanks Jim,
I see what you mean about turning off JS. Its just words then.

I though it was cool how the tiles flip on another axis. Not just like cutting up a picture.

I know that this falls far from the KISS principle of web design and loses its wow factor and need after the first time at the site.. But its interesting to say the least. Makes me want to figure out how to do it.

Jeff

 

[snickelfritz]

That effect does not look like a drawing API effect to me.
It actually looks more like a set of short videos embedded on the timeline that are being tweened forward/reverse on rollover/rollout.
The objects themselves appear to be 3D models that have been rendered out as the flip animations with alpha channels.
The shadow and reflection at the bottom are probably created using the bitmapdata class.

 

[lucidmedia]

That effect does not look like a drawing API effect to me.
It actually looks more like a set of short videos embedded on the timeline that are being tweened forward/reverse on rollover/rollout.
The objects themselves appear to be 3D models that have been rendered out as the flip animations with alpha channels.
The shadow and reflection at the bottom are probably created using the bitmapdata class.

snickelfritz nailed it. I initially thought that this might be a very good implementation of papervision, but the aliasing is too good and the shading is not responsive enough.

 

[Jeff E]

I think you just went over my head...

Where do I start?

J

 

[snickelfritz]

You will have to create the models and flip animations in 3D animation software,
then import them to the timeline as embedded FLV with alpha channels.
This is the difficult part.

Install TweenGroup within a custom class directory, then point Flash to that directory in AS3 prefs.
You will use the TweenLite class to tween the playhead in your mouse event functions.

The following example AS3 script is by no means comprehensive, nor is it the only way to do something like this.

import gs.*;
var btnNum:Number = 12; // the value here would be the number of buttons.
// instance names for the buttons will be "btn0" "btn1" "btn2" etc...
for (var i:Number = 0; i < btnNum; i++)
{
    this["btn" + i].buttonMode = true;
    this["btn" + i].addEventListener(MouseEvent.ROLL_OVER, btnOver, false, 0, true);
    this["btn" + i].addEventListener(MouseEvent.ROLL_OUT, btnOut, false, 0, true);
    this["btn" + i].addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);
}

function btnOver(e:MouseEvent):void
{
    TweenLite.to(e.target, 1, {frame:30})
}

function btnOut(e:MouseEvent):void
{
    TweenLite.to(e.target, 1, {frame:1})
}

function btnClick(e:MouseEvent):void
{
    trace(e.target.name);
    // do something here, like load a URL, or move the playhead to a frame label.
}

 

[Jeff E]

Cool.. thanks for the start..