Newbie here,
I have a skinned button at x=47 y=126 which is later "covered" by a .png that loads dynamically. Once the .png loads, the button disappears. How can I tell Flash Builder 4 to place the .png behind the button so that it is always clickable. FYI: if I move the button away from the graphic, it works just fine, but, for design purposes, I really would like it to stay where it is.
Thanks,
Jason M.
You could also try giving the button a depth value of 1 or higher.
"Spark containers order their items based on their depth property, with the lowest depth in the back, and the higher in the front.Items with the same depth value appear in the order they are added to the container."
<s:Button x="47" y="126" depth="1" skin="customSkin"/>
Conversely you could add a smaller depth to the .png, or if you are drawing them in the same container change the order they are in there. (From the quote above on depth)
If you need to have an image as a background for your button you should place it behind button the following way:
<s:Group>
<s:BitmapImage />
<s:Button />
</s:Group>
I suppose your case is the following:
<s:Group>
<s:Button />
<s:BitmapImage />
</s:Group>
Related
I'm new to flex,and I want to change the image of HSlider,like this
What should I do?please give me a simple example.
#RIAstar had a great answer. But there is a little problem - this orange part before thumb. AFAIK the easiest way to create skin like this is to add rect or more complicated figure in HSlider skin, that will change it's width according to thumb's x coordinate, i.e.
<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
tabEnabled="false"
skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Rect width="{thumb.x + thumb.width/2}" height="{track.height}">
<s:fill>
<s:SolidColor color="0x00FF00" />
</s:fill>
</s:Rect>
<s:Button id="thumb" top="0" bottom="0" width="11" height="11"
tabEnabled="false"
skinClass="spark.skins.spark.HSliderThumbSkin" />
You'll have to create a custom skin. Now, HSlider is a little bit special in that it has some subcomponents that are also skinnable. You'll actually have to create three custom skins:
one for the HSlider itself (this skin includes the tooltip)
one for the track (the yellow/brown zone in your picture)
and one for the thumb
The track and the thumb are both in fact Buttons so those skins will have to be Button skins.
Explaining the entire process will make this answer too lengthy and specific, so I'll just get you started. You should be able to figure it out from there. I'll also assume you're using FlashBuilder as an IDE.
Create main skin
Set the skinClass style on an HSlider and hit Alt+Space. This will bring up code completion, but you can also select "Create Skin...".
Select that and a wizard will appear. Fill out something like the following. Note that we're making a copy of the default Spark HSlider skin. We remove the styling code because it will not be necessary in such a customized skin.
Create track and thumb skins
Open this new skin class and scroll down to the bottom. You'll see two Buttons; one with id track and one with id thumb. Their skinClass style is set to the default spark skins for these buttons. Delete the content and repeat the operation of the previous step (creating a new skin), only this time create a copy of HSliderTrackSkin and HSliderThumbSkin
Edit the skins
You now have an exact copy of the default Spark skins for HSlider (except you removed the styling). Now you can start editing: changing colors, changing shapes, etc. If you need more information about Flex graphics, I suggest you Google up on FXG. But you can just try to fiddle with the default skins and see where you can get too.
My first steps with Flex (currently using Flex 3) and I want to define 2 states where in the first I have a list and a panel with some button bellow it. When clicking one of the buttons in that panel, I'm expecting to change the state to the "ListState". How should I define which component bellong to which state in this case?
How can I also animate the transition between them by enlarging the list and "move" the panel down outside the application?
The expected behavior is presented in the following picture:
Thanks in advance
You can achieve This without States. As I have understood your task. I will suggest you to use Canvas with 100% height and width. inside canvas You use List and Panel
List will
<mx:List id="List" height="{cnvas.height-panel.height}" width="100%"/>
panel will <mx:Pannel id="panel" height="300" y="{cnvas.height-panel.height}" width="100%" paddingTop="10">
Now When you click button set slideUP.play() and pannel.height=0.
Addition to this you have to set annimation:
<mx:AnimateProperty id="slideUP" target="{panel}" property="y"
fromValue="{cnvas.height-panel.height}" toValue="{cnvas.height}" duration="400" />
I'm having a panel which shows an image and control bar with buttons in the form of thumbnail image of right mark. When a user clicks on the thumbnail of right mark I want to stick the thumbnail image of that right mark to the mouse pointer and when he clicks on the image, the thumbnail related image should be paste on the image. Same concept of drag and drop with click event.
Your question is still pretty hard to understand, but I'm fairly certain that what you need is Sprite#startDrag() and Sprite#stopDrag().
Here's a little example setup to get you started:
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="pick it up" click="myImage.startDrag(true)" />
<s:Image id="myImage" source="#Embed('test.png')" />
<s:Button label="drop it" click="myImage.stopDrag()" />
Note that I set the lockCenter argument to true. This will make the Image stick to the mouse. Otherwise you would start dragging the image from its original location.
Try this:to pick button single click and to drop you have to do double click.
<mx:LinkButton id="myLButton" height="100" width="100" color="red" label="Click"
doubleClickEnabled="true" click="myLButton.startDrag(false)" doubleClick="myLButton.stopDrag()"/>
I'm trying to make a button in Flash Builder 4.5 that is multi-lined (specific line break, both are left justified), with the second line being italicized. I can do this by making a button, and throwing a label on top of it, but it wrecks the button functionality where that label sits.
Is there an easy functionality to do this, or is it starting to step into custom skins? (I've looked at it, but I'm pretty new to FB, and it looks like a steep learning curve)
Yeah, you definitely want skinning. It's fairly easy since it generates all the code for you. You just need to find the label for the button and modify it to your will.
Sorry to say, but this is the only way to do it properly. If what you're trying to do is just hack it together, I don't think you should be touching code...
Minor clarification/addition:
While having multiple lines in the button label is as easy as setting the 'maxDisplayedLines' attribute of the 'labelDisplay' in the skin to anything larger than '1', s:Label does NOT support multiple styles; i.e. you can't have one line regular and the second line italic.
FTQuest
To create a multi-lined Label of a Button:
Skin your Button (Simplest way: Create Skin from the Design view)
In the Skin, scroll to where you see the Label with the id="labelDisplay"
Set a Fixed Width to that Label in the Skin & you're Done!
Once you populate the label property of the Button, it'll auto multi-line for you
There was nothing I've found to do what I wanted to do (I did find Flexlib and canvasButton, but it didn't seem to work for me)
What I ended up doing is making my own "simulated" buttons. A container with 2 lines of labels (one normal, one italic, like I wanted) with another container over it. mouseOver and mouseOut and click were all bound to the top container to make it seem like one large button. (I also used some alpha transparency to simulate highlighting.
For the curious (or other beginners with similar issue) -this is what I've done
<s:BorderContainer id="bottomContainer" x="129" y="99" width="200" height="44" backgroundColor="#EEEEEE"
borderVisible="false" cornerRadius="6">
<s:Label id="encLabel1" x="48" y="8" color="#000000" fontFamily="Arial"
text="Create a new encounter"/>
<s:Label id="encLabel2" x="48" y="24" color="#000000" fontStyle="italic"
text="Single encounter"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
<s:BorderContainer id="coverContainer" x="129" y="99" width="200" height="44" backgroundColor="#000000"
borderVisible="false" cornerRadius="6" alpha=".1" mouseOver="alphaOver(event)" mouseOut="alphaOver(event)" click="trace('working')">
</s:BorderContainer>
I'm working with flex, but actionscript ideas are just as good.
The flex <s:Application> tag has height="100%" width="100%" so the swf fits the browser as the browser gets resized.
My problem is that I have a <s:Label> that I need to position based on the real/current size of the browser.
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="?" y=">" />
</s:Application>
I heard it's possible to use Application.application.width; but I get a compile error, that it doesn't know what that is.
Any ideas how to do this. I'm trying to get the current size of the swf in the browser, as the browser resizes.
As far as I can tell the following should work. Application.application simply is the same as this provided you are in the base application. The binding should allow the size to change after initialization.
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="{width}" y="" />
</s:Application>
Edit : I just checked and it does work. To put your Label in the middle of the stage you simply have to put it like that
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="{width/2}" y="{height/2}" />
</s:Application>
you could only know stage size when element is added inside stage, you could try a eventdelegate like this
app.addEventListener(Event.ADDED_TO_STAGE,init);
private function init(evt:Event):void{
trace(stage.stageWidth);
trace(stage.stageHeight);
}
Call a javascript function on browser resize. From there get the reference to the swf, and call the AS function to resize the label. Pass the browser width/height.
See example here
UPDATE: Correction: ExternalInterface goes AS to JS.
It's not completely clear what you are trying to do. x and y are positional elements, width and height are size elements. If you are positioning the label you should probably use top, left, right and bottom rather than x and y if you want it to size as the parent control sizes.
If you want the label centered you can use horizontalCenter and verticalCenter.
If you put it inside a layout control like a panel or a canvas you can just set its left and right to 0 and have the parent canvas size.
If your label is always in a different place depending on the size, you can override updateDisplayList to set the position. That holds whether you put it inside a layout control or not.