How is this done?

Hi,

Saw this website and wanted to know how it was done. It seems to be using jQuery, i.e:

http://target.dynamiccatalogue.com.au/portal/embedcatalogue__SingleLocationView__normal__view__set?pageview=two&CatalogueID=1186516734457

Just like how it allows you to go back and forth through the catalogue.

Would appreciate any help.

Thanks.

Tonsils.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, that’s a very cool effect. From an animation standpoint, what
they are doing is using JavaScript to dynamically change the CSS
layout of three DIVs (HTML layers).

Imagine you have three layers. Two are side-by-side, and hold the left
and right pages. The third is hidden entirely, either by setting its
display: to none, or by setting its visibility: to hidden.

When you click on the right page turn widget, the script does the
following:

  1. Clones the right page into the third hidden DIV, and makes that DIV
    visible. (This cloning process creates a complete copy of the right
    page image and the right page DIV’s geometry – position, dimensions,
    everything – directly above the right page image.)
  2. Inserts a new image into the right page image DIV (since that page
    is covered by its clone, you don’t see that part).
  3. Animates a horizontal scale effect on the clone image, scaling it
    horizontally from 100% of its width to nothing while leaving the
    height alone, and anchoring to the left side.
  4. When it reaches 0 width, the clone’s image src is switched for the
    new left image, and the animation runs in reverse, changing the anchor
    to the right side and changing from 0 to 100% width.
  5. Once the left side of the animation is complete, the image is moved
    into the underlying left DIV, and the clone is either hidden or
    removed, readying everything for the next move.

Run the above, substituting right for left, and you have the other
direction. With a couple of hours/days and Prototype and Scriptaculous
(Element.clonePosition and Effect.Morph), you could cook something up
that you could apply in Freeway.

Walter

On Jan 16, 2009, at 9:32 AM, Tonsils wrote:

Hi,

Saw this website and wanted to know how it was done. It seems to be
using jQuery, i.e:

Target Catalogues

Just like how it allows you to go back and forth through the
catalogue.

Would appreciate any help.

Thanks.

Tonsils.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are also loads of PDF > converted to flash page turners out there like…

http://www.digipage.co.uk/

and an example

http://clients.digipage.co.uk/?id=csm_spring_09

These produce similar effects - some effects better than others.

Here’s a free one http://www.flashpageflip.com/FreeFPF.asp

David

On 16 Jan 2009, at 14:32, Tonsils wrote:

Hi,

Saw this website and wanted to know how it was done. It seems to be using jQuery, i.e:

http://target.dynamiccatalogue.com.au/portal/embedcatalogue__SingleLocationView__normal__view__set?pageview=two&CatalogueID=1186516734457

Just like how it allows you to go back and forth through the catalogue.

Would appreciate any help.

Thanks.

Tonsils.

David Owen
Freeway Friendly Web hosting and Domains ::

http://www.ineedwebhosting.co.uk

http://www.ineedwebhosting.co.uk/blog

Sometime around 16/1/09 (at 15:52 +0000) David Owen said:

There are also loads of PDF > converted to flash page turners out there

Yep, and InDesign CS4 includes this as a built-in feature (as shown
in my Masterclass tutorial in the current issue of MacUser). But
these aren’t at all search engine-friendly.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Using Protaculous: Page Flip

Images were named left1 - left6 and right1 - right6. This could be a lot simpler if I spent more time on it. Completely accessible (and Google friendly). Try looking at it with JavaScript off.

$R(2,6).each(function(n){
    //hide the other images
    $('left' + n).hide();
    $('right' + n).hide();
});
var rt = $('right1');
var i = rt.innerHTML.toString();
var j = $('left1').innerHTML.toString();
var L = $('left1').getStyle('left');
//make the new hidden image to hold transitions
//and fill it with the starting right image
var sprite = new Element('div',{id:'sprite'}).update(i);
sprite.clonePosition(rt);
$('PageDiv').insert(sprite);
sprite.down('img').setStyle({width:'100%'});
sprite.setStyle({zIndex:500, position:'absolute',display:'none'});
//start the loop
var count = 1;
rt.observe('click',function(evt){
    if(count < 6){
        count++;
        sprite.show();
        //cover the right image
        //fill the hidden right image with the next right image
        rt.update($('right' + count).innerHTML);
        //wipe the sprite right
        new Effect.Morph('sprite',{
            style:'width:1px',
            duration:0.5,
            afterFinish:function(){
                //fill the hidden sprite with the next left image
                sprite.down('img').src = $('left' + count).down('img').src;
                //expand right and move right at the same time
                new Effect.Morph('sprite',{
                    duration:0.5,
                    style:{left: L, width:'172px'},
                    afterFinish: function(){
                        //change the hidden image beneath 
                        //the sprite to match the sprite
                        $('left1').down('img').src = sprite.down('img').src;
                        //move and hide the sprite to 
                        //get ready for the next page
                        sprite.clonePosition(rt);
                        sprite.down('img').src = rt.down('img').src;
                        sprite.setStyle({zIndex:500, position:'absolute',display:'none'});
                    }
                });
            }
        });
    }else{
        //reset everything to go again
        count = 1;
        rt.update(i);
        $('left1').update(j);
        sprite.down('img').src = rt.down('img').src;
    }
});

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Keith,

I’ll have to have a nosey at that, seeing a new MacUser dropped on the office mat this morning.

(The Mag that is, not an exhausted Mac User!)

David

On 16 Jan 2009, at 16:10, Keith Martin wrote:

as shown in my Masterclass tutorial in the current issue of MacUser

David Owen
Freeway Friendly Web hosting and Domains ::

http://www.ineedwebhosting.co.uk

http://www.ineedwebhosting.co.uk/blog

Another solution,
You can use Kvisoft page flipping software: http://www.kvisoft.com/flipbook-maker-pro/
It can help you convert PDF to flash page flip book.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options