My aim is to highlight the area between the two dragable objects inpoint_mc and scrub_outpoint_mc, so i had created a rectangle between these points, i need to resize this rectangle based on the dragpoints, which indicates the distance between Inpoint and Outpoint, i tried my level best unfortunately i can acheive it
private function startScrubbingIN(_arg1:MouseEvent){
trace("scrubBarIsMovingIN");
this.cueCard.stage.addEventListener(MouseEvent.MOUSE_UP, this.stopScrubbingIN);
this.cueCard.stage.addEventListener(MouseEvent.MOUSE_MOVE, this.scrubBarIsMovingIN);
this.scrubbing = true;
var _local2:Rectangle = new Rectangle(this.controls_mc.progressBar_mc.x, this.controls_mc.inpoint_mc.y,
this.controls_mc.scrub_outpoint_mc.x-this.controls_mc.progressBar_mc.x, 0);
// now we're limiting in point to current position of out point
this.controls_mc.inpoint_mc.startDrag(false, _local2);
this.controls_mc.addChild(_seekIndicator);
_seekIndicator.graphics.beginFill(0x990000);
_seekIndicator.graphics.drawRect(this.controls_mc.inpoint_mc.x, this.controls_mc.progressBar_mc.y,
this.controls_mc.scrub_outpoint_mc.x-this.controls_mc.progressBar_mc.x, 12);
trace("_seekIndicator"+ _seekIndicator);
// _seekIndicator.width = this.controls_mc.scrub_outpoint_mc.x+ this.controls_mc.inpoint_mc.y;
}
it giving me the result as like the attached image
but the red rectangle need to be shrink itself between the 2 Points
The rectangle should be redrawn only after you stop dragging, or when you move mouse while dragging. Don't forget to call _seekIndicator.graphics.clear() to delete old rectangle. And finally, use this.controls_mc.scrub_outpoint_mc.x and this.controls_mc.inpoint_mc.x for borders, because you're saying the rectangle should be between the in and out point MCs, while you use this.controls_mc.progressBar_mc.x in width.
private function scrubBarIsMovingIN(e:MouseEvent):void {
// the startDrag dragged one of the sliders already
// existing code skipped, if any
_seekIndicator.graphics.clear();
_seekIndicator.graphics.beginFill(0x990000);
_seekIndicator.graphics.drawRect(this.controls_mc.inpoint_mc.x, this.controls_mc.progressBar_mc.y,
this.controls_mc.scrub_outpoint_mc.x-this.controls_mc.inpoint_mc.x, 12);
}
Should do.
Related
I am writing an application, using a datagrid. Various rows are differing colors based on the data. When the user selects a row the color becomes a few shades lighter.
Unfortunately one of the users doesn't think it is enough of a contrast and would like a more noticeable visual indicator. My two thoughts are to either;
A) Draw a rectangle around the entire row selected.
B) Add a column with an image that I hide or make visible based on whether the row is selected.
I went down path A. for a while and got to the point where in the function;
override protected function drawHighlightIndicator
I was able to identify when I was looking at the specific row, but I couldn't determine how to draw the rectangle.
So I backtracked and looked into B. I am able to create an Item renderer with an arrow, but I can't figure out how to turn it on & off when selected. I have a click event in the main module, but no way to reference back to the Item renderer component.
I could set a value in the array collection, and do a refresh, which will probably work, but that tends to move the selected row to the top of the datagrid display area.
So if anyone can help I on A or B would appreciate it. This is a DataGrid, not an AdvancedDataGrid.
Since you're using mx.controls.DataGrid, overriding drawHighlightIndicator could look like following example, which draws 1px red border around selection marker:
protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
var width:int = unscaledWidth - viewMetrics.left - viewMetrics.right;
var borderColor:uint = 0xff0000;
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(borderColor);
g.drawRect(0, 0, width, height);
g.beginFill(color);
g.drawRect(1, 1, width - 2, height - 2);
g.endFill();
indicator.x = x;
indicator.y = y;
}
I have two draggable objects, and when your drag one them it generates a line based off where your mouse is, and the line is anchored to the other object. What Id like this code to do, is generate the line at the rear of the symbol
I got this
but I need this
if ((mouseX-targetPointX<0 && mouseY-targetPointY>0) || (mouseX-targetPointX>=0 && mouseY-targetPointY<=0)) {
line.moveTo(mouseX-offset,mouseY-offset);
line.curveTo(mouseX-offset,targetPointY-offset,targetPointX-offset,targetPointY-offset);
line.lineTo(targetPointX+offset,targetPointY+offset);
line.curveTo(mouseX+offset,targetPointY+offset,mouseX+offset,mouseY+offset);
} else {
line.moveTo(mouseX-offset,mouseY+offset);
line.curveTo(mouseX-offset,targetPointY+offset,targetPointX-offset,targetPointY+offset);
line.lineTo(targetPointX+offset,targetPointY-offset);
line.curveTo(mouseX+offset,targetPointY-offset,mouseX+offset,mouseY-offset);
}
line.endFill();
};
Instead of using the mouse position as reference to draw your curve, you can use a custom Point object with the coordinates from where you want the curve to start from.
moveTo(myPoint.x, myPoint.y);
You can create any Point you want, for example at (50,200) using the relative coordinates from your Sprite, and then find the global coordinates using localToGlobal.
var globalPoint:Point = mySprite.localToGlobal(new Point(50,200));
trace(globalPoint.x,globalPoint.y);
I have to move some pictures in my flash. So I have got a background image in my main MovieClip(which I get by Loader class). Inside the image I have rectangles. I'm going to put small image in this rectangle and move it. I need the small image slowly disappear while crossing the rectangle boundaries.
I tried to put another movieclip in rectangles and moved image in this movieclip. But while crossing the rectangle the image didnt disappear. The image just continued its motion without disappearing.
How can I make dissapearing of image while crossing rectangle boundaries?
Sorry for my English.
Get TweenLite. It's an animation "tweening" library that makes animation a breeze. There are others, but this is the one I use.
It depends on the methodology you employ to move and detect your overlaps of image & rectangles.
Let's imagine you have two squares (red square, and blue square) and you want red square to fade-out whenever it overlaps blue square. Is this controlled with the mouse, keyboard, or a pre-calculated move that performs a guaranteed eclipse? Is the fade a factor of the percentage of overlap, or a straight-up 0-to-100 timed transition the moment it comes in contact with blue square? It's not clear from the description you gave as to what exactly you expect your code to do. Please review SO's "Asking" section, to help improve the quality of your question so that you get the right answer you're looking for.
That said, here's one way you could resolve the issue:
import com.greensock.*;
// Create some sample red & blue squares
var red:Sprite = new Sprite();
red.graphics.beginFill(0xFF0000, 1);
red.graphics.drawRect(0, 0, 100, 100);
red.graphics.endFill();
addChild(red);
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateRed);
var blue:Sprite = new Sprite();
blue.graphics.beginFill(0x0000FF, 1);
blue.graphics.drawRect(0, 0, 100, 100);
blue.graphics.endFill();
addChild(blue);
blue.x = 200;
blue.y = 100;
var overlap:Boolean = false; // global state tracker
function updateRed(e:MouseEvent):void {
// Position the red square every time the mouse moves
red.x = stage.mouseX - red.width/2; // center relative to red square's dimensions
red.y = stage.mouseY - red.height/2;
if (red.hitTestObject(blue) && overlap != true) {
// Make sure we only animate on the initial overlap
overlap = true;
TweenLite.to(red, 1, {alpha:0});
} else if (red.hitTestObject(blue) == false && overlap) {
// And converserly, on the initial exit
overlap = false;
TweenLite.to(red, 1, {alpha:1});
}
}
I´m making a game that simulates an industry of pan, and one of the process is Painting.
What I want to do is to let the player paint the pan, but i don´t want it to be easy using FILL, i want that the player paint the pan with an brush and then the game detects if all the area was painted and let the player advance.
For the painting i intend to use that library: http://www.nocircleno.com/graffiti/
But i have no idea how to detect if all the area was painted. Can someone show me some way of doing that?
One of the ways would be - you make a shielding BitmapData that has transparency and is opaque in place which you need your player to paint. (Color it as needed, but make sure the color is fully opaque). Then gather histogram() then query alpha vector for 255th value, this will be the initial value for zero percent filled. These range from 0-255, so you can't use 100 or any other fixed value. Then, while the player is painting, you draw the brush over that BitmapData with blendMode parameter set to BlendMode.ERASE, this will net your BitmapData to gain transparency where the brush was drawn. After your player finishes drawing by any means (say, the paint is used up), you run another histogram() over the BitmapData, and query the 255th value of alpha channel vector. 0 means the bitmap is fully transparent (or at least, only a small amount of pixels is left opaque), thus you can count a zero as 100% fill, for anything greater use the proportion.
var bd:BitmapData=new BitmapData(w,h,true,0x0); // fully transparent initial bitmap
bd.draw(yourPaintBase); // a shape that designates area to be painted. Must be fully opaque
var bm:Bitmap=new Bitmap(bd);
// position it as needed, so the area which should be painted is aligned to wherever you need
addChild(bm);
addEventListener(Event.ENTER_FRAME,doPaint);
var baseValue:int=bd.histogram()[3][255]; // Vector #3 contains alpha, #255 contains
// percentage of those pixels that have alpha of 255 = fully opaque
function doPaint(e:Event):void {
if (!areWePainting) return;
var sh:Shape=getBrush(); // shuold return an existing Shape object reference for performance
sh.x=e.localX;
sh.y=e.localY; // we are drawing where the mouse is
bd.draw(sh,null,null,BlendMode.ERASE);
decreasePaint(); // we have used some paint
if (noMorePaint()) {
e.target.removeEventListener(Event.ENTER_FRAME,doPaint);
var endValue:int=Math.floor(100*(1-bd.histogram()[3][255]/baseValue));
// aligning to percentage. This is the value you seek
reportFilledPercentage(endValue);
}
}
You can iterate over the pixels on your BitmapData and use getPixel() to check if the color of all those pixels is not white. If a white one is found, the image is not fully painted.
Something like this:
function containsWhite(bitmapData:BitmapData):Boolean
{
for(var c:int = 0; c < bitmapData.width; c++)
{
for(var r:int = 0; r < bitmapData.height; r++)
{
// Check if pixel is white.
if(bitmapData.getPixel(c, r) >= 0xFFFFFF)
{
return true;
}
}
}
return false;
}
Your essentially dealing with a collision detection problem. From looking at their API you could try something like a for loop with getColorAtPoint and try to determine they have drawn at each pixel.
If all else fails look into collision between the objects the library generates using the .hitTestObject method of an object.
See this: http://sierakowski.eu/list-of-tips/39-collision-detection-methods-hittest-and-hittestobject-alternatives.html
And this to see how someone handles collision with pixels: http://www.emanueleferonato.com/2010/08/05/worms-like-destructible-terrain-in-flash-part-2/
I'm just trying to avoid rolling my own dragging functionality. Does anyone know of any libraries out there that have a startDrag() equivalent where you can use, say, a circular radius for the drag bounds, rather than a rectangular box?
(For circular drag area) - What you need to do is:
a) Mouse_down: Store start position. Start listening to Enter_frame.
b) Enter_Frame: Check distance from mouse position of mouse to start pos (use pythagoras)
c) only move your object if the distance is less than x
d) Mouse_up: Stop listening to enterframe
You can use a simple circular collision detection routine, it works out the hit area using the radius of the objects and distance between them. Maybe you will have to manually do this calculation in your onDrag method and stop the drag on collision with the circular bounds calculated below.
var deltax : Number = targetCentreCoord.x - hitTestCentreCoord.x;
var deltay : Number = targetCentreCoord.y - hitTestCentreCoord.y;
//works out if our circles are colliding, distance between the circles inc radius
if (((deltax * deltax) + (deltay * deltay)) <= ((((targetRadius) + (hitTargetRadius)) * ((targetRadius) + (hitTargetRadius)))))
{
Log.info("collision occured with " + candidate.name + " target coords " + targetCentreCoord + " candidate coords " + hitTestCentreCoord);
return true;
}
return false;
Nope, you need to do pixel-perfect collision (or in this case, mouse clicking) in order to do that. By nature all display objects always have rectangular bounds to them. So basically you'd have to do something like this:
mySprite.addEventListener(MouseEvent.MOUSE_DOWN, mousedDown);
function mousedDown(e:MouseEvent):void
{
//Draw my sprite to a bitmap, then check the bitmap colour at mouseX/mouseY
uint colour = myBitmap.getPixel32(mouseX, mouseY);
if(colour != TRANSPARENT){
//We've actually clicked on the object, drag it
Sprite(e.currentTarget).startDrag();
}
}
Note this is just pseudo code, you'll have to figure out what uint value transparent comes up as, and also you'll have to account for where the origin point of the sprite is when drawing to bitmap. Say you have a sprite and the contents are inside, you're going to need to create a Matrix object that has a X and Y offset that are negative .5 times the width of your sprite in order to draw it properly.
This can be done without ENTER_FRAME event.
Have a MOUSE_DOWN listener, check boundaries there, if within boundaries, then
add a MOUSE_MOVE listener.
Also, start out with a MOUSE_UP listener to remove the MOUSE_MOVE listener.