|
PSEUDO
3D ROTATING GLOBE
This tutorial
will show you an easy way to create a pseudo 3D rotating globe.
Getting Started
The first
thing you will need is a tiled image. There is one provided
in the .zip. These are easily found on the web and any image
suitable for a web page background will work.
1. Import
your image.
2. Create
a circle and place over your image to the left.
3. Send
your circle to the back. This will be used as the mask.
4. Select
the image, Copy and Paste a second instance of it and place
just to the right of the first image, so that there is no
gap between the two. Make sure that the Y position is the
same for both images.
5. Select
the first image and add the Move effect at frame 0. Change
the X Position property for this effect to Move Left by, and
enter the same value as the image’s width. If you have an
image that is 200X75, you would enter 200 as the value. Try
30 for the duration.
6. Check
to see that the image moves at the desired speed and adjust
the effect’s duration as needed.
7. Copy
the effect (make sure that you are not in Preview Frame mode)
and paste this effect at frame 0 for the second image.
8. Check
that the images move together, and that there isn’t a gap
between the two while playing. Realign if necessary.
9. Select
all objects and Group as a Sprite. Set the Sprite to Loop
and Masked in the Sprite Panel.
10. Return
to the main timeline and check to see that the mask is working
and that the images are scrolling properly
To give
the illusion of a sphere, you need to place a highlight and
a shadow above the tiled images.
11. Return
to the Sprite's timeline. Select the circle, then Copy and
Paste a second instance of that circle for the highlight.
Select a Radial gradient fill, and choose white as the starting
color and black for the ending color. Try setting the Alpha
value for the white to 40% and the Alpha value for the black
to 0%. Decide where your light source will be coming from
and transform the fill accordingly.
12. For
the shadow, Copy and paste a second instance of the circle
you created for the highlight. Change the starting color from
white to black and change the Alpha value from 40% to 0%.
Change the Alpha value for the ending color from 0% to 20%.
It might be easier to check and adjust your gradients if you
hide your tiled images temporarily; click on the eye icons
in the Outline Panel to toggle between hide and view.
Rotating on an Axis
13.
If you would like this to rotate on an axis, it may be best
to group both images as a Sprite within this Sprite set the
Sprite containing the tiled images to Loop. You may need to
reposition the Sprite containing the images after rotating
so that it is over your circle mask.
Images with Transparent Areas
14. Images
with transparent areas (e.g., the globe in the demo) can appear
to wrap around the front and back by copying and pasting the
Sprite with the images, and dragging the copy so that it is
facing in the opposite direction.
The copied
sprite is orange in the images below.
15. Resize
the Sprite’s width back to 100% (if you have dragged the Sprite
in the correct direction the height should remain at 100%).
Send it behind the original Sprite and change the color if
desired. You may need to adjust the position of this Sprite
for a bit to get a realistic effect, and may find it helpful
to reduce the movie’s frames per second during testing.
View
this .swi to create the bouncing and text circling around
the globe effects.
|
