I have a project i'm working on that allows the user to "Type" text onto a graphics object (in this case it is a canvas). So the text follows the mouse cursor and whenever a user types text appears on the graphics object. If the user clicks, the text is pasted down onto the graphics object. I need to figure out how to allow the user to make this text go away (for when the graphics object gets too crowded). What method could I use to erase all the text inside the graphics object?
Screenshot (hopefully this helps, I know this is a difficult to understand question):
The white background is the graphics object and the text is "pasted down". Now my objective is to create a button to clear all the text on the graphics object. Instinctively I would use graphicsObject.graphics.clear() but this is obviously not the solution here.
The answer is: as long as you don not store each element which should be drawn separately, you can not just delete the text. By this I mean that you need a stack with all the elements to draw and each time one of the elements changes, is added or removed, you clear the whole canvas and repaint every element from the stack.
Related
I currently have an html page that produces a line graph inside a canvas element. I have also implemented a feature so that when you click on a point in the graph, a table below the canvas displays the information for that graph point, and clears if you click somewhere that isn't a graph point on the canvas. However, there is currently no indicator for what graph point you have selected.
I would like to make it so that the dot you click on either gets bigger, or highlighted, or something. Unfortunately, I don't think there's any way to do that on the one canvas without needing to redraw the entire graph afterwards. If I drew a bigger dot on top of the original, I would then need to erase it and replace it with the smaller one, as well as redrawing the segment of the line graph that was covered by the larger dot.
I was looking into using a second canvas on top of the first with identical dimensions, using a z-index to control which was on top. However, I don't know how this would affect the click event. If two canvasses are on top of each other, is it possible for the click event to register the lower canvas? Does it only register the higher one? I guess I could just change the click event to be for whichever canvas is on top, but keep all the code for drawing on the canvas the same.
Any advice for how to solve this problem?
Solved a few of my own questions.
Firstly, the click event will only recognize whichever canvas is on top. However, I did like I said, and changed my click event to be for the top canvas, while leaving all instructions on the inside to be for the top canvas. Thank goodness I didn't use the 'this' keyword, or the change would have been much more annoying.
To make the graph points highlight, I first added a second canvas on top of my first one, placing them on top of each other by making their positions "absolute" and giving them a z-index of 0 and 1 respectively. Then, inside the if statement where the original click event recognized that a point had been clicked on, I told the top canvas to draw a larger dot on the same coordinates as the first dot (which I had saved in an array). First, I had it clear the top canvas though, so any other highlighted dots would no longer be highlighted. If the canvas was clicked on somewhere other than a dot, nothing was highlighted.
I have a custom banner maker program in which the following can be done:
Different banner shapes can be selected (Buttons clicked to place the corresponding movieclip onto the stage)
Different banner colors can be selected by using a ColorTransform that is linked to buttons i.e. a red button turns the banner red
Textfields can be added to the stage, dragged and dropped using startDrag and stopDrag, and the text color can be changed with a ColorPicker as well as being able to change the font size and font itself
Pre-loaded images can be selected from a panel and added to the banner (Buttons that are clicked to add a corresponding movieclip to the stage)
Images can be uploaded directly onto the stage and can be resized
I need to figure out a way of being able to essentially add undo and redo features to do things like remove an image/textbox that was placed, change the banner color back to whatever color it was previously, reset the position of an object that was dragged from its default position etc.
I'm not sure how to best go about this using AS3?
Not hard. Use removeChild(instance name of Child here) to remove an object from the stage.
Atriace's idea is sensible. You didn't say if you'll want to remember the positions of things after you stop running your program. Or is it only while you're running?
If the latter I'd create an array for each banner or textfield, and store in that array the current values of the properties you want to record. So, for instance:
var A:Array = new Array
A.push(textfield1.text)
will put your current text in textfield1 into the first index position in array A. You can call that little bit of code when you initially add the text (on a button click or whatever). Later, if you want that text back you'd do it like
textfield1.text = A[0]
assuming that your old text was in the first index position in the array.
If you want to remember values between runs of the program use a SharedObject to write the value to disk. Too much to write about that here -- look it up!
I am working on flash professional cs5.5 and actionscript 3. I need to use symbols of customized sizes to test the hitTestOjbect() function. However, when i convert the bitmap to a symbol, by default it goes into a rectangular size and the empty space all around is also detected as part of the symbol.
Is there any way to keep the size of the symbol customized ?
That is the nature of a bitmap. Technically, bitmaps are always rectangular. Transparent areas are just fills with alpha-0. When you convert a bitmap to a symbol, the bitmap still exists, just inside the context of the symbol.
One of the fastest ways to fix this is to use a mask inside your MovieClip. Create a plain drawing object in the exact shape of the hit area you want. Then, place that on your timeline on it's own layer. Right-click the layer with the mask, click "Mask", and then drag the bitmap's layer under the mask one. Lock both layers, and exit symbol editing.
Now your hit area will be limited to only the masked area.
EDIT: I appear to be mistaken - hitTestArea is always rectangular. See the top answer to hitTestObject Collision Not Registering Correctly.
I'm creating an app with Alternativa3d (8.17.0), and would like to add labels to some cubes. But it doesn't seem like the Alternativa API provides a way to do it...
Now I know I can either:
Add a TextField to the Flash display list in the normal manner
Render the text as a bitmap beforehand and upload as a resource to the GPU
Render the text to a bitmap at run time, and upload as a resource to the GPU
BUT I need the content to be added directly to the Alternativa cube (which precludes the first option) and the text is dynamic (i.e. not known at compile time - precludes the second) and the third just feels hacky.
Is there a clean way to do this?
Depending on how you want the text displayed you could do a number of different things..
You could use a Sprite3D and add the text rendered as a bitmap. You can place the sprite3d near the cube and it will always face the camera so as you move around the cubes they will appear in 3d space but facing you at all times.
Another option is to add it to the actual cube as suggested by danii using a movieclip. However the link to that MovieClipMaterial is no longer valid and is actually for a previous version of Alternativa not version 8. I have created my own movieclipmaterial for version 8 here ( http://davidejones.com/blog/1392-moviematerial-alternativa3d-8/ ) should you want to do that.
Lastly you could render the text to bitmap and merge this with the cubes bitmap so the text is layered on top and then set this material onto the cube.
Personallt i'd use the sprite3d method its alot easier and i think will give a better effect. Take a look at this example which uses the same effect ( http://gkb40.ur.ru/web/map40a3d.swf )
Just put your TextField inside a MovieClip, and use the class MovieClipMaterial to set that MovieClip as a material for one of the sides of the cube.
I have this small project HERE. Right now it barely does anything but make the character move.
I move the character by using <s:Move>. Now as you can see on the link to my project page, it moves to where you point the mouse and click. I want to be able to stop the character from moving if it hits another object or in this case, the "tree". Is there a script in AS3 that will let me detect collisions or controls that are overlapping each other?
If my question is a bit lacking information, please comment back here and I'll update it with more details as you need.
Please and thank you!
All DisplayObjects have a a method called hitTestObject(obj:DisplayObject) that tests when one object overlaps another. You can read about it in the Tree class, DisplayObject class, or any class that extends DisplayObject.