The example below shows a progression of taking a texture map from a Bryce 3D texture page, and mapping it to a sphere using the various methods of the BitmapData class. I’ve been very excited about the ability to push around the pixels but hadn’t really taken it for a spin (har har).

The reason for doing this example is to have interesting spinning globes added to my thrust example for my eventual site redesign. I’ve been playing with this example for the last week, and while it isn’t completely done, I wanted to go ahead and quit obsessing and post it Click the steps 1 through 5 to see the progression. There is a description of what is going on at each step below.

Step 1, Find the picture: I did a Yahoo! Image Search for “earth image” and found SnyderWeb (heh) which has excellent images of all of the planets and notable moons from our solar system. I took this enormous image and shrunk it down to 300 by 150 like you see in the example.

Step 2, Resize per line: The image starts as a rectangle, so the poles are really stretched. Each line of pixels needs to become two times the number of pixels needed (front and back of planet) to be displayed ob screen for that latitude. I do the calculations on how many pixels I need per line to make a circle, and use draw() to scale the big line down to the size of the line I need.

The picture above represents the final product of the full image with each line scaled as needed (left justified). In reality I am also using the copyPixels() method to duplicate each line (though not shown above). This will save calculation time when I need to be able to display the part of the globe where there would be a seam.

Step3, Give it a whirl: For my first attempt at making the globe spin, I go through each line of the warped image, and display the correct number of pixels to make a circle. To make the rotating effect, I am using a ratio that represents the amount to rotate out of one full rotation. I then find the pixel in the line that is at the same ratio and start displaying the pixels from there.

Each line then moves at different rates because the ratio is the same per line, but the line length is different. At .5 ratio, a line of 10 pixels would start copying from 5, but in a line of 50 pixels, it would start copying from pixel 25.

While this give an animating globe, you will notice that the continents don’t actually curve around the surface of the earth. It doesn’t look quite right (though I was still pretty excited when I got this far and Flash 8 was still running like a dream).

I’ve also added a couple of filter effects to make the planet have some nice lighting. Notice that the bright spot is not just a white alpha gradient. It is a blurred shape with a screen filter to actually add the channels together to change the overall lightness under the hot spot.

For my website purposes I really am going to stop here. My planets will be more like Saturn or Jupiter (amorphous banded things), so the curvature won’t be apparent. Also, as you’ll notice in the next step, the processor is going to be hit pretty hard.

Step 4, curving the X axis: Let the processor abuse begin! This new graphic warping of the X-axis can’t be done one time at the beginning like Step 2. This needs to be done every step of the rotation because when pixels are at the edges they will be crunched, and when in the middle they will be stretched. During a full revolution, every pixel of the base graphic will at some point be at the edge and also at the middle.

This being said, I can do one set of calculations once at the beginning of the animation. For each row of X pixels, I can calculate the distortion deltas. At each rotation step I can just apply this array of distortion values to the currently displayed pixels. for instance, the array may be something like [4,3,2.5,2, etc.] which means I should take the first four pixels of the line and draw them as one pixel (somehow). then for the next new pixel of the graphic I take the next three pixels and make them one. By the time you reach the middle of the graphic, the values are substantially below 1, because instead of multiple pixels becoming one, the pixels are being stretched/duplicated.

Once this is done we have a globe where the continents curve away at the sides. There are now just two problems. First, the processor is running very slowly. But the more serious problem is that my continents are too short now (well, they actually always were). To counteract the processing issue, I’m caching each calculated bitmap. After one rotation, if I call for an image that I have created once, I can pull it out of an array, rather than recalculating. You’ll notice a really big performance improvement after one rotation, but be aware that it comes at a cost. To cache the images, you have to store them in memory. For the 100 unique calculated states <eg> it takes about 8MB of memory.

Step 5, back to the initial Warp: So the last image warp (Y axis to show curvature) can be done in the beginning since since pixels never move along the Y axis. To do this, I just repurposed my line warping function and applied it vertically instead of horizontally. Once this is done all of the continents are the right aspect ratio, and then I declare victory.

What is next? So I’m happy with where things are with this, but I do have some more work to do.

• work on anti-aliasing better. Some of my warping scripts should be doing a better job of smoothing. You will notice that some of the coasts are a bit off where a pixel is sticking out here and there. The more warps that are applied, the more pronounced the effect is.
• Optimize the code. I think I can squeeze out some more performance by re-examining some of the code.
• Throw it away and do a poly-based 3D texture mapper. This works fine for X-axis rotation, but If I wanted to play god and roll the earth like a pool ball, this script just won’t cut it.

I’m not kidding. The email was just sent out by our CFO, Sue Decker:

I am excited to announce that as of Monday, August 15th, Yahoo! will have valet parking service at the Sunnyvale campus, which will offer the dual benefits of making parking more convenient and also increasing our parking capacity during this crunch time. Yahoos are welcome to utilize the valet service between 9 AM and 7 PM.

It is free and there is no tipping allowed. This is the latest creative solution to Yahoo!’s growing pains. We are growing like crazy, but as a side effect, the parking is getting even crazier. By 10AM you are parking in a dirt field behind one of our buildings across the street from the main campus. The idea is that valets can park the cars several cars deep and we can squeeze a few more in.

Speaking of growing though, we still have more growing to do. If you are a Flash or Flex developers living in the San Francisco bay area, we want to hear from you! Send me an email with your resume today!

If you are reading this on Fullasagoog, you are probably thinking “well, duh!” For anyone else this means an increase in my site traffic and a place where you can see my blog entries, a cyclops and an egg all at the same time.

Seriously, if it weren’t for aggregators, I would never be able to keep up with all of the Flash blogs. Between MXNA and FullAsAGoog, I can stay informed. Well, OK, not today and yesterday; both services have been just a wee bit crazy with a certain big announcement this week.

Anyways back to work, and thinking about Flash 8 goodness.

Flash 8 solves a minor design annoyance that has irked me over the years. When I use _alpha, the underlying structure of a movie clip becomes visible. Where there is overlap, you get an additive opacity and it just all looks “wrong.” In Flash 8, this still happens be default, but when you apply certain filters, the movie clip becomes an image, and that image will fade in and out just as if you had imported a png (even though it is still interactive).

Here is an example of what I mean. After you click to start the fading, you will see the wing of the ship, along with a text message I threw in there for fun. If you click “Apply Filter,” a displacement map filter is added (though the map is blank to not warp the movie at all). You’ll see that the ship immediately starts fading in and out as a single element, not as a bunch of pieces together.

Now that Flash 8 has been announced, Macromedia is letting members of the beta post their experiments and answer questions about the features in the upcoming release. Flash 8 has been the biggest reason why blogging has been so hard recently. There is so much that is cool, so much that is important, and I haven’t been able to make a peep about it.

well, PEEP!

This is the first experiment that I would like to post. This will also be the foundation for my next personal site at infinitumdesign.com (yes, it is about time for the jeep to go away).

Features:

The experiment is really a combination of four files I have worked on:

• Dynamic lighting: Notice that as you approach the stars, light is cast on the ship. As you change direction or move away the direction and intensity change.
• Filters on particles: As you move the ship around, lots of little stars are shot out as thrust. Each star is rotated, and scaled, then has a random blur filter attached. There can be hundreds of these movies on the stage!!
• Cloaking effect: This is is the one that I am most excited about. make sure to click into the flash file, then press the space bar to cloak and de-cloak the ship. I tried to model the effect after the Romulan cloaking effect from Star Trek.
• Nebulae: It wouldn’t be a cheesy sci-fi effect without nebulae. You will be shocked at how easy that is.

How?

Dynamic lighting is done by stacking the Gradient Glow Filter three times with the red green and blue version of the ship. I adjust many of the filter properties to get the right lightness, blurriness, distance and direction. These filters are re-applied per frame.

The particles are pretty straight forward with their blur filter, though it is worth noting that this is all very light on the processor. Running lots of stars still doesn’t break 50% on my processor.

The cloaking effect. This one took some doing, but I think it is worth every moment. I’m using the displacement map filter with some dynamically generated images that animate changing the displacement map.

The nebulae are just me taking my mouse, picking a random color and making a squiggle with the paint brush tool. I make several of these, make them into movie clips and then apply some filters, and maybe blend modes. it takes 20 seconds top. Flash 8 really let’s me have an idea and execute it without running into some of my normal “design challenges” that leave me unhappy with the final product.

Performance & Optimization

This file is 8K! All of the rich elements in the file are all done using the new features in Flash 8. No more importing clunky graphics to get close to the effect that you’ve been dreaming of since Flash 3. The filters also save a bundle on the processor. Running this file in just a normal way generally won’t let the processor go much above 50%, and I haven’t tried to optimize performance even slightly. The cloak an spike a bit higher, especially when over the nebula, but that is just a spike not a constantly running effect.

In the continuing gush of information from Macromedia including lots of articles on Devnet for all related technologies. Let’s take a look at Flash 8 and mobile at their new Flash 8 mobile information site just for that purpose.

I’m looking at it right now, so I will just keep updating as I read (Its like Christmas in August)

Bill Perry Did an excellent Breezo on Flash Lite Development in Flash 8. This really covers the major updates for Flash Lite developers.

• Script assist to help with that pesky Flash 4 syntax
• THE EMULATOR!!! The emulator looks fabulous (more on that in a moment).
• Device configuration to let you really target your phone settings and content type

So the emulator. Every time Macromedia has given a preview of the emulator, I drool. I spend so much time bluetoothing swfs from PC to phone. Anything that can shave some time off is a very welcome feature. It won’t replace testing on the phone, but it really does look like it will but out 75% of transfers. Now I can just move files for periodic sanity checks.

Some of my favorite features are:

• Skins: in the device settings you Can choose phones and you can use your swf in the context of the phone. All of the buttons on the phone are interactive too!
• Rotation: If you produce Flash Lite for landscape display, it can be a literal pain in the neck to look at you content in portrait mode. The emulator fixes that with the rotate feature!
• Skin Switching: while you are testing your content, you can actually change your phone settings on the fly. It looks like they’ve done a really good job of making this tool extremely usable.

I am really amazed. This is really an unprecedented release of information for an upcoming release. Of course if probably means they hired a mystery writer for their PR team. Obviously some master of suspense organized so much info a month before the ship date.