Tell me how I should scale shadow mask to create an animation change of the phase of the moon, please?
As in the example in the upper right corner: http://astro.unl.edu/naap/lps/animations/lps.swf
You should be able to do this quite easily using a Shape tween.
There are lots of tutorials on the web.
The author dynamically draws in a mask MC ( beginFill(), lineTo() and curveTo() ) over a graphic shadow.
Related
I have a simple animation set up - A background I have painted in P/Shop and a Sheep.
The sheep is an animated movie clip - whose head turns and body moves.
What I need to happen is that when the sheep walks under a tree - he is in complete shadow - until he walks out from under the tree.
So far I managed to put the sheep under a shadow layer.. mask the shadow and use a rectangle which is aprox sheep size - it then moves along a tween teh same as the sheep.. It is quite clunky though and will take a fair amount of work reshape the mask shape each time to cover the exact sheep.. even then I won't be able to follow the animation exactly.
So, is there a way to have the animated sheep be a movie clip and a mask - so that he goes into full shadow everytime he passes under a tree.
Or is there another way to achieve this? Thx
The problem is cacheAsBitmap property,
you must assign maskclip and your maskedclip property to cacheAsBitmap = true
For example:
maskmc.cacheAsBitmap = true;
myMaskedClip.cacheAsBitmap = true;
myMaskedClip.mask = maskmc;
I added sample fla file that you can check it here : FLA
Can you put your sheep on a layer in between the shadow and the background? Probably not because you want the sheep in front of the tree -
Maybe you need to put a shadow element inside the sheep movie clip, and use a script to fade it in or out depending on hit test with the tree.
You could add a duplicate copy of the sheep to be used as a mask, although a shadow would probably need softer edges than this kind of mask will give you.
I have an hourglass like vector shape and I'd like to use it to mask an image. I'd like to feather the edges - have a soft falloff in transparency that follows the contours of the hour glass. Any ideas how I can do this?
I tried using a gradient fill on a closed shape (using beginGradientFill() and curveTo() functions) but that falloff doesn't follow the contour of the vector shape, it can only go one direction.
Maybe there is a better solution but until somebody comes up with it... I assume you could do the following:
Draw whatever shape you want to use as mask into a transparent bitmap.
Scale a bit the bitmap down (or use a matrix while drawing its bitmapdata).
Apply a blur filter to it.
Put the bitmap's center to the masked clip's center so they are aligned.
Set the masked clip's cacheAsBitmap property to true.
This is my firs excursion on the HTML5 canvas, I have working knowledge of jQuery and Javascript.
I'm trying to create a "spinning globe" effect with it.
The idea is to have a circle and meridians "spinning" on it, to give the effect of a rotating globe.
I've drawn the circle and now I'm trying to create lines that start from the right (following the curve of the circle), move towards the centre straightnening up (in the middle they are straight) and follow the inverse curvature on the left, ending with the circle.
I'm trying to do this with the HTML5 canvas and jQuery but I'm not sure of where to start... should I create an arc and then try to animate it?
I'm even wondering if the canvas is the right tool or if I should use anything else.
Any suggestion is welcome!
Sebastian
You could use a quadratic bezier curve, which is basically just a curve with a start point, an end point, and a "control point" in the middle, which is what you would want to change as the globe spins. In this case, all of your lines would start and end at the north and south poles, respectively, of your "globe". For example, to make one of these lines:
// start drawing a line
canvas.beginPath();
// move the the top of your globe
canvas.moveTo(0,0);
/* draw a curve with the control point specified by the first two args,
* end point by the second two:
* (in your case, the control point would be in the middle of the globe) */
canvas.quadraticCurveTo(control_point_x, control_point_y, 0, 50);
// finish drawing, stroke and end
canvas.stroke();
canvas.closePath();
You would also have to take in to account how you will clear the lines after each frame, of course.
See: The Canvas element API, Complex Paths
This is what I got, didn't have the time to proceed any further: http://jsfiddle.net/Z6h3Z/
I use bezier curves where the two control points are in a sort of oval arc centered at the poles.
What I got stuck at is the distribution of points along the arc to look more realistic.
Okay so basically I want to draw a circle in as3 that has a 'hole' in it (like a donut). Something like this, but without the outlines:
http://www.steel.ie/DugganSteel/Pictures/Hollow-circle.gif
This doesn't work:
SPRITE.graphics.beginFill(0xFFFFFF);
SPRITE.graphics.drawCircle(0,0,10);
SPRITE.graphics.endFill();
SPRITE.graphics.drawCircle(0,0,5);
I mean this seems like it'd be simple but I can't find any information on it. I should also mention that I'm trying to only draw 3/4 of the circle, like 3/4 of donut. So I was planning on drawing a transparent circle and square over the original circle, I know this seems kinda of weird since you'd expect something transparent to show whats underneath it.
Its actually really simple. See the following code:
var p:Point = new Point(100, 100);
graphics.beginFill(0xFF0000);
graphics.drawCircle(p.x, p.y, 100);
graphics.drawCircle(p.x, p.y, 50);
Intersections cancel each other out until you call endFill
Goodluck!
You can just make the line thickness the desired donut width and avoid using beginFill
set graphics.lineStyle
To make it only go 3/4 of the way around you could use curveTo to draw the 3 quarters.
The above method by Tyler works, however if an easier way to do it is to simply begin drawing the inner circle first. Basically Flash doesn't actually fill in the color until you call endFill() (again as mentioned by Tyler), so you start drawing on the inner circle, then the outer circle then on endFill() Flash fills in the gap.
SPRITE.graphics.beginFill(0xFFFFFF);
SPRITE.graphics.drawCircle(0,0,5);
SPRITE.graphics.drawCircle(0,0,10);
SPRITE.graphics.endFill();
Hope this clears things up for you.
Introduction to Flash drawing API, will help you understand a bit more :
http://www.senocular.com/flash/tutorials/flash10drawingapi/
I'm trying to code a 3d wall like
http://www.flashloaded.com/flashcomponents/3dwall/
The shape I am looking to create is like a bath or arena where it is a curve cornered rectangle with sloping sides.
The image below shows what i'm trying to achieve if viewed from above. I hope that helps.
Can anyone give me some ideas on the maths to create this shape using primitive rectangle shapes.
Thanks,
Josh
http://en.wikipedia.org/wiki/Matrix_multiplication
http://en.wikipedia.org/wiki/Transformation_matrix
http://www.devmaster.net/wiki/Transformation_matrices
A rectangle has 4 3D points (vectors)
Define a vector this way
To move/rotate/scale just multiply each vector by the transformation matrix.
This matrix rotates around X-axis:
For perpective projection (camera) look at: http://en.wikipedia.org/wiki/3D_projection
For example: you can create rectangles and rotate them around an axis to create a cylinder like this:
(source: flashloaded.com)
your pit:
note: the angle is not correct, it should be pi-a (180ยบ-a)
create all rectangles centered at origin (0,0,0), then rotate them as needed and move to desired position. I recommend you to code the matrix routines first like rotate(), move(), scale() and a simple paint function (just line drawing, without perspective) the rest is just playing with the matrices.