 |
I just uploaded a new tutorial that shows you how to create a cool 3D video piece without using any ActionScript at all. These types of things are simple for experienced AS3 developers but, up until Flash CS4, designers have been left out the fun. This tutorial starts in Photoshop where we tweak an image of a plasma TV. Then inside of Flash we use the new 3D tools to position a video component so that it plays external video files on the TV. A simple, yet cool effect. |
Note: In the tutorial I position the video component using a lot of trial and error. If anyone knows of a better way please let us know in the comments.
Lee
Thanks Lee!
There has been a lot of coding lately, but I’m a fan and don’t mind either way.
Great to see U haven’t forgotten us mortals
Regarding the positioning I remember setting up shapetween “hints” in the old days. Don’t know if they still exists in cs4 or even could be used in this context. Anyway….nice kitty
Thanks Lee , happy to hear from you again, every tutorials is great moments spent, thanks again .
Have a good life …
hay Lee,
Good one man even i have done something like that with coding:):):)
but you rock man
Keep up the good work
I’ll confess I haven’t even watched the tut yet, but as soon as I clicked through… What’s that in your Dock…? Transmission? LOL You’ve gotta love the guy!
HOLD ONTO THE “ALT” KEY WHILE SCALING. And move the 3D center point all the way to the left of the movie clip. You will find you’ll have to do a fifth as much trial and error.
[...] Brimelow ?????? TheFlashBlog ? New tutorial on 3D Flash video without code [...]
To quickly find the best rotation settings, you just have to set the anchor point to the top left corner. With such an anchor point, when you’ll rotate the clip, you won’t need to adjust its position anymore : it will stay perfectly aligned, and you can quickly figure out which rotation settings will match the best.
Man, don’t limit your bandwidth to 5kb/s in upload
btw tnx for your tutorial
Transmission? eheh Great tutorial Lee as allways! This video show how perfeccionist you are. The inner shadow thing gives a all diferent detail to the thing
Nice tutorial lee!
Couldn’t we just use the Distort option in the Free Transform to create it, instead of 3d features?
—-
updated! I tested it, no, it’s not working. You can’t change Distort settings for MovieClips. But it’s weird, isn’t?
Good video Lee but as @TheGreyMan brought up… I have to know what you where downloading with transmission
“In the tutorial I position the video component using a lot of trial and error. If anyone knows of a better way please let us know in the comments.”
Alternatively, you may open the Transform window and change the “Y rotate” option
Thanks to those who mentioned the 3D center point. It did help a little. But it’s a shame you can’t just drag the corners to where you want like @Hassan mentioned. Seems like there must be a better way. But I guess you don’t really have to be accurate since it sits under the image. Oh well this would be good enough for an advertising site.
With the new tracking tools in AE (Mocha from Imagineer) can you copy tracked data from AE to Flash and then just take one keyframe and set the position with the keys…?
@Jake Haha you tell me. Haven’t tried Mocha yet.
isnt png in flash a problem with older internet explorers?
When I try your example, the video does not start and I’ve tried with any other FLV links, locally and hosted. I’ve changed it to Action-script controlled instance and after I 3D transform it, the video is playing but not transformed, just flat and it moves at 0,0px of the stage. What’s happening? I’m using CS4 and exporting to FLP 10.0. Do you think I have a wring version installed on my PC of the FLPlayer? Thanks.
[...] New tutorial on 3D Flash video without code [...]
Thank you a lot! Wonderful tutorial! Wonderful cat!
You are great man!
So Lee, what are you torrenting these days? (ie. transmission)
=D
Excellent example of the quick and dirty, client-wowing stuff you can crank out in CS4.
For positioning of the video, besides the aforementioned adjustment of the 3D Center point, I find it to be a little faster and easier to tweak the 3D Vanishing Point in the Properties.
What I did:
In Photoshop:
-Use the ruler tool to measure the height of the left and right edges of the TV screen (I came up with 191px and 146px).
In Flash:
-Import the plasma.png and place in a layer, as usual.
-Create a new layer named “guide” and make a rectangle the width of the stage and the height of the right edge of the TV screen (600×146). Align the shape to the horizontal and vertical centers of the stage.
-Create a new layer named “video” and place the video on it. Use the properties tab to scale the video to the height of the left edge of the TV screen, constraining proportions (ended up being 339.6×191).
-Align the video to the horizontal and vertical centers of the stage. Hit the “Reset” button in the properties tab to reset the vanishing point of the video. (300,250)
-Adjust the 3D Center point to the center of the left edge of the video. Adjust the 3D rotation, y-axis of the video until the right edge lines up with the guide shape. The guide shape can now be deleted. (I ended up with -44 degrees)
-Move the video layer to line up with the left edge of the TV screen. Use the properties tab to adjust the 3D vanishing point until the right edge lines up. (360,274)
It’s a few more steps in preparation, but it let me place the video with very little trial and error.
Thanks for the continued sharing of excellent tutorials!
@Kevin awesome thanks for posting that!
Thank you a lot! Wonderful tutorial!
One thing you need to keep in mind for 3D when working with real images is focal length or angle of view. I believe flash has a perspective angle setting for all 3d objects. It is located in 3D Position and View on each Movie Clip.
I try to import a movie from youtube or vimeo, but it won’t let me? Is this not posible?
Great tutorial btw! 3D is so cool!
Did anyone really tryed this? It’s just not working with my *.mov file on my server. And even your example is pretty slow to start. Is it possible to link an *.wmv file? Greets from Croatia…
This is defiantly the right way to make a video 3D with flash. I like code, but its nice to keep it simple. Thanks Lee, great stuff.
One thing you need to keep in mind for 3D when working with real images is focal length or angle of view. I believe flash has a perspective angle setting for all 3d objects. It is located in 3D Position and View on each Movie Clip.