Wednesday, November 19, 2008

Opensocial Flash Example

UPDATE 6/18/2009 Hyves does no longer accept parameters in its opensocial xml-url's so the trick I describe below, won't work anymore.


One of our clients wanted a flash widget to be embedded by OpenSocial.
Try as I might, but I couldn't find a website that gave just a simple example of embedding a flash movie on your page/blog, without trying to communicate with it.

So I've searched around a bit more and got the code out of some existing widgets and I'm placing it here to maybe help some other people, who are also trying to look for a simple tutorial :)


In short, to make a widget for OpenSocial, you need to have an XML file that contains xml and javascript that actually loads and places the widget on the blog/community page you desire.

I've put up an example XML file Here

Example, Adding it to IGoogle

  • In your Igoogle homepage, click on 'add stuff'
  • then enter the url to your xmll file there.
    For example : http://tinustekent.whizzkid.nu/files/widget.xml


If you want to pass through parameters to your widget, you will need to make a script on your webserver which will put the needed parameters into the xml in the flashvars.
Note for Hyves users, Hyves expects the url to end with .xml
So it will fail when you put parameters in your url, but this is easily fixed if you just add &mode=.xml to your url.
The "mode" name doesnt matter, Hyves only checks the entire url-string to see if it ends with ".xml" :)


The xml for this widget (which is a little commercial for my comic site, plug plug):


<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Square and Circle" title_url="" description="Square and Circle" author="Martijn Croezen" author_email="sacwidget@whizzkid.nu" author_link="http://tinustekent.whizzkid.nu" height="190" width="160" scaling="false" scrolling="false" screenshot="" thumbnail="">
<Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html">
<![CDATA[

<div id="wdiv__MODULE" style="width:190;height:160">Loading...</div>
<script type="text/javascript">
function SetWidgetContent(div, content) {
div.innerHTML = content;
}
window.onload = function(evt) {
var content = '<embed src="http://tinustekent.whizzkid.nu/files/widget.swf" width="190" height="160" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="" type="application/x-shockwave-flash">';
var div = GetDiv();
if (true)
{
SetWidgetContent(div, content);
}
_IG_AdjustIFrameHeight();
}

function SetWidgetContent(div, content) {
div.innerHTML = content;
}


function GetDiv() {
return document.getElementById("wdiv__MODULE");
}

</script>


]]>
</Content>
</Module>

Monday, September 15, 2008

We're digital too

For those of you who can read Dutch, the tutorial Rob and I wrote for Webdesigner Magazine has now been posted online on their website.

Click here to see it.

Tuesday, July 22, 2008

We're in print

Our panocube component is now featured in the dutch Webdesigner magazine (although, it might appear in english too, keep me posted if you find it ;)


Rob has a picture up on how it looks :)

Check it out

Get the magazine if you want the full tutorial!

Tuesday, July 15, 2008

360 degree Panorama tutorial

I've been asked how I made the pictures for the PanoCube, so I've thrown together a short tutorial.

For the example image in the panocube demo I used a tripod and a normal digital camera on which I could lock the exposure time.

This is important because ground and air, or if you’re inside, the walls and windows/lights, differ quite a lot there.

If your camera automatically adjusts the exposure, the stitcher tool will have a hard time understanding this. (Autostitch doesn't handle this too well, autopanopro is more powerful in this respect, but if you can use the same exposure for every picture, you'll get better results)

Take pictures, rotating the camera a little after each one, make sure you have about 1/3 or 1/4 overlap with the previous picture. It takes me about 30 pictures to make 1 rotation.

When you’ve done a 360 degree turn, tilt the camera up a little (again 1/3 or 1/4 overlap), make pictures all around and repeat until you’re pointing all the way up.
Go back to the very first position and repeat that again, but this time tilting the camera down every round.

After you’re done, stitch them together with autostitch (free http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html ) or autopano pro (better than autostitch, but not free http://www.autopano.net/) this will save the file as pano.jpg.
Be sure to set the rendering options (resolution etc) before you load the pictures, because autostitch will start rendering immediately)

When the stitcher has finished, you’re got yourself a nice 360 degree panorama image. (Autostitch doesn't ask for a filename to render to, it will just create 'pano.jpg' in the same folder as where your original pictures are)
You can use this picture as-is in most panorama viewers (like PTViewer) but for our Silverlight Panocube, we need cubic projection images.

Don’t worry too much if you’ve got ‘holes’ in your picture right now, they’re hard to fix in this format.

As said, we need to convert it to a cubic projection format. I did this using Bixorama, you can download a trial here http://www.outerspace-software.com/bixorama.html

In bixorama, import the pano.jpg file as a ‘latitude longtitude’ file.
Press f6, or ‘view – single files’ and you should see the 6 sides of the cube.
Export these as ‘single files’ and you’re done.
The exported files are easier to fix if you have holes because now there’s no spherical distortion.

You can use these images in the example provided in the panocube post.

Have fun, and let me know what you think.
I'd love to see some examples of what you guys are doing with PanoCube :)

Thursday, June 19, 2008

Panoramacube for Silverlight 2beta2

Rob and I have cleaned up the Panorama viewer code and made it into a Silverlight Component which can now be easily used in your projects.


The antialias lines have been removed using overlapping, which I've wanted to do for my first version, but hadn't gotten it right quite yet.

After seeing that Florian Krüsch pulled it off in his texture triangle control, I decided to give it another try myself and it worked!

Also added are camera and zoom functions so you can control the panorama from c#

Go to the project page on Codeplex

View the example if you have Silverlight 2beta2 installed.

Have fun!

Friday, May 30, 2008

Involuntary language change in FlashDevelop

This is more of a reminder for myself, but can be useful if you're a non-english developer who uses FlashDevelop :)

Due to some networking updates, I had to update my FlexSdk3 to the nightly build.
After installing however, the compiler errormessages I got in FlashDevelop suddenly where partially Dutch instead of English.

It was quite a horrible combination and so I needed to change it back to English badly, but unfortunately could find no documentation about it.

After asking on Adobe forums the answer was provided:

Change the jvm.config file and alter the line java.args line to this:


java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en -Duser.country=US

Thursday, May 22, 2008

3 x 3 ledcube simulator

A friend of mine is making a 3x3 ledcube (see video) and asked me to write a little routine to do a snake in a 3x3x3 matrix.

I came up with a quick 'n dirty random snake routine, which is kinda like the routine I used for my 3d cube demo

To see what it looks like, I've also thrown together a little 3x3 led emulator :)
3x3 ledcube snake

And you can check out the source if you want (nothing fancy) here

Friday, May 2, 2008

Render to Texture, or Texture baking in 3dStudio max for Papervision3d

Here's a small tutorial on how to Bake a texture in 3d studio Max (2009) for use with papervision3d.

Show the result

First off, let me state that I am not particularly skilled in 3dMax, I'm more of a lightwave person myself, but since Lightwave cannot produce content I can use in Papervision, 3dMax it is :)

This tutorial shows you how to do Texture baking very basically. It doesn't go into Mental Ray or Vray. It's just to show you how its done, so you can use it as a starting point for more detailed experimentation :)

I'll sum up the steps I do to make objects, light them and render them to texture. I've tried to use Mental ray and Vray too, but today for some reason 3dMax only wishes to spit out completely white texture maps, while it displays them correctly in the render preview window.

We'll be exporting our scene as a .3ds file, because I've tried using Collada export (using http://www.feelingsoftware.com/ 's Collada exported. But as soon as I started baking textures, my scenes won't render correctly.


Step 1 - make your model

I've created 3 boxes and an omni light. In this Tutorial I haven't given them a material, this will be automatically done when we're baking the texture. You can do this manually as well if you wish.

Step 2 - Set the filetype to PNG
You can skip this step if your 3dMax already renders to PNG, or if you like using .TGA's and arent using Papervision3d :)

In my setup, 3dMax automatically renders all files as Targa (.tga), but I want to use PNG's which Papervision can read so we need to change this.

I use the following method.
1 - select only 1 object in the scene.
2 - open the "Render to Texture" dialog (press 0)
3 - under "Output" Delete any entries if present.
4 - ADD a "Diffuse map"
5 - click on the dots-button to the right of "File name and Type"
6 - Select a filename, and select PNG as a filetype.
7 - After the file dialog is closed, you'll see that the file extension is .png now.
8 - Delete the output entry again, 3dMax will now save .png's as default when you create new Output maps.

In my case, 3dMax only goes back to saving .tga's after the program has quit/crashed and has been restarted. So If you clear your scene, and render to texture again, the output should still be .png and you can skil this step.

If there's a setting somewhere where you can change this in 3dMax, please let me know :)

Step 3 - Render to Texture dialog

Select all your objects on stage and press the 0 key, or use the menu "Rendering - Render to Texture" to bring up the "Render to texture" Dialog.
Here you can select where your textures will be saved.
Because you selected all your objects, they should all appear in the "Objects to bake" tab. If the list is empty, you apparantly havent selected any objects.


Make sure "Use Automatic unwrap" is selected. You can also use manually created UV-mappings if you wish (Make sure to set it to the correct channel if you do), but this example has no UVmapping yet, so we'll leave this to Automatic.


Step 4 - Selecting which type of map
Make sure "All selected" is checked, because we want to make a map for every object in the scene.
Click on the ADD button, and select "Diffuse map"

Since we'll be exporting to .3ds, you need to know that 3dMax automatically renames texture filenames to a 8.3 filename type. So that means 8 characters for the filename, 3 for the extention.
This is a problem, because our baked textures arent limited to that specification and will happily render out to filenames that won't fit in this scheme.
Result : Your 3ds file will want to open box01Dif.png while your texture was rendered to box01DiffuseMap.png.

To fix this we do the following :
1 - Make sure your object names are smaller than 8 characters.
2 - In the "Selected Element Common Settings"-tab, clear the "DiffuseMap" from the 'Name' inputbox.



So your window should look like this:


Select the map size you want, we'll use 256x256 in this tutorial.

Step 5 - preparing the render
Select "Output into Source" and "Keep Source Materials"

This will replace the material of your objects when you bake the textures. We need this because we'll be exporting this scene, with the baked materials for Papervision.

Also select "Lighting" and "Shadows" in the "Selected Elements Unique setting" tab.
This will enable the texture to be rendered with, you guessed it, shadows and lighting :)




Step 6 - Render the texture
This is the easiest step.
Click on "Render" and wait for 3dMax to finish.


Step 7 - Export to a .3ds file.

All done in 3dMax, if you take a look at your Materials editor, you can see that the materials now contain texturemaps with lighting and shadows.
If you dont see your materials, select an object in your scene and click on the eyedropper button to get the material from the object.




Finished.
You can now load your .3ds file into your Papervision flash, make sure it knows where to find the texture images, and it should work.

I've included a small example, made with FlashDevelop.
Click here to download it


I've found an error/missing feature in the 3dsParser in papervision. Apparantly a "LOAD_COMPLETE" event was missing from the 3dsParser, so I've added that.

To do this, edit org.papervision3d.objects.parsers.Max3DS.as

and change the OnFileLoadComplete function to :

private function onFileLoadComplete(event:Event=null):void
{
var loader:URLLoader = event.target as URLLoader;

parse(ByteArray(loader.data));
// added by whizzkid
var fileEvent:FileLoadEvent = new FileLoadEvent( FileLoadEvent.LOAD_COMPLETE, filename );
this.dispatchEvent( fileEvent );

}


And if you're not using FlashDevelop, manually add the following import as well:


import org.papervision3d.events.FileLoadEvent;



I've included this file in my example.



This is my first tutorial ever, so please let me know what you think about it, and if you find an error or have any suggestions, leave a message :)

Regards,
Martijn

Thursday, April 3, 2008

Texturemapping in Silverlight 2beta1

Click here if you want to see the example and skip my development log :)

A while ago I was asked the following: "Can you make a 360 degree panorama viewer in Silverlight?"
Naively I answered: "I think so, I have the sourcecode for a texturemap routine in Flash, and that should be reusable in Silverlight"

Sounded easy enough, but unfortunately I was wrong.

My colleague Rob Houweling helped me get started in Silverlight and helped me out when I got Stuck in C# and I set off to work in Silverlight 1.1a

Now Flash does not support texturemapping, but you can fake this with some clever routines. Seb Lee-Delisle explains how this works visually

I have Flash sourcecode that does just that. This code unfortunately uses 2 matrix calculations, Matrix.invert and a concatenate function which simply arent supported in Silverlight.
(Hmm, I also just discovered that there's a newer version of this class which does not use these calculations, and could have saved me a lot of work.. ahwell, live and learn.. Anyway, it still uses 2 matrices though)

After porting the code and adding my own invert functions, I discovered that the matrix transformations in Silverlight had a big bug. When using the exact same matrix that Flash uses, Silverlight didn't draw the transformation correctly, It seemed that matrix accuracy was completely incorrect. Using Javascript and silverlight, you apparantly don't have this problem. See Kit3d. But Javascript is a lot slower than c# so that was not an option.


Did you ever notice that several people started working on 3d engines in c#, got as far as flat-shading and then development halted? I think this is because of this lame Matrix-problem..:)


Anyway, we decided to wait 2 weeks until the release of Silverlight 2.0.
Now the matrix worked properly and I continued work on the texture mapper.
Unfortunately I couldn't get the function to work with 2 matrices. All the output was simply wrong. So I decided to try again and see if I could write the same code with only 1 matrix (inverting + concatenating 2 matrices also results in 1 matrix, so this should work)

I found some code that did exactly that, but the code was next to unreadable and had a weird coordinate space that was unusable for me so I simplified the heck out of it and modified it to suit my needs.
That worked!

I now had the correct output.

I could split up my texture in triangles, and plot them back to the screen, as long as I didn't rotate anything.
Which is not quite right.

This had to do with the way Silverlight draws out transformed bitmaps, it uses the topmost and leftmost pixel coordinate to start. Flash uses the first pixel you draw in your shape.

Luckily this was solveable by checking for this location and changing the texture's offset.

After this was done, creating a panorama viewer (a 3d cube with an observer in the middle) was quite easy.


Online Example
So Ladies and Gentlemen, without further ado I now present:

The (to our knowledge) first 3d texturemapper in Silverlight using C#

Panorama viewer in Silverlight 2.0

You need Silverlight 2beta1 get it here

I've also put up the sourcecode here.
(Mind you, the code is quite messy and not optimised.)

Please let me know what you think.

And to all 3d-engine coders out there, go on, add texturemapping!
(and fix my code, because its probably crap ;)


One problem still remains as you can see in the panorama viewer. Silverlight insists on anti-aliasing. This Cannot be switched off. So we're stuck with ugly white-ish lines around every triangle we draw.

I've tried fixing this by making the triangles overlap slightly, but havent pulled it off quite right, it distorts the rendered image, so I gave up that attempt.

Microsoft, please fix this, it's annoying.


Regards,

Martijn

Monday, February 25, 2008

3d Cube Space

Here's my second Papervision3d routine.

This is actually the first time since school that I used linked lists. wow.
My first attempt had a garbage collection problem, in that it didn't garbage collect, so the memory usage just kept growing, eventhough Flashplayer should've kept it in check. Gotta dive deeper into that, cuz this stuff is fun :)

I've solved it by recycling the objects in my list, works fine and is probably not as memory-fragmenting as the 'correct way'...

It's probably been done before, you know, snake, but now in 3d- whee... But it has not yet been done by me, unil now. :P

Click to view

Oh yeah, I've made this using FlashDevelop, and I like it, so I'm gonna use it more in the future :)

Let me know what you think

Thursday, February 21, 2008

Papervision test

For some reason I'm really crap at finding documentation about stuff online.

So it took me a while to download Papervision3d, and get started, but as soon as I got the sources installed I was ready to go to mess around a bit, and finally make this little test.

Simple papervision scene navigation

You can navigate around the scene using the cursor keys, press shift and left-right for strafing, and if you press space you go up :)

Unfortunately, after I made this, I found out that the source I downloaded from the papervision site was the OLD version of papervision. V1.5 or something, while 2alpha was already out. But for some reason, not available on the papervision site itself.

Or.. i was just looking in the wrong spot?

Anyway, I had to download the new version from Ralph's blog

Haven't been able to mess with it yet though, hopefully soon :)

I've setup FlashDevelop at home now, which looks promising, but haven't gotten round to using it yet.

Thursday, February 7, 2008

int bug

I found a little bug in actionscript 2, which apparantly has been fixed in actionscript 3 but which I found funny enough to show you guys.

Trying to fix a bug in an older source, where I took part of a symbolname "Button037", and cut out the 035 part as a substring, which I then used to flip to some page in a pageflipper component.
After the pageflipper bugged out (trying to add 5 to "037" which ended up with "0375" instead of 37 ..duh, I know) I put an int() around the value I got from the symbol name.
(Never having looked at the manual entry for int() but beeing used to its function from ASP/vbscript, I didn't know it was deprecated and I should use Math.floor() instead ...lesson learned :)

Anywho.

Whats the bug you ask?
Well.. If you use int() to convert a string to a number, it doesn't always work correctly in actionscript 2.0 if you have leading zero's.

trace(int("037")); returns 31 for example
I plotted the values out in a graph to see if there was some kind of pattern to it, and there was. Click here to see it

Sourcecode for that is:

_root.lineStyle(1,0x000000);
for (intT=0; intT<400; intT++)
{
trace(intT + " : " + int("0" + intT));
_root.moveTo(intT,0);
_root.lineTo(intT, int("0" + intT));
}

Anyway.. it's fixed in actionscript 3, and you shouldn't use int() anyway, but hey, it might come in handy to know this if you're still using int() in your code, and it doesnt work the way it should :)

Edit : My Collegue Hugo asked if Number() had the same bug. Apparantly it does, BUT. its not what I thought it was.

When you use Number() to convert a string to a number, you can use a leading zero to indicate you're using an OCTAL value just like 0x denotes a hexadecimal value.

So the bug actually isn't that int() works incorrectly, but that the manual doesn't say that you can use a leading 0 to indicate an octal value.
So why does it seem to be 'fixed' in as3.0? Well, you can use octal notation in as2.0, but this doesnt work anymore in as3.0.

Not sure why anyone would want to use octal notation, but to prove this, try this little example in as3.0 and as2.0


for (var intT=00; intT< 020; intT++)
{
trace(intT);
}


as2.0 will count to 15
as3.0 will count to 19

Saturday, February 2, 2008

Water ripple source

Here's the sourcecode for the water ripple effect.
Let me know what you think.

Download source

Have fun!

Thursday, January 31, 2008

Comment mails

I thought I had turned on the 'send me an email when someone comments' but I hadn't. Silly me.

(Not that a lot of people comment on my posts yet... hint hint. ;)


So, sorry pCreate, I didn't see your comment until now. But I will post the sourcecode for the water-ripple when I get home tonight :P

Saturday, January 26, 2008

Particle Fun

Using particles is fun, I've started working on my own Particle class for as2.0 (WHY as2.0 ? well, we have fidgety customers who still demand flashmovies in flash 8 or even flash 7 or 6 to be published by us :( )

Instead of the usual fireworks, sparks, explosions, clouds, etc, I've put together a small pseudo-game that was only meant for my collegues to show what other stuff you can do with particls. I've created a small game with it.

What it does :
- star particles, that move according to the relative position of the mouse compared to the middle of the screen. And that stretch to fake a motion-blur effect as they go faster.
- fake depth, slower stars are less bright.
- asteroid particles, which are the same as star-particles, but they dont rotate and stretch.
- missile - a plain particle with movement that gets shot out from the spaceship when you press the mousekey.
- spaceship - asteroid collision detection... hit an asteroid, and boom. your ship will explode in a fiery explosion... well it would have, if i had any graphics skills ;)


What it does NOT do:
- garbage collection. leave the movie on too long and it will just slow down your system :)
- the missile is just for show, it wont hit anything, and the movement is not correct. To have 'working' missiles you'd need to make the coordinates and speed in 'particle space' relative to the spaceship, take velocity into account etc... this is just a particle that moves like a rocket... as long as you dont turn away after you've fired :P
- no score or anything.
- 'tis just a particle demo.