3D Molecule

[mrdanedwards]

Hey everyone,

 

This is my first post and I'm a tad unsure if this is even in the right section (it could be in the advanced web design, but to be honest, its prob best to put it in the beginners part)

 

Right, I have a project to build a 3D molecule design for a company. The basic idea for what they want is shown in the image below:

 

The idea for what they want is for the menu to be 3D and have quite a fluid style motion to it, with each of the icons being buttons which will expand into dialogue boxes for each of the icons. (for example the music icon may expand, change into a guitar picture when hovered over then when clicked will open a dialogue box explaining about the companies linked with music and instruments).

This is the kind of 3D Menu style that they want to crate (Example uses images, but my client requires that I use icons which are able to be clicked).

 

The latter part is totally doable (all be it a little jittery right now - secondary point to this post would be "does anyone know how to automate the process of zooming and scaling with AS code, rather than having to tween?" - see SWF file I've uploaded to see what I mean, below):

 

Rough idea of what they want is here.

The kind of style of expanding button would be ore like (but not exactly) like the photo's in this example(set to "bounce" and "medium").

 

 

Initially I was going to use flash (cs3 or cs4) but upon further thinking it might take a HUGE amount of time using flash given that the client is looking for potentially 10-15 icons, all animated and moving and having lots of items linked to them etc.

Also, given further thinking, the menu is doable, but the connecting lines will most likely require a full 3D package (not really universally viewable on all platforms - Flash not functional on iPhones or on iPads - this is a potential worry for my client.)

 

The question I am really getting at is: "What is the best way to achieve this website so that it works well, flows and will be visible on the most number of platforms"

 

I have pretty damn good FLASH knowledge (involving AS2 and AS3) but have no idea about XML coding. I was recommended to use CS5 or word-press, however, word-press seems a bit more like a "my-space" or blog-site layout as opposed to a fully animated website and CS5 would require a whole new package being purchased.

 

I have had a look at CS5 (adobe catalyst) but again, not really sure if its capable of what I'd want.

 

Sorry for the UBER long first post, its a lot I know, but any help would be greatly appreciated.

 

Regards,

Dan

[administrator]

I have pretty damn good FLASH knowledge (involving AS2 and AS3) but have no idea about XML coding. I was recommended to use CS5 or word-press, however, word-press seems a bit more like a "my-space" or blog-site layout as opposed to a fully animated website and CS5 would require a whole new package being purchased.

 

You may be able to reproduce most of these effects using the JQuery library - you will have to research that a little. Wordpress is a blog tool and so it will not help with the widget you are looking to create.

 

Finally, unless you can find a prefabricated widget that does much of what you want, I wonder if it can be pulled off with only 15 hrs of work.

 

... You might with prefabricated components .. but to do it from scratch?

 

Stefan

[mrdanedwards]

Hey Stefan,

 

I've actually been looking at J Query stuff today and it seems that it may be the best way to do it.

 

We (as in me and my client) have decided that its prob not going to be the best thing to really push the 3D Menu idea when I could just use a 3D image (made in photo-shop or a 3D program like 3ds max) and use that the the image with invisible buttons over the click-able areas.

 

Will totally be keeping this thread up to date with developments over the weekend though

 

Cheers for the advice and stuff so far

 

Regards,

Dan

[newseed]

Not sure to whom you plan on marketing the site to but be sure to consider the SEO and accessibility aspect of it when building the site. A flash driven site will hurt you in these areas. Going the jquery route is good but you still have to make sure it is seo friendly and accessible to all visitors regardless of their abilities or lack of.

Edited July 30, 2010 by newseed

[mrdanedwards]

Wow - EVERYTHING has changed in the last week pretty much - VERY true to form when designing anything

 

I am now using Jquery (something I've not really ever used before, so I'm on yet another learning curve)

 

The effects that the client desire are still pretty much the same, however, they are now after something which is VERY user friendly mainly issues regarding iPhone and iPad usage) as well as SEO issues their current sire is already top of google's search, which is good, but yeah, they did realise that flash could harm their current position - especially if people cant view it on certain devices or in certain browsers.

 

I will endeavor to keep the site up to date so that you guys and gals can see its development, but right now, its ind of slow (lots of other work in the office going on so the site keeps being put on the "do some more work tomorrow" pile.

 

Regards,

Dan