It's time for another Exclusive Freebie; this time AerisT offers a flavor of summer to Activetuts+ readers. Add your own custom beach party logo to this 3D interactive beach ball! The file uses the open-source Papervision3D engine and loads images via XML.
Check out the beach ball with an example logo:
If you take a look at the demo, you can click and drag the ball to rotate it. You can replace the logo with any image you like! It's controlled by an external XML file, so you don't even need to have the Flash authoring environment.
Recently, a client of mine, who was in the process of designing a website for a kid’s baseball team, asked me to help him spice up the site with some Flash elements. I proposed the idea of incorporating a 3D interactive baseball showcasing the team’s logo. At the time, I did not have the slightest idea how I would accomplish the task, but it was an interesting idea so I decided to pursue it.
After stumbling around with various implementation concepts to create a 3D sphere effect and browsing through ActiveDen’s stock Flash offerings without much success, I finally landed on using the open-source Papervision3D engine. Although I was new to PV3D, my early tests gave me some really promising results and I quickly realized that it was the correct technology for the task at hand.
I dug in to PV3D and after a lot of experimentation and some excellent advice from other authors on ActiveDen, I was able to create a 3D sphere to which a detailed texture could be applied, was interactive with the mouse, and featured a custom logo driven by an XML text file. It was the perfect solution for my 3D interactive baseball (and this beach ball).
The Challenge: Getting the Texture to Wrap
The next challenge was to create a realistic bitmap texture that could be applied to the 3D sphere. This turned out to be a bit tricky due to the way PV3D wraps textures around sphere primitives. In designing my texture, I had to take into consideration the fact that the top and bottom edges of the bitmap would be compressed when mapped to the sphere. Visual elements in my bitmap texture that were near the top or bottom edge of the bitmap needed to be stretched wide in order to compensate. (For example, on the beach ball, the top and bottom red circles are actually red rectangles that stretch all the way across the bitmap texture’s width – see figure. When wrapped onto the sphere, they appear as circles.)
As a result of PV3D’s texture wrapping method, I spent some time perfecting textures in a graphic design program.
As you can see from this 3D beach ball, the result of my efforts turned out quite nicely. This beach ball is a stripped-down version of the ActionScript 3.0 code I used for the original baseball. The beach ball is contained entirely within its own movieclip – so it is easy to drag-and-drop into a Flash project. All of the ActionScript code for the beach ball is contained on the beach ball’s own timeline, so there are no external class files to manage. I’ll admit that external class files are a great way to code, but in this case, I preferred the simplicity of keeping everything in one place.
The beach ball is a great way to announce an upcoming beach-themed event or summer trip. Add your own custom logo easily by modifying the included XML text file and link to another site by specifying a URL link on double click. Your viewers will appreciate having something they can interact with.
So what’s next? Perhaps in the future I’ll consider building a game using one of these 3D balls. (Let me know if you have any great game concepts.)
If you like this beach ball, go and check out my 3D Sports Balls on ActiveDen and see the baseball that started it all!