I have to use Flash CS3, so I can't use the properties rotationX, roationY and rotationZ.
I have a movieclip, that looks like this. It is now flat, no 3D rotation or shearing
But what I want is that this movieclip has a rotationX, or that it is a bit in perspective like this:
As I said, I can't use rotationX, so I have been playing around with Matrix.
But I can not get it right.
Here is how I try to do it
myMC.transform.matrix = new
Matrix(1,0.15,0.35, 1, 0, 0);
And this is the result
Can you help me to get the matrix right, or is there another way?
Thank you,
Vincent
Make your life easier and just download a 3D engine for flash 9:
http://away3d.com/downloads
Either that or you can modify your CS3 installation to produce SWF files that target flash 10+
Sorry, rotationX and rotationY are not affine transforms (they obviously do not preserve parallelism between lines), so they cannot be represented by matrix multiplication in 2D space. It is, however, affine in 3D space (where the non-preservation of parallel lines is an apparent effect of the 2D projection, not of the rotation)
i believe what you are trying to do is to get a correct affine transformation matrix.
FYR (Transformation Matrix) http://en.wikipedia.org/wiki/Transformation_matrix
Edits
For more information about 3D transforms and their matrices,
Here, see if this applies.
http://www.cosc.brocku.ca/Offerings/3P98/course/lectures/2d_3d_xforms/
Edits 2
A blog post about 3D transform in CS3 and CS4.
3d Rotation the easy way: Buy Flash
CS4 uggh! I’m still using CS3 and only
for my Flash software. My illustrator,
photoshop, premiere, and aftereffects
are still at the lowly level of CS2
and for economic reasons, I’m stuck w/
my outdated software configuration for
awhile. But if you’re not in my boat
or on the same sea as my boat,
consider buying the latest, greatest
CS4 Flash to make 3D manipulation
inherent in flash display objects.
Yep, inherent, built in, easy.
In Flash CS3 and below, a display
object (i.e. sprite or movieclip) only
recognizes one rotation property
(rotation: Indicates the rotation of
the DisplayObject instance, in
degrees, from its original
orientation, which is usually the
upper left, corner or 0,0). This
property only rotates objects in the
2D flat space of the Flash stage. To
make 3D work in this flash, one must
“fake” it with math. Lots of math,
Points, lines, fills, trig, arrays,
and sometimes Matrices. Yippee kayae!
In Flash CS4 and above (as of writing
there is no above), a display object
(i.e. sprite or movieclip) recognizes
four (4) rotation properties. Holy
Cow! Yeah, four rotation properties:
rotation: Same as in CS3. 2D rotation.
rotationX: spin that shit around the X
axis of the stage, i.e. vertical
flipping. rotationY: spin it around
the Y axis of the stage, i.e.
horizontal flipping. rotationZ: spin,
baby spin o’er the Z axis of the
stage. As far as I’m concerned, a spin
around the Z axis is the same as
rotation (unless, for some reason, the
Z axis does not cross through the
orientation point of the object).
[http://actionscription.wordpress.com/2009/03/12/3d-rotation/]
Related
Are there any motion-analysis algorithms to detect the difference between 2d face motion and 3d face motion?
I assume you are talking about a video.
You can extract 3d landmarks for each one of the frames in the video and then analyze the change in those 3d landmarks to get motion analysis of the face.
A simple way to extract the 3d landmarks is to use
https://github.com/1adrianb/face-alignment
So lets say your video as 1..i..N frames and you extracted 3d landmark LMK_i for each frame.
To analyze the motion between the frames you can find the 3d rigib body transformation between LMK_i and LMK_i+1. (example: python implementation of 3D rigid body translation and rotation
After you have the transformation you can extract from the matrix the rotation translation and scale.
Note the motion analysis assumes the camera is stationary and not moving. If the camera is also moving you need to add take into consideration this movement when you calculate the motion analysis
I'm trying to create a complex parallax effect in Flash video sequence that includes translation and scaling among many layers.
I've been looking for a way to set up my scene to where I could just animate one object (preferably with motion tween) and then apply some percentage of that animation to each background object (or flip values accordingly).
Is there any way to harvest Motion Tween data out of a layer of a MovieClip and translate that into x,y values for objects? [So far I've only created instances of objects and set their positions through actionscript.]
Seems like you need to use a copy motion option of the layer context menu
Also tweening actionscript libraries e.g. TweenMax are capable of tweening any properties of any objects, but they do it with actionscript (which can be easily copied/modified/pasted), not Adobe Flash UI.
So converting every visual element to a movieclip allowed me to position the items in Z as well. That pretty much solved my problem.
Thanks everyone.
I have a little problem. I have 2D image of roulette wheel on the stage and used 3D rotation tool to get a little 3D effect (Image 1). Now I want to rotate it on it's Z axis so that I can get spining effect of wheel. I tried to use rotationZ += ... but it doesn't rotate it the way I want. I saw one tool in flash toolbar called "Global transform" (Image 2). When I click it I see transformation lines for image (Image 3), that I need for rotation, the blue line is one I need (Z axis). But I don't know how to use that kind of transformation via code. I don't even know if that is local or global rotation. I hope you understand me, maybe pictures will help you! Thanks!
HERE IS DROPBOX LINK FOR IMAGES --> Dropbox Images
What you are trying to do is simply an issue of nesting elements and applying effects on them in certain ways.
To accomplish the rotation as you want, you'll want to create your roulette wheel image in 2D as if you were looking at from a birds eye view. I highly recommend creating this graphic in vector format. Import this graphic into Flash and turn it into a movieclip. For arguments sake, I'm going to give this movieclip an instance name of wheel so it is easy for us to follow along with these instructions. Now, within the wheel instance, you'll want to apply a rotation to the roulette wheel. You can accomplish this either by using a Motion tween on the timeline, but the best way would probably be to use a programmatic approach so you can randomize the rotation in some way.
Now, place the 'wheel' instance on the stage and use the 3D Rotation Tool and rotate the wheel on it's X axis, this will make the wheel look like one in your image.
Now if you have performed the rotation within the wheel instance properly, you will have your spinning wheel.
I've created a sample of what you want with the following files using Flash CC 2014 that you can download here:
FLA File
Sample compiled SWF FILE
There is actually some math involved in understanding 3D transformations - including rotations - and how they combine with each other.
If your are interested in further explanations, and have a bit of math background, have a look at the theory
otherwise, the first thing you should remember is that rotation/scaling/translations may be composed (combined) but that the order is very important. rotationX, rotationY, rotationZ are sort of "coordinates" that enable to describe any orientation in the vector space, like x,y,z describe any position. But they are not sufficient to allow to do any rotation around any axis from any current orientation.
In your case, what you want is to combine a rotation around it's own local z (blue) axis, which means before the initial rotation you have already applied. ex:
roulette.transform.matrix3D.prependRotation(10, new Vector3D(0,0,1));
where 10 would be the angle you chose for the rotation, and the pivot of your object would be the pivot of the rotation (ohterwise, specify your own pivot by passing an additional Vector3D
To complete the picture, if you use appendRotation() instead of prependRotation(), you will rotate your object in the z axis of the world (global) coordinates (after it's current trnasformation).
You may also as already suggested create a Symbol to use as a container, and rotate you object inside it's container, but messing with Matrix3D will give you more control in the end, often with just one line of code like in this case.
This visualization is created using Away3D (Flash):
www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
Would it be possible to create something of the same quality (re. interaction, animation, performance, pixel-perfection etc.) using WebGL?
Bonus: How would one set up the basic scene? (without interaction and animation)
Yes, it would be. The scene is not complex at all, so it would have good performance. Interaction, yes, depends how you implement it, but if you are doing project with, for example, Three.js it wouldn't be a problem. Pixel perfection, obviously, yes.
In the scene, you could have curved plane, with texture that is changing UVs of vertices when you use 'navigate'. Pins could be done with particle, or better, simple quads with transparent textures. To have pixel-precise pin picking, you could depth-test pins on ray trace, or use pin-shaped geometry with shader, which probably the best solution.
So, basic scene - curved plane with per-vertex-changing-UV, pin-shaped and texture pins.
Alternatively, you could do exactly the same thing with 2D canvas. All elements are just drawn and scaled, text would be much simpler, and picking would be with 2d calculations.
Hope this helps.
I'm implementing a simple penalty shootout game using actionscript 3.0. The view of the game is similar to view of the old "Sensible World of Soccer". I want to use 3d game logic by using dimension z as I think that it could help me in order to achieve better collision detection - response results. However, I would like to keep the graphics style and view equivalent to old 2d soccers'. Hence, I assume that orthographic projection is suitable for this implementation. Although there is plenty of information in the internet regarding orthographic projection, I'm a little bit confused about how someone can apply it in his/her code.
So my questions are:
Which is the procedure step by step in order for someone to convert a 3d (x, y, z) point to 2d (x', y') point in orthographic projection?
Can we avoid using matrices? If yes, what are the equations that associate coordinates x', y' with x, y, z?
Do we have to define a camera position and angle before applying the conversion? In my case, camera will be in a fixed position and angle.
DisplayObjects and their descendants (ie MovieClip and Sprite) have a z property you can use to do this without the headaches - they also have rotationX/Y/Z and scaleX/Y/Z properties too!
Using 'z' will adjust the position and scale of an object accordingly (though it will convert vectors to bitmaps), there's no depth sorting, so it will stay on top of objects even if its z co-ord suggests it should be behind them, but for the project you have in mind I can't see this being a problem - it's pretty easy to fix anyway, have an array of objects in the scene, sort it according to z-position and reset the depth index of each/re-add to stage in sorted order.
You can use the perspectiveProjection member of a clip to adjust the FOV, origin etc -
Perspective Tutorial
..but you don't need to get any more sophisticated than that. Certainly you don't need to dabble with matrices with a fixed camera view, even if you wanted to calculate this manually as an experiment.
Hope this helps