Rotate object (360 degree gallery) with multiple images

[liv.za...@gmail.com]

Hi,

I'm trying to use the 3d object rotate tool to rotate a slideshow.

So let's say the first image you see is the front of an object, de second image is the side and the third the back, the fourth the other side and the fifth the front view again.

Anyone knows whether this is possible? Also tried to rotate it only 90 degrees and then adding another image on top of it and rotate that 90 degrees etc, but that's not really working out.

Cheers!

Liv

[Google Web Designer beta]

Hi Liv,

Maybe give the following steps a try. Feel free to refer to the attached sample file as it saves key steps as separate pages.

- using the 3d rotation tool to layout the images in the way you like (page1_1)

- create a div as the base of rotation

- use the selection tool to select all images

- cut the images

- double click on the div (so that its border turns red)

- paste the images (page1_2)

Now, you can rotate all the images together by rotate the div. (page1_3)

Hope this helps.

Paul

[Liv]

Hi Paul!

Super thanks for taking your time to reply :)

I've been trying out some more in the mean time and have come to the following (see attachment "Rotate_example.zip). What i'm trying to do is make a phone rotate so that you first see the front, then the back, and then the front again. 

In the example you can find two different methods i've been trying of which my favorite is the 360 degree rotating tool option. 

However.. I can't get it to rotate the full 360 degrees somehow, it rotates back the other way if i add more frames. Would you know a way to go about this?

I've also added the workfiles, hope that it works like that, is my first project with GWD.

Cheers!

Liv

[Google Web Designer beta]

Hi Liv,

I see what you are trying to do now. GWD has a built in component to achieve the look you want. Please take a look at our 360 gallery component:

  https://support.google.com/webdesigner/answer/3191422?hl=en

You can add more product shots at in-between angles to give the illusion of full 3d.

Further, you can make it rotate automatically by setting the autoplay attribute or calling rotateOnce handler using events.

Hope this helps.

Cheers,

Paul

[Liv]

Hi Paul,

Thanks for your answer! I'm almost there :) 

Got the 360 gallery working with 2 images (using 4) images in total and the right timing with the rotation + the rotate event. 

However, how do I change it so that it will take the middle of the image / 360 gallery when rotating. Now it sort of rotates in a wide circle around one of the corners. When i move the globe (which is in the middle by default) to the bottom or corners it does a lot of cool rotating but it doesn't just rotate around it's own center y axis. 

Thanks again for helping me out!

Liv

[Google Web Designer beta]

Hi Liv,

If you set some border on the gallery, you will notice that the rotation is around the center of the gallery. However, since the images are along the left edge, the animation looks wrong. Simply resize the 360 gallery to fit product images and the rotation should look correct.

Some suggestions: 

- By rotating the gallery, the phone will appear infinitely thin. If you have access to more product shots at different angles, adding them to 360 gallery may lead to a better experience. In this case, you don't need to rotate the gallery as the images will be used as frames in the animation.

- It looks like you may be using duplicated images in the gallery so that each view can stay visible longer. If they are duplicates, you can reduce the overall creative size by making them use the same image. To do so, select the 360 gallery on stage and go to the properties panel. Currently, the "images" attribute of the gallery is set to "assets/P7front.png,assets/P7front_2.png,assets/P7back.png,assets/P7back_2.png". Change it to "assets/P7front.png,assets/P7front.png,assets/P7back.png,assets/P7back.png". (Removing "_2")

[Liv]

Hi Paul,

Yes you're absolutely right about the size! Makes sense :)

Thanks a lot for your help!

Cheers, Liv