Pheeew! It took a while... but looks like I've finally done the base of it. If you don't know what I'm talking about.. phodoob is how I named my photo gallery system. I did the first version 2 years ago more or less, and since then I always wanted to recode it and improve it, so it could run faster, smoother...

While I was on it I also fixed the zoom algorithm (which wasn't working really well on the previous version) and also I added some fancy animations to the rollOver / rollOuts...

I've a lot of plans for this but I can't say too much yet  :P By now, you can enjoy the pics from Reykjavik! :)

EDIT: If you feel like you want the pictures in a table, here its a link for you... and no, the keyboardnavigation doesn't work yet :P

4 comments

Yey, seems like some of the last websites I was working in Spring are finally live. After that much time I'm not that keen on the designs anymore tho :S

The one that took us more time to do was 40 Savile Row. Something like 1 year for doing it, and this is because it had a section were you are able to customise your own shirt and you even had some fancy pieces of flash to explain from where to where is each measure. I believe the one that did the best work here was david with the dev part.

Another one is Coolthermal, tho for this one I mainly se the style/design doing the homepage. Mike finished it.

Mike was also the designer of Darley Kids, and I think he did one of his best works here. For this one I did the flash games. All about horses, Jockey colours, Quiz and Word search (this one took me a while to figure out the maths for it). I also did the score system and the security of it (which is a bit hopeless when dealing with flash).

And the last one is Cardpoint. Again, one of those longterm projects that never ends :) It ended up a bit too empty maybe...

So, with these one I will probably have done 1000 websites already. Nah, just kidding, but, checking the portfolio I've actually done a lot being at Spring. Here are some:

Rolf Harris, Stargazer, I.T. lab, RS Scan, Wesmon Press, Odyssey Consulting (flash piece), Beaumont Legal, Border Energy, GSL, 4NX (flash piece), Partnerships in Care, Halo Financial, Epico, TechMondial, Best Deal, DBD Media, Isis, Faith Fantastic, Ethical Network, Financial Objects, Corpora Software (flash piece), ICH (build), Olive solutions (logo, flash pieces),  CIC (design+dev), Nasda (fancy flash map :D), and many more....

Phewww!

1 comment

I was checking Hamad Darwish Flickr profile, the guy that did the pictures that now Microsoft is using as Desktop images with Vista, and I noticed a lot of contrasting and retouching on the pictures. And it was funny that in some comments the people was commenting that it was ovbious how professional he was. Don't get me wrong, there are nice bits on these photos but I don't think that getting nice colours makes you a great photographer.

If you don't think the same, then here its a quite basic tutorial so you can be a great photographer too :)

Here is a picture I took one week ago in Iceland. I used a small and handy (and now old) camera and, as you can see, the place was well nice, the picture looks cool, but it doesn't give you a 'professional' impression.



Now, compare it with this, probably as a picture, is not well positioned, but the colours are great now, aren't they?



So, if you're wonder how did I do that... Here is a quick step by step process for doing it. I used Photoshop, but you can use any soft,

Lets duplicate the background layer and get rid of the colours with Image > Adjustments > Desaturate. This is not the best way to get proper greyscale of a picture, but that will do by now. Then change the blending mode of that layer to Overlay. What you have now is what a lot of people use for CDs, mainly for Hiphop covers and stuff, it would probably need a bit of sharpen tho. Anyway, the colours are still not cool enough. Lets duplicate the layer again, and then contrast it a bit with Image > Adjustments > Hue/Saturation... and put the Saturation to +50. Done.

The Layers panel should look something like this:


You can delete the Background layer if you want tho. Some people will may think that using the Brightness/Contrast will get you the same result. Well, it will certainly give you a similar look ,but will kill some colours and info of the pic. This method lets you have more control of the level of contrast that you want, and also the level of blacks and whites.

So, now we are professional photographers!! \o/

6 comments

I was checking some days ago a project from a friend of mine, and apart from the app itself, I was quite impressed with the nice fades and slides of texts. So I obviously had to do research about how did he do that.

The answer was jQuery, and oh man, what an answer! :) As everything, it still have some bugs with the heights of some elements for doing the effects, but the way of selecting elements its too good to don't use it for every project that needs some .js

I've used it a bit of the work log, so the page now looks a bit clean and light, and if you want to read an article you click on the title (which by the way, uses sIFR 3 :D) and then it will expand the body.

I'll probably use innerDiv for the portfolio items soon. What a .js site! wasn't I supposed to be a flash guy? :)

3 comments

I'll declare myself Mr.Tutorial!

For the ones that doesn't have too much time and need to understand what's going on, this tutorial explains how to do this:



(This tutorial isn't just for Papervision3D, you can use it with any other 3D engine).

The point is that when you approach a realtime 3Dengine the best way to achieve good results is to think about how to use the resources you have. Papervision3D still doesn't have illumination, but it can render polygons with textures. So, why don't we render the illumination to the texture with our 3D package? This is exactly what I thought when I did this, this and this.

I'm afraid I've no idea of how to do this thing with any other package, but at least you will get the idea.

Ok, let's start...

Open 3D Studio MAX and all that, I believe the Render to Texture feature is there since the version 5 or 6... (I'm using 8).

Then we create a Torus and a Plane.



And we do an scene similar to this one:



The under the Lights tab we select the Skylight... er.. light, and with check the Cast shadows checkbox. The rays per sample parameter is the quality, if your machine is slow, put it to 5 or 10 just for testing, I usually do the tests with 5, and then when I go to do the render to texture I put it up to 30.



I'm don't thing the position of the light really matters, this is not one of those lights that you need to focus on something, just put it anywhere.



Half of the work done! If we do a Render right now, It should look like this:



Now, sometimes the 3D object we want to render the texture from is quite complex, so we need to Unwrap the mesh to a plane so we make things easier to the render to texture thing. (You'll understand what I mean in a sec). So, under the Modifiers tab, we select the Unwrap UVW from the Modifier List. And then we click on Edit.



A new window will appear with the mesh on a plane in wireframe. First we click on the 3rd option of the Selection Modes, and then We go to Mapping/Flatten Mapping.



On the new window that will appear we put the Spacing to 0.0 and we click OK, this will explode your mesh to the best (not always) way so the Render to Texture can put as much information as possible into the texture.



The end result should look something similar to this:



We close the window, and then with the Torus object stil selected we go to Rendering/Render To Texture.



On the new window, we scroll down to the Output part and we click on Add... to add a new texture you want to bake. This will prompt another window where we have to select CompleteMap.



If we scroll down that panel a bit, we will see the options for the final texture. If you want to save the texture in a different path, well... feel free. I usually do the renders to 1024, and in case isn't it can be reduced then I reduce them to 512 with Photoshop.

As the last thing, If you don't want MAX to change the texture of the Torus with the backed one, I recommend you to check the Render To Files only checkbox.



We click on Render and after we'll end up with a texture similar to this:



And that's all, I'm afraid I won't go into the part of doing the code with Papervision3D for loading all this, but I'm sure you know how to use this texture now ;)

Hope this is useful for someone

8 comments

One of the things you can't do when you work on a team is to adapt the new technologies as fast as you can as when you work by your own.

This is just an example... when I was working for Spring Digital, we were a team of 6/7 designers. Since Photoshop CS2 was released I knew there was something called variables that could let us save a lot of time and HD space when designing flatscreens for websites. I tried it quickly and saw that it worked great, I tried to introduce it as a new way to design the sites but I failed. Also I wasn't able to use it because my flatscreens had to be easy to modify by the other designers, and none of them had Photoshop CS2 installed... Oh well...

Luckily I'm now working by my own and I can use that way of developing flatscreens. At this point you will be thinking, so what's that? Ok.. Developers will love this one.

When you design the flatscreens for a standard website, you end up doing it in 2 ways:

1st way:

projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd

So each .psd has the content and layout for each section.

Benefits: You can save each file as a png for showing it to the client easily, the whole data is split in a couple of files, so loading/saving them should be fast.
Problems: If the client wants you to change the header or the footer of the site, you have to go flatscreen by flatscreen modifying it.

2nd way:

projectname_design.psd (with folders inside it for each section)

Benefits: If you do it properly, you should be have to modify only once if the client asks a change on the header/footer (or any other common part).
Problems: The file may get quite big with all the data inside, and if you're working against a server it can get annoying. You can only reuse the header, as the footer will be probably on different heights. Anytime you save the the files as png for the client you'll have to hide/unhide each folder.


Well, for a developer, this is like writting a code without writting functions, all the time duplicating the same code. Ugly, uh?! Here is what you want to see:

3rd way: (the good one)

includes/projectname_header.psd
includes/projectname_footer.psd
projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd

The good news with Photoshop CS2 (although it was released years ago) is that you have Variables, which basically lets you attach an external file to a normal layer. So any time you update that external file it will update it to the other files that are attaching that external file on-the-fly. Some people call this concept instances ;)

How-to:

1. Create a new file.
2. Add a text inside it.
3. Save it as footer.psd.
4. Create another file.
5. Create a layer (I named it footer container).
6. Draw anything inside the created layer.
7. Go to Image / Variables / Define...
8. On the layer selector, select the layer that you created.
9. Check the Pixel replacement checkbox, put a name to the variable (I called it "footer") and use the method "As is".
10. Click on next (Data sets), and then click on that little disk with an arrow pointing down.
11. If will probably autoselect the variable you created as its the only one, so then you only have to click on the RadioBox to enable the Select File... button.
12. Select the file footer.psd
13. Click on Apply and then OK

At this point you should be seeing whatever content you had on that external file replacing the layer you created.

Clean, fast, and without duplications.

12 comments

Right, maybe it needs a bit of extra work but I'm quite happy with it by now and need to keep working on other stuff. I believe the new ID is more friendly and attractive than the one before (I didn't really like it).

In order to 'celebrate' it I did another test with PV3D. Although whatever you do after Ralph's bump+reflection test will look cheap. Oh well.. here you have:



Well, took a while but it's finally done. Now I only have to do good enough works to populate the portfolio :)

2 comments

I've spent a lot of hours today trying to do something that I thought it was going to be quite easy. While I was doing the Effect01 of the audioVisualizations I realised that testing different mp3s on it just to see how the visuals were going to react was actually very fun. After a couple of mp3 tests I found out that there was something else, the experiment was showing me parts of the tune that I never paid attention before. So I had the idea to make it 'public', so anyone could test it with their own mp3s and have some fun too.

Easy concept, same experiment but with a inputBox where you paste the link to the mp3. Unfortunately I wasn't aware of flash sandbox limitations on that matter. Apparently you can't load mp3's from other servers that doesn't have the policyFile.xml.

I know that you could do a php script to jump the sandbox, but this would mean a lot of bandwidth on my server, which I don't fancy right now :P

This is how I left the project:
http://mrdoob.com/lab/PV3D/vis/effect01/custom/

In fact, if you try it with a link to some MP3 (you can find a lot here), the swf loads the tune, you can listen to it, but the ENTER_FRAME stops and if you're running the debug version of the player it warns you with the limitation.

Do you know any solution for this besides the php script?

6 comments

I've been having problems with this for a long time now. My experiments always use mouseX and mouseY for controlling the values (in instance, the camera position). So when you click outside the browser, clicking in another window for example, the player will still receive mouseX positions anytime you click.

The problem is that those mouseX positions are well far from real. 100,000px and stuff like that. So this means that when you click on a window outside the browser the 3D scene disappears. I thought that I was just that, just disappearing, but if you wait a bit (which I didn't until today), 5/6 seconds, you'll see how the 3dscene was really far that you weren't able to see it and it the camera will travel to the normal postion by itself, so you would see the scene again. Something similar happens when you click on the address bar from the browser.

This only happens with the Firefox/Mac version tho.

UPDATE: Some people of the flash player dev team approached me already about this bug and after helping them to reproduce it looks like they're already fixing it. I've also reported some other bugs, so don't expect any other bug report in this blog.

4 comments

After checking Sephiroth's SoundMixer experiment I thought something nicer could be done working a little bit more on that field. Long time ago I did some Visualization system for r08028. With flash7/8 you weren't able to get even the volume of the Sound so I had to do a quick tool with C++ for generating .txt files with the data. Luckily with Flash9/AS3 you can get that data on-the-fly!!

So, this is how the experiments ended up like:


source file, music by Paniq (contemplation)


source file, music by Crankshaft (from the demo Ocean Machine)


source file, music by rydmlego (fire tree)

The source files won't work as it needs some custom objects I've done (cube, piramid), but at least you can get the idea of how everything works.

Enjoy!

UPDATE:
I've updated the files and source files with a better algorithm for showing the spectrum (well, better than nothing, and there wasn't any algorithm in place before :P)

UPDATE 2:
I've added a little bit of decay to the movements, now they look nicer.

12 comments