How To Create An Interactive 3D environment using the space3D Flash Component
in Components, Tutorials |
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 700x510 pixels. I will also size the component to 700x510 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.
Loading ...
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.