Identifying Flash Plugin or method??

Discussion in 'Web Design and Development' started by Jeff E, Feb 9, 2009.

  1. Jeff E macrumors member

    Joined:
    Aug 5, 2008
    #1
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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
     
  3. Jeff E thread starter macrumors member

    Joined:
    Aug 5, 2008
    #3
    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
     
  4. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #4
    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.
     
  5. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #5
    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.
     
  6. Jeff E thread starter macrumors member

    Joined:
    Aug 5, 2008
    #6
    I think you just went over my head...

    Where do I start?

    J
     
  7. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #7
    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.
    PHP:
    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 0btnNumi++)
    {
        
    this["btn" i].buttonMode true;
        
    this["btn" i].addEventListener(MouseEvent.ROLL_OVERbtnOverfalse0true);
        
    this["btn" i].addEventListener(MouseEvent.ROLL_OUTbtnOutfalse0true);
        
    this["btn" i].addEventListener(MouseEvent.CLICKbtnClickfalse0true);
    }

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

    function 
    btnOut(e:MouseEvent):void
    {
        
    TweenLite.to(e.target1, {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.
    }
     
  8. Jeff E thread starter macrumors member

    Joined:
    Aug 5, 2008

Share This Page