with the following code,it shows write backgroup now
<s:BorderContainer width="100%" height="80%" backgroundAlpha="0">
<s:Image id="bg" width="100%" height="100%"/>
<s:Image id="img" width="100%" height="100%" />
</s:BorderContainer>
var black:BitmapData = new BitmapData(bg.width,bg.height,false,0X656565);
bg.source = new Bitmap(black);
var bitmap:Bitmap = new Bitmap(data.bytes); //a png BitmapData
img.source = bitmap;
In the statement
var black:BitmapData = new BitmapData(bg.width,bg.height,false,0X656565);
you have already set the transparency to false.
Instead try:
var black:BitmapData = new BitmapData(bg.width,bg.height,true,0X00000000);
The third parameter sets the transparency to true and allows the bitmapData to take 32 bit colors which includes the alpha values also. The 32 bit color for the transparency part is passed in the 4th parameter, with the first two digits after the 0x standing for alpha=0.
Hope this helps
Related
I am having some issues to properly use several RadioButton components along with a RadioButtonGroup in my quiz application (when they are rendered via ItemRenderer under DataGridColumn).
The quiz page displays a question along with 4 possible answers which represented by RadioButton components (tied with a unique RadioButtonGroup). A quiz usually contains many multiple choice questions.
Everything works fine until I navigate to the next question and return to the previous question; then I could see my former answer selection in the radio button although when I change my answer and select a different radio button it keeps my old selection and add the new one, which is entirely unreasonable (since RadioButtonGroup should enforce selection of one option only).
Here is how I define the DataGridColumn:
<mx:DataGrid y="141" height="373" dataProvider="{currentQuestion.answers}" id="answersGrid" visible="false" styleName="NoStyleDataGrid" useRollOver="false" headerHeight="0" width="381" x="461" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn width="20" dataField="key">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off" top="0">
<mx:Script>
<![CDATA[
import mx.core.Application;
]]>
</mx:Script>
<mx:RadioButton id="rb" value="{data.number}" selected="{outerDocument.isSelected(data.number,rb)}" group="{outerDocument.getGroup()}" click="outerDocument.setAnswerState(event,data.number)" width="100%" height="30" x="12" y="0" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
I make sure each question has its own unique Group to contain the RadioButton components (as answers) using this code:
public function getGroup():RadioButtonGroup{
if(radioGroupMap[currentQuestion.key]!=null){
return radioGroupMap[currentQuestion.key] as RadioButtonGroup;
}
radioGroupMap[currentQuestion.key] = new RadioButtonGroup();
return radioGroupMap[currentQuestion.key] as RadioButtonGroup;
}
This code works fine as long as I do not go to the next question and return to the previous one.
Appreciate any help on this issue.
Thanks!
After doing some research, it appears that item renderers containing RadioButtons along with RadioButtonGroup on data grid column are not a good design choice. Apparently more item renderers are created than actually needed due to performance reasons which makes the UI act in an unpredictable manner.
I used VBOX instead and created the RadioButton along with the RadioButtonGroup dynamically using ActionScript. Here is some code example:
function populateAnswers(){
var rbg:RadioButtonGroup = new RadioButtonGroup();
for each ( var ans:Answer in currentQuestion.answers){
var row:HBox = new HBox();
var rb:RadioButton = new RadioButton();
rb.group = rbg;
rb.id = ""+ans.number;
var num:int = ans.number;
rb.addEventListener(MouseEvent.CLICK,setAnswerState);
rb.selected = isSelected(ans.number);
row.addChild(rb);
var answerBoby:Text = new Text();
answerBoby.enabled = false;
answerBoby.styleName = "readOnlyTA";
answerBoby.selectable = false;
answerBoby.htmlText = ans.body;
row.addChild(answerBoby);
quizAnswersPanel.addChild(row);
}
My Requirement given below:
I want to span same image across two canvas.
Like I have HBOX with two canvas as childs. I want to drag first canvas
display object into second canvas with half portion of that object in 1st canvas and half in second canvas.
Thanks in advance if someone has any idea.
You can split your image, after dropping it, using, for example, copyPixels() on the BitmapData of your image.
Take this example where I used two images in two Groups :
<s:VGroup x="0" y="0" width="300" height="500">
<s:Group id="group_top" width="200" height="200" >
<s:Image id="img_top" x="0" y="0" width="100%" height="100%"
source="assets/image.jpg"
mouseDown="img_top_mouseDownHandler(event)"
mouseUp="img_top_mouseUpHandler(event)"/>
</s:Group>
<s:Group id="group_bottom" width="200" height="200" >
<s:Image id="img_bottom" x="0" y="0" width="100%" height="100%" source=""/>
</s:Group>
</s:VGroup>
For the dragging and dropping, I used the old startDrag() and stopDrag() just for the example of course, you may need to use another way according to your needs.
protected function img_top_mouseDownHandler(event:MouseEvent):void
{
img_top.startDrag();
}
protected function img_top_mouseUpHandler(event:MouseEvent):void
{
img_top.stopDrag();
img_top.x = img_top.y = 0;
split_image();
}
And to split the image, I did like this :
protected function split_image():void
{
var bitmap_data_source:BitmapData = img_top.bitmapData;
var w:int = bitmap_data_source.width,
h:int = bitmap_data_source.height;
var bitmap_data_top:BitmapData = new BitmapData(w, h);
bitmap_data_top.copyPixels(
bitmap_data_source,
new Rectangle(0, 0, w, h/2),
new Point()
);
var bitmap_data_bottom:BitmapData = new BitmapData(w, h);
bitmap_data_bottom.copyPixels(
bitmap_data_source,
new Rectangle(0, h/2, w, h/2),
new Point()
);
var bitmap_top:Bitmap = new Bitmap(bitmap_data_top);
img_top.source = bitmap_top;
var bitmap_bottom:Bitmap = new Bitmap(bitmap_data_bottom);
img_bottom.source = bitmap_bottom;
}
Hope that can help.
I have a runtime generated bitmapdata and want to apply scaleninegrid for it in my flex Skin class.I did it something like this:
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Embed(source="progressBarTrack.png")]
private var host:Class;
[Bindable]
private var texture:BitmapData
protected function skin1_preinitializeHandler(event:FlexEvent):void
{
//here is just an example,my bitmapdata will be retrieved by an other way.
texture = Bitmap(new host()).bitmapData;
}
]]>
</fx:Script>
<s:Graphic scaleGridBottom="11" scaleGridLeft="14" scaleGridRight="40" scaleGridTop="10">
<s:Rect width="300" height="22">
<s:fill>
<s:BitmapFill source="{texture}"/>
</s:fill>
</s:Rect>
</s:Graphic>
However, it did not work no matter i set the width and height or not.I also tried to embed the source image,it worked,but as the bitmapdata is runtimely generated, i can not set the scalenine like #embed.....,scaleGridLeft.....
Is there anyway allows me to do that or anything wrong i did?i would like to get some tips before i hack into the source code,and make my own graphic element which supports it.
Many thanks!!!
Have a look at the bytearray.org ScaleBitmap class. It's an open source class that extends BitmapData to render scale9 bitmaps at runtime.
Here is my problem. I have a s:GridItemRenderer (the spark DataGrid size where I use this, is: 100% x 100%) and here is the function in it:
override public function prepare(hasBeenRecycled:Boolean):void {
myLabel.text = width.toString();
}
and here is the "myLabel" in it:
<s:Label id="myLabel" x="0" y="0" width="100%" height="20" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
SO AND THE PROBLEM IS:
When i drag the side of the window, and resize it everything is fine! myLabel is updating, but sometimes the last column doesn't. BUT when I maximize the window, NOTHING happend, BUT the "width" variable is updated, but the myLabel.text doesn't. (so I try to use this.width too, but it isn't take effects)
Iam trying to make clicked position to center in flex.
My code is
<fx:Declarations>
<s:Parallel id="transformer" target="{swe}">
<s:Scale id="scaleby" scaleXBy="0.2" scaleYBy="0.2" autoCenterTransform="false"/>
</s:Parallel>
</fx:Declarations>
<s:Group width="500" height="350" clipAndEnableScrolling="true">
<s:SWFLoader source="CasuarinaBigMap.swf" width="500" height="350" id="swe" click="swe_clickHandler(event)"/>
</s:Group>
protected function swe_clickHandler(event:MouseEvent):void
{
scaleby.transformX = event.mouseX;
scaleby.transformY = event.mouseY;
transformer.play();
}
My qustion is
How can I make clicked point pan into the center of the box?
Pls help.
Thanks.
This ought to do the trick:
<fx:Declarations>
<s:Move id="moveEffect" />
</fx:Declarations>
<s:Group id="mapContainer" width="300" height="300" clipAndEnableScrolling="true"
click="pan(event.localX, event.localY)">
<s:Image id="map" source="#Embed('bigMap.png')" />
</s:Group>
'localX' and 'localY' are the mouse's 'x' and 'y' position relative to the mapContainer.
And now the pan() method:
private function pan(mouseX:Number, mouseY:Number):void {
//calculate the offset from mapContainer's center
var diffX:Number = mapContainer.width/2 - mouseX;
var diffY:Number = mapContainer.height/2 - mouseY;
//move the map through the move effect
moveEffect.xFrom = map.x;
moveEffect.yFrom = map.y;
moveEffect.xTo = diffX;
moveEffect.yTo = diffY;
moveEffect.play([map]);
}
Try using a Move effect instead of a Scale effect.