I'm now finished my first official project using
Papervision.
Even though there's been the expected learning curve while learning a
new library, the project went smoothly. Prototyping and concepting
were a breeze. I hit all my deadlines and milestones, with time to
spare. The entire project schedule, I compiled, viewed the piece in
Firefox, and saw something like this:
So you can imagine my surprise and dismay when, on a Friday
afternoon a little before launch, we moved it over to the dev server and the page where it
would live and saw this:
Now I've seen some weird behavior between browsers, but never anything like that - and especially not in Flash!
Then things started to get really strange. Trying to get some
insight on what might have happened, I decided to check it out in Safari
for the Mac. I soon wished I hadn't...
So, after I had a wee little cry, I started combing the Papervision
forum over at Nabble. But no one had ever run into a similar problem.
The basic gist behind the magic of Papervision - and most 3D libraries
for that matter - is that it takes bitmaps and skews them along an
imaginary surface using a matrix. I had the cubes in my pieces
separated into 12 of these surfaces, two for each side. The first issue
was clearly showing a gap where these surfaces were suppose to meet
seamlessly, and the second was doing the opposite, only showing the
content on the edges themselves.
Panic was just starting to set in when Pavel, my partner in crime
and Pivot and Levy's resident server-side guru, found something. When
he changed the background color of the div where the second issue was
occurring to black, the issue went away.
"Ok, it's a transparency issue. Now, where have I run into the most
issues with transparency?" I said. "Hmm, I bet it's that pesky little
attribute, wmode." I replied. Sure enough, I had copied and pasted a
embed tag that had declared the wmode as transparent. So, I figured I'd
just set it to the default and go about my weekend.
"Not so fast!" said Mr. wmode. That merely balanced out the
rendering problem between browsers. Safari now had the milder, although
still debilitating, first issue, instead of the mind-blowingly horrific
second one. And Firefox and IE now always had it, no matter what color
the background. It was progress, at least. Although at the time I
didn't know in which direction
So I cried some more. But then I ran through my code some more as
well, looked over every object and property, trying to find anything
that might affect transparency. I paused over the MovieMaterial objects
that I used to take the Flex components behind the app and populate
them to surfaces of the cubes. One of the properties of the
MovieMaterial Class is "transparency", but I had it set to false. After
all, the surfaces of my cubes didn't need transparency, so why ask the
player to try and render different opacities. But I was desperate, the
same kind of desperate the makes you look for your keys in the freezer,
so I switched it to true and pressed the Run button.
Bam! Eureka! Bug fixed.
There are two morals to this story. One, even cocky Flash developers need
to check their apps in other browsers. And two, always set your
MovieMaterial to transparent when using the Papervision3D library.
Currently rated 5.0 by 1 people
- Currently 5/5 Stars.
- 1
- 2
- 3
- 4
- 5