I have a web page containing an Adobe Edge animation. The animation contains a single stage and a single symbol. I want to use the symbol element as a button.
The problem is I need multiple identical buttons, each behaving the same way visually, but positioned differently. Is there a way to programmatically (via JavaScript) "clone" a symbol such that multiple copies appear on the stage dynamically?
No need to use Javascript. That's what symbols are there for.
Say you have a single symbol named "button".
You can create on the Stage as many as you want, and position them differently, by dragging the symbol on the stage multiple times (from the Library > Symbols panel on the right).
This way you create symbol's instances.
Then all you have to do is to bind click events not on the symbol (that way all the buttons will do the same thing, not wanted) but on the symbol instances on the stage.
Open the Code window (Window > Code) and select the stage.
Click on the plus button next to Stage, then on Elements and you will see a list with all your buttons.
Handle the click event on the button as you like.
Related
I am using the draggable attribute to enable reordering of elements like the following . I detect the various drag events and can interpret these to reorder the array of data to show.
The problem is that I attach draggable to the row as a whole to get the visual effect I want from the browser, but I cannot now select the text "Two" using the mouse, because it is being interpreted as a drag event. Attaching draggable="false" to the input did not help.
The ideal UI would that you have to drag from the drag-icon but that when you do, you see the whole row of elements move (at least in Chrome as I know draggable can look different between browsers).
One option might be to use a blurry png of the row specify the drag Image, but ideally it would be an the live data
So the solution was to add event listener to the drag icon such that when the mouse was over the parent node was given the draggable attribute at that time. That prevented dragging from any other part of the component as well as the artifact when trying to select text - a double win
So what do they mean?
I am making an "interactive" iPhone as a project.
Currently I have 1 scene and within it, a movie clip labeled iphone and within it, about 8 or so buttons for different "apps". I want to create a scrolling affect after clicking one of the icons. How would I go about this?
If you're referring to creating Button type symbols, as in:
There are four states in the timeline to skin the visual appearance of the button depending on mouse interaction.
Up - Button's appearance when the pointer is not over the button.
Over - Button's appearance when the pointer is over the button.
Down - Button's appearance as it is being clicked.
Hit - Defines the area bounds that will respond to a mouse click. This area is invisible when published.
Addressing the remainder of your question, creating a virtual iPhone in Flash running various apps is substantial depending on scope. I would recommend breaking that down in to multiple questions.
I have a project with a GUI that has collapsible panels, then within those panels are items you can drag and drop to a "stage" area and it adds the media element to the stage. I'm using this collapsible panel code: http://www.iwobanas.com/2009/09/creating-collapsible-panel-in-flex-4/
However, I also need this GUI to be changeable, so that the user can move the panels wherever they want.
I tried doing a simple drag/drop system on the panels, but there were two main issues
Adding the drag event removed the ability to collapse the panel (as both were mouse events)
Dragging the panel onto the "stage" treated it the same as a media element, and would throw a null object reference because it obviously isn't a media element.
So I figured I'd add an if statement to ignore anything that wasn't a media element. This didn't work either, I traced out the information,
var itemTL:TileList = event.dragInitiator as TileList;
trace("This is the Dragged init " + itemTL.selectedItem.appListElement);
However both a media element and the panel itself trace out similar information, without really much I can pull out to build an if statement from.
So I'm kind of stuck wondering how to make a collapsible panel that can be moved around a stage, but not actually added to the stage like the information in the panel itself.
I am looking for some help with Flash (CS5 version). I have a situation where if try to put a button on the stage with visible differences in the up/over/down/hit states, when I compile the document into a .swf, the button will continuously flicker through each state in order very quickly. Also, if I break the AS3 code in the Main class file, hidden parts of a slider bar component will flicker between visible and not. I'm talking Japanese-style, seizure-inducing flicker here. I've searched my code for recursive function calls and tried deleting and re-adding components and buttons, but to no avail. Any ideas on what could be up?
Well, it seems to me you aren't using stop() to stop the button at the frame you want.
If it isn't this, then there is some error with your ActionScript, which will show up in the output panel, so check that.
When you say 'button' is it an instance of the Button Class and have you set the instance type to Button?
i.e.
Select the button in your library panel, right click and choose 'Properties'. Then set the Type to Button.
Next, select the instance of the button on the stage, open the Properties panel and just underneath where you type the instance name you should see a drop down menu containing MovieClip, Button and Graphic. Set it to Button.
I am trying to accomplish an "imagemap" in flash where you click on different areas in the image and when you click on it, a popup (within flash) comes up showing more information about the object that was clicked on. The popup has a close button that can will then close the popup.
My biggest trouble is the way I have my code right now is when you click on a region of the map, it creates a popup on the fly, and then I use addChild(_myPopup) to add it to the display list. The problem with this approach for me, is that the Popup is now a Child of the button I just pressed, but this object organization doesn't really make sense to me. I'd like to have the popup not be a child of the button and it be on it's own layer or a child of the stage directly.
What is a good approach and code architecture for building such an organization of objects? I'm fairly new to AS3 and I've built some small applications but my knowledge is limited.
Thanks
UPDATE
ok looks like calling stage.addChild(myPopup) from inside the button works pretty well. Is this good practice?
Assuming you have a hierarchy that looks something like this:
stage
Main class
Image class
Button
It's good practice to never call upwards in the displaylist, every object only deals with it's children. Events however, are a nice way of communicating upwards. Have the Button dispatch an event, preferrably a custom one, then handle that using a listener in the main class that then deals with creating a popup on top of everything.
An often encountered practise to organize the layers of the visible application is:
stage
main class with all children
popup container
tooltip container
mouse cursor container (apparently not longer necessary since player 10 supports custom cursors)
So you create your popups always in the popup container above the main class. If you would have tooltips, they should go into the tooltip container. This approach guarantees that popups are always visible above the main app and tooltips are always visible on top of everything.