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 25, 2009

Just when I think I'm out... well, you know how it goes!

Harry Nielson? Nieslon ratings? Leslie Nielson? Please explain. I should have known what would happen if I even appeared to step on the toes of the ever-so-senstive Flash "arteests" and developers. Heh.

Hey I defended the appropriate uses of Flash to the "goupees", only to be flamed over there as well. Being in the middle sucks! And Cmon, Web two-point-oh isn't that difficult to implement, and you can't deny it's taken over a lot of areas where previously only Flash could do. The best Flash developers know when not to use Flash, and like any good developer they put the end-user ahead of whether the final solution will require a little more debugging and testing.

And to be fair I won't even mention search engines and data integration. Your flashing it up better be good enough to offset these undisputed downsides.

So I stand by my opinion on the site mentioned in the first post. The average user looks at that and has no idea of what they do or who they are. They will move on before trying to figure it out. But maybe it's not targeted to the average user - in that case, fine and dandy. But I've been amazed at how short the attention span is of people who I thought were a little more astute than the average user. On the other hand, BK Designs that was pointed to earlier - that interface is is what Flash should be about. It's intuitive and fresh leaving no doubt as to who they are and what they do, easy to find info and then makes you want to dig deeper, not the opposite.

FINALLY, to reiterate to the OP - I really never meant to even appear to throw water on anyone's desire to learn. My true philosophy is quite the opposite. And to me, learning is as much as when to do something as it is how to do it.

Have a good weekend y'all!

Report · Sep 25, 2009

You mean Jacob Nielsen?

That's 10 years old and outdated. He even has since been hired by Macromedia (now Adobe) to actually speak "for" Flash when some of the things he objected against changed for the better.

And to be fair I won't even mention search engines and data integration. Your flashing it up better be good enough to offset these undisputed downsides.

And that's a good thing, cos you obviously missed a few things:

http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html

http://googleblog.blogspot.com/2008/06/google-learns-to-crawl-flash.html

Data integration? Not sure what you mean by that, but IMO there's nothing out there with better data integration than Flash. Or do you mean you need a middleware, like PHP, .NET, CF, etc? If so, I'd say that's a good thing, with swf being a client side tech.

The average user looks at that and has no idea of what they do or who they are. They will move on before trying to figure it out.

Well, I guess you missed the fact that most of the sites you're referring to, like Chomazone imaging, are not targetted at the average user.

They're usually advertising/printing shops or fashion oriented where these type of sites are the norm. Which brings me to:

The best Flash developers know when not to use Flash, and like any good developer they put the end-user ahead of whether the final solution will require a little more debugging and testing

They also know their target audience.

A little more debugging and testing? Let's keep it real shall we

Report · Sep 25, 2009

Muzak wrote:
And to be fair I won't even mention search engines and data integration. Your flashing it up better be good enough to offset these undisputed downsides.
And that's a good thing, cos you obviously missed a few things:
http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html
http://googleblog.blogspot.com/2008/06/google-learns-to-crawl-flash.html

Nope didn't miss that. It would be nice if Google were the only search engine, but they are the only one taking advantage of Adobe's efforts to make this happen. Still the indexing falls way short of traditional, optimized HTML sites.

Data integration? Not sure what you mean by that, but IMO there's nothing out there with better data integration than Flash. Or do you mean you need a middleware, like PHP, .NET, CF, etc? If so, I'd say that's a good thing, with swf being a client side tech.

No, not the middleware - just getting data into and out of Flash from any database or middleware. I've done it on several occasions (mostly for online training courses). But just doing something normal, like provide an input form, insert a database record, then display and sort results - is more complex than in html, even if you're only using Dreamweaver's limited and built in server behaviors.

A little more debugging and testing? Let's keep it real shall we

If we were having this conversation a year ago, or even six months, I'd agree with you on this one. The whole technology is evolving rather fast, and the scripts have improved a lot - the JS/AJAX animation engines and CSS tools and resources. IE is still the main wrench in the works. but rather than hacking and trying to get the same code to work everywhere, we just use browser detection and separate include files to take care of that. Maybe it depends somewhat on what developers are better at and more comforatble with?

Report · Sep 26, 2009

No, not the middleware - just getting data into and out of Flash from any database or middleware. I've done it on several occasions (mostly for online training courses). But just doing something normal, like provide an input form, insert a database record, then display and sort results - is more complex than in html, even if you're only using Dreamweaver's limited and built in server behaviors.

Well, Flash isn't my main dev tool, I use Flex. And all it takes is a few lines of code.

<mx:HTTPService id="xmlService" url="path/to/file.xml" resultFormat="e4x" result="serviceResultHandler(event)" />

And there's <mx:WebService /> and <mx:RemoteObject />

But just doing something normal, like provide an input form, insert a database record, then display and sort results - is more complex than in html,

Erhmmm, nope

That's basically what I do for a living (creating RIA's and CMS's) and with Flex, this is just kiddy stuff really.

Flash used to have Data Components - they're still there for AS2 - but there are no AS3 versions of those (no webservices or remoting components). So if data integration is a big part of your project, Flash might not be the right tool for the job . As you said, know when to use it and when not to (and switch to Flex).

Report · Sep 26, 2009

So if data integration is a big part of your project, Flash might not be the right tool for the job . As you said, know when to use it and when not to (and switch to Flex).

Exactly! Data integration and heavy database dependent websites/applications is probably the only thing I wouldn't use Flash for, I would rather use ASP.NET 3.5 for stuff like that. Hopefully future versions of flash and/or actionscript could make this job as easy as it is in ASP.NET.

Since Muzak is suggesting using Flex for stuff like that, I guess I need to start learning Flex soon... many people said it's a much better development tool than the Flash IDE.

Report · Sep 27, 2009

Muzak wrote:
Erhmmm, nope
That's basically what I do for a living (creating RIA's and CMS's) and with Flex, this is just kiddy stuff really.
Flash used to have Data Components - they're still there for AS2 - but there are no AS3 versions of those (no webservices or remoting components). So if data integration is a big part of your project, Flash might not be the right tool for the job . As you said, know when to use it and when not to (and switch to Flex).

If it is "kiddy stuff" to some, that doesn't mean it is to everyone. But if it makes you feel superiror, I'll try to oblige and feel inadequete. Hmmm, nope not working. But thanks for the tip! I'll have to give Flex another look.

Report · Nov 03, 2009

Well written posts Muzak

Report · Sep 22, 2009

Sorry duplicate post.. forum is messed up

Worst forum ever..

Report · Sep 22, 2009

sorry duplicate post.. forum is messed up

Report · Sep 26, 2009

To the original post.

I think it is accomplished with a basic 3D code. If it is not - it would be very inefficient.

Below 60 some lines accomplish this kind of effect. It is adapted to timeline - with classes, etc. it can be much more versatile. The code is just a quick and dirty idea.

import flash.display.Graphics;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;

var vpX:Number = stage.stageWidth * .5;
var vpY:Number = stage.stageHeight * .5;
var objects:Array = [];
var numObjects:int = 100;
var movable:MovieClip;
var fl:Number = 250;
var xpos:Number = 0;
var ypos:Number = 0;
var scale:Number;
var minAlpha:Number = 0.8;

makeObjects();

function makeObjects():void {
     for (var i:int = 0; i < numObjects; i++) {
          movable = clip();
          movable.x = movable.xpos = Math.random() * stage.stageWidth;
          movable.y = movable.ypos = Math.random() * stage.stageHeight;
          movable.zpos = Math.random() * fl;
          movable.alpha = minAlpha + Math.random() * (1 - minAlpha);
          movable.rotation = 180 * Math.random();
          scale = fl / (fl + movable.zpos);
          movable.scaleX = movable.scaleY = scale;
          addChild(movable);
          objects.push(movable);
     }
     stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
          
function onMouseMove(e:MouseEvent):void 
{
     xpos = mouseX - vpX;
     ypos = mouseY - vpY;
     for (var i:String in objects) {
          movable = objects;
          movable.y = movable.ypos + ypos * movable.scaleY;
          movable.x = movable.xpos + xpos * movable.scaleX;
     }
}
          
function clip():MovieClip {
     var shapes:Array = ["circle", "rectangle", "ellipse", "square"];
     var shapeIndex:int = Math.random() * shapes.length;
     var mc:MovieClip = new MovieClip();
     var gr:Graphics = mc.graphics;
     gr.beginFill(Math.random() * 0xFFFFFF);
     switch(shapes[shapeIndex]) {
          case "circle":
              gr.drawCircle(0, 0, 40);
          break;

          case "rectangle":
              gr.drawRect(0, 0, 40, 20);
          break;

          case "ellipse":
              gr.drawEllipse(0, 0, 40, 20);
          break;

          case "square":
              gr.drawRect(0, 0, 40, 40);
          break;
     }
     gr.endFill();
     return mc;
}

Missed the line in the post: movable.x = movable.xpos + xpos * movable.scaleX;

Report · Sep 26, 2009

Or to make things a bit more interesting:

import flash.display.Graphics;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;

var vpX:Number = stage.stageWidth / 2;
var vpY:Number = stage.stageHeight / 2;
var objects:Array = [];
var numObjects:int = 250;
var movable:MovieClip;
var fl:Number = 250;
var xpos:Number = 0;
var ypos:Number = 0;
var scale:Number = 1;
var minAlpha:Number = 0.5;
makeObjects();

function makeObjects():void {
     var xRange:Number = stage.stageWidth * 2;
     var yRange:Number = stage.stageHeight * 2;
     var left:Number = -stage.stageWidth * .5;
     var top:Number = -stage.stageHeight * .5;
     for (var i:int = 0; i < numObjects; i++) {
          movable = clip();
          movable.x = movable.xpos = left + xRange * Math.random();
          movable.y = movable.ypos = top + yRange * Math.random();
          movable.zpos = Math.random() * fl;
          movable.alpha = minAlpha + Math.random() * (1 - minAlpha);
          movable.rotation = 180 * Math.random();
          movable.scaleX = movable.scaleY = fl / (fl + movable.zpos);
          addChild(movable);
          objects.push(movable);
     }
     changeDepth();
     stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}

function changeDepth():void {
     for (var i:String in objects) {
          movable = objects;
          setChildIndex(movable, int(movable.scaleX * numObjects));
     }
}
          
function onMouseMove(e:MouseEvent):void 
{
     xpos = mouseX - vpX;
     ypos = mouseY - vpY;
     for (var j:String in objects) {
          movable = objects;
          movable.y = movable.ypos + ypos * scaleX;
          movable.x = movable.xpos + xpos * scaleY;
     }
}
          
function clip():MovieClip {
     var shapes:Array = ["circle", "rectangle", "ellipse", "square"];
     var shapeIndex:int = Math.random() * shapes.length;
     var mc:MovieClip = new MovieClip();
     var gr:Graphics = mc.graphics;
     gr.beginFill(Math.random() * 0xFFFFFF);
     switch(shapes[shapeIndex]) {
          case "circle":
              gr.drawCircle(0, 0, 40);
          break;

          case "rectangle":
              gr.drawRect(0, 0, 40, 20);
          break;

          case "ellipse":
              gr.drawEllipse(0, 0, 40, 20);
          break;

          case "square":
              gr.drawRect(0, 0, 40, 40);
          break;
     }
     gr.endFill();
     return mc;
}

Report · Sep 26, 2009

Close but no cigar

The direction is wrong, objects need to move the opposite direction of mouse movement.

You're not creating a 3D impression by simply dropping a bunch of objects on stage.

They're clearly using 3 "layers" each containing a number of display objects (and one on top of that with the nav buttons). The "layers" move, not the objects themselves.

Here's a better example:

http://muzakdeezign.com/flashcoders/chromazone/

http://muzakdeezign.com/flashcoders/chromazone/chromazone.zip

Still room for improvement, but comes close.

What is missing is when resizing the stage, the display objects (circles) are not repositioned, which is the case in the original (chromazong-imaging).

In the main timeline, I create 3 instances of the ZLayer class (which themselves create the circles) and I deliberatly created them one by one, so it's clear what exactly is going on:

var layer3:ZLayer = new ZLayer();
layer3.scale = .4;
layer3.alpha = .4;
layer3.outerBounds = new Point(maxX, maxY);
addChild(layer3);
var layer2:ZLayer = new ZLayer();
layer2.scale = .6;
layer2.alpha = .6;
layer2.outerBounds = new Point(maxX, maxY);
addChild(layer2);
var layer1:ZLayer = new ZLayer();
layer1.outerBounds = new Point(maxX, maxY);
addChild(layer1);

You'd normally do that in a loop.

So with the above, you then move those "layers" when the mouse moves.

I used TweenLite for the animation.

Wanted to do this alot sooner, just didn't have the time untill now

Report · Sep 26, 2009

I had no intention to replicate what these guys are doing. Actually what they are doing is a lot simpler than the code I posted. One just has to introduce a third dimension linked to a focal point. Where it moves relative to mouse is up to the creator - just multiply -1 if the great marketing revelation is to make it more psychedelic.

One can introduce whatever number of objects/layers he wants. 3, 300, or 3000 layers is irrelevant. In my example 250 objects follow the same 3d rules. If there is a need to ejaculate more improvements - power to everyone! These objects very well could be containers of other objects, which, in turn, may have a group of others. The principal is the same.

The point is that there is no magic in here. All these "cool/impressive" (and, in most of the cases, useless and annoying) things are done with few lines of code with the exception of a small number of masochists who would still use timeline animation.

Of course, tweening engines with some easing make these staff less annoying. But, again, who has time nowadays to deal with all these self indulging interactions? It pays well though - to both UNimaginative VP of marketing and well endowed developers who are hired to implement these "divine" visions. God bless our saviors corporate creative and user experience departments!

Report · Sep 27, 2009

I had no intention to replicate what these guys are doing. Actually what they are doing is a lot simpler than the code I posted. One just has to introduce a third dimension linked to a focal point. Where it moves relative to mouse is up to the creator - just multiply -1 if the great marketing revelation is to make it more psychedelic.

Sorry, that's just wrong. There is no third dimension and no focal point at all. It's 2D, not 3D.

Report · Sep 27, 2009

I keep forgetting that not everyone has 3D holographic monitor like I do (things are just jumping at me) 🙂

I am sorry if some people read things literally. I should press double quotes key more often.

Report · Sep 28, 2009

OK here's another one: http://www.eyedigits.com/

I'd like to know how to create this rolling ball (rather than having the ball slide with the mouse's movement). Also, when you click on portfolio notice how those movieclips come out of the ball attached to strings... is this effect done using code or using timeline animation?

Report · Sep 28, 2009

Below is the code that takes care of rolling ball. Just place these two classes into a directory where your fla is and make RollingBall.as document class. Play with velocity and ball radius parameters to see how they affect the animation. As you can see there is not much to it.

As for the other bells and whistles - all can be quite easily done with ActionScript (easier than with timeline). Since you are interested in animation you really should read "Foundation ActionScript 3 Animation" by Keith Peters. This book covers a lot of grounds in a simple way and, in many cases, just throws ready solutions.

Document Class:

package  
{
     import flash.display.Sprite;
     import flash.events.Event;

     public class RollingBall extends Sprite 
     {
          private var ball:Ball;
          private var radius:Number = 40;
          private var rot:Number = 0;
          // boundaries
          private var left:Number;
          private var right:Number;
          // velocity
          private var vx:Number = 5;
          public function RollingBall() 
          {
              init();
          }
          
          private function init():void {
              ball = new Ball(radius, 0x000000);
              ball.x = radius + 2;
              ball.y = stage.stageHeight - radius;
              addChild(ball);
              rot = 360 * vx / (Math.PI * radius * 2);
              left = radius;
              right = stage.stageWidth - radius;
              addEventListener(Event.ENTER_FRAME, onEnterFrame);
          }
          
          private function onEnterFrame(e:Event):void 
          {
               if (ball.x >= right || ball.x <= left) {
                   vx *= -1;
                   rot *= -1;
               }
               ball.x += vx;
               ball.rotation += rot;
          }
          
     }
     
}

Ball

package {
     import flash.display.Graphics;
     import flash.display.Sprite;
     
     public class Ball extends Sprite {
          private var radius:Number;
          private var color:uint;
          public function Ball(radius:Number=50, color:uint=0xff0000) {
              this.radius = radius;
              this.color = color;
              init();
          }
          private function init():void {
              var gr:Graphics = this.graphics;
              gr.beginFill(color);
              gr.drawCircle(0, 0, radius);
              gr.endFill();
              gr.beginFill(0xffffff);
              gr.drawEllipse(-7, -radius + 4, 14, 6);
              gr.endFill();
          }
          
     }
}

Report · Sep 28, 2009

Yeah actually I'm currently reading that book, and I tried to incorporate some of what it says into creating this animation... I got the ball moving but I couldn't get the rotation right... I tried easing it but it was acting very weird. I'll check out your code and try to learn something from it. Here's the code I have so far:

import gs.*;
import gs.easing.*;
//var easing:Number = 0.2;
ball.x = stage.stageWidth/2;
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveF);
function moveF(e:MouseEvent):void
{
     if (mouseX > ball.x - 40)
     {
          TweenMax.to(ball, 2, {x: mouseX + 40, ease: Strong.easeOut});
          ball.rotation += (mouseX - ball.x);
     }
     else if (mouseX < ball.x + 40)
     {
          TweenMax.to(ball, 2, {x: mouseX - 40, ease: Strong.easeOut});
          ball.rotation -= (mouseX + ball.x);
     }
}

I also have the AdvancED Actionscript 3.0 Animation book for Keith Peters, I'll read it when I'm done reading Foundation Actionscript 3.0 Animation. Hopefully these books will help me develop my animation skills.

Thanks for the input Andrei1

Report · Sep 28, 2009

I guess the main trick with ball rotation is to calculate dependency of rotation speed from velocity of ball movement along axis and its circumference. This line in the example I posted takes care of it:

rot = 360 * vx / (Math.PI * radius * 2);

Math.PI * radius * 2 is the circumference which is pi * diameter.

Report · Sep 28, 2009

oh I see... that makes sense... thanks for the tip

Report · Sep 28, 2009

wow check this one out: http://www.jonathanyuen.com/main.html

I certainly loved this one!

Report · Sep 29, 2009

and this is another one which probably uses the same technique used by the site in the first post...

http://www.mauriciostudio.com/