Creating irregular shapes for a jigsaw puzzle game in flash - actionscript-3

I want to make a jigsaw puzzle in flash. I know how to create square kind of shapes. But I want to create this kind of irregular shapes. See the live demo of puzzles in the links shown
http://www.flashcomponents.net/component/jigsawpuzzle/preview/4952.html
http://www.gamedesign.jp/flash/whitejigsaw/whitejigsaw.html
I just want to how to create the irregular shapes.
Does anyone know or can anybody give useful links as to how this can be done.

My ideas:
Shapes can be just Bitmaps, masked by irregular filled Shape. Each piece of puzzle has shared BitmapData. Shapes can be created by series of drawRect/drawEllipse/curveTo calls in fill mode.
Watch their relative positions to catch the moment when they should 'snap' together. Also cull combinations not close to each other.

If you're creating your shapes dynamically with code, try using the graphics.curveTo() method. This can be used in combination with graphics.lineTo() to make the outline for your pieces.
You could also make your pieces using the pen tool within the Flash IDE to create movie clips that can my used for creating object instances to be used as masks for your puzzle. This works if you plan on having the same puzzle layouts more than once.

That's done using masking: http://www.flash-here.com/tutorials/flash_masking.html

Have a look to the following:
http://www.sephiroth.it/file_detail.php?id=111#
A little bit old.

Related

How can I load bitmaps into my Flash game to use as reusable blocks?

I'm making a basic platformer game in Adobe Flash using Actionscript 3, based on the tutorial found here. This tutorial uses basic graphics drawing for the various elements of the game, using different shapes and colors. Can anyone show what extra code would be necessary to have the game elements be drawn from various bitmap images? For example, to have a basic pixel pattern tile over for the blocks you stand on. I'm new to actionscript, and this seems fairly complicated. Any help is appreciated!
Basically, this game creates it's blocks using code, not elements on the stage. I was hoping someone could tell me what additional code I could add so that I can create these elements from bitmaps.
PS: The completed source code from the tutorial can found here.

I must be crazy.... Simple drawing issues.!

Hello amazing Stack Overflow members
I need some help :(
I've drawn 3 shapes to the stage using the rectangle tool. (Flash CS6).
WITHOUT making these movie clips or naming them,
How do I move them individually!?
Cheers and love your work.
Put them on separate layers, then use Shape Tweens.

AS3: How to intersect vectors at runtime?

Let's say I use the Graphics class at runtime to draw some vector shapes dynamically. For example a square and a circle.
Is there a way to create a new shape at runtime where those 2 vectors shapes overlap?
Those kind of operations are very common in all vector design programs such as Illustrator, Corel, etc... but I haven't found anything in Adobe's documentation, nor anywhere else, to do it by code.
Although drawing operations on the Graphics class are described in terms of lines, points etc this is - as far as you're concerned - just telling it what to draw onto a bitmap. There's no way to remove a shape once drawn, short of clear(), which just wipes the whole thing clean.
I don't fully understand why, as the vector data must be retained - there's no loss of quality on scaling after drawing, for example.
If you don't want to get into some hardcore maths (for anything beyond straight lines, you'll need to) there's an answer here which might help if you've ever used PixelBender:
How to calculate intersection between shapes in flash / action script ? (access to shape's segments and nodes?)
Failing that, if it's just cosmetic you could play around with masking shapes (will probably end up quite hacky though) - however, if you actually want to use the intersection to draw or describe a shape you will need to dig out your maths book or look for a good graphics library.
Hope this helps

Animating a path between two objects on HTML5 canvas

We're developing a game with impactjs that allows 'chaining' of entities as they are clicked. Basically this just draws a line between the two points, with a neon glow effect. So far, so good. Now, we have a request to make the 'chain' connections animated - fire, sparkles, etc. Essentially things that seem like they'd need actual graphic animations to look right. As the entities can be any distance/angle from each other, we're stuck at how to best implement a solution for this - that is, how to draw a diagonal image, for example, between two random points that we can animate. Any thoughts our suggestions on how to pull this off would be much appreciated.
Maybe create a particle entity with an Animation Sheet containing the necessary animations/particle effects. And then draw these particles along the line that from point A to point B.
When you want to animate it to fire/sparkles etc. run the animation for all those entities. in that line.
I'd be inclined to agree with Prat. Particle effects would most likely be what you need.
Here is a tutorial on generating particle effects in impact.js that might help you out.
http://www.pointofimpactjs.com/snippets/view/24/particle-effects-generation

AS3 - Moving a line through guide

I'm trying to animate a nodal with flash for teaching purposes. This is what I want to animate:
My questions:
How can I move the line through a guide?
Can guides hold z positions, so I could make the rope's top and bottom parts more real?
Can a vector image (rope) move through a guide path?
Which way is this possible, strokes or brushes?
Does as3 scripting support "decorated brush" effects?
Is there a simpler way to do this such as sandy or awake3d or beziercurves?
If you're using the IDE like CS4 or CS5 there are some menu options to do this. I only use a text editor and Flex SDK to compile. While I know what you're talking about, I can't really answer this one since I don't have the program. There's plenty of tutorials on the subject, however.
I believe the path-following tools in CS* only follow (x,y) coordinates. No Z values in the menus, but you can code them yourself. Again, I don't have the program, but from the tutorials I read it looks like no.
I suppose it could. Instead of a line drawing like you have here, you could simply use an image of one rope segment (as in a picture of rope whose length is equal to one twist of the rope), then apply transformations to get the correct 3D perspective.
Basic flash programs only draw fills. You can, however, run a shader program (called pixel bender) within flash which will draw strokes for you.
Not on it's own, no. But there is nothing stopping you from programming your own decorated brush class.
Bezier curves are probably the way to go.