Tutorial: Make Your Own 360 Gallery

[Jimbob]

This tutorial will show you how to make your own 360^o-view gallery for whatever you like, including creations made on LDD and models made traditionally, using Flash - with no programming skills whatsoever required! Okay, so this tutorial might seem a little wordy, but it really isn't difficult at all. And while this may be better suited for some programming forum, I thought it might be nice for members here to post 360^o MOCs if they wanted to, and having a topic on this forum to use a a guide would therefore be helpful. Anyway, onto the tutorial.

 

An example of a gallery made using this guide can be found here. This is Fushigisaur's >Snow Shredder MOC, which I will be using to demonstrate the steps in the tutorial.

 

Note: I have written A LOT in some places, simply because Adobe programs can be a little overwhelming at first if you've never used them before, so I've written the instructions very clearly so that you can understand them should you never have used one before.

 

---

 

 

Step 1: Gathering your Images

 

First of all, of course, you will need to have a series of images representing different angles of your model. I recommend not doing a full 360 degree rotation of it (i.e. 360 images), rather anything from 30-100 images should be fine. The more you have, the smoother it will look, but equally the bigger the file size will be.

 

As mentioned earlier, I will use the Snow Shredder MOC in this tutorial as an example. Fushi took over 160 images for this, by simply taking screenshots in LDD rotating the model a little bit each time. But to save space, half of them were cut.

 

Next you will need to decide upon an appropriate size for the models. If you model is to be displayed on RRU, I recommend scaling it to 640x480, but other resolutions such as 1024x600 are nice too. Just don't put it above 768 pixels high, as you risk cutting it off in your viewer's browsers. Again, it's finding the balance between image quality and file size.

 

Note: If you don't want to spend ages going through each individual file and editing it, I recommend using XnView. It's free and can batch-process many images, which is what I used for this tutorial.

 

Got your images? Great! Below is a screenshot of my the images used in Fushi's 360 MOC. They were resized and cropped to 640x480 dimensions, and renamed in number sequenced.

 

 

 

Step 2: Acquiring the Tools

 

I have programmed this using ActionScript 3.0, and hence you will need a Flash editor to program it. Don't fret if you don't have one though, there's no need to fork out loads of money. If you do have a copy of Flash Professional, you can skip this step.

 

You can download a free trial of Adobe Flash CS6 here. I think this lasts for 30 days, more than enough time for this.

 

Just follow the steps to download the trial listed under 'Flash Professional CS6'. Note: this is a legitimate link - although it's not the Adobe website, the linked files are, it's just that with the release of Adobe Creative Cloud they removed previous links to those files but kept the files. If there's a trial for Creative Cloud you could get that too, but I just prefer CS6.

 

Once downloaded, install the trial following the provided instructions. If you're getting problems here, this topic isn't the place to ask for help - you'll have to post on the website for that. Quite a few issues have already been resolved in the comments though.

 

 

 

Step 3: Setting up the Gallery

 

Launch Flash Professional. The main screen will present you with many options, but for this you will want to select ActionScript 3.0 under Create New. This will create a new project for you.

 

Next, to make things easier, click on Window at the top tool bar. Hover over Workspace in the drop-down and select Developer from the pop-out. This will change the arrangement of the toolbars and menus. Now, on the right-hand pane under Properties, you should see the word Size: followed by two numbers. Set these to the width and height of your images - in this example, I used 640 x 480 px. Next, look for the word Stage: just under Size:, and click on the white box. Here you can select an appropriate background for your gallery. This isn't just for the area you see in the middle of your screen, but also everything around it should the viewer's window be larger than your previously set resolution.

 

Now, click on the Timeline tab in the bottom pane. You will see a line of white blocks next to Layer 1. This can all be left as-is. Now click File from the top bar, hover over Import from the drop-down, and click Import to Library... from the pop-out. Select all the images you wish to use in the 360 gallery, and Flash will import them into your library.

 

Below is my example after finishing Step 3.

 

 

 

Step 4: Adding the Images

 

This is the most tedious part of the process, and involves a lot of clicking, just to warn you. Firstly, click on the Library tab at the top of the left pane to show all your imported images, if you haven't already. Click on the first image you wish to use, and drag it onto the stage. Once loaded, the Properties tab in the right pane will change to show information on the image. Change both the X: and Y: values under Position and Size to 0, to place the image central to the stage.

 

Now, right-click on the image. Select Convert to Symbol... near the bottom of the pop-up menu, and a new window will appear. You can change the Name: field to whatever you like (I'm going to leave it as-is) and leave everything else as it is. Make the sure that the Registration: point - the nine little boxes in a square - is highlighted at the top-left box. If it isn't, click on the top-left box to select it. With all this set, click OK to close the window and convert the image to a movie clip ready for programming.

 

The Properties tab will change again, with a lot more information this time. Leave everything as it is, except from the very top field entitled <Instance Name>. In here, type 'main' exactly like that, without quotation marks. This is important as the code later on refers to this name.

 

Now double-click on the image, and some fancy little box will zoom up at you. Not much will have changed, but you will be brought inside the movie clip. You can make sure it worked by looking at the top bar of the main window, where it says Scene 1 - next to this it should say Symbol 1 or whatever you called your symbol. If so, it worked, if not you need to go back and follow the instructions carefully again.

 

In the bottom pane, next to Layer 1, you will see the line of white boxes again. They are labeled with numbers above, in the form of a very simple number line. Click on the second frame, at which point it should be highlighted in blue. Now hold the Shift key and click on the frame under the total amount of images you have - I have 83 in my example, so for me I click on 83. This will highlight all of the frames in between (sometimes it won't work first time around, just try going from the last frame to the first one or clicking a few times). Right click on any frame under the selection, and select Convert to Blank Keyframes from the pop-up menu.

 

If all is correct, you should now see the following:

 

 

Now to the fun part! *sarcasm*

Just as you brought the first image onto the stage and centered it, you will need to go through each frame, add the image to that frame, then center the image on that frame. The process is:

 

Select next frame from Timeline >  Drag next image from Library onto stage > Edit Properties to set X: and Y: values to 0 > Repeat

 

Do this for all of your images. When you are finally done, all frames in the Timeline should be coloured grey to show that they contain images. If you click somewhere on the stage and press the Enter key, it will rotate to show you a preview, but it'll likely be glitchy as it's not been compiled into an application yet.

 

Screenshot of my example after being filled in:

 

 

 

Step 5: Programming Time!

 

Contrary to what you might think, this is actually the easiest step, as I've done pretty much all the programming for you already. But first, while still inside your symbol, select the first frame. Right-click on it and select Actions at the very bottom of the pop-up, to bring up a new window. Just type in the following, exactly as-is:

stop();

And close it again. This prevents the images from trying to rotate before the user actually tells it to.

 

Now, click on Scene 1 at the top, next to Symbol 1 or whatever you named your symbol, to go back to the main stage. Just as before, select the first frame, right-click it, and choose Actions from the pop-up menu to bring up the programming window.

 

Copy and paste the following code into the window:

stop();

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

import flash.ui.Keyboard;
import flash.events.Event;
import flash.events.KeyboardEvent;

var lastFrame:Number = 83; //This is all you need to change
var changeRight:Boolean = false;
var changeLeft:Boolean = false;

stage.addEventListener(Event.ENTER_FRAME, ongoingEvents);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, keyReleased);

function ongoingEvents(e:Event):void {
if (changeRight) {
if(main.currentFrame == lastFrame) {
main.gotoAndStop(1);
} else {
main.gotoAndStop(main.currentFrame + 1);
}
} else if (changeLeft) {
if(main.currentFrame == 1) {
main.gotoAndStop(lastFrame);
} else {
main.gotoAndStop(main.currentFrame - 1);
}
}
}

function keyPressed(e:KeyboardEvent):void {
if (e.keyCode == Keyboard.RIGHT) {
changeRight = true;
} else if (e.keyCode == Keyboard.LEFT) {
changeLeft = true;
}
}

function keyReleased(e:KeyboardEvent):void {
if (e.keyCode == Keyboard.RIGHT) {
changeRight = false;
}
if (e.keyCode == Keyboard.LEFT) {
changeLeft = false;
}
}

 

Apologies that the indentation is messed up. Near the top, look for the part that says:

var lastFrame:Number = 83; //This is all you need to change

And change the number to the number of images you have. That's it! If you'd like to know what's actually going on, check out the spoiler below, otherwise skip it.

 

I'll go through the code bit-by-bit.

stop();

This tells the application to stay still on the current frame. It's not really important when you have just one frame, but should you want to expand your application it's necessary.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

import flash.ui.Keyboard;
import flash.events.Event;
import flash.events.KeyboardEvent;

First this tells the program not to scale, i.e. when the user changes their window size, this prevents the movie from scaling in some funny way along with it. You want to keep your picture at its optimum resolution, rather than going blurry. Afterwards the program is aligned to the top-left of the browser window, just like with text.

The import statements simply tell Flash what coding is in use in the program, which it then selects and saves with the program.

var lastFrame:Number = 83; //This is all you need to change
var changeRight:Boolean = false;
var changeLeft:Boolean = false;

The first line creates a piece of data that is remembered while the program is run, and holds the total number of frames in the application. It uses this later to ensure that you can rotate more than 360 degrees.

The second and third lines remember whether or not the right and left arrow keys are currently being pressed.

stage.addEventListener(Event.ENTER_FRAME, ongoingEvents);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, keyReleased);

Here we add three events to the program - ongoingEvents takes place many times each second, effectively it is run constantly throughout the program. The keyPressed and keyReleased events are triggered whenever you press a key - not just the left or right arrows - and release a key. These don't do anything by themselves, but tell Flash what to look out for in order to activate the code later on.

function ongoingEvents(e:Event):void {
    if (changeRight) {
        if(main.currentFrame == lastFrame) {
            main.gotoAndStop(1);
        }

This is the function that is called many times a second. The second line checks whether or not the left key is pressed, something that is set later on. It basically says that, if the right key is pressed, then go to the next line.

This next line checks if the images you have set is currently on its last frame - if so, it needs to jump to its first frame, because a full 360^o spin has been performed.

        else {
            main.gotoAndStop(main.currentFrame + 1);
        }
    } else if (changeLeft) {
        if(main.currentFrame == 1) {
            main.gotoAndStop(lastFrame);
        } else {
            main.gotoAndStop(main.currentFrame - 1);
        }
    }
}

The first line says that 'If the right key is pressed, but we're not on the last frame, then do the next bit of code'. This code just advances the images forward a frame. The next line says 'If the left key is pressed instead of the right key, do this'. The next few lines of code are the same for the right key's presses, except that the shift the frames left each time, and also go from the first frame to the last frame if a full spin has been completed.

function keyPressed(e:KeyboardEvent):void {
    if (e.keyCode == Keyboard.RIGHT) {
        changeRight = true;
    } else if (e.keyCode == Keyboard.LEFT) {
        changeLeft = true;
    }
}

This is the event that occurs whenever a key is pressed. The second line checks if the key that is currently being pressed is the right arrow, and if so, tells the program to change the frames right as coded above. Then it checks whether, if it wasn't the right arrow, it was the left arrow - and if so tells the program to change frames left. If any other keys are pressed, Flash ignores them because no other code has been associated with them.

function keyReleased(e:KeyboardEvent):void {
    if (e.keyCode == Keyboard.RIGHT) {
        changeRight = false;
    }
    if (e.keyCode == Keyboard.LEFT) {
        changeLeft = false;
    }
}

This is identical to the previous function, except that it is triggered whenever a key is released. If the key was an arrow, it stops the program from moving in that direction. Simples!

 

And that's it, folks.

 

Now close the coding window. Save the project (Control + S on Windows) and test it out! (Control + Enter)

 

Below is my example project, once finished:

 

 

If all went well, you should have a shiny new SWF file ready for use. Pressing the left and right arrow keys will rotate your model left and right. Simply upload this somewhere (such as Dropbox) and you can share it with others!

 

And thus concludes this tutorial, congratulations! I hope that you are able to make good use of it, and enjoy seeing whatever you may produce with it.

 

A note on credit: You really don't need to give me any credit if you used this tutorial to make a 360 gallery yourself. While I would obviously appreciate a note of thanks, it's not at all necessary and I won't mind it if you don't in the slightest. Besides, I learned all the Flash programming I know by following other people's tutorials!

[le717]

After I read this (yet another) excellent tutorial, the first thought in my mind was

"How can I recreate this using HTML/CSS, XML, and JavaScript/jQuery?" But then I threw that idea out the windows ME. :P

[Jimbob]

After I read this (yet another) excellent tutorial, the first thought in my mind was

"How can I recreate this using HTML/CSS, XML, and JavaScript/jQuery?" But then I threw that idea out the windows ME.

Why would you throw that idea out the windows ME? Maybe it'd work even better than Flash, I don't know the differences in the performances of the language.

 

You could use XML to store links to all of the images, perhaps on Dropbox or something, then in Java pre-download all those images and load them, then simply have some method of scrolling through them with the arrow keys. I don't know Java so don't know how possible this is.

 

The only downside with XML, or at least with Flash using XML, is that by downloading the images from outside rather than storing them in the program you have to load each one every time you want to view it. Hence the Internet transfer speed causes it to be incredibly slow. Unless I simply haven't discovered a different way of doing it yet, perhaps you can preload multiple images in some temporary storage...

[le717]

1) Why would you throw that idea out the windows ME? Maybe it'd work even better than Flash, I don't know the differences in the performances of the language.

 

2) You could use XML to store links to all of the images, perhaps on Dropbox or something, then in Java pre-download all those images and load them, then simply have some method of scrolling through them with the arrow keys. I don't know Java so don't know how possible this is.

 

3) The only downside with XML, or at least with Flash using XML, is that by downloading the images from outside rather than storing them in the program you have to load each one every time you want to view it. Hence the Internet transfer speed causes it to be incredibly slow. Unless I simply haven't discovered a different way of doing it yet, perhaps you can preload multiple images in some temporary storage...

1) To paraphrase Fushigisaur,

 

You had the chance to use the most awesomest word in the English language and you missed it.

I don't know if it might work better, but it'd more much more cross-browser. As for why I defenestrated ( ) the idea, I have too many projects as it is, and I have to complete my work in order to see TLM on Friday. Maybe once I finish another small project I'll look into this.

 

2) Arrow key binding is rather easy using jQuery, and simply detecting a key is even easier. The image links don't have to be hardcoded. Simply use relative paths to them. That way, you can move the site to any host and the links work as long as the proper folder structure is present.

 

3) It seems there are a number of ways to preload images with jQuery, so aside from figuring out which works best/at all, that doesn't look too difficult. If the images are not too large it may be possible to not preload them. If one wanted, it most likely would be possible to display a loading indicator while the images loaded, then on $(document).ready(); fire a command to hide it and display the page contents.

 

I noticed you changed background colors between the two pictures in step 4. Did the darker color look bad or something?

[Jimbob]

1) To paraphrase Fushigisaur,

You had the chance to use the most awesomest word in the English language and you missed it.

I don't know if it might work better, but it'd more much more cross-browser. As for why I defenestrated ( ) the idea, I have too many projects as it is, and I have to complete my work in order to see TLM on Friday. Maybe once I finish another small project I'll look into this.

 

2) Arrow key binding is rather easy using jQuery, and simply detecting a key is even easier. The image links don't have to be hardcoded. Simply use relative paths to them. That way, you can move the site to any host and the links work as long as the proper folder structure is present.

 

3) It seems there are a number of ways to preload images with jQuery, so aside from figuring out which works best/at all, that doesn't look too difficult. If the images are not too large it may be possible to not preload them. If one wanted, it most likely would be possible to display a loading indicator while the images loaded, then on $(document).ready(); fire a command to hide it and display the page contents.

 

4) I noticed you changed background colors between the two pictures in step 4. Did the darker color look bad or something?

1) Fair enough. Not much else for me to say here.

 

2) I thought so, but about the images being hardcoded - my point was with Flash they don't have to be (the gallery I'm making for Sushigidoge's MOC index uses XML and external images), but Flash loads them as they are requested, not beforehand with the ability to store them temporarily. Therefore a 360 using external images isn't ideal, and I figured it might be the same in Java. Although I could create shared objects (like cookies), but there's no point in that.

 

3) Well alrighty then, that's handy.

 

4) The first half of the pictures were created in a new project I made for the tutorial, then to avoid having to load all the images onto the stage again I just reopened Sushi's project and used that from then on - he'd requested the different background so I stuck with that.

 

 

Perhaps if there's more you'd like to say on this Javascript subject, we should continue it elsewhere? But by the sounds of things you're quite happy, what with the defenestration of the idea for other pressing matters and all.