Impressive website

Report · Sep 21, 2009

Hello there... I found some website which really caught my attention, here's the link: http://www.chromazone-imaging.co.uk/flashindex.html

Could someone tell me what techniques were used to build this website? I do not want to copy the website, I just want to learn the techniques...

Report · Sep 21, 2009

To answer your question, I don't know. But I do wanna say, it's those kind of websites that have given Flash a bad name in the web world. The novelty wears off after 3 seconds, and the content is hard to read and navigate. The interactivity serves no purpose in supporting the message and objective of the site, it's just there to show off the talents of the programmers.

Sorry, just my opinion.

Report · Sep 21, 2009

Honestly I do agree with you Lon... but I simply want to learn the techniques so that I could expand my skills and maybe employ those techniques to build something "better" which isn't just there to show off... I am the kind of person that doesn't like to say "I do not know how to do that", I prefer saying "How can I do that?"... so whenever I bump into something that looks nice and captures my attention, I like to know how it was built.

Thanks for the input

Report · Sep 21, 2009

i think you would accomplish this by creating three movieclips. each one would be treated as though it is deeper in the screen than the previous one. then you would just position each of them according to the position of the mouse. the "deeper" each layer is the less it will move. hope that helps.

Report · Sep 22, 2009

Striker9099 wrote:
Honestly I do agree with you Lon... but I simply want to learn the techniques so that I could expand my skills and maybe employ those techniques to build something "better" which isn't just there to show off... I am the kind of person that doesn't like to say "I do not know how to do that", I prefer saying "How can I do that?"... so whenever I bump into something that looks nice and captures my attention, I like to know how it was built.
Thanks for the input

Well said and I stand humbled for my negativity! : )

I suspect it's mostly done with Actionscript, but I haven't worked with any code in particular that does that. I do know there are components out there that do, but often you can't see the source so you still don't know what's driving it. You could also try the actionscript.org site and forums, they have lots of tutorials user input.

Report · Sep 22, 2009

Well the link was a nice experience for me...

And I don't understand how its affecting Flash web development adversly as said by Lon Winters?

Any ways getting back to the point how to implement such a thing.

Have you noticed that

The position of the links
The number of shapes
Position of shapes

in each Main menu changes on each visit. That comes to the conclusion that everything OR almost everything is controlled by the AS3.0 programming.

For this you can refer to the following tutorials on 3D in Flash at the below link [They have source with them ]

http://www.kirupa.com/developer/actionscript/3dindex.htm

Report · Sep 22, 2009

I hear ya Swap, it is subjective. My focus group on which I base that consists of a decent size group of technical people, who for the most part are not web developers. They are iPhone users early adopters. The discussion revolved around bringing Flash to Safari on the phone and I was surprised myself to see how many people didn't want this to happen, as well as how much they dislike Flash content on the web in general.

They cited annoying web ads, sites that require (still) long times to load, difficult and gratuitous navigation and how much of these effects, where approprate can be carried out with Ajax, HTML5 and other technologies. They have a point, one which I am understanding more and more.

I defended Flash to them, that there still are many uses, valid uses that no other program can do, at least still at this time. But, they didn't quite grasp that concept because they aren't developers.

OK, Back to the topic! : )

Report · Sep 22, 2009

Alright thanks for the replies guys... I'll go through that kirupa tutorial and check out some tutorials about Papervision3D... I guess that might help me figure out how that website was done.

I have a lot of websites I'd like to learn the techniques that were used to build them... I'm still relatively new to actionscript but I'm ready to learn anything that could help me build high quality Flash websites...

Report · Sep 22, 2009

Alright thanks for the replies guys... I'll go through that kirupa tutorial and check out some tutorials about Papervision3D... I guess that might help me figure out how that website was done.

I'm afraid that won't help you understand how this is done, since there's no 3D involved at all. It's 2D, in this case 4 "layers" on top of each other moving at a different "speed" based on the mouse position. It's a technique used in cartoon animation (if I'm not mistaken Disney came up with this, but don't quote me on that).

Don't get me wrong, PaperVision will allow you to that as well, but you'll have alot of ground to cover to do something that doesn't really require PaperVision.

I've done something similar years ago (way before PaperVision even existed), unfortunatly I no longer have the code (think it was done in Flash 5 or 6).

Look up Robert Penner and easing equations, which is the basis for this type of animation.

http://www.robertpenner.com/

http://www.robertpenner.com/easing/

The site (chromazone imaging) was done in AS2 by the way.

As for the comment about how that type of site gives Flash a bad name..

Well, without those sites (by which I mean more art-type, media rich sites), Flash wouldn't be where it is today.

I hear ya Swap, it is subjective. My focus group on which I base that consists of a decent size group of technical people, who for the most part are not web developers. They are iPhone users early adopters. The discussion revolved around bringing Flash to Safari on the phone and I was surprised myself to see how many people didn't want this to happen, as well as how much they dislike Flash content on the web in general.

Which makes one wonder which sites they visit

and how much of these effects, where approprate can be carried out with Ajax, HTML5 and other technologies.

And yet all of that can be done with one technology, Flash. If they prefer Ajax and whatever else crap they can come up with, spend hours/days of debugging and testing to make sure it works across all platforms across multiple browsers, etc.. fine..

I'll happily do the same thing with one technology, in less time, without the need for additional platform/browser testing/debugging.

Report · Sep 22, 2009

You are absolutely correct by saying it can be done with 4 layers.

But the thing will not be customizable enough.

If you use layers; for each object at a different depth will make you create another layer which is not at all advisable.

If your go through the link I have posted on 3D [Kirupa.com] you will see that it is much more simpler to implement than managing this kind of multiple layers. Also there will be more flexibility to add any new objects at any depth without creating any new layer.

That's just my opinion.

Report · Sep 23, 2009

Ok I guess there are different ways to do the same thing, and it's up to us to find the most appropriate way of doing things but thanks for the information guys, much appreciated. I'm still learning and your replies give me insight of what I should be looking for. But there are two sites that might be easy for you experts and yet relatively hard to accomplish by someone like me... here are the sites:

1. http://www.erga.com

2. http://www.cybelle.biz

I gave both sites a try but I couldn't do alot of the stuff there. For example, in the first site I was able to do the on mouse over scale up effect, but not as "fancy" as it is in the site. Also, I couldn't really do the timeline thing for the history of the company.

Concerning the second site, I know it's an accordion menu with a lot of mouse events and stuff like that. And the way they display the products is probably done by importing the products from an XML then pushing them into an array to go forward and back according to each product's index number... but that's just a thought

anyway, if you guys know of any "impressive flash sites" please post them here, these will be a good inspiration and would encourage me to get into more advanced techniques of animation and actionscripting and hence expand my skills.

Report · Sep 23, 2009

You can get links to such sites from the below sites:

Thease two sites choose any site[amoongst the sites submitted by any one] and gives one of the sites a best site award

Frequency of these awards is not known to me may be Monthly. So you will get all such impressive site links posted on above two sites

Report · Sep 23, 2009

Thanks for the links, I'll bookmark them and check them out from time to time

Report · Sep 23, 2009

I gave both sites a try but I couldn't do alot of the stuff there. For example, in the first site I was able to do the on mouse over scale up effect, but not as "fancy" as it is in the site. Also, I couldn't really do the timeline thing for the history of the company.

Those kind of animations are all done using some form of easing (see Robert Penner's easing equations I mentioned earlier).

Also look into tweening engines, like TweenLite/TweenMax.

http://blog.greensock.com/tweenliteas3/

http://blog.greensock.com/tweenmaxas3/

I couldn't access the 2nd site, keep getting a server not found.

Did you mean: http://www.cybele.biz/

If so, all those animations are easing tweens as well.

Report · Sep 23, 2009

yes sorry it is http://www.cybele.biz

Actually, I do almost all of my tweens using TweenMax, it's very easy to use. I will check out Robert Penner's easing equations, maybe that could help me out. I also started reading the "Keith Peters: Actionscript 3.0 Animation" book, I guess that would teach me some really good animation techniques.

Report · Sep 23, 2009

Ah, if you're using TweenMax/TweenLite, you're already using Robert Penner's easing equations

They're used in most tweening engines.

Stuff like:

Elastic.easeOut

Elastic.easeIn

Back.easeOut

Back.easeIn

etc..

Those are easing equations.

Report · Sep 23, 2009

Well, you're assuming I meant Flash IDE layers in the timeline, which I don't

If you have a better look at the chromazone imaging site, you can clearly see there's 4 "layers" moving independant from each other,

that's what I meant.

Those are most likely movieclips containing a number of "leafs" which are placed randomly inside those 4 "layers", well, 3 actually,

the front most "layer" contains the circular buttons.

Report · Sep 24, 2009

It's a technique used in cartoon animation (if I'm not mistaken Disney came up with this, but don't quote me on that).

That would be correct! The first multiplane camera was invented by Disney animator/director Ub Iwerks. It was later improved upon for use in Snow White and the Seven Dwarfs.

And yet all of that can be done with one technology, Flash. If they prefer Ajax and whatever else crap they can come up with, spend hours/days of debugging and testing to make sure it works across all platforms across multiple browsers, etc.. fine..
I'll happily do the same thing with one technology, in less time, without the need for additional platform/browser testing/debugging.

I couldn`t agree more!!!

Also, I don`t know if this sort of thing is allowed to be discussed on here, but Striker9099, did you ever think about using a Flash decompiler to see what`s going on behind the scenes? I have no problem using decompilers (as long as you`re not straight out ripping off other peoples graphics/code) as they are a great learning tool!

Report · Sep 24, 2009

Honestly I've never used a decompiler before and I'm not sure how it works and whether it gives the exact code that was used and the same graphical elements and so on... if that's the case, this would be a GREAT learning tool for me because I would really like to know how some stuff are done using actionscript but I'm relatively new and learning on my own with no assistance from anyone (except the good people on this forum and actionscript.org). But what if a website was done using external classes, if I decompiled it using a decompiler, would it produce the classes/code for the swf?

Report · Sep 24, 2009

I use the Sothink SWF Decompiler. From what I`ve gathered, it`s one of the best out there and in my experience it does the job nicely. The only problem is that it can`t always extract local variable names and such, so often you get names like "loc1", "loc2". etc... However, if you spend the time to go over the code, after a while you can usually figure out what`s going on.

As far as decompiling external classes, I think their are some limitations if the classes are linked from external libraries, but I don`t know a whole lot about this. I know people are also employing code obfuscation tricks these days as well!

Don`t know if a decompiler will work for you, but so far I`ve been pretty lucky with them!

Report · Sep 24, 2009

I will give it a try anyway... thanks for the tip

if you know any "impressive" websites or animation techniques please share them with us... I would highly appreciate all the help!

Report · Sep 24, 2009

I use Burak's AS Viewer:

http://www.buraks.com/asv/index.html

Only works on AS2 files (but I think that goes for all flash decompilers).

ASViewer will allow you to rebuild a complete swf file into an fla.

Have a look at group94, they have some slick looking flash work.

http://group94.com

Report · Sep 24, 2009

why is it only for AS2 and not AS3? I mean everyone is using AS3 these days (of course there are exceptions)... is it because of the extensive use of OOP in AS3?

Report · Sep 24, 2009

>>I'll happily do the same thing with one technology, in less time, without the need for additional platform/browser testing/debugging.

I wholeheartedly agree. I think Lon hangs out with a bunch of Nielsen groupees.

What's wrong with gratuitous use of technology anyway? I like content as much as the next guy, but I don't mind eye candy either. I'd sure rather have the web the way it is, than the way people like Nielsen think it should be.

Flash it up.

Report · Sep 25, 2009

Here's some eye candy for you: http://www.bkdsn.com/bkdesign_studio.html

by the way, is building a flash site a good choice for sites like web directories or communities and stuff like that? I mean those sites that need heavy database work...