Stupid question I guess, but I haven't managed to find the answer yet :)
If I change some value for a parent sprite, the same value will affect all of its children. So if I set alpha or width on the parent, the child will automaticly get the same value.
Is there some way I can prevent that from happening?
Short answer: no
Longer answer: for alpha there is no work around that I know of. For width, you could hack something to work so that the child clips looks to see what the parent scaleX is and then increases its own scaleX if it is less than one but this isn't something that I'd do.
The best way to do this is to create a holder clip that contains no graphical assets but you can use to move other clips around together.
It seems that doing alpha = 1/alpha of parent works fine. That means setting the alpha to higher than 1 on the child. At least this work with AS3/Flash 10.
If You want not to avoid changing alpha of the children at all (like David suggested), but to prerender sprite before it's faded (so You can fade out a human without showing his bones), then set blendMode = BlendMode.LAYER;
This is not available on GPU rendering, so on mobile devices You probably need to create a bitmap, draw the sprite to the bitmap and then fade the bitmap. Maybe it's even easier, as AIR has some upgraded feature of cacheAsBitmap (it's named differently, that is, You have both cacheAsBitmap and the other one I'm talking about), that maybe will work, but I don't know as I don't use AIR.
if you are after the dimensions then then you can simply get the inverse of the parent transformation matrix and apply it to the child, there is a pretty good tutorial here for example:Transoform Matrix.
see applications -> Shaking Smilies section for what you are after.
other things like alpha i dont know a way to get around.
Related
How do i know if keyframe is blank or not with actionscript 3
Thanks for help.
If you mean a frame in a layer in Flash IDE, the one with white circle, the answer is you can't. Layers in AS3 are not saved. They are merely converted to depth order.
What you can find out is if this particular frame doesn't contain any children (when all layers are combined) as it was already mentioned using numChildren property. If you have any shapes, bitmaps or movieclips on stage they all will be listed as children.
But you also might have something drawn in your sprite's graphics object which makes it non-empty in some way. If you want to check that you have to draw it in a BitmapData and examine its content.
As far as I know there is no real concept of keyframes in AS3, so I think that would be hard. You might be able to play to the frame you want to check, and see if getChildAt(0) throws a RangeError - but that is hackish at best, and probably won't work for content that isn't movieclips.
You can use numChildren getter on target clip to know how many clips is inside at moment .
EDIT:
You can also try use getBounds or getRect functions and when Rectangle width and height are equal 0 , thats mean clip is empty.
this.context.drawImage(myimage, 0, 0);
Putting the image on the canvas is pretty well covered all over the web.
But how do I remove it after it's there?
Canvas is an immediate drawing surface. This means that you execute a command on it (drawImage or fillRect) and it does that command, and it doesn't give a damn what has just done. There is no undoing of something.
You had a hard time searching for it because there's no such thing as "removing" for a Canvas. All it knows is that it has some pixels of some color from somewhere. It has no idea where.
To simplify a bit, there are generally two ways:
Clear the entire canvas, and draw everything all over again EXCEPT the one image you do not want drawn
Use two canvases, one that only has the image and one with all the other stuff. Clear this canvas with clearRect(0,0,width,height) and you're done.
You'll notice in 1. that you will probably have to start keeping track of the things that you draw on canvas if you want some of them selectively removed or repositioned. Instilling object persistence, or rather turning canvas from an immediate drawing surface to a retained drawing surface, is something that a lot of canvas libraries do. If you want to do it yourself, I've written a few tutorails to help people get started.
If you want to look into libraries, take a peek at easel.js. It's pretty learnable.
Option 1:
Draw a rectangle over it of the same color as the background.
Option 2 (works for non-trivial background, but slower):
Get the pixel data from the canvas before drawing the image, then redraw that pixel data to remove the image.
So I came up with a quick and easy way to clear my canvas. I just put my <canvas> tags in between <p> tags with an Id, then each time i needed my canvas cleared I just rerendered my <p> tags by changing the innerHTML, works like a charm.
I have a large source image and I want to display a small section of it inside a circle, with leaving the part of the canvas outside of the circle transparent.
The Mozilla guide to Compositing with HTML5 covers two topics: globalCompositeOperation and clip. It looks like both of these will let me do what I want, so I'm wondering what the drawbacks are of each, and which I should use.
I could set globalCompositeOperation to source-atop (or source-in, but that seems buggy in WebKit). Then have the destination canvas be transparent with a black circle, and simply draw the source image over that. This will ensure that only the circle part will be filled in.
Or, I could draw a circular path and use clip to define a clipping region, then draw the source image over that, which should also ensure only the circle part will be filled in (in fact, Mozilla's page above even has an example of doing pretty much that with stars).
Will both of these techniques work as I say they will, or am I missing something?
If so, are there any major gotchas with either of these techniques which makes one clearly better than the other?
If not, which one has better performance in general?
I would (purely speculatively) imagine the globalCompositeOperation would have better performance, since it is applying the operation on a per-pixel level, whereas the clip operation needs to do polygon intersection. But that's just a hunch.
As of March, globalCompositeOperation did not work the same on all browsers.
Clip does... except the anti-aliasing, actually, which is sadly different per browser.
In my opinion the appropriate thing to do here is use clip. Using source-atop may work for your very specific situation, but it isn't very extensible as you described it. If you ever want to change any of it, like say have a background behind your circle, you'll run into trouble if you do it the globalComposite way.
And the tests are in: Clip is faster in every browser I tested, and massively faster in Firefox. See the results or try for yourself here
So created a Sprite to which I add other Sprites which are game tiles. Each tile is 60 x 60 px big. In result I've the Sprite with about 200 childs (those tiles).
When I try to startDrag() the container sprite the lag when moving it is very noticeable..
Is there a way like to join the tile Sprites so the container would have only 1 child Sprite instead of 200? Because it lags so much probably cause it needs to move (change the x and y) all those 200 tiles.. Am I correct?
In this case I can't use the cacheAsBitmap property, cause user can zoom in or zoom out the map..
Glycerine & Aurel do touch the crux of the real solutions. However I'd like to add.
You are correct by the way, when you said it has to manage so many sprite locations when you move the container around. CacheAsBitmap sure does does tackle this to great extent but the real solution is blitting. Try this link for that :
http://www.adobe.com/devnet/flash/articles/blitting_mc.html
It doesn't matter if a user zoom or something of that sort is required cause you can always switch between bitmap data & the original vector sprites. Your problem arises in moving.managing lotsa sprites, so just before doing that use optimizations, after that let them be back to their selves.
I've had the same issue before. Is it possible to 'join' them together - in a sense.
When you add your 200 sprites onto a screen - I assume you put them all into another parent sprite.
A this point - you will take a snapshot, or a screenshot - or a photographic replica (whatever you want to call it) of all the sprites and write the image (bitmapData) to a parent sprite. At this point. delete/remove/hide/nullify the original sprites and you'll be left with a sprite containing bitmap data.
One big image to move about and zooming and the like is no bother.
If you need code - ask. It's time consuming code so you tell me first then I'll write it :P
Hm, joining them would actually be quite hard... You would need to get the graphics, the code and all and put that into the parent...
I don't think that is the problem - you should do something else... In this case, I think that by "tiles" you mean that the parent would be a tile map, correct? So, you probably have a 2-dimensional array (array of arrays) with tile types - instead of parsing that array at initialization, creating A LOT of Sprites, try re-parsing it in each frame (it is faster), but add only the Sprites that are possible to see. That is - their X position (after adding the zoom and camera X) is greater than -sprite.width, where the height is also scaled by the zoom, and lesser than stage.width + sprite.width (again, width after zoom). Same goes for Y, only with the height attributes.
I have a 3D field with many MovieClips in it, and seems like the one last added is the one that overlaps others and not the one with highest z value.
Is there any property/function that sets z-index? (sorting children by z value seems too much like a hack).
A 3D engine that can place MovieClips will be helpful(but not one that requires custom drawing).
I'm using Flash CS5 with ActionScript 3
You're looking for parent.setChildIndex. You can use that or swapChildren to move the z-index of children around.
flash itself has no z-index sorting with the 3D space, so you have to either pull a completely new 3D engine or sort it manually every frame.
no matter what happens you will always get some problem when trying to overlap two planes on the same z co-ordinate, even in full 3D engines, you have to decide which one you want to be in front of the others or you will get flickering as each frame they change places.
personally i work with Away3D as an engine, and that has the possibilities for 'MovieMaterial' to a plane (which is probably what you are meaning) but it think this is a pretty general use and can be used in Papervision etc. too.