Flipping Images

[bjc]

“FLIPPING IMAGES.zip”

Here is a small (2MB) animated PTE file demonstrating an option that I had considered asking Igor to include in PTE Version 5 ~ but I think he’s got enough on his plate as it is, without me (us) asking for MORE !?

As things stand at the moment it is not possible to create (just using PTE) what you see in this demo file, as it requires an image-transform option that currently doesn’t exist.

The images used to produce this file (63 of them in all) were first generated in Photoshop, using an automated ‘Action’ that I created a few years ago ,,,, the resultant ‘Layered’ image was then transferred over into ImageReady, where yet another ready-made ‘Action’ put together the animation sequence (previously designed to generate animated GIF’s.

Options that now exist in ImageReady have enabled me to save-off these sequence images as individual JPG’s, therefore enabling the production of a PTE ‘.exe’ file to replicate what I previously did with the ANIGIF files.

The quality produced by PTE is vastly superior to that of the GIF files, in both smoothness-of-movement and image quality. One can only hope that, sometime in the future, Igor will be able to provide us with the image-transform options that will enable this sort of effect to be generated directly within PTE.

I for one will be keeping my fingers crossed.

bjc

[Lin Evans]

“FLIPPING IMAGES.zip”

Here is a small (2MB) animated PTE file demonstrating an option that I had considered asking Igor to include in PTE Version 5 ~ but I think he’s got enough on his plate as it is, without me (us) asking for MORE !?

As things stand at the moment it is not possible to create (just using PTE) what you see in this demo file, as it requires an image-transform option that currently doesn’t exist.

The images used to produce this file (63 of them in all) were first generated in Photoshop, using an automated ‘Action’ that I created a few years ago ,,,, the resultant ‘Layered’ image was then transferred over into ImageReady, where yet another ready-made ‘Action’ put together the animation sequence (previously designed to generate animated GIF’s.

Options that now exist in ImageReady have enabled me to save-off these sequence images as individual JPG’s, therefore enabling the production of a PTE ‘.exe’ file to replicate what I previously did with the ANIGIF files.

The quality produced by PTE is vastly superior to that of the GIF files, in both smoothness-of-movement and image quality. One can only hope that, sometime in the future, Igor will be able to provide us with the image-transform options that will enable this sort of effect to be generated directly within PTE.

I for one will be keeping my fingers crossed.

bjc

Hi bjc,

I think the problem with getting the link is that you can't have a space between "Flipping" and "Images".

Could you just type out the link without putting in the "http" followed by the "//" and maybe we can figure out how to post the link?

Best regards,

Lin

[bjc]

http://www.bjc100.co.uk/PTE/flip_image.zip

Sorry about this folks ~ I haven't a clue why my previous links didn't work ~ maybe this one will !?

I've renamed the file and tested the link ~ and it worked for me ~ fingers crossed that it works for you too now !?

bjc

[Lin Evans]

http://www.bjc100.co.uk/PTE/flip_image.zip

http://www.bjc100.co.uk/PTE/flip_image.zip

Sorry about this folks ~ I haven't a clue why my previous links didn't work ~ maybe this one will !?

I've renamed the file and tested the link ~ and it worked for me ~ fingers crossed that it works for you too now !?

bjc

Hi bjc,

Actually, you do have this ability with P2E but it would take a little "trickery" in designing the event. If you look carefully at the zoom blocks on the Objects and Animations screen, Animations Tab, you will see a tiny "square" which acts as a "switch" to separate the X and Y axis. The default is to have the X and Y axis correlated so that the object or image remains "linear" as you manipulate the zoom. But if you mouse click this little square it separates the two so you can distort the image independently on either axis. That's how I achieved the "flipping" coin effect. You can download the demo at:

http://www.lin-evans.net

Go to the slideshow demo link and download the small sized zipped executable by clicking on the Morgan Dollar image.

Best regards,

Lin

[thedom]

Bjc,

The link is now correct. Thanks. Nice effect.

Unfortunately, the ability to transform an object (to move each corner individually) was already asked, Igor thought about it and answered it as not feasible (sorry, I can't find the post).

Lin, may be I'm wrong, but I think it is not possible to make such an effect by only using the ability to deform an object in PTE.

If you have a second watch at bjc's show, you can see that each page is deformed at the top and bottom to give a 3d effect (the bottom and the top line of each page don't stay parallel).

[bjc]

Hi Lin,

Yes you are correct - to a certain extent - however, whilst this works well with circles (such as your coin example) it doesn't work too well with squares (and the suchlike) as they need 'perspective' distortion as they rotate (the leading edge getting bigger, or smaller, as it rotates towards, or away from you) ,,, and it is also an advantage to be able to drag the image right through from the one side and out the other (as in flip). But then I know it's asking a lot to have this included in PTE, therefore I ain't askin', I's just showing !?

bjc

[Lin Evans]

Hi Lin,

Yes you are correct - to a certain extent - however, whilst this works well with circles (such as your coin example) it doesn't work too well with squares (and the suchlike) as they need 'perspective' distortion as they rotate (the leading edge getting bigger, or smaller, as it rotates towards, or away from you) ,,, and it is also an advantage to be able to drag the image right through from the one side and out the other (as in flip). But then I know it's asking a lot to have this included in PTE, therefore I ain't askin', I's just showing !?

bjc

Hi bjc,

Yes, you're right, there is only the ability to distort on the XY axis, but I think there is a way to achieve this. Give me a couple days to get a demo together and perhaps we can see it this can be done. Unfortunately I have too much work over the week end to get to it, but perhaps Monday.

Best regards,

Lin

Bjc,

The link is now correct. Thanks. Nice effect.

Unfortunately, the ability to transform an object (to move each corner individually) was already asked, Igor thought about it and answered it as not feasible (sorry, I can't find the post).

Lin, may be I'm wrong, but I think it is not possible to make such an effect by only using the ability to deform an object in PTE.

If you have a second watch at bjc's show, you can see that each page is deformed at the top and bottom to give a 3d effect (the bottom and the top line of each page don't stay parallel).

Hi Dom,

No, you are correct - there is no direct way to do it, but I think there is a work-around. I will try to do a simulaton by next Monday.

Best regards,

Lin

[Lin Evans]

Here's the link to a tiny zipped executable done in p2e. Obviously pretty crude and as I said earlier, lots of "tricks" but you "can" do this type thing if you want to take the time. This one is really quick and dirty.

http://www.lin-evans.net/p2e/simulation.zip

Best regards,

Lin

[bjc]

Lin,,,

Quick and dirty maybe ~ but very good. Did you do this in PTE only – or !?

bjc

[thedom]

Very nice Lin !

I think I guess the trick but I would never have thought to it without your demo.

Thanks.

I think I'm gonna make a template with full credit to you for the realization and bjc for the idea.

[Lin Evans]

Lin,,,

Quick and dirty maybe ~ but very good. Did you do this in PTE only – or !?

bjc

Hi bjc,

Let me explain.

It's definitely "trickery" - LOL. As you correctly stated, there is no way to alter the perspective as the pages flip toward the viewer, and this simulation would not work for all images unless you put a "border" of solid color such as white, etc., around them. In these two particular pages there is either a large area of rather uniform color such as the clouds with the airplane or the blank wall with the corn wreath which lend themselves to the illusion. It's accomplished by extending the top and bottom of the half page on the right side "as you view the screen". Each side which will "flip" is treated to this extension of top and bottom in Photoshop. Each picture which is to "flip" is divided equally into two portions in Photoshop just as you normally see in a book with staples or binding down the center. Next the individual half images are copied, then overlaid on a transparent layer (this part is just window dressing - not really necessary) and the layer tool is used to give a bevel, drop shadow and contour which adds an edge "dimensionality" to the pages. Next the individual half images are saved as PNG files (they could be flattened and saved as jpgs) and the illusion begins.

The two half images are placed side by side in P2E with the image having the top and bottom "extended' a half inch or so on the right. The perspective of the page flip is done just as the coin turn by leaving the "Y" axis constant and altering the "X" axis until the page becomes simply a vertical line. The position is adjusted by moving this line to correspond with the "center" of the book, in this case at the two second keypoint. The perspective illusion is accomplished by using a black rectangular jpg to mask off the edges. This rectangle is used in four places - two at the top and two at the bottom. The "center" for the rectangle is moved to a corner to allow rotation of the rectangle around the corner. Two of the rectangles (same rectangle reloaded) are used for the first page flip and two for the second part of the illusion.

The second page begins life as a "squished" line compressed completely on the "X" axis and is expanded by the 4 second keypoint to its full XY dimension. As the page "turns" the other two black rectangles pivot at top and bottom via the center move to a corner to provide the proper masking effect. The anchor point for the pivot is at the center top and bottom which divides the right and left side of the "book" (the spine area). As the page reaches the fully "squished" portion, the pivot point mask is raised at the top and lowered at the bottom to provide for the illusion of the transition between old and new page then quickly returned to the pivot point as the new page begins to expand. Numerous additional keypoints at regular intervals are placed and the pivot angle of the rectangle adjusted via the rotate command to keep the edges of the page progressing smoothly.

Actually, it's probably not worth the effort it takes to achieve this illusion but it does show that it's "possible" with some thought and by the great versatility afforded us with PicturesToExe to pull off some complex actions. I'll work on this next week a bit and if I can get it into a less complex state will post a pte file. The way this one is more or less "cobbled" together it would make little or no sense at the present point since I have a number of unnecessary keypoint done from an experimental basis.

Best regards,

Lin

[Ronniebootwest]

bjc:

I like this effect, you have done well to produce it. Even with the detailed explanation from Lin, I am unable to reproduce what you have done.

Have you considered an audio visual tutorial, or maybe you could persuade Lin to do one for us.

Ron West

[Lin Evans]

bjc:

I like this effect, you have done well to produce it. Even with the detailed explanation from Lin, I am unable to reproduce what you have done.

Have you considered an audio visual tutorial, or maybe you could persuade Lin to do one for us.

Ron West

Hi Ron,

They are actually two different ways of achieving the effect. bjc used Photoshop to create 68 multiple images with the proper perspective distortion then loaded these images into P2E in the proper manner, used P2E's ability to manipulate the XY axis independently and ran the sequence.

Since P2E only allows XY axis manipulation I used it to effect the simulation of turning of pages in the same manner as in the Morgan Dollar Tutorial, with the added steps of creating extended top and bottom on the page to be turned and the use of masking rectangles with their "center" of rotation set to a corner. Two of these pivot at the "book" spine on top and two at the bottom. Multiple additional keypoints were used to obtain the proper linearity of the mask to simulate the increase and decrease in page size as the page appears to turn. The central pivot point is shifted as the turning page squishes to a single line to facilitate the transition to the subsequent page which begins "squished" then expands.

An AV tutorial for this would probably not be feasible because of the complexity. The time to actually demonstrate would be very lengthy and the file size huge. Let me think about it and perhaps I can demonstrate a single page turn with the effect only on perhaps the top of the page then the viewer can experiment and extrapolate from that to the other three masks necessary to complete the simulation. Even this will probably be daunting in size.

Best regards,

Lin

[thedom]

My try :

[click on the picture to download - 410 Ko]

Template to include this effect in your slideshow with your own pictures in a week or so (need a little bit more work)...

[jevans]

An AV tutorial for this would probably not be feasible because of the complexity. The time to actually demonstrate would be very lengthy and the file size huge. Let me think about it and perhaps I can demonstrate a single page turn with the effect only on perhaps the top of the page then the viewer can experiment and extrapolate from that to the other three masks necessary to complete the simulation. Even this will probably be daunting in size.

Lin,

What does occur to me seeing your demonstration and also following your description of how it was done, is that there could well be a need for a different type of tutorial. Whilst not in your league, I have been experimenting with a few short shows using Version 5 effects and have found it quite difficult to get the hang of adding multiple objects to a slide and setting their positions. The basic technique is straightforward of course, but when you have multiple objects, trying to keep track of where they are and where the will be eventually is not so easy.

For a simple example, consider a title made up of separate letters. Initially they all have an opacity of zero so you cannot see them. Then they appear one at a time, until, at the end of the timeline, they are all the same size, level with each other, and make a word.

Now to do this I found that the best way was to keep the opacity at 100% initially. Set each letter in its final position at the end of the timeline, then clone this keypoint for each letter, move the cloned keypoint to the beginning of the timeline, re-position the letter and set the opacity. Maybe that is obvious. But it took me a little while to work out. Perhaps you could do a short tutorial on how you actually add, position and adjust the various objects.

Best regards

Jeff

[Lin Evans]

My try :

[click on the picture to download - 410 Ko]

Template to include this effect in your slideshow with your own pictures in a week or so (need a little bit more work)...

Hi Dom,

Nice and smooth as it should be - I just cobbled mine together very quickly to demonstrate that in principle it "could" be done with some trickery. Your version is very nice, much better demo than the one I did and the shadow is a really nice touch! Thanks for posting it!

Best regards,

Lin

[Lin Evans]

Lin,

What does occur to me seeing your demonstration and also following your description of how it was done, is that there could well be a need for a different type of tutorial. Whilst not in your league, I have been experimenting with a few short shows using Version 5 effects and have found it quite difficult to get the hang of adding multiple objects to a slide and setting their positions. The basic technique is straightforward of course, but when you have multiple objects, trying to keep track of where they are and where the will be eventually is not so easy.

For a simple example, consider a title made up of separate letters. Initially they all have an opacity of zero so you cannot see them. Then they appear one at a time, until, at the end of the timeline, they are all the same size, level with each other, and make a word.

Now to do this I found that the best way was to keep the opacity at 100% initially. Set each letter in its final position at the end of the timeline, then clone this keypoint for each letter, move the cloned keypoint to the beginning of the timeline, re-position the letter and set the opacity. Maybe that is obvious. But it took me a little while to work out. Perhaps you could do a short tutorial on how you actually add, position and adjust the various objects.

Best regards

Jeff

Hi Jeff,

Yes, this would be possible I think. Actually I generally do it very much as you described - sometimes its easier to begin with the "end" and work backward. Another "trick" is to rename each object so that it makes sense from a "positional" reference and if there are not a tremendous number of elements you can assure the final position by using Photoshop and then exporting separate levels with each piece on its own level as in the four piece puzzle tutorial via ImageReady which lets you save independent files from multiple layer originals. This, of course, is highly wasteful of memory resources and onliy amenable to smaller overall PNG's such as individual letters. But what it does is position each piece in its proper place assured by the returning all to 100% (or whatever you decided for zoom) at the end of the action...

Best regards,

Lin

[bjc]

Ron,,,

I could (!?) put a video tutorial together explaining how my version of this effect was created ~ however, the tutorial itself would be long and complex, despite the fact that the ready-prepared Photoshop and ImageReady ‘Actions’ undertake the vast majority of the work automatically (over 500 commands are executed by the Actions alone).

A zip file containing the Tutorial, both the Actions, and a P2E template, would still require the recipient to undertake a fair amount of work themselves ~ however, if enough people are interested, I would consider recording the video.

Lin,,,

I can tell that you (more or less) fully understand how I created my version of the effect,, the only difference being that my technique requires no manipulation of the XY axis in P2E, as Photoshop has already prepared the necessary sequential images. For this reason my version is more ‘jerky’ than the (excellent) effect that you have achieved working directly in P2E.

My version consists of 63 separate ‘slides’ ~ with all transition effects disabled ~ and each slide set to show for a duration of 100ms (my graphics card couldn’t handle any faster) ~ it is therefore effectively running at 10fps, hence the jerkiness.

bjc

[Lin Evans]

Ron,,,

I could (!?) put a video tutorial together explaining how my version of this effect was created ~ however, the tutorial itself would be long and complex, despite the fact that the ready-prepared Photoshop and ImageReady ‘Actions’ undertake the vast majority of the work automatically (over 500 commands are executed by the Actions alone).

A zip file containing the Tutorial, both the Actions, and a P2E template, would still require the recipient to undertake a fair amount of work themselves ~ however, if enough people are interested, I would consider recording the video.

Lin,,,

I can tell that you (more or less) fully understand how I created my version of the effect,, the only difference being that my technique requires no manipulation of the XY axis in P2E, as Photoshop has already prepared the necessary sequential images. For this reason my version is more ‘jerky’ than the (excellent) effect that you have achieved working directly in P2E.

My version consists of 63 separate ‘slides’ ~ with all transition effects disabled ~ and each slide set to show for a duration of 100ms (my graphics card couldn’t handle any faster) ~ it is therefore effectively running at 10fps, hence the jerkiness.

bjc

Hi bjc,

Yes, I was wondering whether you used the XY axis at all in P2E but couldn't tell exactly. The way you have done it is a superior method because it doesn't require using extended edges on the turning page and actually truly effects the perspective changes throughout the image rather than just simulating it by masking the edges. Fortunately, few have truly observed carefully the legitimate effect and studied the entire image so this goes largely unnoticed in the deception by the majority I think.

It would be nice were the capabilities inherent in p2e but there are so many more things Igor has yet to accomplish that perhaps this may be later considered for some future upgrade edition.

Best regards,

Lin

[Ronniebootwest]

Bic

despite the fact that the ready-prepared Photoshop and ImageReady ‘Actions’ undertake the vast majority of the work automatically (over 500 commands are executed by the Actions alone).

Is it possible to have a copy of the actions you mention. I would like to have a go at this effect.

Dom,

Your demo is magnificent! Pity about the small glitch in the join as the image comes together. The shadow makes a huge difference. You guys are well out of my league, I take my hat off to you.

Ron

[JPD]

Lin, may be I'm wrong, but I think it is not possible to make such an effect by only using the ability to deform an object in PTE.

Yes, it's possible (see the first view of "Chantilly"), but it's a hard work. I agree it will be very, very nice if we had the possibitity to make perspectives (it implies to be able to transform a rectangle into trapeze).

I hope Igor will put that in his TODO list for 5.2 version

It would also very interesting to be abble to knock down and return an image besides the rotation.

[Cèlou]

I had, some time ago created a small demonstration with reversal of chart which precisely simulated this reversal. The bond below will carry out you to the page of remote loading of this effect which I had called MAGIC

[thedom]

Yes, it's possible (see the first view of "Chantilly"), but it's a hard work. I agree it will be very, very nice if we had the possibitity to make perspectives (it implies to be able to transform a rectangle into trapeze).

I hope Igor will put that in his TODO list for 5.2 version

It would also very interesting to be abble to knock down and return an image besides the rotation.

Jean-Pierre, coold you please post the pte project ? (only the slide corresponding to this effect) ?

Igor already replied that he couldn't implement the perspective feature unfortunately.

But may be he will have a second thought...

I had, some time ago created a small demonstration with reversal of chart which precisely simulated this reversal. The bond below will carry out you to the page of remote loading of this effect which I had called MAGIC

I confirm Célou, I think you were the first one to present this effect.

We learn from each other and adapt the effects to our needs and to new ideas.

[JPD]

It would also very interesting to be abble to knock down and return an image besides the rotation.

I had this problem when I did Chantilly in June and was obliged to use 2 files one normal and a second, exactly the same but return with Paintshop in order to simulate an object reverse.

If you look at rolling effect in a windows in "Chantilly' slideshow, you will see there are many images reverse to do this effect, and it's one of the reason for which I did this question.

[bjc]

Hi Ron,, (and anyone else that's interested)

I was going to send you my two ‘Actions’, as you requested, but I thought that you’d be at a bit of a loss to know what to do with them without some form of instruction (they have very specific requirements in order to work) !?

So I ended up creating a full P2E Tutorial ~ it’s all zipped up with the necessary bits and pieced you need in order to have a go at this yourself.

The file (7MB) can be downloaded from this link:-

http://www.bjc100.co.uk/PTE/flippingimages.zip

The file called flippingimages.zip contains:-

A folder called – Flipping Images – inside which you will find:-

Flipping Images Tutorial.exe (play this to see what to do)

Flipping Images.pte (set up to accept your own images)

Flipping-Images.png (effect heading text)

3-Images-Page-Turn-2.atn (the Photoshop ‘Action’)

Page-Turn-GIF.isa (the ImageReady ‘Action’)

Download it ~ unzip it ~ watch the tutorial ~ and have a go.

Good luck !!

bjc