I just need to know how to set its source on the newImage.source = "asset/%myArray%"; line from the array above it. I'm sure there is an easy solution. I'm just not sure how to word the question on Google...
<?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" applicationComplete = "init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
//Gabe Dougherty
//n221
//9-27-12
import mx.controls.Image;
//array of movies
public var myArray:Array = ["batman.jpg","cabin.jpg","christmasVaction.jpg","inception,jpg"];
//init function
public function init():void{
//loops 4 times
for(var i:Number = 0; i < myArray.length; i++){
var arrayEntry:String = myArray[i];
//makes new image
var newImage:Image = new Image();
//sets the image source for each image
newImage.source = "asset/%myArray%";
//adds the image to the stage
grpMovies.addElement(newImage);
}
}
]]>
</fx:Script>
<s:HGroup id="grpMovies" x="430" y="61" width="200" height="200">
</s:HGroup>
</s:Application>
Assuming your images live in asset/ try this:
newImage.source = "asset/" + arrayEntry;
Modify code in your for loop to this:
newImage.source = "asset\\" + myArray[i];
When working with Strings that contain paths you better use \\ signs.
Related
I have an Object on stage, and on click I would like it to move to the center of the stage.
I know that I am supposed to use:
<s:move />
But I just don't know how!
Here is a sample app that does what you want, you can play around with the properties of the move effect.
<?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"
creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Move id="moveEffect"></s:Move>
</fx:Declarations>
<s:BorderContainer id="box">
</s:BorderContainer>
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function init():void
{
box.setStyle("backgroundColor", "#ff0000");
box.width = 200;
box.height = 200;
box.addEventListener(MouseEvent.CLICK, onClick);
moveEffect.xTo = (width-box.width)/ 2;
moveEffect.yTo = (height-box.height) / 2;
}
private function onClick(e:MouseEvent):void
{
moveEffect.play([box]);
}
]]>
</fx:Script>
</s:Application>
Hope that helps.
instead of using attribute x... i used mouseX and everything worked as expected!
Having problem with creating a rectangle with alpha fill. Seems like UIComponent doesnot allow the "Alpha" of the filled rectangle, and converts it into 100% alpha ( alpha=1). How to make a alpha-filled rectangle in flex's UIComponent ?
var uic:UIComponent = new UIComponent();
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xffcc33,0.2) // <<<<<<NOTICE THE ALPHA FILL
mc.graphics.lineStyle( 1,0xffcc33);
mc.graphics.drawRect(0,0,100,100);
mc.graphics.endFill();
uic.addChild(mc);
addElement(uic);
PS: additionally, even the filter effects like "Glow" don't work when adding movieclip to UIComponent.
You could use this code to create rectangle with “ALPHA” fill
<?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"
minWidth="955"
minHeight="600">
<fx:Script>
<![CDATA[
import mx.graphics.SolidColor;
import mx.graphics.SolidColorStroke;
import spark.primitives.Rect;
public function makeRect():void {
var rect:Rect = new Rect();
rect.width = 100;
rect.height = 100;
rect.fill = new SolidColor(0xffcc33, 0.2);
rect.stroke = new SolidColorStroke(0xffcc33, 1);
addElement(rect);
};
]]>
</fx:Script>
<s:Button click="makeRect()"/>
</s:Application>
I wanna do a string effect like this website http://www.bcaa.it/
What kind of script or tutorial can I learn from?
Basically I want to achieve same as the website. Have the bouncing string effects, drag the item and move away others item that near it, drag and the sub object follow with easing...
Hey just started coding this up, need something similar for a graph display I'm working on. Here's my start, just two buttons but the idea could be extrapolated/optimized:
<?xml version="1.0" encoding="utf-8"?>
<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="windowedapplication1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var optimalDistanceUpdateTimer:Timer;
private var optimalDistance:Number = 100;
private var objectUserGrabbed:Button;
private var delayDenominator:Number = 6;
protected function button1_mouseDownHandler(event:MouseEvent):void
{
objectUserGrabbed = event.target as Button;
objectUserGrabbed.startDrag();
}
protected function button1_mouseUpHandler(event:MouseEvent):void
{
objectUserGrabbed.stopDrag();
}
protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
optimalDistanceUpdateTimer = new Timer(33);
optimalDistanceUpdateTimer.addEventListener(TimerEvent.TIMER, optimalDistanceTickedHandler);
optimalDistanceUpdateTimer.start();
}
private function optimalDistanceTickedHandler(event:TimerEvent):void
{
var targetPoint:Point;
var deltaX:Number;
var deltaY:Number;
if(!objectUserGrabbed)
return;
if(objectUserGrabbed == button1)
{
//Basically here I'm playing of Pythagorean theorem for a 45 degree triangle the x component and the y component are the distance of the hypotenuse over Sqrt(2) for different offsets, radially you'd need to adjust this to compute the target point for each object... would do something like var angleForEach:Number = 360/numObjects; then figure out the target point for each of the objects in a loop var angleForThis = angleForEach*index; (in this example only two objects, no loop needed)
targetPoint = new Point(objectUserGrabbed.x-optimalDistance/Math.SQRT2, objectUserGrabbed.y-optimalDistance/Math.SQRT2);
deltaX = (targetPoint.x-button2.x);
deltaY = (targetPoint.y-button2.y);
button2.move(button2.x+deltaX/delayDenominator, button2.y+deltaY/delayDenominator);
}
else
{
targetPoint = new Point(objectUserGrabbed.x+optimalDistance/Math.SQRT2, objectUserGrabbed.y + optimalDistance/Math.SQRT2);
deltaX = (targetPoint.x-button1.x);
deltaY = (targetPoint.y-button1.y);
button1.move(button1.x+deltaX/delayDenominator, button1.y+deltaY/delayDenominator);
}
lineDrawingArea.graphics.clear();
lineDrawingArea.graphics.lineStyle(1);
lineDrawingArea.graphics.moveTo(button1.x + button1.width/2,button1.y + button1.height/2);
lineDrawingArea.graphics.lineTo(button2.x + button2.width/2,button2.y + button2.height/2);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group id="lineDrawingArea"/>
<s:Button id="button1" label="Item 1" mouseDown="button1_mouseDownHandler(event)" mouseUp="button1_mouseUpHandler(event)" x="0" y="0"/>
<s:Button id="button2" label="Item 2" mouseDown="button1_mouseDownHandler(event)" mouseUp="button1_mouseUpHandler(event)" x="0" y="0"/>
</s:WindowedApplication>
I'm having trouble with updating a var and firing a function with it on creationcomplete.
In the main component i declared a var artist. This var certainly works and has a value. I also need that var in another component: a profile component. I am able to get that var with:
newVar = Maincomp(this.parentApplication).artist;
I use the newVar in an API in the profile component. When i launch the API function with a mouseEvent, it works. However, i want to launch the API function on creationComplete and than the var doesn't work: it returns Null. I hoped that making all the involved vars bindable would help, but it doesn't. How can this be fixed?
Extra code to make my case clearer:
In main comp:
public function handleclick(cName:String):void
{
vName = "aVariableIGetFromAnAPI";
}
in profile comp:
public function zoekImages(event:FlexEvent):void
{
var api_URL:String = 'http://ws.audioscrobbler.com/2.0/';
var api_imagemethod:String = 'artist.getImages';
var api_key:String = '99f1f497c0bd598f1ec20571a38e2219';
artistImage = DifficultierAPI(this.parentApplication).vName;
var autocorrect:String = '1';
var limit:String = '4';
api_imagerequest = api_URL + '?method=' + api_imagemethod + '&artist=' + artistImage + '&autocorrect=' + autocorrect + '&api_key=' + api_key + '&limit=' + limit;
imageRequest.send(); // hier maak je connectie met lastfm
}
This code works, but point is that this code works if i call it with a MouseEvent, but doesn't when it needs to launch on creationcomplete. Or well, it returns Null instead of a value. I thought that making the involved vars bindable would fix it, but it doesn't. Any help?
If you're looking to bind the variable all along from the main application to the nested component, simply declare a variable as public and bindable within your component :
Main application
<?xml version="1.0" encoding="utf-8"?>
<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" xmlns:Components="Components.*">
<fx:Script>
<![CDATA[
[Bindable]
public var myMainVar:String;
protected function button1_clickHandler(event:MouseEvent):void
{
myMainVar = "Hi there!";
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button label="Click me to update the coponent's variable" click="button1_clickHandler(event)"/>
<Components:MyCustomComponent myComponentVar="{myMainVar}"/>
</s:WindowedApplication>
Nested component
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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[
[Bindable]
public var myComponentVar:String;
]]>
</fx:Script>
<s:Label text="{myComponentVar}"/>
</s:Group>
I hope it is what you're looking for :-)
I am creating a tabNavigator object in mxml.
TabNavigator contains navigatorContent objects.
Each NavigatorContent further contains multiple hGroups with three radio buttons in it.
All these elements are populated in the tabNavigator via actionScript code dynamically.
I need to select the second radio button within an hgroup, but am not sure how to do this.
<mx:TabNavigator id="tabNav" height="100" width="500" creationComplete="init();" creationPolicy="all">
</mx:TabNavigator>
private function init():void
{
for(var i:int=0;i<=int(arrColl_items[arrColl_items.length - 1][1]);
i++)
{
//after reading from xml var navContent:NavigatorContent = new NavigatorContent();
for (var j:int=0;j<arrColl_items.length;j++)
{
if(arrColl_items[j][1] == i)
{
var hgrp:HGroup = new HGroup();
hgrp.id = String(arrColl_items[j][0]);
var rdBut1:RadioButton=new RadioButton();
hgrp.addElement(rdBut1);
rdBut1.addEventListener(MouseEvent.CLICK, setrdBut1);
var rdBut2:RadioButton=new RadioButton();
hgrp.addElement(rdBut2);
rdBut2.addEventListener(MouseEvent.CLICK, setrdBut2);
var rdBut3:RadioButton=new RadioButton();
hgrp.addElement(rdBut3);
rdBut3.addEventListener(MouseEvent.CLICK, setrdBut3);
}
}
navContent.addElement(hgrp);
tabNav.addChildAt(navContent,i);
}
}
Can anyone please help out on this?
Regards
Aparna
you did not post the data structure, i hope i got it right. The following demo creates and populates a TabNavigator with three NavigatorContent instances containing series of RadioButtons that can be selected using the method 'getHGroupById'.
I am sure it is possible to realize something like this using Bindable Data and ItemRenderes, probably the better solution.
*Nicholas
The Application:
<?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:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:TabNavigator id="tabNav" height="300" width="300" creationComplete="__init();" creationPolicy="all">
</mx:TabNavigator>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.components.NavigatorContent;
import spark.components.VGroup;
/**
* The Data Structure, as I understood it
* perhaps you have to adapt the code if
* this does not match your desired structure
* or hierarchy
* */
private var arrColl_items:ArrayCollection = new ArrayCollection(
[
new ArrayCollection(
// 1st NavigatorContent
[
{id:"0",label:"HGroup_1.1"},
{id:"1",label:"HGroup_1.2"}
]
),
new ArrayCollection(
// 2nd NavigatorContent
[
{id:"2",label:"HGroup_2.1"},
{id:"3",label:"HGroup_2.2"},
{id:"4",label:"HGroup_2.3"}
]
),
new ArrayCollection(
// 3rd NavigatorContent
[
{id:"5",label:"HGroup_3.2"},
{id:"6",label:"HGroup_3.3"},
{id:"7",label:"HGroup_3.4"},
{id:"8",label:"HGroup_3.5"},
{id:"9",label:"HGroup_3.5"}
]
)
]
);
/**
* Invoked on creationComplete
* */
private function __init():void
{
// lets add some navigatorContent
for(var i:int=0;i<arrColl_items.length;i++){
// create the navigatorContent
var navContent:NavigatorContent = new NavigatorContent();
navContent.label = "navContent_"+i;
// add a VGroup
var vgrp:VGroup = new VGroup();
vgrp.id = "vGroup";
// and now we add custom HGroup Components called MyHGroup
for (var j:int=0;j<arrColl_items[i].length;j++)
{
var hgrp:MyHGroup = new MyHGroup();
hgrp.id = arrColl_items[i][j].id;
hgrp.label.text = arrColl_items[i][j].label;
vgrp.addElement(hgrp);
}
navContent.addElement(vgrp);
tabNav.addElementAt(navContent,i);
}
// Accessing the radioButtons is now possible
// using the getHGroupById Method
getHGroupById("0").rb1.selected = true;
getHGroupById("1").rb2.selected = true;
getHGroupById("3").rb3.selected = true;
getHGroupById("7").rb1.selected = true;
// I added a RadioGroup within MyHGroup, lets read the selectedValue
trace(getHGroupById("0").rbGroup.selectedValue);
}
/**
* getHGroupById
* Method that runs through the Data Structure
* and returns a MyHGroup Class with the given id
* #param $id:String The id of the MyHGroup Class you want to fetch
* #return MyHGroup or null if non existent
*
* */
public function getHGroupById($id:String):MyHGroup{
// running through the NavigatorContent Instances
for(var i:uint=0; i<tabNav.numElements; i++){
var navContent:NavigatorContent = NavigatorContent(tabNav.getElementAt(i));
// running through the HGroups within a VGroup
for(var j:uint=0; j<VGroup(navContent.getElementAt(0)).numElements; j++){
var hgrp:MyHGroup = VGroup(navContent.getElementAt(0)).getElementAt(j) as MyHGroup;
if(hgrp.id==$id)return hgrp;
}
}
return null;
}
]]>
</fx:Script>
</s:Application>
Finally the MyHGroup Component used in this example. Create a new MXML File name MyHGroup.mxml and paste the following code.
<?xml version="1.0" encoding="utf-8"?>
<!-- Create a new MXML File name MyHGroup and add this code -->
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="20" paddingLeft="10" >
<fx:Declarations>
<!-- The RadioGroup the Buttons will be linked with -->
<s:RadioButtonGroup id="rbGroup"/>
</fx:Declarations>
<!-- Some fancy label -->
<s:Label id="label" height="20" verticalAlign="middle"/>
<!-- Your Radio Buttons -->
<s:RadioButton id="rb1" group="{rbGroup}"/>
<s:RadioButton id="rb2" group="{rbGroup}"/>
<s:RadioButton id="rb3" group="{rbGroup}"/>
</s:HGroup>