Is it possible to dynamically (not in the project's options) change the dimensions of the stage by using ActionScript 3?
I'd want to create a 400x300px loader, but I also want it to load animations that have bigger or smaller dimensions. I would then change the width and height of the loader to make the loaded animations fit well.
Is there any way to do that?
Thanks.
<YourLoaderOrContainerWithAnimation top="0" bottom="0" left="0" right="0" width="100%" height="100%" minWidth="400" minHeight="300" maxWidth="400" maxHeight="300"/>
first of all use code.google.com/p/swfobject instead of embed tag, and yes you can directly change sizes like this.width=width_from_js; but as I remember swfobject will allow you to do this in raw js, just check it and let us know. :) thanks
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.
By default TitleWindows seem to have no padding. I tried the properties "left", "right" etc and it doesn't work. Actually I'd like to have a default for my whole app, so I tried creating a skin but no matter where in the skin I add 'left="50"' it just doesn't create padding on the left. You'd think that you should add it to the element with id="contentGroup", as described on this Adobe Skinning help page, but that does not work.
Surely this is something almost everyone wants to do?
The contentGroup in the default TitleWindowSkin is inside a VerticalLayout which does not respect top/left/right/bottom constraints.
You could do this by duplicating the default TitleWindowSkin and wrapping the contentGroup with a Group with width/height of 100%:
...
<s:Group width="100%" height="100%">
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" top="10" left="10" right="10" bottom="10" minWidth="0" minHeight="0" />
</s:Group>
...
Since the TitleWindow extends the Panel component, it doesn't support the padding properties a HGroup or VGroup based component would. As far as I know, there's no way to skin a TitleWindow so that the padding properties are automatically set.
All I do is set the x and y coordinates of my components within the TitleWindow so that they are laid out where I want them.
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.
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.
I am creating a Label in a Datagrid itemRenderer(extended from UIComponent) and right now I am setting the width of the label to some static value. I would like to create the label with 100% width. I do not want to use unScaledWidth because I am using link for the label so the link will be visible in the entire cell.
Thanks for the help in advance.
Am I missing something here or you should simply use percentWidth?
Using percentWidth won't work. If you have only a Label in the ItemRenderer, make sure the Label has (if an mx item renderer) autolayout="true" (which is the default) and add top="0" left="0" right="0" bottom="0" to the Label. This will make your label take up the entire cell.
If you are using a Spark item renderer, the default layout of none is absolute layout, and simply adding top="0" left="0" right="0" bottom="0" to the Label should be enough.
On another note, updateDisplayList() and measure() are two of the most overused overrides in Flex. Always try to fix your problem with an MXML skin-class before you try to go the route of overriding updateDisplayList() and measure(). Most MX class drawing methods were implemented incorrectly with private methods doing most of the drawing and this makes extending those classes difficult.