I am new to AS3 scripting. I have a wide image (movie clip "preform_mc") that I am masking and would like for right button ("right_mc") to dynamically move the image.
The code below moves the image to the right, but its not a dynamic movement (would like an animation effect) and I cant control when the image should stop moving, basically a max amount for the x coordinate.
any help is greatly appreciated!
right_mc.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
preform_mc.x += -100;
}
Take a look at Greensock Tweening Library. Using that library you'll be able to easily make a smooth animation of a moving image. For the control of max X you should write an if statement to check whether preform_mc.x is more than the max amount you want.
Code will look something like this:
var min_x:int = -500;
function fl_MouseClickHandler_2(event:MouseEvent):void
{
if(min_x < preform_mc.x)
TweenLite.to(preform_mc, 0.5, {x:preform_mc.x - 100}); // using the library I provided a link to
}
Related
I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}
I`m trying to build a simple game where you will view a map with 5 clickable objects.
When you click these objects you can navigate trough some pages and upon clicking the last button it returns to the map itself. Now everything is working as it should. Upon clicking this specific last button It has the following code.
jamenext2.addEventListener(MouseEvent.MOUSE_DOWN, gotomap2);
function gotomap2(event:MouseEvent):void {
gotoAndPlay("map2");
}
What I would like to have now is to have a bar on the Map itself, and when you have reached the button that has the above code attached, the bar increments by 20%, and so the same for the 4 other clickable buttons on the map. Upon 100% completion I would like it to play the next animation further on in the timeline.
I have tried the following, but I am not that good in writing code, and I`m not very sure where to place it exactly.
var total1 = 100;
_root.loaded1 = 0;
while(true) {
this.scaleX = _root.loaded1/total1;
}
_root.loaded1 = _root.loaded1 + 20;
gotoAndPlay("map2");
I have no idea on how to do this.
What your going to want to do is create a square or bitmap class for the progress bar. From there, create a square with a MouseEvent.MOUSE_DOWN for the buttons.
There is different ways of doing this. Judging from your sample code your using the timeline for scenes so you might want to put a button in there to scale in each scene.
You could size it at twenty percent and make it fully transparent and become viable on the first click. Then increment by twenty percent until a hundred percent visible. You could then also have another button that would roll back a page.
Mostly pseudo code but something like this:
(Example Reference link: http://www.actionscript.org/resources/articles/792/1/Drawing-Shapes-with-AS3/Page1.html )
import flash.display.Shape;
private var square:Shape;
main_method
{
square = new Shape();
//draw shape
square.graphics.beginFill(0x1111FF, 1);
square.graphics.drawRect(30, 30, 200, 200);
square.graphics.endFill();
square.alpha = .5;
addChild(square);
}
//somewhere in a MouseEvent.MOUSE_DOWN class
{
gotoAndPlay("map1");
}
}
It's also possible rather than creating a square in code to create a symbol instance name on the stage and and in the properties tab give it a name and reference it in code.
I'm working on a simple image crop where the user draws a line with the mouse around an area that they want to keep. When they confirm, the rest of the image will be cropped out. Here's how I'm currently handling said cropping:
var data = c.getImageData(0,0,canvas.width,canvas.height);
for (var x = 0; x < data.width; x++) {
for (var y = 0; y < data.height; y++) {
if (!c.isPointInPath(x,y)) {
var n = x + (data.width * y);
var index = n*4;
data.data[index+3] = 0;
}
}
}
However, this can bog down really quickly. The less of the image you try to retain, the faster it goes, but even saving 30% of the image (canvas is 800x800) causes it to hang for several seconds. Is there a faster way to go about this?
I don't really understand why you are diving into pixel details to manipulate your cropping image functionality. It's understandable as bigger the image is get as more time is needed for cropping out the rest of the image, because practically with iterating over a two dimensional array of pixels the processing time needed for the operation is exponentially increasing with the increasing in size of the pixels map.
So my suggestion would be to try to remake the function without to even touch the getImageData and putImageData function. It's useless. I would make in the following way:
Obtain the pixel coordinates at the mouse down.
Create an event listener for the mouse move.
Create a semi-transparent image over the original image and use the fillRect function to draw into the created canvas.
Create an event listener for mouse up.
Obtain the pixel coordinates at the mouse up.
Calculate the coordinates of the resulting square.
Draw the resulting image into the canvas using as parameters the square coordinates.
As a final step draw the content of the canvas to an image.
This way you will save a lot of overhead on image cropping processing.
Here is a script for your reference: https://github.com/codepo8/canvascropper/blob/master/canvascrop.js
There is no real way to speed it up when you have to use a user defined shape, but the bogging down can be handled with a worker.
Some ideas:
Restrict getImageData to the bounding box of the polygon the user draws.
Put data.height, data.width etc. used inside the loop in a variable.
Maybe you can split up inside/outside tests and setting the imagedata alpha value.
Maybe even draw the polygon to a black and white imagedata object, then get the difference between the two?
Can you share the isPointInPath(x,y) function?
I there a way to "detect" if a particular sprite is within the viewable area of a scrollRect?
I have a list of thumbnails in a scrollRect and I only want to load images for these thumbnails if and when the thumbnail sprite is visible in the scrollRect.
Any tips or suggestions on how to accomplish something like this?
You could always use
if (Sprite.getBounds().intersects(scrollRect)) {
//In view
}
as a test. Basic rectangle intersection.
I think the easiest way would be to check for overlap between the two rectangles. You can get a bounds rectangle from any DisplayObject with: myObject.getRect():Rectangle, or getBounds():Rectangle. You can then test this against the scroll rectangle for overlap.
There is a native overlap method on Rectangle, (rect1.intersects(rect2)):Boolean. I prefer to use a custom method for performance reasons though:
var overlap:Boolean = (r1.left < r2.right && r1.right > r2.left && r1.top < r2.bottom && r1.bottom > r2.top);
Good luck!
I would like to tween between a short rounded rectangle and a tall rounded rectangle. (I only want deal with the height - no other parameters). I am programming with actionscript 3. My tweening engine is TweenLite.
I have been tweening a sprite that contains a rounded rectangle. The tweened sprite produces distortion. I suppose that I have been scaling the original image, rather than the height of the rounded rectangle?
Here is a simple example of my code:
-
Draw the rounded rectangle:
roundRect = new Sprite();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,15,4,4); //Original Height: 15
roundRect.graphics.endFill();
addChild(roundRect);
Then I listen for a mouse click event on the rounded rectangle.
The mouse event triggers a function with the following code:
TweenLite.to(this.roundRect, 1, {height:120}); //Final Height: 120
-
I would like to tween the height of the rounded rectangle itself. I would hope that this would not produce the unwanted distortion. Is there any way to achieve this?
Thank you.
This can be achieved with "9-slice scaling".
Below are two tutorials on how to setup a Movieclip to use the 9-slice guides, one is done through the IDE (using the guidelines) and the other through code (by defining a rectangle called grid and assigning this to the movieclip's scale9Grid property).
http://www.sephiroth.it/tutorials/flashPHP/scale9/
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html
Once the scale9Grid property has been correctly assigned you can scale (and Tween) the movieclip as intended without any distortion.
It might also be worth reading: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/ which describes various scenarios when scale9grid does and doesn't work. (mainly to do with having nested children and non-vector graphics inside of the grid).
Hope this helps.
As an alternative, and since its only a rounded rectangle, you could also do something like this:
var rectHeight = 15;
var roundRect = new Sprite();
addChild(roundRect);
updateRect();
function updateRect() {
roundRect.graphics.clear();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,rectHeight,4,4);
roundRect.graphics.endFill();
}
roundRect.addEventListener("click", click);
function click(e) {
TweenLite.to(this, 1, {rectHeight:120, onUpdate:updateRect});
}