Flex UI Components disappear - actionscript-3

I've implemented a method to change display size.
When I click on maximize, I reposition some buttons in a viewstack.
Problem is when I restore view the buttons disappear.
Can someone help me?
{
nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZING, onAppResize);
nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, onAppResize);
nativeWindow.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING,onAppMaximized);
var screenBounds:Rectangle = Screen.mainScreen.bounds;
nativeWindow.x = 10;
nativeWindow.y = 10;
}
private function onAppMaximized(e:NativeWindowDisplayStateEvent):void
{
if(String(e.afterDisplayState) == "maximized" && DisplayMaximized == false)
{
e.preventDefault();
nativeWindow.x = 10;
nativeWindow.y = 10;
AppImageWidth = 1280;
AppImageHeight = 900;
nativeWindow.width = 1280;
nativeWindow.height = 900;
viewstack.createComponentsFromDescriptors(true);
viewstackBuchungen.width = 1206;
viewstackBuchungen.height = 600;
Button.x = 1135;
Button.y = 608;
Button2.x = 1135;
Button2.y = 608;
DisplayMaximized = true;
}
else if(String(e.afterDisplayState) == "maximized" && DisplayMaximized == true)
{
e.preventDefault();
AppImageWidth = 1024;
AppImageHeight = 600;
nativeWindow.width = 1024;
nativeWindow.height = 600;
viewstackBuchungen.width = 950;
viewstackBuchungen.height = 313;
Button.x = 879;
Button.y = 321;
Button2.x = 879;
Button2.y = 321;
DisplayMaximized = false;
}
}

thanks for your answer.
I tried moving them with .move(x,y).
Nothing changed...
The buttons are on same position, because they are in different navigator content.
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init();" width="1024" height="600">
private function init():void
{
nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZING, onAppResize);
nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, onAppResize);
nativeWindow.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING,onAppMaximized);
nativeWindow.x = 10;
nativeWindow.y = 10;
}
private function onAppResize(e:NativeWindowBoundsEvent):void
{
e.preventDefault();
}
private function onAppMaximized(e:NativeWindowDisplayStateEvent):void
{
if(String(e.afterDisplayState) == "maximized" && DisplayMaximized == false)
{
e.preventDefault();
nativeWindow.x = 10;
nativeWindow.y = 10;
nativeWindow.width = 1280;
nativeWindow.height = 900;
viewstack1.createComponentsFromDescriptors(true);
viewstack1.width = 1206;
viewstack1.height = 600;
button1.move(1135,608);
button2.move(1135,608);
DD1.move(1082,608);
DisplayMaximized = true;
}
else if(String(e.afterDisplayState) == "maximized" && DisplayMaximized == true)
{
e.preventDefault();
nativeWindow.width = 1024;
nativeWindow.height = 600;
viewstack1.width = 950;
viewstack1.height = 313;
button1.move(879,321);
button2.move(879,321);
DD1.move(826,321);
DisplayMaximized = false;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
</fx:Declarations>
<s:Group x="16" y="113" width="1254" height="463">
<mx:ViewStack id="viewstack1" x="0" y="24" width="950" height="313" selectedIndex="0" creationPolicy="all">
<s:NavigatorContent width="100%" height="100%" label="Nav1" id="nav1" creationPolicy="all">
<mx:AdvancedDataGrid id="grid1" x="0" y="0" width="100%" height="100%"
designViewDataType="flat"
editable="true" horizontalScrollPolicy="off"
sortableColumns="false" resizableColumns="false" draggableColumns="false">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="test1" headerText="test1" width="35"/>
</mx:columns>
</mx:AdvancedDataGrid>
<s:Button x="879" y="321" label="Button1" id="button1"/>
</s:NavigatorContent>
<s:NavigatorContent width="100%" height="100%" label="Nav2" id="nav2" creationPolicy="all">
<mx:AdvancedDataGrid id="grid2" x="0" y="0" width="100%" height="100%"
designViewDataType="flat"
editable="true" horizontalScrollPolicy="off"
sortableColumns="false" resizableColumns="false" draggableColumns="false">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="test2" headerText="test2" width="35"/>
</mx:columns>
</mx:AdvancedDataGrid>
<s:Button x="879" y="321" label="Button2" id="button2" />
</s:NavigatorContent>
<s:NavigatorContent width="100%" height="100%" label="Nav3" id="nav3" creationPolicy="all">
<mx:AdvancedDataGrid id="grid3" x="0" y="0" width="100%" height="100%"
designViewDataType="flat"
editable="true" horizontalScrollPolicy="off"
sortableColumns="false" resizableColumns="false" draggableColumns="false">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="test3" headerText="test3" width="35"/>
</mx:columns>
</mx:AdvancedDataGrid>
<s:DropDownList x="826" id="DD1" y="321" width="125" prompt="DD1" alpha="1"/>
</s:NavigatorContent>
</mx:ViewStack>
<s:TabBar x="0" y="0" dataProvider="{viewstack1}" />
</s:Group>

Related

How to Change Opacity of outside Rectangle?

In my case i want to change the opacity of the video brush using Rectangle. Rectangle area should have Transparent and out side rectangle should have semi Transparent. I don't know how to do this. I need some sample for this.
Thanks in advance
Edit:
I have tried Grid row and column definition . like this
<Grid Background="Transparent" Name="OuterGrid">
<Grid.RowDefinitions>
<RowDefinition Height="211*"/>
<RowDefinition Height="308"/>
<RowDefinition Height="249*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle
Stroke="Red"
StrokeThickness="4"
Fill="LightGray"
Grid.Row="1"
Grid.Column="1" />
<Rectangle
MouseMove="Rectangle_MouseMove_TopLeft"
MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
Stroke="Yellow"
Canvas.ZIndex="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="30"
Width="30"
StrokeThickness="4" Grid.Row="1"
Fill="Red"
Grid.Column="1" />
<Rectangle
MouseMove="Rectangle_MouseMove_TopRight"
Stroke="Yellow"
MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
Canvas.ZIndex="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Height="30"
Width="30"
StrokeThickness="4" Grid.Row="1"
Fill="Red"
Grid.Column="1" />
<Rectangle
MouseMove="Rectangle_MouseMove_BottomLeft"
Stroke="Yellow"
MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
Canvas.ZIndex="1"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Height="30"
Width="30"
StrokeThickness="4" Grid.Row="1"
Fill="Red"
Grid.Column="1" />
<Rectangle
MouseMove="Rectangle_MouseMove_BottomLeft"
Stroke="Yellow"
MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"
Canvas.ZIndex="1"
HorizontalAlignment="Right"
Width="30"
StrokeThickness="4" Grid.Row="1"
Fill="Red"
Grid.Column="1" Margin="0,278,0,0" />
</Grid>
c#
private void Rectangle_MouseMove_TopLeft(object sender, MouseEventArgs e)
{
if (isMove)
{
Point p = e.GetPosition(this.OuterGrid);
double pX = point.X - p.X;
double pY = point.Y - p.Y;
double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth + pX;
double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight + pY;
//if (pX < w)
//{
// OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w + (w - pX), GridUnitType.Pixel);
//}
//else
//{
// OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w - (w - pX), GridUnitType.Pixel);
//}
//if (pY < h)
//{
// OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h + (h - pY), GridUnitType.Pixel);
//}
//else
//{
// OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h - (h - pY), GridUnitType.Pixel);
//}
OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h, GridUnitType.Pixel);
OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w, GridUnitType.Pixel);
}
}
private void Rectangle_MouseMove_TopRight(object sender, MouseEventArgs e)
{
if (isMove)
{
Point p = e.GetPosition(this.OuterGrid);
double pX = p.X;
double pY = p.Y;
double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth;
double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight;
OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(p.Y, GridUnitType.Pixel);
OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(pX, GridUnitType.Pixel);
}
}
private void Rectangle_MouseMove_BottomLeft(object sender, MouseEventArgs e)
{
if (isMove)
{
Point p = e.GetPosition(this.OuterGrid);
double pX = p.X - point.X;
double pY = p.Y -point.Y;
double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth + pX;
double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight + pY;
OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(h, GridUnitType.Pixel);
OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(w, GridUnitType.Pixel);
}
}
private void Rectangle_MouseMove_BottomRight(object sender, MouseEventArgs e)
{
if (isMove)
{
Point p = e.GetPosition(this.OuterGrid);
double pX = p.X;
double pY = p.Y;
double w = OuterGrid.ColumnDefinitions.ElementAt(1).ActualWidth;
double h = OuterGrid.RowDefinitions.ElementAt(1).ActualHeight;
OuterGrid.RowDefinitions.ElementAt(1).Height = new GridLength(p.Y, GridUnitType.Pixel);
OuterGrid.ColumnDefinitions.ElementAt(1).Width = new GridLength(pX, GridUnitType.Pixel);
}
}
private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
isMove = true;
point = e.GetPosition(this.OuterGrid);
}
private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
isMove = false;
}
I need smooth motion on this.
Pls fine tune this code
I'm not 100% sure of what you want to achieve exactly (e.g. what video brush are you referring to?), but I attempted it anyway.
I'm guessing you want WP 8 not WP 8.1 (based on your original code).
Outside region is darkened while region inside the rectangle remains untouched. I'm not 100% sure if it's possible to invert an element's Clip or OpacityMask, so the way I achieved this is kind of hacky.
Your original code was very buggy, not DRY, and the handles didn't resize properly so I fixed that.
Final result
XAML
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="/Assets/Image.jpg" Stretch="None" />
</Grid.Background>
<Grid x:Name="OuterRect">
<Grid.Resources>
<Style x:Key="HandleStyle" TargetType="Rectangle">
<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="30" />
<Setter Property="StrokeThickness" Value="4" />
<Setter Property="Stroke" Value="Red" />
<Setter Property="Fill" Value="Yellow" />
</Style>
</Grid.Resources>
<Rectangle Fill="Black" Opacity="0.6" />
<Grid x:Name="Rect" Width="300" Height="400">
<Rectangle Stroke="Red" StrokeThickness="4">
<Rectangle.Fill>
<ImageBrush ImageSource="/Assets/Image.jpg" Stretch="None" />
</Rectangle.Fill>
</Rectangle>
<Rectangle
x:Name="HandleTopLeft"
Style="{StaticResource HandleStyle}"
MouseMove="Handle_MouseMove"
MouseLeftButtonDown="Handle_MouseLeftButtonDown"
MouseLeftButtonUp="Handle_MouseLeftButtonUp"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Rectangle
x:Name="HandleTopRight"
Style="{StaticResource HandleStyle}"
MouseMove="Handle_MouseMove"
MouseLeftButtonDown="Handle_MouseLeftButtonDown"
MouseLeftButtonUp="Handle_MouseLeftButtonUp"
HorizontalAlignment="Right"
VerticalAlignment="Top" />
<Rectangle
x:Name="HandleBottomLeft"
Style="{StaticResource HandleStyle}"
MouseMove="Handle_MouseMove"
MouseLeftButtonDown="Handle_MouseLeftButtonDown"
MouseLeftButtonUp="Handle_MouseLeftButtonUp"
HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Rectangle
x:Name="HandleBottomRight"
Style="{StaticResource HandleStyle}"
MouseMove="Handle_MouseMove"
MouseLeftButtonDown="Handle_MouseLeftButtonDown"
MouseLeftButtonUp="Handle_MouseLeftButtonUp"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</Grid>
</Grid>
</Grid>
C# code-behind
const double MIN_RECT_WIDTH = 80;
const double MIN_RECT_HEIGHT = 80;
bool isDragging;
Point startPoint;
Size startSize;
private void Handle_MouseMove(object sender, MouseEventArgs e)
{
if (!isDragging)
return;
var handle = (Rectangle)sender;
var p = e.GetPosition(null);
var deltaX = p.X - startPoint.X;
var deltaY = p.Y - startPoint.Y;
if (handle == HandleTopLeft || handle == HandleBottomLeft) deltaX = -deltaX;
if (handle == HandleTopLeft || handle == HandleTopRight) deltaY = -deltaY;
Rect.Width = Math.Min(OuterRect.ActualWidth, Math.Max(MIN_RECT_WIDTH, startSize.Width + deltaX * 2));
Rect.Height = Math.Min(OuterRect.ActualHeight, Math.Max(MIN_RECT_HEIGHT, startSize.Height + deltaY * 2));
}
private void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var handle = (Rectangle)sender;
handle.CaptureMouse();
isDragging = true;
startPoint = e.GetPosition(null);
startSize = Rect.RenderSize;
}
private void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
var handle = (Rectangle)sender;
handle.ReleaseMouseCapture();
isDragging = false;
}

Global Variables and GlowFilters is not working

Good day all,
I m new to actionscript3 , and I cant solve few problems on my code. The first problem is glowfilter is not run. According to my research glowfilter 's alpha is set like that but , when ı click true answer it do not response. But the ı try algorithm ıt enter the right case. The second problem is I want to define write answer as global but when ı changed the rightAnswer in a function it is not change,how can ı over this problem ? I think defining global variable in actionscript is different from c .
Thank you for your help and sorry for my bad english!
<s:Button id="answer1" width="388" height="68" label="" cornerRadius="16"
fontFamily="Georgia" fontSize="17" click="checkanswers(1)">
<s:filters>
<mx:GlowFilter id="answer1_glow" color="0x00ff00" alpha="0" strength="3"/>
<mx:GlowFilter id="answer1_glow2" color="0xff0000" alpha="0" strength="3"/>
</s:filters>
</s:Button>
<s:Button id="answer2" width="388" height="68" label="" cornerRadius="16"
fontFamily="Georgia" fontSize="17" click="checkanswers(2)">
<s:filters>
<mx:GlowFilter id="answer2_glow" color="0x00ff00" alpha="0" strength="3"/>
<mx:GlowFilter id="answer2_glow2" color="0xff0000" alpha="0" strength="3"/>
</s:filters>
</s:Button>
<s:Button id="answer3" width="388" height="68" label="" cornerRadius="16"
fontFamily="Georgia" fontSize="17" click="checkanswers(3)">
<s:filters>
<mx:GlowFilter id="answer3_glow" color="0x00ff00" alpha="0" strength="3"/>
<mx:GlowFilter id="answer3_glow2" color="0xff0000" alpha="0" strength="3"/>
</s:filters>
</s:Button>
<s:Button id="answer4" width="388" height="68" label="" cornerRadius="16"
fontFamily="Georgia" fontSize="17" click="checkanswers(4)">
<s:filters>
<mx:GlowFilter id="answer4_glow" color="0x00ff00" alpha="0" strength="3"/>
<mx:GlowFilter id="answer4_glow2" color="0xff0000" alpha="0" strength="3"/>
</s:filters>
</s:Button>
</s:VGroup>
<fx:Script>
<![CDATA[
import flash.events.TimerEvent;
import flash.utils.Timer;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
private var baseTimer:int;
private var t:Timer;
private const TIMER_INTERVAL:Number = 10;
public var rightAnswer:int = 0 ; // ---> ı want to use a global rightAnswer .
public function checkanswers(answer:int):void{
trace("answer is " + answer );
trace("rightanswer is " + rightAnswer);
if ( answer == rightAnswer) {
switch (answer) {
case 1 :
answer1.label = "green";
answer1.alpha = 1; // ı want to change glowfilters alpha in there.
break;
case 2 :
answer2.label = "green";
answer2_glow.alpha = 1;
break;
case 3 :
answer3.label = "green";
answer3_glow.alpha = 1;
break;
case 4 :
answer4.label = "green";
answer4_glow.alpha = 1;
break;
default :
break;
}
}
else{
switch (answer) {
case 1 :
answer1.label = "red";
answer1_glow2.alpha = 1;
break;
case 2 :
answer2.label = "red";
answer2_glow2.alpha = 1.0;
break;
case 3 :
answer3.label = "red;
answer3_glow2.alpha = 1.0;
break;
case 4 :
answer4.label = "red";
answer4_glow2.alpha = 1.0;
break;
default :
break;
}
switch (rightAnswer) {
case 1 :
answer1.label = "green";
answer1_glow.alpha = 1;
break;
case 2 :
answer2.label = "green";
answer2_glow.alpha = 1;
break;
case 3 :
answer3.label = "green";
answer3_glow.alpha = 1;
break;
case 4 :
answer4.label = "green";
answer4_glow.alpha = 1;
break;
default :
break;
}
}
}
public function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
soru.text = " En büyük kim ?";
answer1.label = "Galasaray";
answer2.label = "Bursaspor";
answer3.label = "Beşiktaş";
answer4.label = "Fenerbahçe";
var rightAnswer:int = 2;
trace(" rightAnswer fonkideki " + rightAnswer);
}
]]>
</fx:Script>
You issue is with variable scope, it is not doing what you think it is doing.
When you use keyword "var" you re creating a new variable in the current scope.
In this case you are trying to assign 2 to the class level variable "rightAnswer" when in fact you are creating a new variable called "rightAnswer" scoped to function level.
public function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
soru.text = " En büyük kim ?";
answer1.label = "Galasaray";
answer2.label = "Bursaspor";
answer3.label = "Beşiktaş";
answer4.label = "Fenerbahçe";
var rightAnswer:int = 2; // <<<<--- right here is your problem
trace(" rightAnswer fonkideki " + rightAnswer);
}
So instead do this.
public function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
soru.text = " En büyük kim ?";
answer1.label = "Galasaray";
answer2.label = "Bursaspor";
answer3.label = "Beşiktaş";
answer4.label = "Fenerbahçe";
var rightAnswer:int = 12345678; // <<<<--- right here is your problem
this.rightAnswer = 2; // <<<<--- here is your correction
trace(" rightAnswer class level" + this.rightAnswer);
trace(" rightAnswer function level" + rightAnswer);// << -- this can only be accessed inside of the current function
}

Draw a slice of pie for a chart using Flex - test code and screenshot attached

In a Flex 4.7 web application I'm trying to draw a simple pie chart in red and green colors.
So I have drawn a _red circle and then right above it I have drawn a _green circle:
And I was hoping to set an angle on the latter - to reduce it to a "slice of pie", but can't find any method or property for that in spark.primitives.Ellipse
Does anybody please have a good suggestion here?
My complete and simple test code is below:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
applicationComplete="init()">
<fx:Script>
<![CDATA[
private function init():void {
// XXX how to set _green angle?
}
]]>
</fx:Script>
<s:Ellipse id="_red" height="60" width="60" x="110" y="90">
<s:fill>
<s:SolidColor color="#CC0000" />
</s:fill>
</s:Ellipse>
<s:Ellipse id="_green" height="60" width="60" x="110" y="90">
<s:fill>
<s:SolidColor color="#66CC66" />
</s:fill>
</s:Ellipse>
</s:Application>
Because it is too heavyweight, I don't want to use mx.charts.PieChart, since the chart will be shown in an item renderer: Calculate a quotient in one table and store it in another table
Also, I've searched the net and all code examples drawing wedges call curveTo multiple times, but I wonder if a simple mask to partially cover the _green circle could be used instead?
One approach would be to draw wedges to a <s:SpriteVisualElement> or use fill as a mask using nl.funkymonkey.drawing.DrawingShapes:
Ultimately ending up as:
Example MXML implementation:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
public function drawWedge(target:Graphics, x:Number, y:Number, radius:Number, arc:Number, startAngle:Number=0, yRadius:Number=0):void
{
if (yRadius == 0)
yRadius = radius;
target.moveTo(x, y);
var segAngle:Number, theta:Number, angle:Number, angleMid:Number, segs:Number, ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number;
if (Math.abs(arc) > 360)
arc = 360;
segs = Math.ceil(Math.abs(arc) / 45);
segAngle = arc / segs;
theta = -(segAngle / 180) * Math.PI;
angle = -(startAngle / 180) * Math.PI;
if (segs > 0)
{
ax = x + Math.cos(startAngle / 180 * Math.PI) * radius;
ay = y + Math.sin(-startAngle / 180 * Math.PI) * yRadius;
target.lineTo(ax, ay);
for (var i:int = 0; i < segs; ++i)
{
angle += theta;
angleMid = angle - (theta / 2);
bx = x + Math.cos(angle) * radius;
by = y + Math.sin(angle) * yRadius;
cx = x + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
cy = y + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
target.curveTo(cx, cy, bx, by);
}
target.lineTo(x, y);
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = _green.graphics;
g.clear();
g.beginFill(0x66CC66);
drawWedge(g, 30, 30, 30, 245);
g.endFill();
}
]]>
</fx:Script>
<s:Ellipse id="_red"
height="60"
width="60"
x="110"
y="90">
<s:fill>
<mx:SolidColor color="0xCC0000" />
</s:fill>
</s:Ellipse>
<s:SpriteVisualElement id="_green"
height="60"
width="60"
x="110"
y="90" />
</s:Application>
Even leaner is to simply perform all drawing via low-level graphics operations instead of using the Spark ellipse primitive.

Calling the zoom in and out of context menu from custom button in flex3

I want to call the zoom in and zoom out function of context menu from custom button In adobe flex application.
Code something like this :
onZoomInButtonClick()
{
this.contextMenu.customItems.zoom.doIn();
}
There is (at least to my knowledge) no way for you to access the flash player zoom in/out commands via code.
You can fake it though by doing the following in your document class (top-most display object under stage)
stage.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheel,true,2); //listen on the capture phase of the event and give a higher priority than default so it reacts before your grid
function mouseWheel(e:MouseEvent):void {
if(!e.ctrlKey) return; //Ctrl has to be pressed or we ignore the wheel
e.stopImmediatePropagation(); //this stops the event from firing on anything else, like your data grid
var tmpScale:Number = scaleX + (e.delta > 0 ? .2 : -.2); //lets zoom in/out in incriments of 20% (.1)
if(tmpScale < 1){ //if the scale is less than one now, lets keep it at 1
tmpScale = 1;
this.scaleX = 1;
this.x = 0;
this.scaleY = 1;
this.y = 0;
return;
}
if(tmpScale > 4){ //lets set the max to 4
tmpScale = 4;
}
scaleAroundMouse(this,tmpScale);
}
function scaleAroundMouse(objectToScale:DisplayObject, scaleAmount:Number, bounds:Rectangle = null):void {
// scaling will be done relatively
var relScaleX:Number = scaleAmount / objectToScale.scaleX;
var relScaleY:Number = scaleAmount / objectToScale.scaleY;
// map vector to centre point within parent scope
var scalePoint:Point = objectToScale.localToGlobal( new Point(objectToScale.mouseX, objectToScale.mouseY));
scalePoint = objectToScale.parent.globalToLocal( scalePoint );
// current registered postion AB
var AB:Point = new Point( objectToScale.x, objectToScale.y );
// CB = AB - scalePoint, objectToScale vector that will scale as it runs from the centre
var CB:Point = AB.subtract( scalePoint );
CB.x *= relScaleX;
CB.y *= relScaleY;
// recaulate AB, objectToScale will be the adjusted position for the clip
AB = scalePoint.add( CB );
// set actual properties
if(bounds){
var limits:Rectangle = new Rectangle(
bounds.x + (bounds.width - (objectToScale.width * relScaleX)),
bounds.y + (bounds.height - (objectToScale.height * relScaleY)),
(objectToScale.width * relScaleX) - bounds.width,
(objectToScale.height * relScaleY) - bounds.height
);
if(AB.x < limits.x) AB.x = limits.x;
if(AB.x > limits.x + limits.width) AB.x = limits.x + limits.width;
if(AB.y < limits.y) AB.y = limits.y;
if(AB.y > limits.y + limits.height) AB.y = limits.y + limits.height;
}
objectToScale.scaleX = scaleAmount;
objectToScale.scaleY = scaleAmount;
objectToScale.x = AB.x;
objectToScale.y = AB.y;
}
Ok, advancedatagrid may listen keyboard events, when ctrl key down - listen mousewheel events and change scale, see example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function doMouseWheel(evt:MouseEvent):void
{
scaleX = scaleY += evt.delta * 0.1;
}
protected function adg_keyDownHandler(event:KeyboardEvent):void
{
if (event.ctrlKey)
{
systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);
}
}
protected function adg_keyUpHandler(event:KeyboardEvent):void
{
if (!event.ctrlKey)
{
systemManager.removeEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);
}
}
]]>
</fx:Script>
<mx:AdvancedDataGrid id="adg" keyDown="adg_keyDownHandler(event)" keyUp="adg_keyUpHandler(event)"
horizontalCenter="0" verticalCenter="0">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="#label"/>
<mx:AdvancedDataGridColumn dataField="#data" />
</mx:columns>
<mx:dataProvider>
<s:XMLListCollection id="dp">
<s:source>
<fx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</fx:XMLList>
</s:source>
</s:XMLListCollection>
</mx:dataProvider>
</mx:AdvancedDataGrid>
</s:Application>
In order to zoom in/out a vector graphics, you plainly change its scaleX and scaleY properties uniformly. The vector renderer of Flash will draw you a correct picture. In order to zoom in on a Bitmap and not get pixelated output, you have to convert it into a vector graphics object like this:
var sh:Shape=new Shape();
sh.graphics.beginBitmapFill(yourBitmap);
sh.graphics.lineStyle(0,0,0); // to not have border lines
sh.graphics.drawRect(0,0,yourBitmap.width,yourBitmap.height);
sh.graphics.endFill();
And then adjusting scaleX and scaleY of that shape will produce interpolated output as you seemingly want.

Tic Tac Toe Game in Flex

I am newer in FLEX and currently i am using FLEX 3.0
I want to develop a Tic Tac Toe game in FLEX. At first i think this one is the easiest for me but now its going to be very tough for me. I have searched on Internet but not a single link helps me that much so please give me proper Idea with proper code. Here i am giving you the sample code. its a bit of complex so sorry for that.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#000000"
horizontalAlign="center" verticalAlign="middle" height="100%" width="100%" verticalGap="0" horizontalGap="0">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Image;
private var blnFirst:Boolean = true;
private var arr0:Array = new Array();
private var arr1:Array = new Array();
private var arr2:Array = new Array();
private var count:int = 0;
private var arr:Array = new Array();
private var pl1Won:Boolean = false;
private var pl2Won:Boolean = false;
public function img_click(event:Event):void
{
if(event.currentTarget.enabled)
{
count++;
if(blnFirst)
{
blnFirst = false;
var itemp:Image = new Image();
itemp.percentHeight = 100;
itemp.percentWidth = 100;
itemp.source = "Images/Circle.png";
event.currentTarget.addChild(itemp);
event.currentTarget.enabled = false;
arrayInsert(event.currentTarget.id,true);
}
else
{
blnFirst = true;
var itemp:Image = new Image();
itemp.percentHeight = 100;
itemp.percentWidth = 100;
itemp.source = "Images/Cross.png";
event.currentTarget.addChild(itemp);
event.currentTarget.enabled = false;
arrayInsert(event.currentTarget.id,false);
}
}
if(count == 9)
{
arr = [arr0, arr1, arr2];
}
}
private function arrayInsert(id:String,value:Boolean):void
{
if(id == "box00")
arr0[0] = value;
if(id == "box01")
arr0[1] = value;
if(id == "box02")
arr0[2] = value;
if(id == "box10")
arr1[0] = value;
if(id == "box11")
arr1[1] = value;
if(id == "box12")
arr1[2] = value;
if(id == "box20")
arr2[0] = value;
if(id == "box21")
arr2[1] = value;
if(id == "box22")
arr2[2] = value;
}
private function btn_click():void
{
for(var i:int=0;i<3;i++)
{
for(var j:int=0;j<3;j++)
{
//very confused in this part
}
}
}
]]>
</mx:Script>
<mx:VBox height="500" width="500" borderStyle="solid" borderThickness="3" borderColor="#000000"
backgroundColor="#ffffff" verticalGap="0" horizontalGap="0">
<mx:HBox width="100%" height="33.3%" horizontalGap="0" verticalGap="0">
<mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box00" >
</mx:Box>
<mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box01">
</mx:Box>
<mx:Box height="100%" width="33.4%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box02">
</mx:Box>
</mx:HBox>
<mx:HBox width="100%" height="33.3%" horizontalGap="0" verticalGap="0">
<mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box10">
</mx:Box>
<mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box11">
</mx:Box>
<mx:Box height="100%" width="33.4%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box12">
</mx:Box>
</mx:HBox>
<mx:HBox width="100%" height="33.4%" horizontalGap="0" verticalGap="0">
<mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box20">
</mx:Box>
<mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box21">
</mx:Box>
<mx:Box height="100%" width="33.4%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
click="{img_click(event);}" id="box22">
</mx:Box>
</mx:HBox>
</mx:VBox>
<mx:Button click="{btn_click();}" />
</mx:Application>
I have check the winning condition on btn_click() function but you can give me the idea to change it when the one row is completed.
I want to know how to handle the array of TicTacToe Game.
Assuming that you are creating a tic tac toe of 3x3 grid.
Create a two dimensional array for better visualization.
Initialize them to 0.
Each time a 0 is entered at a[i,j] assign -1 to a[i,j] if empty
Check the ith row and jth column for sum -3, also if i=j or i+j=2 check for diagonals to have sum -3, you have a winner.
Each time a X is entered at a[i,j] assign 1 to a[i,j] if empty
Check the ith row and jth column for sum 3, also if i=j or i+j=2 check for diagonals to have sum 3, you have a winner
This game can develop using different Logic.
Refer 1 and 2 Which source enabled.
and try to accomplish your game.
The below was written as an assignment for students (total beginners)
The classwork: http://code.google.com/p/as3-workshop/source/browse/#svn%2Ftrunk%2Fsrc%2Ftld%2Fcourse%2Flesson1 (the game played by the player herself consequently taking sides of "O" and "X".
The homework: http://code.google.com/p/as3-workshop/source/browse/#svn%2Ftrunk%2Fsrc%2Ftld%2Fcourse%2Fhomework1 (the computer plays against the human).
The examples aren't very well documented (we did commenting and explanation in class, which I didn't record), but considering there's not much code, you should get through it.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.Graphics;
import flash.text.TextField;
import flash.text.TextFormat;
/**
* ...
* #author Jeet Chauhan
*/
public class TicTacToe extends Sprite
{
private var crossTurn:Boolean = true;
private var rects:Vector.<Rect>;
var currentMove:Number = 0;
public function TicTacToe()
{
createBoard();
}
private function createBoard():void
{
var g:flash.display.Graphics = this.graphics;
g.lineStyle(2, 0x000000);
g.beginFill(0xffff00);
g.drawRect(10, 10, 190, 190);
rects = new Vector.<Rect>();
var r:Rect
for (var i:int = 0; i < 9; i++)
{
r = new Rect();
this.addChild(r);
r.id = i;
r.y = 20 + Math.floor(i % 3) * 60;
r.x = 20 + Math.floor(i / 3) * 60;
r.addEventListener(MouseEvent.CLICK, moveNextTurn);
rects.push(r);
}
}
private function moveNextTurn(e:MouseEvent):void
{
var target:Rect = e.target as Rect
target.removeEventListener(MouseEvent.CLICK, moveNextTurn);
var turn:Sprite;
if (crossTurn) {
turn = target.addChild(new Cross) as Sprite;
target.occupied = "X";
} else {
turn = target.addChild(new Circle) as Sprite;
target.occupied = "O";
}
turn.x = 15;
turn.y = 15;
currentMove++;
if (currentMove > 4) checkAnswer();
crossTurn = !crossTurn;
}
private function checkAnswer():void
{
var winner:String = "_";
for (var i:int = 0, j = 0; i < 9; i += 3, j++)
{
if ((rects[i].occupied != "_") && (rects[i].occupied == rects[i+1].occupied) && (rects[i+1].occupied == rects[i+2].occupied))
{
winner = rects[i].occupied;
}
if ((rects[j].occupied != "_") && (rects[j].occupied == rects[j+3].occupied) && (rects[j+6].occupied == rects[j+3].occupied))
{
winner = rects[j].occupied;
}
}
if(rects[4].occupied != "_"){
if ((rects[0].occupied == rects[4].occupied) && (rects[8].occupied == rects[4].occupied))
{
winner = rects[0].occupied;
}
if ((rects[2].occupied == rects[4].occupied) && (rects[6].occupied == rects[4].occupied))
{
winner = rects[2].occupied;
}
}
if(winner != "_"){
trace("WINNER" + winner);
for (i = 0; i < 9; i++)
{
if (rects[i].hasEventListener(MouseEvent.CLICK))
{
rects[i].removeEventListener(MouseEvent.CLICK,moveNextTurn)
}
}
var tf:TextField = addChild(new TextField()) as TextField;
tf.defaultTextFormat = new TextFormat("", 20, 0xff0000);
tf.text = winner + " wins";
tf.x = 200;
tf.y = 200;
}
if (currentMove == 9 && winner == "_") {
trace("DRAW REEPLAy");
//TODO: replay logic
}
}
}
}
import flash.display.Graphics;
import flash.display.Sprite;
class Rect extends Sprite {
public var id:Number;
public var occupied:String = "_";// should be 0/_/X
function Rect() {
var g:Graphics = this.graphics;
g.lineStyle(1, 0x00ff00);
g.beginFill(0x000000);
g.drawRect(0, 0, 50, 50);
}
}
class Circle extends Sprite {
function Circle() {
var g:Graphics = this.graphics;
g.lineStyle(5, 0xff0000);
g.drawCircle(10, 10, 10);
}
}
class Cross extends Sprite {
function Cross() {
var g:Graphics = this.graphics;
g.lineStyle(5, 0x0000ff);
g.moveTo(0, 0);
g.lineTo(20, 20);
g.moveTo(20, 0);
g.lineTo(0, 20);
}
}
its a working example you can compile it, no need of graphics, hope it help