Not sure if this is possible but going to ask: is there a way of being able to resize a symbol (in this case, a movie clip) in an swf file by clicking and dragging it with your cursor?
One of the things I need to do is have a rectangle within my published swf file that can be resized in height and width by clicking and dragging the sides or corner of the rectangle. Not sure at all how to do this, though. Any tutorials I could look at or maybe something that's somewhat easy to do/explain here? Right now from what little I've found on the subject, it seems like a complex thing to do.
Thanks.
There is no standard option for that, so you have to code it yourself. My suggestion:
You could add a small MovieClip, looking like an arrow, right next to your scalable item. Make this arrow horizontally draggable and whenever you drag this arrow, update the width of the scalable item according to the new position of the arrow. In this case you can scale your item horizontally, but you can use the same approach to make it vertically or diagonally scalable.
#Lodewijck - Your suggestion worked, thank you!!
This may not be the best way to write the code but it worked:
stop();
import flash.events.MouseEvent;
stage.addEventListener(MouseEvent.MOUSE_MOVE,resize1);
this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging, true);
this.addEventListener(MouseEvent.MOUSE_UP, stopDragging, true);
function startDragging(e:MouseEvent) {
dragsquare.startDrag();
}
function stopDragging(e:MouseEvent) {
dragsquare.stopDrag();
}
function resize1(E:MouseEvent){
square1.width=dragsquare.x - square1.x;
square1.height=dragsquare.y - square1.y;
}
Related
I have two movieclips, one is on top, one is on bottom. The top one is set to the second frame. I move it to the z axis bottom on the next frame, and for the remaining frames it plays all frames like it has been reset without any code (like I didn't tell it gotoAndStop(2)).
Image example: http://i.imgur.com/mQ8f5uT.gif (hard to tell by the frame rate, but the dark green box starts playing as if I didn't set it's frame once I move it below)
I know it doesn't have that issue when I code the depth swapping with setChildIndex, but the animations are lost.
If you're wondering, it's a simplified issue of a larger moving character sprite animation that I would like to swap depths of movie clips in the animation without resetting the movie clips underneath the depth change. So I'm not really looking for a work around per se, unless there's a well design solution and not a band aid "hack."
I think I didn't understand your question fully. A MovieClip will keep playing or keep being stopped no matter what you do with it, even if it was removed from the scene. I made a simple example which shows that MovieClip state is not affected by depth change.
The working SWF is here to test: http://zdg.ru/tmp/updown.swf
And the code is:
import flash.events.MouseEvent;
var is_playing:Boolean = true;
btn_toggle.addEventListener(MouseEvent.CLICK, doToggle);
btn_updown.addEventListener(MouseEvent.CLICK, doUpdown);
function doToggle(evt:MouseEvent) {
if (is_playing) mv_test.stop(); else mv_test.play();
is_playing = !is_playing;
}
function doUpdown(evt:MouseEvent) {
var tmp:int = getChildIndex(mv_block);
setChildIndex(mv_block, getChildIndex(mv_test));
setChildIndex(mv_test, tmp);
}
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 am new to as3. I create a rectangle and convert it to symbol. Then I go into the symbol and create two sliders. Also, I make the symbol draggable.
controlPanel_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragStartF);
controlPanel_mc.addEventListener(MouseEvent.MOUSE_UP, dragEndF);
function dragStartF(e:MouseEvent){
e.currentTarget.startDrag();
}
function dragEndF(e:MouseEvent){
e.currentTarget.stopDrag();
}
It works fine, but I can't use the slider. If I drag the slider, the entire movie clip moved. How can I solve this problem? Cheers!
Without more info on the structure of your FLA-file I assume that controlPanel_mc is the container containing the rectangle[background] and the two sliders.
What it seems like you did in your code was to add event listener to the container, what that means is that "if a click occures anywhere on this object, do the following". Since that clip "owns" the 2 sliders, the sliders will not get any MOUSE_DOWN-events since the parent is always the one handling the event first.
You probably want to convert the background into a symbol and add the eventListeners to that object instead.
bg.addEventListener(MouseEvent.MOUSE_DOWN, onBgClick);
bg.addEventListener(MouseEvent.MOUSE_UP, onBgRelease);
function onBgClick(e:MouseEvent){
controlPanel_mc.startDrag();
}
function onBgRelease(e:MouseEvent){
controlPanel_mc.stopDrag();
}
That should solve your issue :)
I have this interactive 5 seconds animated intro for a website. the preloader and one item are animating and i made the second animation follow the mouse cursor but it has to stay within a certain part of the stage to work with the other animation happening on screen.
I have this code on the movie clip
Mouse.hide();
potistiri.addEventListener(Event.ENTER_FRAME, newCursor);
function newCursor(event:Event): void { potistiri.x = mouseX;
potistiri.y = mouseY; }
and i like i said i just want it to stay in the area i want...
i found this code which gives me errors for not putting the staments if and else if correctly or that it needs a rightparen when i input my numbers in...
if(this._x>Stage.width){
this._x=Stage.width;
}else if(this._x<0){
this._x=0; }
but i cant get it to work...
i need it to move between x 208-656 and y 140-336 and when it gets out of that area the object stay there doing its loop and you see the normal mouse cursor moving in the rest of the screen.
thanks a lot in advance...im leaving my it to the experts in here to pls help me ouy!
The logic you're using in your if/else is fine for clamping the movie clip to a specific area, what exactly do your errors say?
In regards to seeing the normal mouse cursor again you could try using the same if/else checks to determine whether the mouse should or should not be hidden ie if the mouse is outside the area and is hidden, call Mouse.show(), else if it is inside the area and shown, call Mouse.hide().
I have a canvas with the following size: 500x200. Inside this canvas i'm drawing some number of blocks (actually - table cells). Information about how much blocks i should draw i'm getting via AJAX, but size for every cell is fixed - 100x50. So, i can display inside my canvas only 5 blocks horizontally and 4 vertically. But what about other blocks? What if script return a table 30x30 cells. How can i side scroll (mouse preferred) my canvas so user can the rest of the cells (no zoom out, only scrolling).
If you need any more information, please, tell me and i will provide it.
Thank you.
The easiest way to accomplish this is to implement mouse-panning.
On the mouse down event, begin panning and save the mouse position
On the mouse move event, translate the context (ctx.translate(x,y)) by the difference between the current mouse position and the original position, then redraw the scene.
On the mouse up event, stop panning.
There are harder ways. You could implement scrollbars inside the canvas, as Mozilla Bespin has done (...which became Mozilla Skywriter which then merged with Ace and dropped all Canvas use). The code that they used was pretty good.
Or you could implement DOM scrollbars for use with your canvas, which isn't exactly easy to get right in all cases. This involves adding several dummy divs in order to give the appearance and function of real scrollbars. I have done this but the code remains unreleased for now. But thats no reason you can't give it a try if thats what you really want.
Check out a great tutorial at: http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx
It will give you an answer to your question and much much more...
I'm with Simon Sarris on this, but as an alternative, you could clone the canvas, and replace it with a blank canvas, and then render the original canvas as an image. I've some MooTools js that goes like this, which is fine for my use, by ymmv:
var destinationCanvas = this.canvas.clone()l
destinationCanvas.cloneEvents( this.canvas, 'mousemove');
var destCtx = destinationCanvas.getContext('2d');
destCtx.drawImage(
this.canvas,
(this.options.scrollPx)*-1,
0
);
destinationCanvas.replaces( this.canvas );
this.canvas.destroy();
this.canvas = destinationCanvas;
this.ctx = destCtx; // this.canvas.getContext('2d');