[Video] New multimedia piece on macromedia.com – Interactive Video Guide

April 26th, 2004 by mike downey Leave a reply »

I remember seeing this effect used in the “Shrek” microsite on HP.com. I can’t remember exactly what the point of their campaign was, but I remember this page-turning effect.

This is the online version (literally) of the booklet that we gave out at the NAB show last week. It’s actually a very interesting read and a great resource to point potential clients to.

http://www.macromedia.com/go/videoguide

Advertisement

9 comments

  1. Arul Prasad says:

    Hey!

    I remember seeing that ‘HP Shrek’ thing too. But Macromedia people have gone a step forward, by making the page foldable from anywhere on the page. Remember the HP thing had a holder which you had to pull… I remember spending some 15 hours, cracking down the logic behind that and in the end I did create the same effect myself :-)

    These programmers at MM are incredible!!

    Long live actionscript.. Long live Flash !!
    :-D

  2. Arul Prasad says:

    Hey!
    Me back again, with some cool information.. A couple of hours after I put that post there, I was going browsing the net.. Somewhere my instincts said, try method.com. I really didnt know that there existed a site like that, and now, I got to know the stunning thing … The cool programmers being both the HP thing and the Macromedia page video effect are the same!! Its both done by people at method Inc.
    And then I remembered a Quote from a Levis Ad. “Is this coincidence??”

    Cheers!!
    Long live actionscript.. Long live Flash !!
    and Long live Method Inc!!!

  3. MaX says:

    Great guide to video!

    And the last page points to this source for the Page Flip Effect.

    http://www.iparigrafika.hu/

  4. maura g says:

    Thanks very much for this Guide — I’ve ended up forwarding a number of the links to people that I think should view them for ideas/brainstorming.

    Splendid examples!

    I found this Guide extremely helpful, and will probably revisit it at some point. It expanded my own sense of what is possible.

  5. Macc says:

    Hi! A new free version: v2.12 is available for download. (it is now AS2/Flash 7 compatible)
    http://www.iparigrafika.hu/pageflip

    But i’am posting here, because i found my opensource code at templatemonster (for $63)… I think this is not fair, some people buy this template instead of downloading it for free…
    http://www.templatemonster.com/website-templates/8096

  6. Heiko says:

    Hey Macc,

    Dont know what to say :-) Saw the flash template on Templatemonster and wanted to buy it just right before I saw your post here. Better to give the money to you instead of templatemonster.
    Thanks for your post !

    Cheers,
    Heiko

  7. Here’s some help possibly….
    The HP+Dreamworks page is located at:
    http://welcome.hp.com/country/us/en/msg/corp/flashdreamworks.html

    It incorporates several XML files for navigation, and test loaders for the actual story.

    Files used are dynamically loaded, but here’s some info to help user with their reverse engineering needs.

    FILES:

    http://welcome.hp.com/country/us/en/msg/corp/hpframe.swf
    http://welcome.hp.com/country/us/en/msg/corp/base.swf
    http://welcome.hp.com/country/us/en/msg/corp/casestudies.xml
    http://welcome.hp.com/country/us/en/msg/corp/copy.xml
    http://welcome.hp.com/country/us/en/msg/corp/casestudies.xml

    (Ps: Click on the story. Has active button)
    Enjoy!

  8. Coding :
    function initPAGES()
    {
    Drag.gotoAndPlay(2);
    Drag._x = Book._x + Book._width – 40;
    Drag._y = Book._y + Book._height – 40;
    Drag.xn = Book._x + Book._width – 5;
    Drag.yn = Book._y + Book._height – 5;
    SHEET.gotoAndStop(PageNum – 2);
    SHEETB.gotoAndStop(PageNum – 1);
    SHEET.duplicateMovieClip(“DRAGPAGE”, 9999);
    SHEETB.duplicateMovieClip(“DRAGPAGE2″, 68);
    CP = createEmptyMovieClip(“PAGE”, 10);
    DRAGPAGE.setMask(Page);
    DRAGPAGE2.setMask(TMask);
    OuterShade.setMask(RMask);
    DRAGPAGE.gotoAndStop(PageNum);
    DRAGPAGE2.gotoAndStop(PageNum + 1);
    DRAGPAGE.attachMovie(“Fold”, “FoldB”, 2);
    pageSpeed = 0.300000;
    Advanced = false;
    } // End of the function
    function pageREVERSE()
    {
    PageNum = PageNum – 2;
    if (PageNum totalPages)
    {
    PageNum = 3;
    } // end if
    initPAGES();
    } // end if
    if (Drag.xn > 350)
    {
    } // end if
    } // end if
    CornerDIST = Math.sqrt((_xmouse – Corner._x) * (_xmouse – Corner._x) + (_ymouse – Corner._y) * (_ymouse – Corner._y));
    if (!_root.videoControl && CornerDIST 350)
    {
    Drag.gotoAndPlay(2);
    } // end if
    _quality = “HIGH”;
    DRAGME = false;
    Advanced = false;
    this.stopDrag();
    if (this._x > 350)
    {
    pageSpeed = 0.100000;
    Advanced = false;
    this.xn = Book._x + Book._width;
    }
    else
    {
    pageSpeed = 0.300000;
    Advanced = true;
    this.xn = Book._x;
    } // end if
    this.yn = Book._y + Book._height – 2;
    Drag.onEnterFrame = function ()
    {
    pullCorner();
    };
    };
    CornerX = Book._x + Book._width – 1;
    CornerY = Book._y + Book._height – 1;
    Curve.onEnterFrame = function ()
    {
    this.X = _xmouse – (Book._x + Book._width / 2);
    this.Y = _ymouse – (Book._y + Book._height);
    this.DISTANCE = Math.sqrt(this.X * this.X + this.Y * this.Y);
    this.ANGLE = Math.atan2(this.Y, this.X) * 180 / 3.141593;
    this._x = Book._x + Book._width / 2 + 323 * Math.cos(this.ANGLE * 0.017453);
    this._y = Book._y + Book._height + 323 * Math.sin(this.ANGLE * 0.017453);
    if (this.DISTANCE > PageSize && followMouse && _ymouse 8)
    {
    PAGE.lineTo(TopX, TopY);
    }
    else
    {
    PAGE.lineTo(Upper._x, Upper._y);
    PAGE.lineTo(Flip._x, Flip._y);
    } // end if
    PAGE.endFill();
    DRAGPAGE._x = Drag._x;
    DRAGPAGE._y = Drag._y;
    DRAGPAGE._rotation = ANGLE2;
    DRAGPAGE.FoldB._rotation = Angle – Angle2 – 180;
    shadeDISTANCE = Math.sqrt((Drag._x – BottomX) * (Drag._x – BottomX) + (Drag._y – BottomY) * (Drag._y – BottomY));
    DRAGPAGE.FoldB._x = shadeDISTANCE;
    DRAGPAGE.FoldB._xscale = 100;
    TMask._x = BisecX;
    OuterShade._x = TMask._x – 1;
    TMask._y = BisecY;
    OuterShade._y = TMask._y – 1;
    OuterShade._rotation = TMask._rotation = Angle2 – Angle;
    } // end if
    };
    stop ();

  9. Quote from a Levis Ad. “Is this coincidence