pseudo 3D/2.5D Effect Flash AS2

[KaTsuO_O]

I've been working on 2.5D tests in Flash where you move the mouse to change view.

Click to Play
(Javascript Required)

3D Effect.swf [ 1.05 KiB | Viewed 39858 times ]

Click to Play
(Javascript Required)

3D Space.swf [ 1.11 KiB | Viewed 39858 times ]

This is the code (as2) on my timeline and the only code used for the first one:

Spoiler (click to show/hide):

Code: Select All Code

varix = _xmouse - 275;
variy = _ymouse - 200;
_root.ball._x = 100 + (varix/2);
_root.ball._y = 250 + (variy/2);
_root.ball2._x = 275 + (varix/3.5);
_root.ball2._y = 200 + (variy/3.5);
_root.bg._x = 275 + (varix/8);
_root.bg._y = 200 + (variy/8);

Let me explain the code.

Spoiler (click to show/hide):

To get it to work properly with the mouse in the center I had to create varix (Variable X) and variy (Variable Y). They take the position of the mouse and make it negative with half of the stage size (550 X 400) (varix = _xmouse - 275 & variy = _ymouse - 200).

Normaly the top left corner is x0, y0 and the bottom right corner is x550, y400. By making those numbers half stage size negative we have x275, y-200 in the top left corner and x-275, y200 in the bottom right which leaves with x0, y0 in the center.

"_root.ball._x = 100 + (varix/2);"

ball is the front ball on the stage. "_x = 100" because that is the starting position of the ball and then "+ (varix/2);" because I only want it to move half of the stage. The background (bg) moves slower since it is divided by 8 (/8).

3D Effect.fla

(10.86 KiB) Downloaded 63 times

3D Space.fla

(6.92 KiB) Downloaded 50 times

Here's skew or as I like to call it, tilt. It is not another frame with a different box on, it actually tilts the movieclip.

Click to Play
(Javascript Required)

Skew.swf [ 829 Bytes | Viewed 38653 times ]

Here's the code in the button:

Spoiler (click to show/hide):

Code: Select All Code

on (release) {
var m = _root.box.transform.matrix;
//X and Y translation
m.tx += 43;
m.ty;
//Height
m.b = 1;
//Width
m.c = 1;
//X Skew:
m.a  = 1;
//Y Skew:
m.d = 0;
_root.box.transform.matrix = m;
}

I really want to get that to work with the 2.5D effect because it would open for more possibilities. If anyone can find a way to get both to work together, please let us know.

Skew.fla

(6.07 KiB) Downloaded 28 times

Here's an experiment to see if I can it to work with only one object on screen (except the background). I want it to seem like the side closest to us on the block is closer so when you move to the side that side moves most while the part furthers away from you moves the least. The problem is that I can only get that to work with rotation, while skew or tilt would work better. Though this could be great for a 3rd person space ship game.

Click to Play
(Javascript Required)

3D View.swf [ 1.18 KiB | Viewed 38396 times ]

3D View.fla

(7.59 KiB) Downloaded 41 times

[OwnerOfSuccuby]

Very interesting sample !!! I think first that that will be a lot of frames in 3d object, but as i understand it use transformation matrix ? Do it work like in computer graphic (use the same algoritms) or any other way ?

(Sorry i am a little killed today, i worked for 22 hours so i feel my self like )

Very interesting example, but where do you want to use it ? As i understand it is hard to make charecter on it - or it is possible ?

[Slayer_J]

Awesome! This is the future right here!!

Lol, anyway, downloaded it and will inspect/study it a bit more.

[KaTsuO_O]

@OwnerOfSuccuby nope, no transformation matrix. It only uses position and size. The gray block is made of two walls (symbols) that changes size as you drag your cursor.

I want to use this in animations but I can't really get that to work. It is not possible to animate on the main timeline while having this effect on. I can always animate inside the movieclips but then I can't get the effect I'm looking for.

"is hard to make charecter on it - or it is possible?" ? ? ?


@Slayer_J wouldn't call it the future, people have used 2.5D quite a bit before but if it can be used in new interesting ways then that's the future.

[BulmaSSJ4]

What is the effect that you can have on the main timeline, that you cant have in movieclips?
If you are trying around with blendings, you might have to set the movie clips "blending" to "layer".
As long as it is set to "layer", i dont know any differences beween _root and any other movie clip.

[KaTsuO_O]

@BulmaSSJ4 the problem I have is that I can't animate on the main timeline because of this effect keeps putting the movieclips in place. So even if I make a tween that makes one of the balls move up and down it will still keep the ball in the same place. I can however make an animation inside the movieclips and it will work but that limits me a lot so that I can't use it to some of the things I want. I can also apply this effect to a movieclip inside a movieclip and then I animate the movieclip on the main timeline but that just brakes things.

Blending? I actually don't know what that is.

[BulmaSSJ4]

Of course you dont make animations on the main timeline.
You tell a ball how to move, inside the movieclip.
Here in this example you can see the ball "jumping", Its moving up and down, just what you wanted
I basically just rightclicked your ball object, and transformed it into a movieclip a second time.
Then made the tween inside that movieclip.
edit: And ofc gave the "Ball Jumping" object, the "ball" tag, so actionscript works for it...

[KaTsuO_O]

@BulmaSSJ4 "I can however make an animation inside the movieclips and it will work but that limits me a lot so that I can't use it to some of the things I want."

I need to be able to add Keyframes and tweens on the main timeline so that I can see how all my movieclips moves at once. If I have 10-20 movieclips on the screen then it is going to be too hard to work with if I can't see how they all move together.

"I can also apply this effect to a movieclip inside a movieclip and then I animate the movieclip on the main timeline, but that just brakes things." This is probably the way that works best but it doesn't work when I rotate. What happens is if something rotates in a small circle when the mouse is in the center, it will rotate in a lot larger circle when the mouse is in one of the corners. Even If it just rotates a bit it still brakes when the mouse is in one of the corners.

[Patchesthedrow]

I am loving this.

[banana]

C'est ça que j'm.

[Biles]

Rare that you see this kind of background moving method. I think there was a term for it though, it was an background animation concept that was first developed by Disney. Anyways, instead of calling it 2.5D, I'd call it pseudo 3D IMO.

[banana]

Right. I've always known 2.5D to refer to FPS games like Wolfenstein that don't have an up-down axis.

[BlueLight]

So i'd like to be able to look at the entire cube. Is there a way track mouse movement while in the box and not position?

[SonicExTc]

I swear im gonna rip this HD to pieces if it continues to buzz like this...

On the topic, this might be interesting... Are you planing to...um...implement some other balls there or this will remain on 2.5D and get scrapped later?
Hatin to be buzzkiller but is this project of yours possible to make on the current flash platforms? It looks like "something that will be used but it's still not the time" kind of thing if you ask me... Besides I can't imagine how hard actually making of charachter will be. Well, good luck with that m8. I would offer help but im not into that, just network administration and maitenance..

[LuftMallow]

I decided to try out some of the 3d effect code on a practice flash I've done and I'm wondering what went wrong here. Perhaps someone could look it over, as there's probably something here that could help figure out the best way to use this.

Spoiler (click to show/hide):

Click to Play
(Javascript Required)

3D Daisy1.swf [ 25.78 KiB | Viewed 31775 times ]

3D Daisy1.fla

(629.5 KiB) Downloaded 33 times

[KaTsuO_O]

I'm sorry for not replying lately, I got confused and never got to it.

@Patchesthedrow, banana always good to know... not sure if that's good or bad but I assume it is good.

@Biles I hadn't heard of that before but I assume that both of them are used.

@BlueLight at the moment there's no way to make it so that you can look at the entire thing. It is just two walls that I shrink and expand but I think it would be possible though.

@SonicExTc this is not supposed to be anything more than it is, it is just something that someone can use when they create games and animations.

@LuftMallow the first thing I see is that everything have X 318 and Y 230 position which is really strange especially when you wrote something different in the code. I just looked at the position which is 318, 230 and changed the code. You don't see a whole lot of effect but it certainly works.

Another thing I changed was "318 + (varix/6.25);" to "318 - (varix/6.25);" so that it feels like you are looking around. if you want it to work reversed just replace - with + by using the find thingy right to the plus sign in the actionscript panel.

One of the problems is that when you move all the way to one side the boobs is pushed of the skin a bit, it might not be much of a problem but if you want to make the effect a bit stronger then it will. A solution would be a bit of rotation, it's easy to add but something that would be better is tilt or skew. I got an example of that in the first post but that's just a button that tilts the movieclip (not just another frame where it is tilted), I just don't know how to get it to work with this.

Spoiler (click to show/hide):

Click to Play
(Javascript Required)

3D Daisy1 Fixed.swf [ 24.6 KiB | Viewed 31130 times ]

3D Daisy1.fla

(629.5 KiB) Downloaded 34 times

[OwnerOfSuccuby]

It does not look 3d but it looks good

[LuftMallow]

Yeah, it does need a skew function to look right. My attempts at adding it were using keyframes and a series of buttons going across the scene that play certain frames, but you don't have the same freedom of movement as the actionscript allows that way.

I thought the x and y values were where the part is in the work area, not just the view dimensions minus a few pixels to account for the cursor. Well, that was tedium misspent, but now I know what I did wrong there.

[KaTsuO_O]

@OwnerOfSuccuby It will never look 3D but if it looks good then it is good.

@LuftMallow that reminds me of my ways to deal with things, if I don't know how to get things to work with actionscript, I throw out my movieclips and buttons.

The x and y values is exactly for that, so that it know where you want the symbol and then it adds whatever varix or variy is divided by some number. When I checked the properties, every body part had that position. The reason for that is that you placed every movieclip in the middle and inside the movieclips you have moved everything where it should be, if not, I don't have any other explanation.

[Red.Sheer]

Well, I have absolutely no idea what you guys are doing, but it looks great anyway I can imagine this will be a nice thing to play with in myst-like adventure games/passages in games, maybe even make it necessary to "look around" obstacles to find clues or something