ActionScript for Non-Coders
Pages: 1, 2
|
Related Reading 
Flash Hacks |
A Virtual Camera
One of the systems that Flash doesn't have that many other animation environments have is a virtual camera. Many professional animation systems allow you to set up a virtual camera that can itself be animated. This allows you to create the sort of camera work seen in traditional films, including pans, zooms, and fades.
Flash uses a more old-fashioned system based around a stage. Rather like a theater stage, the audience view is fixed, and it becomes harder to create the sort of close edits and camera effects we are used to seeing in Hollywood films.
Adam mentioned this one day in passing, to which I replied, "OK. If Flash doesn't have a camera, let's make our own."
Although a virtual camera sounds like a world away from the simple particle effect we just looked at, the way I did it is almost exactly the same. Again, there is no complex code, and the time to develop the camera was insignificant. It will, however, most likely save Adam literally days in some of his longer animations, because the alternative to a scripted camera is to simulate the camera pans, fades, and zooms using only tweens, and this can take a very long time to set up or change.
Adam sent me the animation in Figure 7 to illustrate the need for a virtual camera. The Flash stage is set up here to show a short scene in Adam's next production. The trouble is, he would like to create a number of camera movements and effects that are difficult with tweening. Although using embedded movie clips is one solution, the large number of separate animations needed in a typical animation make their use just as troublesome. We really need that Vcam to create a clean solution.
 Figure 7. The waterfall. Click on the image to see the waterfall animation. |
After some discussion (and a few failed trains of thought regarding what a Vcam should look like and do), we settled on the following implementation.
The Vcam will appear in the authoring environment as a rectangle that defines the Vcam viewfinder. You can download the source FLA for this animation here. Note that if you test the FLA, you will see the best results if you publish to the browser rather than view the result in the authoring environment (text movie will not cut out the content that appears outside the viewfinder, whereas the final effect when seen in a browser does). See Figure 8.
 Figure 8. The virtual camera as seen in the Flash authoring environment. |
All the animator has to do to use the camera is to tween the viewfinder around the stage. In the final animation, the code inside the camera component scales and pans the stage such that only the content within the viewfinder is seen. See Figure 9a.
 Figure 9a. The virtual camera in use. Click on the image to see the Flash animation in a popup. |
The Vcam is nothing more than a simple component -- a rectangle with a short script attached to its first keyframe.
Here's the code that drives the camera:
function camControl():Void {
parentColor.setTransform(camColor.getTransform());
var scaleX:Number = sX/this._width;
var scaleY:Number = sY/this._height;
_parent._x = cX-(this._x*scaleX);
_parent._y = cY-(this._y*scaleY);
_parent._xscale = 100*scaleX;
_parent._yscale = 100*scaleY;
}
function resetStage():Void {
var resetTrans:Object = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
parentColor.setTransform(resetTrans);
_parent._xscale = 100;
_parent._yscale = 100;
_parent._x = 0;
_parent._y = 0;
}
// make frame invisible
this._visible = false;
// Capture stage parameters
var oldMode:String = Stage.scaleMode;
Stage.scaleMode = "exactFit";
var cX:Number = Stage.width/2;
var cY:Number = Stage.height/2;
var sX:Number = Stage.width;
var sY:Number = Stage.height;
Stage.scaleMode = oldMode;
// create color instances for color
// transforms (if any).
var camColor:Color = new Color(this);
var parentColor:Color = new Color(_parent);
// Make the stage move so that the
// v-cam is centered on the
// viewport every frame
this.onEnterFrame = camControl;
// Make an explicit call to the camControl
// function to make sure it also runs on the
// first frame.
camControl();
// If the v-cam is ever removed (unloaded)
// the stage, return the stage to the default
// settings.
this.onUnload = resetStage;The function camControl will run every frame. This function uses the position- and
percent-scaling properties of the movie clip (_x, _y, and _xscale, _yscale) to
continuously scale and move the stage so that the viewable content in the final movie is
constrained to the stuff seen in the viewfinder (much as would occur in a real movie
camera). See Figure 10.
As well as zooming and panning, we decided it would be cool to have some way of
applying video transitions to the final content, allowing the camera to add fade effects as
well as color tints (tinting can be important in adding ambience to an animation).
Although using the color class in Flash can be daunting, the way the camera does it
makes it very easy -- all the animator has to do is apply a color tween to the camera, and
the following line (first line of camControl) will programmatically apply whatever color
tweening it sees in the camera onto the stage (in much the same way that adding a color
filter cap to a movie camera would tint the recorded movie in a real camera).
parentColor.setTransform(camColor.getTransform());When the camera is no longer needed, the animator can delete it from the timeline. The
code uses the event that occurs when a movie clip is removed in this way (onUnload) to
cause the stage to be returned to the normal size. This is performed via the function
resetStage.
It cannot be understated how useful we found the virtual camera in creating Flash animations that have the sort of pace and movement associated with mainstream cartoons and live-action movies. Although it may seem like a minor piece of code to a scripter, it is something that many animators have always found missing in Flash.
Of course, that's not a problem, because the Flash environment not only allows you to create your own content-creation building blocks, but in most cases, almost requires you to create them.
Finally, it is worth noting that, unlike a real camera, our virtual camera allows you to create distorted viewfinders. These result in stretched animations.
 Figure 9b, 10. The effects of using irregular shaped viewfinders: the image on the top shows a flattened viewfinder; the image on the bottomshows the result (a vertically stretched movie) |
Although this may seem like a minor point to some (you can keep the viewfinder proportions the same throughout the animation if you hold down CONTROL every time you scale the camera with the scale tool), and a bug to others (it would be easy to add some code to the camera to make sure that the view was never distorted in this way), we left it in because it led Adam to a rather surprising hack: distorting an image as you zoom and pan can give a very cool, faux 3D effect.
Click here, here, and here to see this effect in action.
This works because the distortion makes the scene appear as if it is mapped onto a curved 3D surface rather than onto a flat plane.
So, in setting out to create a 2D virtual camera, we seem to have also stumbled onto a hacky 3D camera as well.
Bonus!
Also, I am working on integrating the camera as a custom tool in the Flash toolbar (via JSAPI), given that it is proving to be such a useful animation tool. It just goes to show how far Flash can be altered through scripting to make the process of creating content easier for both scripters and non-scripters.
 Figure 11. A prototype camera tool (currently in production). |
Conclusion
Although many people wonder how the Flash authoring tool is used to create some of the Flash content out there, one of the big secrets is the way the authoring tool can be used to create building blocks to aid development via components, as well as optimize the authoring environment in other ways.
Despite the fact that many non-scripters find ActionScript off-putting, there is nothing wrong with that, and it shouldn't prevent them from gaining the advantages of scripting. ActionScript can easily be written and encapsulated within the workflow such that a designer or animator doesn't have to know about the code at all.
The creation of tools to change your workflow is not only useful in accelerating content creation, but can often throw up totally new techniques, as illustrated by our stumbling on a 3D-camera effect whilst developing a 2D camera. Working with Flash is like that!
Sham Bhangal is an author of and contributor to numerous books on Flash and ActionScript, including Foundation ActionScript for Flash MX, Flash MX Designer's ActionScript Reference, and Macromedia Flash MX Upgrade Essentials.
Return to the Web Development DevCenter.
In June 2004, O'Reilly Media, Inc., released Flash Hacks .
-
Sample Hack 10, A Custom Color Transform Glass (PDF), is available free online.
-
You can also look at the Table of Contents, the Index, and the Full Description of the book.
-
For more information, or to order the book, click here.
Comments on this article
Showing messages 1 through 89 of 89.
-
Wondering
2009-08-16 11:13:43 TanLiqingVivien [View]
Oh I was just wondering how did u create the 3D flaux effect..
-
Movie Clips the Camera doesn't see?
2008-02-20 16:09:06 Ramiel [View]
Is there a way to have an object OVER the camera, that isn't modified by the code of the camera? I'm trying to add scrolling text over a scene I have with the camera, and I'd love to know if this is possible! (Flash CS3 Pro, I believe I have the Flash 8 version of the camera.)
-
<3
2007-09-17 01:59:02 Quaay [View]
OMG I love this tool!
It's going to make my life soooo much easier
for a flash assignment I have. & Just general
flash usage.
I am however getting the same error as a few others.
**Error** Symbol=camFrame, layer=actions, frame=1:Line 1: '{' expected
function camControl():Void {
**Error** Symbol=camFrame, layer=actions, frame=1:Line 9: Unexpected '}' encountered
}
Total ActionScript Errors: 2 Reported Errors: 2
**Error** Symbol=camFrame, layer=actions, frame=1:Line 1: '{' expected
function camControl():Void {
**Error** Symbol=camFrame, layer=actions, frame=1:Line 9: Unexpected '}' encountered
}
Total ActionScript Errors: 2 Reported Errors: 2
I read it may be a version problem.
I'm running flash 8.
Anyone?
thanks
Ben -
<3
2007-11-20 21:08:09 darkace [View]
When I was using the code I was getting the same error messages. Then I tried making a new document in actionscript 2 vs actionscript 3 which I was in. Actionscript 2 worked out. By the way I am using Flash CS3, but hopefully this works for you or anyone else having problems.
-
Thank you so much!
2007-08-16 03:25:18 LogFish [View]
Well I read a few comments and people are missing the point here - what you've done is a great service to the Flash community by making these components available to everyone like this - it's amazing what I've done in such a small amount of time! Now I can pan, zoom and shake the camera with no hassle AT ALL - it's brilliant, my animations are going to be so much more engaging - and it's thanks to you and your generousity, sharing them with everyone when you are under no obligation to do so. So from everyone who's too rude to notice, thank you so much! Legend. Truely.
-
the colors
2007-08-06 14:53:28 deadya [View]
hey, i just dl'd your .fla file, copied and put the vcam on a new file, in attempt to test it out, but whenever the vcam is in effect, everything is black until the vcam is no longer there, how do i fix this?
-
movement speed
2007-07-27 10:44:15 Kilaust [View]
Im new to this whole site and everything, ive been working on an animation and iv'e pretty much figured out how to get the v-cam to move, but i cant exactly understand how to fix movement speed...does this involve the FPS by chance?
-
movement speed
2007-07-27 10:43:54 Kilaust [View]
Im new to this whole site and everything, ive been working on an animation and iv'e pretty much figured out how to get the v-cam to move, but i cant exactly understand how to fix movement speed...does this involve the FPS by chance?
-
Flash 5 Problem
2007-06-09 05:58:00 Barbaro666 [View]
Im A bit new to all this Scripting stuff, so i just cant figure something out
I have flash 5, so i did put on the AS for Flash 5
Still it has some errors & i just cant figure out how to repair them
They are:
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 1: '{' expected
function camControl():Void {
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 2: Statement must appear within onClipEvent handler
parentColor.setTransform(camColor.getTransform());
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 3: Statement must appear within onClipEvent handler
var scaleX:Number = sX/this._width;
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 4: Statement must appear within onClipEvent handler
var scaleY:Number = sY/this._height;
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 5: Statement must appear within onClipEvent handler
_parent._x = cX-(this._x*scaleX);
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 6: Statement must appear within onClipEvent handler
_parent._y = cY-(this._y*scaleY);
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 7: Statement must appear within onClipEvent handler
_parent._xscale = 100*scaleX;
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 8: Statement must appear within onClipEvent handler
_parent._yscale = 100*scaleY;
Scene=Scene 1, Layer=Layer 1, Frame=1: Line 9: Unexpected '}' encountered
}
(I do apologize for taking your time)
Help on this Please
Thank u!
-
cant make it work
2007-03-20 04:09:13 neverblink [View]
sorry but im very new at flash especially in actionscripting. i do not know what to do here.
i tried to copy & paste the code to my animation and made a rectangle but it did not work.
can someone make a step by step process on how to make this thing work.
oh yeah im only 16 hehe. really dont know anything about this.
thank you -
cant make it work
2007-03-30 23:29:48 InvasiveInfection [View]
yeah, i was stumped on how exactly to make this thing work, too. but it's actually pretty easy. all you have to do is go into the sample animation (the one with the waterfall) and click on the virtual camera (transparent box in the middle of the stage). then, it's just a matter of copying that virtual camera and pasting it directly onto the stage of YOUR animation. you might notice, on playback of any animation you make, the screen is black. this can be remedied by altering the brightness of the vcam from -100 to 0. then, motion tween away!!! note, however, that in motion tweening the black background can be used for fade ins and outs. duh.
-
Colour gets screwed up
2007-02-17 07:54:28 Freaktwa [View]
Hi I've got flash 8 and I've just tried your vcam. It works but when I make something go grey the camera makes it black. I don't have a clue why. Any suggestions?
-
Exporting
2007-02-13 11:36:05 braintreestudios [View]
The VCAM is an awesome tool. But now im trying to export to a video file like a .mov but along with movie clips.. the VCAM doesnt work when i do this. any solutions
-
errors
2007-01-30 11:43:51 FuzzySneaker [View]
I've got the same problem as the guy two posts below me, about the expected and unexpected brackets. I've tried moving the brackets and taking them out and doing whatever with them, but nothing's working. What do I have to do to get beyond this error?
-
A Question?
2007-01-18 02:23:52 MAHIYA [View]
Hi Sham,
The camera effect was very nice. I am new to Flash.I wanted to create waterfall for my project.Can you please help me. How did you create this waterfall? It looks so real. Can you please mail me the tutorial?
Waiting for your reply.
Thank you.
-
Error Messages
2006-11-09 20:11:06 rockheadrumple [View]
I seem to getting the same error messages another person wrote above, which outputs a message along these lines when exporting thr movie : **Error** Symbol=camFrame, layer=actions, frame=1:Line 1: '{' expected
function camControl():Void {
**Error** Symbol=camFrame, layer=actions, frame=1:Line 9: Unexpected '}' encountered
}
Total ActionScript Errors: 2 Reported Errors: 2
**Error** Symbol=camFrame, layer=actions, frame=1:Line 1: '{' expected
function camControl():Void {
**Error** Symbol=camFrame, layer=actions, frame=1:Line 9: Unexpected '}' encountered
}
Total ActionScript Errors: 2 Reported Errors: 2
I tried the camera on your Waterfall movie and it works fine when exported. I also tried to use the camera on a new project, zooming in on a single layer of paint. This also works fine. It just seems to be my current project that it wont work on. Why am I getting this message?
-
another javascript solution
2006-11-04 03:12:38 peanch [View]
Not sure if this will help - but here is one cool javascript image zoomifier - LuckyZoom - http://luckyteam.co.uk/products/LuckyZoom/
-
does camera work if swf imported to after effects
2006-10-23 06:16:28 madamblahblah [View]
Hello,
Has anybody tried to import their swf made on windows using the camera move into after effects for mac?
I am about to make my flash animation but next month will have access to a studio to output it for DVD pal with sound.
I would like to know if it's worth it to use the
camera move as it's still early stages and if it won't work will try to do camera moves another way.
thanks,
squid
-
uhhhh
2006-09-19 18:35:48 sasquatch13 [View]
Im having trouble with the vcam. My sticky dude's head turns black until my camera stops zooming out, then its the original color. Whats up with this?
-
uhhhh
2006-09-19 18:35:46 sasquatch13 [View]
Im having trouble with the vcam. My sticky dude's head turns black until my camera stops zooming out, then its the original color. Whats up with this?
-
uhhhh
2006-09-19 18:35:42 sasquatch13 [View]
Im having trouble with the vcam. My sticky dude's head turns black until my camera stops zooming out, then its the original color. Whats up with this?
-
uhhhh
2006-09-19 18:31:41 sasquatch13 [View]
html>
<head>
<title>HI</title>
</head>
<body>
Not sure what to put. Uhh..AwesomeSite.
</body>
</html>
-
3D efect
2006-09-08 05:26:49 Allia [View]
i understand that this camera can fake a 3D efect based on separate layers.
I've created a simple "shape over shape" background diferent shapes on diferent layers. I move the camera with Keys but no 3D efect.. is there something i am missing ??
-
masks
2006-08-12 03:43:55 oggycheese [View]
i put the Vcam on the top layer of my toon and then did panning and thing and when i exported it i noticed that it ignores the masks underneath, sometimes i started the Vcam at the edge of my cartoon and panned across to the other edge but you could see things outside the frame that i had masked. any way to stop this?
-
Any more camera movement tutorials
2006-07-18 21:27:12 Eddee14 [View]
Thanks for the camera dude. SWEET!!!! Can you point me in the direction of some tutorials showing how to do some major camera moves, or should I just play around and see what I come up with?
-
fla file
2006-07-17 14:12:32 Soliloquy [View]
Hi,
Thanks for the camera, but I can't seem to download the fla file... all that I get is a txt file full of jargon... any suggestions? -
fla file
2006-07-20 15:38:42 Soliloquy [View]
I don't know if you changed anything, but it downloaded properly. Thanks again for the camera. -
fla file
2006-07-18 10:36:44 Soliloquy [View]
I should add that the txt file shows up in the web browser, not as a download. I've tried to download it on Safari and Explorer, on a Mac and a PC.
-
Rotation and blur rendering
2006-02-17 21:44:52 Masterpingoo [View]
Is it possible to update the code and allow the camera to make rotations, blur the picture as if someone try to make the focus...
-
Camera Bogs Down Movie
2006-02-06 15:20:55 mrmyers [View]
Hello,
Are there any known issues with the camera slowing down the play rate of the movie itself. Just by havig the camera present in the movie (without adding any scaling or repositioning) the frame rate of my movie drops significantly. As soon as I take the camera off of the stage completely, the movie plays as it should. There are several functions in the code that depend on the setInterval command. Would this be culprit? Thank you for your assistance. -
Camera Bogs Down Movie
2006-06-25 17:47:27 vaisacht [View]
-
Window size
2006-02-04 05:32:11 KKSlayer [View]
Hi, the camera works great, but the problem i get is that if i choose any window size for the swf except of 720x480, the view screws up. I've only tested this with sprites, so that may be the problem, but it's really iritating that i must have the window size 720x480 to get it to look good. -
Window size
2006-02-04 06:09:40 Sham_B [View]
It sounds as if the camera is assuming a standard screen size (4:3). IF you want to use any other size ratio, alter the size ratios of the camera symbol (edit the symbol itself rather than alter an instance on the stage) to match.
S
-
VCamera
2006-01-05 15:46:35 toonboy1 [View]
Hi,
I tried to use the Vcam on my Flash animation but i couldn't get it to work. I downloaded the river example, and copied the Vcam from your library. When i tried to test movie i get this error message:
**Error** Symbol=camFrame, layer=actions, frame=1:Line 1: '{' expected
function camControl():Void {
**Error** Symbol=camFrame, layer=actions, frame=1:Line 9: Unexpected '}' encountered
}
Total ActionScript Errors: 2 Reported Errors: 2
Can you please help me....i was really excited that you can do animated zoom ins and outs with Flash.
Thanks
Wayne -
VCamera
2006-03-28 05:11:34 robincb [View]
i can't open the .fla example in flash 5 or MX :S
in flash it saysfailed to open documentand in MX it saysunexpected file format
can someone help me? the script on the page gives errors too *is crying* -
VCamera
2006-02-04 06:06:48 Sham_B [View]
Are you using the correct version? there are different versions depending on which version of Flash you are using. Read the threads below and you should be able to find a link for your version (I suspect you may be trying to run the version for Flash 7 in Flash 6).
S
-
Only one problem
2005-11-30 23:16:55 MaticooL [View]
I made the components from swarmEnvelope and Camera and they moved and became very ugly and moved outside of the area, what should I do? -
Only one problem
2005-12-01 03:23:09 MaticooL [View]
Well, the problem is the resizing of component, when I resize the camera component or the swarm component, the component resizes but the content stays the same, why is that happening?
-
Wow
2005-11-30 21:47:31 MaticooL [View]
The swarm and the camera components help me a lot, thanks, the effect are just awesome!
-
pause and play button.
2005-11-14 10:58:05 cybexy [View]
The vcam is great!!! I've started using it in all of my newer animations. The onlt problem i've had, (apart from the rotation problem) is that sometimes i like having a pause and play button at the bottom of my screen. However, with the vcam changing the area seen on screen, i haven't yet found a way to keep a pause/play button in the same place at the bottom of the screen. Any thoughts on how to stop this?
-
Where to Download Virtual Camera component?
2005-09-23 13:26:52 silverone [View]
Hello!
Where can one download this Virtual Camera compnonent?
I don' t see a link in the article... Am I missing it?
My eyes are going bad I know but....where is it?
Is it Free or $???
I'd be willing to pay for this. If it works, it is a great tool for a Flash arsenal.
Is it Mac compatible, please say it is.
-
Where to Download Virtual Camera component?
2005-09-24 13:09:00 Sham_B [View]
http://www.oreillynet.com/javascript/2004/08/17/examples/waterfall02.fla. this fla contains the component in the library, so if you need it in another fla, all you have to do is copy it across.
And yeah, its free :)
S
-
Where to Download Virtual Camera component?
2005-10-18 11:01:46 silverone [View]
Many thanks dude!
;)
-
fading?
2005-07-07 06:23:34 shether [View]
how do i fade with it? -
fading?
2005-07-19 17:26:05 Doki [View]
Use the brightness fucntion and apply it to the neccessary keyframes.
-
Very First Frame
2005-06-28 17:24:48 Doki [View]
Ok the Camera is great but when I insert it into a scene it seems to work for the whole scene APART from the very first frame, giving a rather annoying flicker effect. (I am using the flash 5 version)
-
using final swf as loadmovie
2005-06-24 10:25:10 digisam [View]
this cam this is great, but when i load the swf into another movie, it takes the parents moves stage size and fills the screen
anyway to restrict the cam to not scale 100% of the stage and only set cordinates?
thanks
sam
-
The camera's not zooming in.
2005-06-21 05:05:43 15FloppyDiscsInAWetCave [View]
I'm useing the Flash 5 version of the camera and I put it on my movie screen and scaled it down to something that I wanted to zoom in on, but when I tested the movie with control>test movie It didn't zoom in, It showed the entire movie. My question is of course, how do you get the camera to zoom in because as far as I can tell, I haven't been able to make it do anything. -
The camera's not zooming in.
2006-06-25 18:22:59 vaisacht [View]
, , , ,, , , ,
, , , -
The camera's not zooming in.
2005-06-21 15:06:46 15FloppyDiscsInAWetCave [View]
I do appreciate the v camera though don't get me wrong. I'm extreamly thankfull to you for it. I just can't get it to work. -
The camera's not zooming in.
2005-06-21 15:49:32 15FloppyDiscsInAWetCave [View]
I just read a post down below about how to get the camera to work for flash 5. I read the instructions and I changed the movie perameters to 780 and 420. It didn't work. Also I did test the movie from the browser instead of the cotrol menue. I couldn't understand the instructions. Could you possibly give simple step by step instructions for getting the camera to work for flash five once you have it in the library? If you could It would be greatly appreiciatied. I've been working on this for days.
:D
-
Camera
2005-06-18 04:00:42 J.Johnson [View]
Well I must amit that it is really great thing. And useful of course. And I like the idea of making a 'camera' button in Flash interface.
But it will be good if camera could for example rotate. I tried to make her rotate, but it didn't work (the was screen just stretching).
So let think about that. Noneless, great work!
Johny -
Camera rotation
2005-06-18 04:07:04 J.Johnson [View]
Oh, I've just noticed that this topic has been already discussed many times... so sorry for repeating.
(and moreover, I have a misspelling in -admit-) ;-) -
Camera rotation
2005-11-04 05:00:31 radja [View]
i don't see topics about camera rotation John ?
-
camera
2005-06-11 23:45:08 caseyspaos [View]
I downloaded the waterfall file and it is an amazing little tool! (ok component) How can I use it in my animations? I am not good with action scripting. Is there an easy way to do it? I was naive enough to think that simply dragging the camframe symbol into a new layer would make it function. -
camera
2005-06-12 03:56:08 Sham_B [View]
yeah, you *are* correct - you should be able to just drag it into a keyframe. Thats why the article is called 'ActionScript for designers'.... a designer can use an ActionScript effect (the vCam) encapsulated in a comonent without knowing anything about ActionScript.
All you do is use the camera in a tween - whatever appears in the camera rectangle will be what appears in the final animation.
If it doesnt work, make sure you are using the right version for your version of Flash (there is a Flash 5, Flash 6 and Flash MX 2004 verson, see the previous posts for the Flahs 5 and 6 download links).
You could also open up Adams waterfall effect and change the tweens to create new transistions. thats probably a good idea, because starting with an example that works is probabaly the best way to see how it all hangs together.
HTH
S
-
About the flies component...
2005-05-21 09:01:05 Stryker [View]
I'm using the component in Flash MX (not 2004) and the flies stick around on frames that I don't have the component in. Is there any way to fix this? -
About the flies component...
2005-06-10 05:55:56 Sham_B [View]
ak! I was messing about with the download files and must have put old files up by mistake. Apologies for this.
The files have been updated with the original (correct) MX versions, so the issue (& moreimportantly, the flies) should now disappear
S
-
interactive camera ?
2005-05-03 16:33:07 richardbobcat [View]
This is an excellent piece of work (and simple too). Would it be possible to make the camera interactive for the viewer ?
I want to make a short animated scene which the viewer can pan around and zoom in and out – something I was guessing was impossible in Flash. -
interactive camera ?
2005-05-03 16:52:15 Sham_B [View]
Yes it would be possible.
Anything can be used to scale or reposition the camera... in the example, we use tweens, but you could just as easily use (say) an actionscript function that took input from the mouse position for panning and mouse drag (eg drag the mouse up-down) for zooming.
If enough people have a use for this and request it, I'll even write and post the code. Im guessing it would be useful to allow the user to make their own directors cut out of an animation, perhaps saving their camera positions into a shared object, or in making parts of an animation interactive.
S -
interactive camera ?
2008-01-17 21:05:23 jn_casanova [View]
I could make great use of an interactive camera too!!!
The way I'm making that right now is creating buttons which scale symbols and the symbols have a drag option to pan the camera, but the interactive camera would be a great solution! -
interactive camera ?
2007-01-15 00:17:55 Black_Vapor [View]
This is exactly what I'm looking for. I'm currently working on an interactive animation that will require you to zoom in on different areas while other things are going on. Having the camera work here is great.. but I'd like to have the user be able to zoom in and out and move the camera around for a more interactive feel. -
interactive camera ?
2005-10-20 11:37:56 Murk280 [View]
I could most definately use that interactive camera tool. Not sure if you ever actually made it and posted it, but if you did, I'd love to have the link...
-
Thanks a lot
2005-04-14 02:10:40 mkamler [View]
Thanks a lot Sham! Once again you come up with an idea that'll change the way I work on flash animations!!! Fantastic idea - and simple, too...
In your text, you said you will try to make this Vcam a component, available from the tools palette - did it work?
I have read your Flash Hacks book (another mind-opener, by the way...)and in it you mentioned working with Adam Phillips on a book covering interface design and animation... Since the two subjects are the two things where I use Flash the most, I was wondering - is this book available somewhere?
once again - thanks...
Mikolaj Kamler -
Thanks a lot
2005-04-14 06:15:18 Sham_B [View]
thanks for the kind works :)
I found that the vCam isnt really a 'tool' (ie it doesnt change or create stuff on the stage like, say, the oval tool) so in the end I figured that it was best to leave it as a component.
Myself and Adam are writng a book for O'Reilly about Flash design, and it is due to come out for a Flash 8 release.
For those who can;t wait, there will soon be tasters of the content of the book hidden on Adam's site, http://www.oohbitey.com/.
S
-
Color
2005-02-09 08:41:01 Deboche [View]
I'm sorry if I'm too stupid but I don't get what you mean by color tween. I checked out the flash to try and figure out how that black fade in and white fade out were made but I didn't get it. There's a motion tween that changes the camera's color? -
Color
2005-04-14 03:23:06 Sham_B [View]
Hit F1 to bring up the help panel. click the search icon and type 'changing the color' as the search string. Information on color tweens should appear (second search result)
A direct link on livedocs is here: http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00000183.html
To change color over a tween, select the second keyframe in the tween and then apply a color effect using the color dropdown on the properties inspector, as described in the help doc pages above.
HTH
S
-
Camera
2005-01-30 15:20:21 Solidus [View]
Hi... I've tried that camera but... When I test the movie it appears all black :s... I'm not realy good at action script... Is it needed to change anything on the script?? -
Camera
2005-01-30 23:47:02 Sham_B [View]
The links in the tutorial are for for Flash MX 2004, and the file is not backwards compatible with Flash MX or Flash 5. You can get a Flash MX or Flash 5 version here.
http://www.futuremedia.org.uk/ORA/FMX_files.zip
http://www.futuremedia.org.uk/ORA/F5_files.zip
HTH
S
-
Additional AS Placement in the VCAM
2004-11-09 21:13:40 eff-werks [View]
Sham,
I wanted to say thanks for the update and I did send Macromedia my request in regards to the AS export for video issue. Now I have another problem. I'm looking over the AS for the VCAM and I'm essentially trying to create a fisheye look to the viewer using typical convex magnifications and or masking techniques. (The masking techniques work best on a static image. So it doesn't really work here.) What I'm really trying to do is figure out the best place within the VCAM AS to place a convex distortion to give me the desired effect. Any suggestions? I really appreciate it. Thanks.
Kevin -
Additional AS Placement in the VCAM
2004-11-10 09:36:51 Sham_B [View]
Hi Kevin.
As you probably already know, creating a true convex distortion is impossible in Flash, but it can be emulated. The first question is exactly how you would emulate it.
A fisheye magnification is one with a high magnification at the center, and this falls off quickly the further you get from the center. You could emulate this by using a series of donut shaped masks, that build up to form a solid circle (NB - You would have to use hack 20 to create the donut masks, and the effect will become more realistic - and slower - the more donuts you use).
You could make the magnification of the image seen through each mask inversly proportional to the _width of each masking donut shape, and that would give you your fisheye distortion (I would start by using something like k-thisMask._width, where k is a constant... Im not sure what it would be, but Im guessing it would be something of the order of the _width of the final fisheye or the _width of target (see below for what 'target' is).
You could put this code anywhere in the vcam script, but that is not the real issue. The issue is that for the fisheye effect to work, you have to create multiple versions of the thing you are applying the fisheye effect to (in fact, you would have to duplicate once per donut).
I think this effect is actually much closer to hack 36, and you would be much better off using that as a guide. In fact, having just looked at 36 (Panoramic images), what you want to do will be fundamentally *very* similar to that.
finally, here's a summary of some points I quickly scribbled down when thinking about this effect...
1. You cant create what you want as a simple drag and drop vcam that operates on _root (you cant duplicate _root for one thing). Instead, you would need to apply it to a movie clip which I will call 'target').
2. The effect would work by using a series of donut masks applied to multiple versions of the target (which you would have to duplicate, one per donut).
3. Each masked image would be in the same position, but would have to be scaled by an amount that is inversionally proportional to the _width of its mask. when you view all the seperate image 'donut slices' together, you will see the fisheye effect
4. The effect would probably really slow down for anything except a static bitmap or static vector, and the effect will also look better the more donut slices you use.
5. the panoramic hack does something very similar. I suspect you would use that code as a starting point, the major difference being that you will be changing the shape of the mask.
6. An alternative way to do the effect would be to use vertical strips (as does hack 36) to get the fisheye distort effect in the x axis, then mask the result again with horizontal stips (to get the distortion in the y axis. I thought about doing it that way, but discarded it because I felt it would probably be too processor intensive.
7. Athough the final effect will be processor intensive, the new Flash player (FP8) looks to be much faster than previous versions - see http://www.moock.org/blog/archives/000146.html - and seems to be geared to this kind of effect.
Oh, and finally, I havent actually created this effect, but this is my best guess based on a quick look at it (I basically looked at it in the same way as I looked at hack 25 (deconstucting the page turning effect). I know a fisheye can be done because I have seen it (can't remember the URL, will post if it comes to me).
HTH.
S
-
fisheye emulation
2004-12-29 20:12:35 mike9292 [View]
For a quick fisheye simulation, see this tutorial:
http://www.kirupa.com/developer/mx2004/liquify.htm
it's written for flashers of all skill-levels but the code is solid and the basic technique is how to create a fisheye in flash. -
Additional AS Placement in the VCAM
2004-11-10 09:37:55 Sham_B [View]
PS - sorry for all the spelling mistakes. I was writing as fast as I was thinking :)
S
-
Export Issues.
2004-09-28 00:50:49 eff-werks [View]
I have been using the Camera and enjoying the vesitility of it. Even with the limitations of the rotation it provides a more believable shake effect. The only issue I am seeing now is that in the exporting of the file to anything other than a .swf, the camera fails to work. It acts like a moving componant and leaves me to have to go back a retween everything. I have yet to find a solution, and wonder if there is a modification in the code that could allow for exporting into the other file formats, like Quicktime, and the like that will allow me to put my work onto my student reel. I've been reading up and refreshing my own scripting skills and I think it's possible to script an "override" that will make the camera the default viewer in an export, but I wanted to ask to be sure. Thanks for a great tool.
Kevin -
Export Issues.
2005-04-01 08:41:10 Sham_B [View]
Try this link for an article on the Broken Saints Flash to DVD project. It still cant be done in flash, but the article talks about one possible workflow
http://www.macromedia.com/devnet/mx/flash/articles/flash_dvd_video.html
regards
S
-
Export Issues.
2005-02-23 11:16:49 chadconger [View]
Try exporting it as a swf then importing that swf in a new flash document. After you do this it should be frame by frame. Now you can export it as a quicktime and still have your camera effects. -
Export Issues.
2004-09-28 07:43:09 Sham_B [View]
hmm. Its good to see that so many people are using the camera, but think I should really add rotation functionality to it! When we first developed it, we (myself and Adam) didnt really consider rotation as something that would be required by most animators... or at least, I dont think I listened to Adam enough when he asked for it!
As to exporting for video, there isnt really any easy way to export the effects of ActionScript, as you have already found out. This IMO is one of the major failings of Flash as a general animation authoring tool - it relies on ActionScript for much of its versatility, but the effects of ActionScript can only really be seen in a running SWF.
The next revision of Flash ('Flash 8') will pay special attention to the issues and concerns of designers... see http://www.xanga.com/item.aspx?user=fwak&tab=weblogs&uid=130664522 for the lowdown.
I would strongly recommend all animators/designers out there to make concerns like 'Cant easily export the effects of AS into Flash content destined for video and broadcast quality animations' (and why it is so important to animators) known to the Macromedia Flash dev team. You can do this through the form at http://www.macromedia.com/support/email/wishform/
Regards
S
-
Flash MX files
2004-09-03 02:42:51 Sham_B [View]
I have put Flash MX versions of the files for this article in a zip available at http://www.futuremedia.org.uk/ORA/FMX_files.zip, (350k)and will hopefully add a http://www.futuremedia.org.uk/ORA/F5_files.zip (Flash 5 version) in the next couple of days. I dont intend to do a Flash 4 version :D
Because of requests for Flash MX compatible hack files for the Flash Hacks book, they are now available for download as well as the Flash MX 2004 files. You can download the Flash MX zip (10.4Mb) at http://examples.oreilly.com/flashhks/
This means that the Flash Hacks book now fully supports Flash MX as well as Flash MX 2004.
S -
Flash MX files
2004-09-14 03:09:10 garylarrson [View]
If you are still working on a flash 5 version i am sorry to be annoying, but i would love to be able to get my hands on the camera but at this moment in time i dont know much about actionscript and the link to the file doesnt work
my appoligies again,
gary -
Flash MX files
2004-09-28 07:58:55 Sham_B [View]
whoops. I will upload it today, so it should be up within a few hours of this post.
S -
Flash MX files
2004-09-28 11:03:14 Sham_B [View]
the Flash 5 compatible file is now up at http://www.futuremedia.org.uk/ORA/F5_files.zip.
Flash 5 doesnt support the Stage class, which the camera uses, so instead you need to define two variables on frame 1 of the main timeline as follows:
// These lines MUST be in the root timeline.
// Equate them to the stage width and height
// (Control+M or double-click on the frame rate
// value below the timeline to see them).
//
stageWidth = 720;
stageHeight = 480;
You also have to copy across the movie clips camFrame AND dummy into any FLA you want to use the v-cam in (the reason you need dummy is noted below).
The other problem with Flash 5 is that it doesnt support Flash MX/Flash MX2004 style events (i.e. JavaScript style callbacks), which I guess would be the main problem in converting the code over to Flash 5. Here's how I've solved this issue (there are other ways to do this, but this code keeps the script looking as much like the Flash MX 2004 version as possible).
In the camera, there is a second movie clip called dummy. Attached to this movie clip is the following code...
onClipEvent (load) {
// Initialize the v-cam...
//
// target and camera are the paths to the
// controlled timeline and camera clip respectively.
target = _parent._parent;
cam = _parent;
// make camera frame invisible
cam._visible = false;
// Capture stage parameters
sX = _root.stageWidth;
sY = _root.stageHeight;
cX = sX/2;
cY = sY/2;
// create color instances for color
// transforms (if any).
camColor = new Color(cam);
parentColor = new Color(target);
}
onClipEvent (enterFrame) {
// Make the stage move so that the
// v-cam is centered on the
// viewport every frame
parentColor.setTransform(camColor.getTransform());
scaleX = sX/_parent._width;
scaleY = sY/_parent._height;
target._x = cX-(cam._x*scaleX);
target._y = cY-(cam._y*scaleY);
target._xscale = 100*scaleX;
target._yscale = 100*scaleY;
}
onClipEvent (unload) {
// If the v-cam is ever removed (unloaded)
// the stage, return the stage to the default
// settings.
resetTrans = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
parentColor.setTransform(resetTrans);
target._xscale = 100;
target._yscale = 100;
target._x = 0;
target._y = 0;
}
This is essentially the same code as the MX 2004 code, except that I use the onLoad to initialize the camera (in the MX 2004 this is done via a script on frame 1 of the camera timeline).
I've only tested the Flash 5 version for a short while, but it seems okay.
Remember, to see the finished effect, test the SWF in the browser (F12) rather than in test mode (Control+F12).
HTH
S
-
Will it work in MX?
2004-09-02 19:32:44 Ramiel [View]
I have Flash MX, and I tried opening your FLAs and they wouldn't open. Did you develope these for MX 2004? Would I be able to recreate them in MX by using the methods you described? -
Will it work in MX?
2005-01-30 23:49:31 Sham_B [View]
You can get a Flash MX or Flash 5 version here.
http://www.futuremedia.org.uk/ORA/FMX_files.zip
http://www.futuremedia.org.uk/ORA/F5_files.zip
S
-
Permission to use the components
2004-09-01 03:43:41 Sham_B [View]
Hi folks.
I have had a large number of emails about this article in the last few days asking whether it is okay to use the components in commercial work. The following may be useful information if you want to do this;
You may use the components described in this article as part of your own commercial and personal web designs.
You may use the components described in this article as part of your own commercial and personal web designs without asking me, and without attributing me in that work if you so wish.
You can see the animation that the waterfall example is taken from at http://www.biteycastle.com/prowlies.html
The use of the VCam in this animation is rather subtle at times (as it should be!) so you may have to play the cartoon a couple of times to spot all the places it is used.
On another subject, if you feel that more animation specific components should be available (and my feedback from this article suggests you do), you can make this known to Macromedia (http://www.macromedia.com/support/general/ts/documents/feedback.htm). I know that as of this writing (September 2004), Macromedia are actively looking at what to put into Flash 8, so now is the time to have your say if you are an animator!
Regards
Sham B
PS - I have seen the previous posts on this board, and will respond to them ASAP.
-
flash 5 version
2004-08-30 09:17:35 garylarrson [View]
Is there any chance you could email me a flash 5 version of the camera? as i cannot open the flash MX file
thanks alot,
Gary -
flash 5 version
2005-01-30 23:51:09 Sham_B [View]
You can get a Flash 5 version here.
http://www.futuremedia.org.uk/ORA/F5_files.zip
S
-
Action Script camera
2004-08-28 21:53:45 MC_Booga [View]
I was messing around with the camera, and I found that you could not do camera rotations with it. I tried to make it so that it would, but so far I've been somewhat unsuccessful. I can get the scene to rotate, but it only rotates at the (0,0) coordinates on the stage and the scaling weirds out. I cant figure out what to do to make it work, and all my attempts have not worked out very well.
This is what I've added to the camControl function:
r = this._rotation;
_parent._rotation = -this._rotation;
_parent._x += sX*(r/180);
_parent._y += sY*(r/180);
/* this should be moving the stage so that when it rotates, it's moved to the center of the stage instead of flying around the upper left corner. It works a little, but weirds out when the rotation variable wraps around to -180. */
