AS3 - Moving a line through guide - actionscript-3

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.

Related

Customize or create Starling animations, movements and Transitions

Since I don't know english very well, I'm not able to find clear examples and/or tutorials for what I'm trying to do.
So the (maybe stupid) question is:
How can I strongly customize tweens using Starling framework and make my Sprites(or MovieClips) following a line, curve or create every other non-linear movement that doesn't exist in Transition Class?
I have no problem with Basic Starling animation. So it should be a good start point.
Thanks in advance for examples, resources or suggestions.
PS. I already visit the "Starling Wiki" page about custom Transitions but, as a Beginner(almost Intermediate) coder I wasn't able to completely understand it.
I know there are many online resources about AS3/Starling/Flash/Nape/Box2D but it's not easy for a non-english Beginner programmer to understand them.
You can simple move Starling's movieClip by set .x .y .rotation
Since now, I haven't heard of scripted transition to make predefined non linear movement. As you said, you can move object from one position to another, but it won't happen in a curved line.
What I've done in the past is to predefine the path of the movement, as I needed exactly the same weird path. I did a path tween in Flash, then used one simple function to loop through all frames (using gotoAndStop()) and getting x and y property of the object, storing them in an array. This was done when initializing. Later on I could start animation on all my weird paths whenever I wanted, using onUpdate method of tween, and passing positions from the array I've populated in the beginning.
This of course is good if you have very weird paths. If you want very little curves, you could try to do a mathematical equation. Tween classes have an update function, which will be called on each frame. So on each frame you could do some calculations and modify the parameters. For example if you tween x and y properties, you could use the update function to add a random number to those values. Of course this will make very uncontrolled movement, I'm just giving an example.
The best solution I could think of, speaking of complexity/result ratio - to use Greensock's TweenMax (look at the second example) - it has a built in bezier tweening. This means it could move from point A to point B within a bezier curve. I think this will be a good solution for your problem :)

coloring multiple frames in Flash Professional CC

I'm brand new to Flash Professional and wanted to make a short 10 second clip. Instead of looking into using tweens and symbols (I wish I did) I used Flash Professional as a flip book, illustrating sketches for each keyframe.
I'm now in the colouring process and want to know if there is a way to colour an object (I've drawn with the brush tool) throughout multiple frames. is this even possible?
I understand there are some short cuts to repetitive tasks using ActionScript. But, once again I am brand new to Flash Professional and haven't tried anything in the ActionScript. I do however have a very basic knowledge of HTML coding and some javaScript if it helps at all…
If there is an alternate solution like exporting the file to another Adobe program that has a "colouring multiple frames" feature, that would be great too.
Sorry to say, to do that, you WILL have to work with symbols. However, this is an easy fix.
Select the object you want to color, click Modify--> Convert to Symbol. Give it a good name, and set it to MovieClip. Click OK.
Now, in the Library panel, double-click the icon next to your symbol name. Color as you wish.
There are multiple ways to put this on your timeline. You could replace each instance of that drawing with the symbol. Or, better, you could create a new layer with only one keyframe (and regular frames after that to the end of your animation. Place your object on that layer, and then remove all the old versions of that drawing.
NOTE: You will need to be mindful of where in the stack you put layers, as that sets the z-index of everything on that layer.

Flash automatically finds curve intersection points. Can I use that code like I use curveTo in actionscript?

Or do I have to get down and dirty with the math and do the spline intersection math myself? I know the basic math for Quadratic b-splines.
I'm trying to make procedural randomly generated Celtic knot-work that animates itself. I'm inspired by the book of Kells original book -and the animation of the same name. This means at best it will be seriously complicated - lots of curves animating fast. I'm going for generative -responsive to the user- Celtic knots of the highest possible complexity.... that may mean only 12 points animating randomly and in response to mouse movements but... I'd love hundreds or tens of thousands... some day.
Developing a moving random curvy double lined loop scribble was easy. I like the look of the curves made from 12 to 14 random points. Now I want to weave it over under over under. To do that -- I need to find the intersections of lots of random curves quickly for each frame. When I draw curves in Flash in the -not object- drawing mode... Flash does intersections and generates points automatically for me.
Questions:
-Is there an equivalent intersection class/method/function in Actionscript 3.0 to the intersections so easily done in the flash drawing interface?
-How much of what you do in Flash as an artist has cool classes like curveTo in Actionscript 3.0?
-Can I see the source code for curveTo?
-Can I extend the curveTo to do what I want?
-I have been reading and re-reading the reference and how to extend classes... that I made. But how to I learn how to extend curveTo ... or Path classes... can I?
Would this be something that you are looking for:
http://actionsnippet.com/?p=965
See a demo here: http://www.actionsnippet.com/swfs/bezier_intersect.html

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

Representing a Monopoly board in flash?

I'm brand new to Flash (and game programming, really), but want to learn a bit of it. My overall learning project is to create a Monopoly clone in Flash. Unfortunately, I'm struggling to get over even my first hurdle - how to create the board graphically, and how then to deal with it in the code. So far, my thoughts are to break the board down into the different sizes of tiles (the normal property ones, the corner 4 and a large one for the middle section), then somehow place these all in the correct position relative to each other and keep that positioning correct as the pieces (and thus the camera view) move about the board. (And, hopefully some day have a zooming ability too...)
Is this a good approach, or is there a better one? Does anyone know where I can find a tutorial specifically on creating board games in Flash (any sort really, wouldn't have to be Monopoly but just a game that has a board which tokens move across - and preferably which has to pan as well).
Also, as an aside, is there any way to have a dynamically coloured rectangle in a flash MovieClip (like you can have dynamic textboxs)? I ask because it would be useful if there was, as I could generate every property tile with just one MovieClip which took a name, a value and a colour...
everything you describe here you can do pretty easily once you get the hang of component sprites. personally i would make a single sprite that will then hold all of the "tiles" in the game, this would allow you to "zoom" the board while keeping all the pieces relative:
if you create this parent to have an addTile() and getTile(index:int):Sprite method then you can easily push the tiles and retrieve them from an array, so that Go is at index 0, old kent road is at 1 etc. that way you can use a single integer value to determine the position of the player piece as you can then use getTile(int).x etc.
the position of the tiles themselves can be worked out relative to the others. if you have a tile that is 20px wide and 40px high then you can position the tile as x = index * 20 for the first row, after the initial 11, you need to rotate them all and then use the y index instead (rotation = 90; x = 11*20; y = (index-11)*20) this will depend exactly on your origin point of your Sprite.
to draw coloured boxes you use the graphics of the Sprite, there are plenty of tuts on API drawing out there, but here is a basic box of 10x10px:
var drawing:Sprite = new Sprite();
drawing.graphics.beginFill(0x0000FF);
drawing.graphics.drawRect(0, 0, 10, 10);
drawing.graphics.endFill();
Another approach to your question could be to learn about Object Oriented Programming. That may not solve your representing the board graphically straight away, but it would definitely help you structure your game.
With OOP, you could define a "Property" Class with a set of properties such as streetName , color , price etc... I haven't played Monopoly in a while but you can get the general idea, i.e. to create a base object and make it specific by setting the object's properties. Your question about the colored rectangle can actually apply to other properties, a great way to avoid unnecessary repetition.
Broadly speaking OOP tends to emulate real life situations, so you could actually look at your Monopoly game, break it into its various parts, find common properties etc... I won't start a lesson here :) I'd be pretty bad at it, but there's plenty of resources out there . Look for OOP, Design Patterns & Actionscript3.
After a little research, you may find that your question about how to handle graphics may not be such a problem after all.
Your questions are way too general. I'm sure you don't want us to walk you through your whole project right?
Now to gain some experience, I suggest to you simply work through a few flash gaming tutorials. There are a LOT of those, I googled for 2-3 seconds and found this:
http://pelfusion.com/tutorials/35-flash-game-development-tutorials-fla-files/
I'm sure you feel disappointed by this answer, but this is the first step in solving your own problems. The internet has more than enough general game tutorials already. If you have specific problems, we might be of better help to you.
I assume with dynamically colored rectangles, you mean simply changing the color during runtime. Well you simply give the rectangle a name, and change the color property of it in code. Like this: rectangle.Color = Something.
You might want to start out with a simpler project just to learn some of the basics, maybe a little game where the player has to move a rectangle from one side of the screen to the other using the arrow keys or mouse, upon which a score is incremented or something. This will help teach you how the coordinate system works, among other things.
To draw stuff using code, you can create a new Sprite or MovieClip object and use its graphics property to draw primitive shapes (rectangles, etc.) to it at runtime.