How To Create An Interactive 3D environment using the space3D Flash Component
in Components, Tutorials | 29 Comments
In this tutorial we will create an Interactive 3D environment. Images first appear in a 3D wall and then on click randomly expand out. The camera then zooms through space to the clicked image. An image can be flipped over to reveal image information.
Introduction
This tutorial uses the Flash Framer space3D component. The space3D component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a random photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.
Click here for information and to get the space3D component.
Step 1
Once you have downloaded and installed the space3D component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.
Step 2
Open the components panel. Window > Components
You will now see a component set called FlashFramer.
Open up that set and you will find the space3D component.
Drag and drop the component onto the stage and align it.
I’m using the stage size of 700×510 pixels. I will also size the component to 700×510 to fit the stage.
Set the frames per second (fps) to 20 fps for smoother animation.
Step 3
Now lets load some images. I’m using twenty five images of space scenes.
Put your photos in the same directory as your Flash file in a folder named images.
Step 4
Jump back over to Flash.
Click on the space3D component to select it and open the Components Inspector panel.
Window > Component Inspector
Double click on the Image List value field.
A Dialog box will popup.
Click on the plus button to add an image with a title and description.
Repeat this until you have all your images entered.
You can also use XML file to control every parameter of the space3D component.
See the documentation that came packaged with the component or download it here.
Preview you file. File > Publish Preview > Flash
You now have a fully working dynamic photo gallery.
Step 5
You can either use the space3D component out of the box or modify and skin it to your liking.
space3D comes built with tons of parameters to customize your gallery. Such as: xml, spacing, margin, border size and color, reflection, transition, show arrows, back flip, and camera movement.
These setting are found in the Component Inspector in Flash.
Play around with these setting until you get the look you want.
Step 6
You can also skin the component elements to your liking.
Skinning the space3D component is so easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.
File > Publish Preview > Flash
Final Customized Gallery
Conclusion
This is just a few ways to customize the space3D component. Read through the full documentation by clicking here. The component also has an ActionScript 3.0 API for advanced customization.
Click here to view the space3D API
We would love to see your work and showcase it on our site.
Just email us at contact@flashframer.com with a link to your space3D gallery.
July 14th, 2008 at 1:21 am
wow so great! i love it…
July 21st, 2008 at 4:10 pm
Added. Nice work on this one. Btw, my blog is dofollow, stop by and grab a link. Walter
July 22nd, 2008 at 3:14 pm
I came across this blog the other day and you got some great info here – thanks.
July 29th, 2008 at 4:27 pm
Is there a way to not have it start as a flat grid? Could all of the photos just be floating around when everything loads? And once you are in close on an image could you click off into space to force the camera out so you can view all images?
August 5th, 2008 at 11:25 pm
can i free download it?
August 9th, 2008 at 3:38 pm
I having a problem uploading the space3d component to flash. I have the files on my deksktop but when i open flash it does not work. can some one help me please!!!!!
August 10th, 2008 at 6:00 pm
Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found. what does this mean. I followed the instructions properlyand tried exporting my swf.file but this message comes up in error
August 10th, 2008 at 9:19 pm
mine doesnt work. i just want to use some old jpegs on my cpu. do i have to do something special to them before i use the components inspector first. and in the components inspector do i have to put something for the linkurl and imageurl? if so what do i put.
August 10th, 2008 at 10:36 pm
You can load any Flash supported image. Which does include .jpg. Note: if you are using the .xml file you must define the images in the .xml file not the component inspector. Referr to the space3D documentation for instructions on how to add images to the component. You can downloaded the latest version of documentation here:
http://www.flashframer.com/wp-content/uploads/space3d_usermanual.pdf
If you still need assistance please email your .fla, .xml, and image files to support@flashframer.com.
We will review an troubleshoot the problem.
August 12th, 2008 at 8:13 pm
following the tutorial im not sure what you mean by create a directory where the folder images go? Do you mean create a folder on your desktop with the flash file and the images within it?
August 13th, 2008 at 2:17 pm
It works fine thanks for all your help but i have one last question. I created a website which is pretty much done but it was created in AS2 now i would really like this component in my website but i know that i would have to put my website in AS3 now my question is how would i do that or do i have to do my website all over again? or is there some way that i can convert my website to AS3.
August 13th, 2008 at 2:24 pm
You might be able to load the space3D .swf file you created into you website using loadmovie or loadClip. I’ve never tried to do this but it’s worth a try. You could make this part of your site on a different page. If you don’t have alot of code on your website then I would convert it to AS3. Hope that helps.
August 19th, 2008 at 5:20 am
I have problem. It looks like everything works in FLASH. But! It does not want to accept my images. I’ve tryed a thousand different ways. When I change name of my image to image1, for example. It works. When I use mine own, it does’t. Image URL leads to the folder where Flash exaple is… I mean “IMAGES\….jpg”
What to do?
August 19th, 2008 at 9:01 am
Can you send your .fla .xml and the photo you are trying to use to support@flashframer.com. I will review them and troubleshoot the problem.
Thanks
August 20th, 2008 at 9:40 pm
Wow!
Great support! Super fast and nice quality. Everything works. Just great. Thank You.
September 30th, 2008 at 6:42 pm
Where I can find space3D components?This gallery is no free??
December 30th, 2008 at 12:30 am
[...] – bookmarked by 1 members originally found by Hilaryth on 2008-11-21 How To Create An Interactive 3D environment using the space3D … [...]
January 10th, 2009 at 2:14 pm
Interesting – GREIT.
February 5th, 2009 at 12:23 pm
Very informative article, which I found quite useful. Cheers ,Jay
March 3rd, 2009 at 10:34 am
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
March 13th, 2009 at 4:37 pm
Nice work on space3d. Works like a champ as a stand alone swf. Trying to load it into as an external swf using UILoader fails. I get the Error #2044: Unhandled IOErrorEvent: errors also.
Support email auto reply had me submit a ticket.
March 13th, 2009 at 4:38 pm
Grrr… No edit capability for your comments here.
I meant to say I get null object reference errors.
July 22nd, 2009 at 11:15 pm
Thank you this is an excellent post.
July 28th, 2009 at 4:48 pm
Hi I tried to subscribe to your RSS feed, however it’s not synchronizing with FeedDemon, you aware of any problems?
August 9th, 2009 at 9:07 pm
Would you be interested in writing for The Neave Online Publication? I love your writing style and I feel like you would fit in perfectly with the other writers.
October 5th, 2009 at 8:30 pm
Super post, Need to mark it on Digg.
January 6th, 2010 at 5:04 pm
Hi hi. I’m french. Your post can interest lot of people in France. So, if you permiss, i can copy it on a french blog.
February 8th, 2010 at 4:45 am
In this swf you have a preloader, please let me know how to do it myself.
best regards and thanks
February 8th, 2010 at 5:16 am
Hi there, I stumbled upon your blog via Yahoo while researching a company that was an importer from china