Today I wanted to add mouse-driven zoom and pan functionality to a pure AS3 project - something like the Google Maps interface. I was surprised that I couldn't find a good package or library to do this already - I'm using FlashDevelop rather than Flash CS3, so the nice VCam tool available as an FLA is no use.
There's nothing very complicated involved in implementing zoom/pan, although it can be fiddly and time-consuming to get right, but since zooming and panning are pretty common things to want to do I wondered if anyone could suggest a 'correct' way to do this in the Flash world, or a good library available that I haven't been able to find.
I found exactly what I was looking for in the flare library's PanZoomControl:
Interactive control for panning and
zooming a "camera". Any sprite can be
treated as a camera onto its drawing
content and display list children. To pan and zoom
over a collection of objects, simply
add a PanZoomControl for the sprite
holding the collection.
var s:Sprite; // a sprite holding a collection of items
new PanZoomControl().attach(s); // attach pan and zoom controls to the sprite
The mouse controls are also implemented as you'd expect:
Once a PanZoomControl has been
created, panning is performed by
clicking and dragging. Zooming is
performed either by scrolling the
mouse wheel or by clicking and
dragging vertically while the control
key is pressed.
You could use a 3D library such as Papervision3D or FIVe3D. Then just move your camera based on different mouse events/gestures. Or use the built in z-axis in FlashPlayer 10 to get the zoom effect.
Related
The application I am writing is not a game, but does require many of the features one would use in a game... displaying a 2D scene, moving the camera to pan and zoom, rotating or otherwise animating objects within the scene. But the display of the scene will be controlled via numerous regular windows controls.
The best comparison I can think of right now is a level editor. The majority of the user interface is a standard window with panes that contain different controls. The scene is contained in another child window. When the user makes adjustments such as camera location, the scene responds accordingly.
So far, everything I've seen about cocos is geared around a single window. Is it possible to embed a scene into a child window as I've described?
You can add your custom layer to your main scene using Director::getInstance()->getRunningScene()->addChild(...) function
I am making a game in AS3 for a school project (using the AIR api). I have about a year's worth of experience in AS3, so i would say i'm proficient but not an expert. Anyway, i have never attempted to do sprite animations in AS3 and i'm not quite sure how to approach it.
If i create a list of bitmaps and call addChild() and removeChild() to display each frame of the animation, it would affect the framerate as these functions are not very efficient (i have tried this before and it tanked my framerate if i had too many animations going at once). I have also tried creating a list of BitmapData objects, adding a bitmap to the display list, and then pointing it to a different BitmapData each frame, but this does not seem to work at all.
So what is the best way to do this? In XNA, for example, i would create a sprite class that draws to the screen using a sprite batch, then i would create a list of sprite objects and cycle through them to create the animation. Is there any way to achieve a similar result in actionscript?
First (simple) method: you can just use multi-frame MovieClip for animation. Put an image in each frame, put a MovieClip on the stage and that's all. You can control this animation using play(), stop(), gotoAndPlay(), gotoAndStop(). It will work without much problems for a generic platform game (I did that myself long ago).
Second (advanced) method: use bitmap blitting. For each animation, create a bitmap image that holds each frame of the animation. Use this image as a source for copying pixels into your current animated object. You just need to copy a particular rectangle area inside a source bitmap that corresponds to the current frame.
The actual blitting happens here
destinationBitmapData.copyPixels(sourceBitmapData, areaRectangle, destinationPoint);
Where destinationBitmapData is your "canvas" that you're blitting to; sourceBitmapData is the source image holding all animation frames; areaRectangle is the Rectangle inside the source image defining which area to copy; destinationPoint is left-top coordinate of the copy area in your canvas.
The destination canvas can be just one small object (like your game character that is moving around) or the entire game screen with all objects. I.e. instead of blitting and adding each object separately, you can just have one big canvas and blit any necessary parts directly to it.
That said, there is already a number of various ready-made engines that use blitting and even advanced techniques like 3D acceleration for 2D sprites.
One of them is Starling.
this is a newer version to a question i have asked before but have not received an answer to.
I am developing a mobile AIR app with many animations and tests have shown that using bitmaps and GPU rendering give the best performance across all mobile models. I receive normal vector animations from the app's artists, and have built a system which loops through these animations at runtime and draws the content into bitmapdatas.
my concern is looping through the movieclip's frames. If I have these lines of code:
for (var i:uint=1; i<mc.totalFrames+1; i++) {
mc.gotoAndStop(i);
bitmapData.draw(mc);
}
I can't be sure the frame got "constructed" before being drawn, and my tests with an Android tablet prove this right - sometimes frames aren't drawn.
This mc is off the display list obviously (we dont need to render to the screen). So is there a way to make sure the frame has been built before drawing it to a bitmapdata? (and waiting for FRAME_CONSTRUCTED, EXIT_FRAME, etc.. is obviously slow and unneeded)
any ideas?
thanx
Saar
more info to clarify:
this is a children's book. each page has animations in it. all these animations are vector animations in timelines in FLAs I receive from the devloping artists (not the users).
Every page has an FLA which i publish to a swf.
what i actually do is replace vector animations in loaded SWFs with bitmap version of them.
At app runtime, upon each new page, i load the swf, go though all the animations in it (looping through the content's children) and each movieclip i rasterize into array of bitmapdatas.
My custom "Bitmap Movieclip" places on the displaylist a replcaement bitmap for each movieclip, and on ENTER_FRAME i switch the bitmaps' bitmapdatas from the array.
this gives very hight performance
I'd suggest use a splash screen, and place your MC to be converted to the bitmap to the stage first, then draw to your bitmapData. Several issues had me force to put a DisplayObject being drawn to the stage before actual drawing once already, so this might be a quick fix for you too.
var splashBD:BitmapData=new BitmapData(stage.stageWidth,stage.stageHeight,false,0xffffff);
var splashBM:Bitmap=new Bitmap(splashBD); // draw a thing as needed here
addChild(splashBM);
addChildAt(MC_to_convert,getChildIndex(splashBM));
// then advance it by frames and draw.
sorry MY BAD
waiting for FRAME_CONSTRUCTED is the answer
I am trying to make it possible to display and interact with Java Swing components on top of a Java3D canvas. I am displaying the components by painting a transparent JPanel to a buffered image, and then painting that buffer over the canvas using J3DGraphics2D.
What I can't figure out is how to forward mouse events to the swing components in the JPanel.
I want all keyboard and mouse events on the Canvas3D to be dispatched to the JPanel, and then fall back through to the Canvas3D if they aren't captured by any swing components (e.g. the mouse isn't over any of them).
I tried calling Container.dispatchEvent(AWTEvent), but it doesn't successfully dispatch the events to the proper components, even when for example the mouse cursor is right over a button in the Container.
Does anyone know a way to do this? It should be possible.
At long last, I figured it out! It's already been done -- use JCanvas3D and a JLayeredPane. This is the opposite approach to rendering the Swing components in postRender()-- JCanvas3D renders into an offscreen buffer, and then paints to the screen with AWT, creating a lightweight canvas that interacts properly with components in the JLayeredPane, even if they are transparent.
One thing to watch out for -- JCanvas3D redirects all input to the offscreen Canvas3D, but at first my Orbiter didn't work like it had with a heavyweight Canvas3D. All you have to do is add mouse & key listeners to the JCanvas3D, because AWT won't even deliver those events if there are no listeners registered for them.
Im looking for an easy to use method of assigning drag behavior to multiple objects (images, shapes etc) in canvas. Does anyone have a good way or know of any libraries for dragging objects around? Thanks
Creating your own mouse events takes a little work - ideally you should either create or use some kind of mini-library. I'm thinking of creating something like this in the near future. Anyway, I created a drag and drop demo on jsFiddle showing how to drag images - you can view it here.
You can create draggable images like this:
var myImage = new DragImage(sourcePath, x, y);
Let me know if you have any questions about this. Hope it helps.
EDIT
There was a bug when dragging multiple images. Here is a new version.
Another thing you might want to check out is easeljs it sort of in the style of AS3... mouseEvents dragging etc...
The HTML Canvas—unlike SVG or HTML—uses a non-retained (or immediate) graphics API. This means that when you draw something (like an image) to the canvas no knowledge of that thing remains. The only thing left is pixels on the canvas, blended with all the previous pixels. You can't really drag a subset of pixels; for one thing, the pixels that were 'under' them are gone. What you would have to do is:
Track the mousedown event and see if it's in the 'right' location for dragging. (You'll have to keep track of what images/objects are where and perform mouse hit detection.)
As the user drags the mouse, redraw the entire canvas from scratch, drawing the image in a new location each time based on the offset between the current mouse location and the initial mousedown location.
Some alternatives that I might suggest:
SVG
Pure HTML
Multiple layered canvases, and drag one transparent canvas over another.
The HTML Canvas is good for a lot of things. User interaction with "elements" that appear to be distinct (but are not) is not one of those things.
Update: Here are some examples showing dragging on the canvas:
http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
http://www.redsquirrel.com/dave/work/interactivecanvas/
http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html
None of these have created a separate library for tracking your shapes for you, however.
KineticJS is one such Javascript Library that u can use exclusively for animations
Heres the Link html5canvastutorials
Canvas and jCanvas
You're definitely gonna want to check out jCanvas. It's a super clean wrapper for Canvas, which kicks open a lot of doors without adding code complexity. It makes things like this a breeze.
For example, here's a little sandbox of something close to what you're after, with dragging and redrawing built right in:
Drawing an Arrow Between Two Elements.
I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality.
Hope that helps others, like me.
JP
As you create new objects whether they are windows, cards, shapes or images to be draggable, you can store them in an array of "objects currently not selected". When you click on them or select them or start dragging them you can remove them from the array of "objects not selected". This way you can control what can move in the event of a particular mousedown event or mousemove event by checking if it isn't selected. If it is selected it will not be in the "not selected" array and you can move the mouse pointer over other shapes while dragging shapes without them becoming dragged.
Creating arrays of objects you would like to drag also helps with hierarchy. Canvas draws the pixels belonging to the foremost object last. So if the objects are in an array you simply switch their instance as in element in the array say from objectArray[20] to objectArray[4] as you iterate through the array and draw the objects stored in the array elements you can change whether other objects are seen on top or behind other objects.