Creating A Simple 3d Rotation Slider For Real Objects, A SWiSHmax Project by Jim Helton Options

[jhelton]

Creating a Simple 3D Rotation Slider for Real Objects


A SWiSHmax Project

By Jim Helton


For 13dots.com

Overview

Every day I see great examples of good uses for Flash on the Internet. One of the coolest things I’ve seen is the integration of real objects, such as

cars, incorporated into product presentations and movies. As I continue to learn new ways to use SWiSHmax, I thought it would make a good project to

figure out how to do something like that. Like most learning experiences, it’s best to start small and work from there. So that’s what we’ll be doing

in this tutorial…starting small. Here's what we are going to build:

What you will need

I’m going to focus primarily on the SWiSHmax side of creating a simple interactive object rotation movie, but let’s start with some quick basics. For

my project, I’m using:

• A digital camera


• Photoshop (any of the latest versions will do). You can use any photo editing software that will allow you to resize and optimize your photos.


• SWiSHmax


• A little creativity

The prep work

1. Find an object you want to rotate (car, house, person, whatever). For this example I’m using a figurine.


2. When possible, use a tripod. If you plan to cut out the background, such as for a product demonstration, then shoot the photos with a contrasting
   
   backdrop (will make selecting the background easier).


3. Take your photos. Start by determining your starting point and then either rotate the object (for small projects), or rotate around the object (for
   
   larger projects). It’s important to keep a somewhat consistent distance from the object, unless you want a zoom in/out effect. If your photos are off,
   
   you can always adjust them later in the photo editing software. The more photos you take for a single rotation of the object, the smoother the
   
   animation will be, but don’t go overboard. In my testing 20-25 images works just fine.


4. Adjust and optimize your photos. In Photoshop I optimize by sizing down to the minimum required and then Save for Web as JPEGs at a medium
   
   setting. You can play with the size, but keep in mind that the more/larger the pictures, the greater the load time!


5. Save your photos in sequence. While the name isn’t important for this method, I suggest saving them in order of rotation so that you can easily
   
   sort them in SWiSHmax.

Here is the setup I used for this example:









So that’s it! Now that we have a set of images to play with, let’s build our movie.

Step 1 – Setup the movie

• Open up SWiSHmax and create a new movie.


• Set the width and height of the movie to match your photos. (600 x 400 for the example)


• Set the frame rate to 12. Because we won’t be placing any effects on the timeline, the frame rate setting does not need to be high. If you find
  
  that you have problems later with the movie not keeping up with the slider, play with higher frame rates to increase the interval at which Flash will
  
  evaluate your script.


• Set your background color.

Step 2 – Add your photos

• Import your photos by clicking File/Import and then selecting all of your photos.


• If SWiSHmax does not place them in the scene in the right order, then just drag them in place so that they are arranged from start to finish.


• Select all of the newly imported photos and on the Transform properties panel set X: and Y: both to 0. This should align all of the images.

Step 3 – Group images into sprites

You now need to group each photo into its own sprite. The fastest way to do this is to place the Group menu above the Outline window. You can then

click a photo, then click the Group as Sprite button. You can also right click each photo and choose Grouping/Group as Sprite. Once they are each

grouped into their own sprite, rename the sprites in order as Frame1 through Frame 23 (or the end of your set).

Step 4 – Group photo sprites into one sprite

• Select all of the photo sprites and group them into a single sprite.


• Rename the new sprite to spPics.

Step 5 – Create your slider

• Find a clear area of the movie and create your sliderbar. For my example I used the rectangle tool and created a bar with a gradient fill.









• Now here’s the first tricky part. You need to set the width of your slider in relation to the number of frames you have. In my case I’m using 23,
  
  so after creating my initial sliderbar I’m going to check the width in the Transform panel. In my case it starts out above at 514 pixels. So, using a
  
  calculator, divide 514 by 23. The result is 22.348. So I’ll multiply 23 x 22 and get 506. This is what I’ll set the width of my slidebar to.









• Next let’s add a slider. I’m going to create a rounded corner box and give it a gradient fill as well. Exact placement isn’t important right now,
  
  but I suggest you put it at the beginning of the slidebar and align them horizontally. Set the Anchor point to Center on the Transform panel.

Step 6 - Let's code!

• To make this work we’ll need code in two places. Let’s start with the scene. Select the scene level and switch to the Script panel. Switch to
  
  Expert mode. Paste or type the following code:

CODE

onEnterFrame() {


for (x in spPics) {


if (spPics[x] != spPics[view]) {


spPics[x]._visible = 0;


}


spPics[view]._visible = 1;


}


}


onFrame (2) {


stop();


}

What the code does:




onEnterFrame() {


Each time the frame is entered (Frame 1) then perform the following code.




for (x in spPics) {


This sets up a loop that will run once for each object in the spPics sprite container. In this case that is our 23 photo sprites. So it will walk those

sprites top to bottom.




if (spPics[x] != spPics[view]) {


Now we evaluate whether the active sprite in the container is the one we want to view (we’ll set that up on the slider in the next code). If it is not

the one we want to view then perform the following code.




spPics[x]._visible = 0;


Set the visible value to 0. So if the photo sprite currently being evaluated in the loop is not the one we want to view, make it invisible.




spPics[view]._visible = 1;


Set the photo sprite we want to view to visible.




onFrame (2) {


stop();


}



The last set of code makes the movie stop on Frame 2. This prevents the movie from ending and allows the onEnterFrame code to be repeatedly evaluated

at the frame rate of the movie.

Step 7 - More code

• The second set of code goes on the slider. Select the slider in the Outline and switch to the Script Panel. Switch to Expert mode. Paste , or type,
  
  the following code in:

CODE

onEnterFrame (){


_root.view="Frame" add (math.round ((this._x-47)/23)+1);


}


onSelfEvent (press) {


startDragUnlocked(47,553,15,15);


}


onSelfEvent (release,releaseOutside) {


stopDrag();


}

What the code does:




onEnterFrame (){


Again, we are evaluating the following code each time the frame is entered.




_root.view="Frame" add (math.round ((this._x-47)/23)+1);


Here is where we figure out which photo we want to be visible. Let’s break the line down so that it’s easier to understand:


_root.view= : This updates the view variable in the _root level. Remember in the earlier code when we used [view] in our comparison. This is where we

set that value.


“Frame” add : The value of _root.view will begin with the word Frame and then append the result of rest of the line.


math.round() : A math function that returns a whole number.


(this._x-47)/23)+1 : this._x refers to the X location of the slider. We are dividing that by the multiplier we determined earlier in Step 5 when we

adjusted the width of our slidebar plus 1. Doing this will return 1 additional grouping (0-22) and then we add 1 to the result so we have a range of

1-23, which matches our Frame number.




onSelfEvent (press) {


This event tells us when the viewer had clicked on the slider. When that happens do the following:




startDragUnlocked(47,553,15,15);


Here we are telling the slider that it can be moved. The numbers are X-start, X-end,Y-start,Y-end, so for my example the start X is the X location for

our slider bar (47). The get the end location we add 47 and the length of the bar (506) to get the 553. Because we are only sliding left and right

we’ll leave both Y setting at the Y value for our slider (15).




onSelfEvent (release,releaseOutside) {


stopDrag();


}



This tells the slider to stop dragging once the viewer lets it go.

That’s it! If you get error when trying to view the movie within SWiSHmax, just test it in the player.




Here's the first one I did. The background has been removed and filled with black to emphasize the object.









Here's the code:


 rotation.swi ( 308.15K ) Number of downloads: 8722

[*D*]

Wow I never even saw this come up in new posts, Many thanks for adding this Jim very detailed with a great end result.

[thejave]

Is there a way to do this with Flash 8 only?

[LKS]

you should have used some white , black or some background with 1 colour ...
it`s great anyway..thanx !

[mattlock]

guys.. one question: is it possible to prepare not only simple rotation but also 3D interactive rotating presentation? Wanna know how it is working: try to enter the Kodak site www.kodak.com and check one of their cameras - you can manipulate with moving/rotating/zooming the objects - see example: www.kodak.com - example- how can I do it with SWISH? I'd appreciate any suggestion - THXIA

[eggo]

too much pictures but a great effect.

[cooky]

Hi Ho,

thats a great effect



cooky

[axivelet]

thank you

[mostafaihab]

good work i use it in my product