My bar charts overlap eachother. Need help to solve it - actionscript-3

im making a code where I have an input field and a button on my screen. In the code below btnLeggTil (its norwegian) adds the number you wrote in the input field. It determines the height of the bars. My code is supposed to let the user add bars of whatever the height he/she prefers. As you can see I have put alot of my code inside a loop. The problem with the code is that the bars it makes, overlap eachother. I need to have a space between each bar, but don't know how. Thanks in advance! You can test out the code yourself and see (just remember to make a button and input field with names btnLeggTil and txtInn.
("høyde" means height) ("bredde" means width) ("verdier" means values) sorry its all norwegian
var verdier:Array = new Array();
btnLeggTil.addEventListener(MouseEvent.CLICK, leggtil);
function leggtil (evt:MouseEvent)
{
verdier.push(txtInn.text);
var totHøyde:int = 200; //total height on diagram
var totBredde:int = 450; //total width on diagram
var antall:int = verdier.length;
var xv:int = 50;
var yb:int = 350;
var bredde:int = (totBredde/antall) * 0.8;
var mellom:int = (totBredde/antall) * 0.2;
var maksHøyde:int = maksVerdi(verdier);
function maksVerdi(arr:Array):Number //finds the biggest value in the array
{
//copies to not destroy the order in the original
var arrKopi:Array = arr.slice();
arrKopi.sort(Array.NUMERIC|Array.DESCENDING);
return arrKopi[0];
}
for(var i:int = 0; i < verdier.length; i++)
{
graphics.lineStyle(2, 0x000000);
graphics.beginFill(0x00ff00);
graphics.drawRect(xv + (bredde+mellom)*i, yb, bredde, -verdier[i] * (totHøyde/maksHøyde));
graphics.endFill();
var txtTall = new TextField();
txtTall.x = xv + (bredde+mellom)*i + 5;
txtTall.y = yb - verdier[i] - 10;
txtTall.type = "dynamic";
txtTall.text = verdier[i];
addChild(txtTall);
}
}

You need to modify your for loop a bit,
graphics.clear();
graphics.lineStyle(2, 0x000000);
graphics.beginFill(0x00ff00);
for(var i:int = 0; i < verdier.length; i++)
{
graphics.drawRect(xv + (bredde+mellom)*i, yb, bredde, -verdier[i] * (totHøyde/maksHøyde));
var txtTall = new TextField();
txtTall.x = xv + (bredde+mellom)*i + 5;
txtTall.y = yb - verdier[i] - 10;
txtTall.type = "dynamic";
txtTall.text = verdier[i];
addChild(txtTall);
}
graphics.endFill();

Related

myTextField.text does not return any value

I'm trying to make a numberline with boxes pointing at different values. Inside each box is a TextField where the user is supposed to wright down the value the box is pointing at. When all the boxes are filled out, the answere in the boxes should be compared to the correct answeres.
The problem is that when I try to acsess the text in the textField, 1-2 of them randomly won't return any values. The TextFields that don't respond are also impossible to edit and navigate inside after a number is filled out.
This is the code where I construct the textField:
var textFields:Array = [];
var box:Sprite = new Sprite();
var tfor:TextFormat = new TextFormat();
for (var i:int = 0; i<3; i++)
{
tfor.size = 30;
var tfb:TextField = new TextField();
tfb.defaultTextFormat = tfor;
tfb.width = boxWidth;
tfb.height = boxWidth;
tfb.maxChars = 3;
tfb.text = "";
tfb.restrict = "0-9.";
tfb.multiline = false;
tfb.x = bx;
tfb.y = by;
tfb.selectable = true;
tfb.type = TextFieldType.INPUT;
box.addChild(tfb);
textFields.push(tfb);
}
And this is where I check the answere:
public function checkBoxAnswere(numbs:Array) {
var points:Number = 0;
for(var i:int = 0; i<textFields.length; i++) {
trace("numb:"+numbs[i]+"arrowText "+textFields[i].text+" .");
//begDes is a function whitch round a value mutch like the .toFixed(number) but returns a number insted of a string
if(begDes(numbs[i], 2)==begDes(Number(textFields[i].text), 2)) {
points+= 0.5;
}
}
return points;
}
It is the textField.text that wont be read. There is no error massenges.

Positioning of Dynamically attached library objects in ActionScript 3.0

I am re-learning ActionScript, and I am trying to learn from
digitaldogbyte.com 'Dynamically attached library objects in ActionScript 3.0'. This example, in digialdogbyte, sets the position of each MovieClip across the X position. At high number of numberOfClips, the Objects run right and of the Stage, and out-of-view.
I am trying to adapt the following script to:
wrap the flow of objects to a new line when the edge of the Stage is reached
every other block is coloured red with text colour set to white
The ActionScript:
var numberOfClips:Number = 150;
var xStart:Number = 0;
var yStart:Number = 0;
var xVal:Number = xStart;
var xOffset:Number = 2;
for (var i:Number=0; i<numberOfClips; i++)
{
var mc:myClip = new myClip();
mc.name = "myClip"+(i+1);
this.addChild (mc);
mc.y = yStart;
mc.x = xVal;
xVal = mc.x + mc.width + this.xOffset;
mc.label_txt.text = (i).toString();
}
I'd be grateful if anyone could suggest ways to adapt this script as such.
Add something simple like:
var numberOfClips:Number = 150;
var grid:Rectangle = new Rectangle(0, 0, 20, 20);
for(var i:Number = 0; i < numberOfClips; i++)
{
var mc:myClip = new myClip();
addChild(mc);
mc.x = grid.x;
mc.y = grid.y;
grid.x += grid.width;
// If the new x position is outside of the stage, reset it and
// increase the y position.
if(grid.x + grid.width > stage.stageWidth)
{
grid.x = 0;
grid.y += grid.height;
}
}
You can adjust the width and height of the grid on line 2.

Previous function is called/Event listener 'delayed' by one

I have altered an image carousel I downloaded, to rotate to the next picture (left or right) when I click one of the two buttons I added. The original carousel was built to rotate according to mouse movement/position.
For some reason, whenever I click the 'right' or 'left' button, which each rotate the carousel in their respecive directions, the event listener/handler is one 'behind'. It does whatever it should've done the previous time I clicked a button. To put it more clearly, the first button click it does nothing. The second button click it responds to what I clicked the last time.
Example:
I click the left button, nothing happens.
Then I click the right button, the carousel rotates to the left (because I clicked the left button before this click)
Then I click the left button, the carousel rotates to the right (idem).
See the code below. It seems fairly simple; no complex structure or whatever.
You can ignore most vars and positioning (like focalLength,vanishingPointX,radius, etc), I suppose. I'm guessing this bug is either related to the importing/processing of the XML, the for() loops, or the structure the .as file has.
package {
//here are all the imports
public class Imagereel extends Sprite {
var imgurl:URLRequest = new URLRequest()
var loadedimgs:uint = 0;
var images_num = 0;
var imageHolders:Array = new Array();
var imageHolder:MovieClip;
var btnLeft:BtnLeft = new BtnLeft;
var btnRight:BtnRight = new BtnRight;
//Set the focal length
var focalLength:Number = 2000;
//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
//The 3D floor for the images
var floor:Number = 40;
//Radius of the circle
var radius:Number = 350;
//We use 70x70 sized images (change this if different for your images)
const IMAGE_WIDTH:uint = 393;
const IMAGE_HEIGHT:uint = 249;
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
public function Imagereel() {
//here's the positioning of the buttons
//here are the button addChilds
xmlLoader.load(new URLRequest("carousel.xml"));
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
btnLeft.addEventListener(MouseEvent.CLICK, prevImg);
btnRight.addEventListener(MouseEvent.CLICK, nextImg);
}
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
Parseimage(xmlData);
}
function Parseimage(imageinput:XML):void {
var imageurl:XMLList = imageinput.image.iurl;
images_num = imageurl.length();
for (var i:int = 0; i < images_num; i++) {
var urlElement:XML = imageurl[i];
imageHolder = new MovieClip();
var imageLoader = new Loader();
imageHolder.addChild(imageLoader);
imageHolder.mouseChildren = false;
imageLoader.x = - (IMAGE_WIDTH);
imageLoader.y = - (IMAGE_HEIGHT);
imageHolders.push(imageHolder);
imgurl.url = imageurl[i];
imageLoader.load(imgurl);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
}
function imageLoaded(e:Event) {
//Update the number of loaded images
loadedimgs++;
//Check to see if this is the last image loaded
if (loadedimgs == images_num) {
//Set up the carousel
initializeCarousel();
}
}
function initializeCarousel() {
//Calculate the angle difference between the images (in radians)
var angleDifference:Number = Math.PI * (360 / images_num) / 180;
//Loop through the images
for (var i:uint = 0; i < imageHolders.length; i++) {
//Assign the imageHolder to a local variable
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
//Get the angle for the image (we space the images evenly)
var startingAngle:Number = angleDifference * i -0.30;
//Position the imageHolder
imageHolder.xpos3D = radius * Math.cos(startingAngle);
imageHolder.zpos3D = radius * Math.sin(startingAngle);
imageHolder.ypos3D = floor;
//Set a "currentAngle" attribute for the imageHolder
imageHolder.currentAngle = startingAngle;
var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
//Position the imageHolder to the stage (from 3D to 2D coordinates)
imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
//Add the imageHolder to the stage
addChild(imageHolder);
}
sortZ();
}
function prevImg(e:MouseEvent) {
//Loop through the images
for (var i:uint = 0; i < imageHolders.length; i++) {
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
//Set a new 3D position for the imageHolder
imageHolder.xpos3D = radius * Math.cos(imageHolder.currentAngle);
imageHolder.zpos3D = radius * Math.sin(imageHolder.currentAngle);
var scaleRatio;
//Calculate a scale ratio
scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
//Update the imageHolder's coordinates
imageHolder.x = vanishingPointX+imageHolder.xpos3D * scaleRatio;
imageHolder.y = vanishingPointY+imageHolder.ypos3D * scaleRatio;
//spinning the carousel
imageHolder.currentAngle += 0.6285;
}
//Call the function that sorts the images so they overlap each others correctly
sortZ();
}
function nextImg(e:MouseEvent) {
//Loop through the images
for (var i:uint = 0; i < imageHolders.length; i++) {
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
//Set a new 3D position for the imageHolder
imageHolder.xpos3D = radius * Math.cos(imageHolder.currentAngle);
imageHolder.zpos3D = radius * Math.sin(imageHolder.currentAngle);
var scaleRatio;
//Update the imageHolder's coordinates
imageHolder.x = vanishingPointX+imageHolder.xpos3D * scaleRatio;
imageHolder.y = vanishingPointY+imageHolder.ypos3D * scaleRatio;
//spinning the carousel
imageHolder.currentAngle -= 0.6285;
}
sortZ();
}
//This function sorts the images so they overlap each others correctly
function sortZ():void {
imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
//Set new child indexes for the images
for (var i:uint = 0; i < imageHolders.length; i++) {
setChildIndex(imageHolders[i], i);
}
}
}
}
So what this code does:
carousel.xml is imported
The xml is processed so that the image paths there are converted to displayed images
A carousel is made out of the images
The sortZ() function makes sure that the images are aligned in 3D perspective properly; just like z-index in CSS would do.
When clicking btnLeft or btnRight, the carousel rotates to the left or right (this is done by updating the value of imageHolder.currentAngle).
When I put trace's inside the prevImg() and nextImg() functions, I do see the trace that
belongs to the right function, and not the previously clicked one. So it seems that Flash does call the right event.
So how do I get rid of this bug?
Help and tips are greatly appreciated!
Move imageHolder.currentAngle assignment (the line where you change it) BEFORE the code that alters imageHolder's 3D position.
for (var i:uint = 0; i < imageHolders.length; i++) {
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
//Set a new 3D position for the imageHolder
imageHolder.currentAngle += 0.6285; // <== HERE
imageHolder.xpos3D = radius * Math.cos(imageHolder.currentAngle);
imageHolder.zpos3D = radius * Math.sin(imageHolder.currentAngle);
var scaleRatio;
//Calculate a scale ratio
scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
//Update the imageHolder's coordinates
imageHolder.x = vanishingPointX+imageHolder.xpos3D * scaleRatio;
imageHolder.y = vanishingPointY+imageHolder.ypos3D * scaleRatio;
//spinning the carousel
}
The same for the other function.

alternative way for positioning objects

I'm looking for an alternative way to position a bunch of objects.
Here is my code:
private var orderContainer:Sprite;
private var currentOrder:uint = 1;
private var orderArray:Array;
private var scroller:uint;
private var xPos:uint;
private var yPos:uint;
.....
xPos = 55;
yPos = 30;
if (currentOrder == 7){ winkelwagenContent.TestBtn.addEventListener(MouseEvent.CLICK, clickHandler);
scroller++;
xPos = 700*scroller;
yPos = 60;
teller = 1;
currentOrder = 1;
}
orderContainer.x = xPos;
orderContainer.y = yPos;
xPos+=270;
if( teller % 2 == 0){
if(scroller >0){
xPos = (700+(teller*8))*scroller;
}else{
xPos = 55+(teller*8);
}
yPos+=100;
}
teller++;
currentOrder++;
}
private function clickHandler(e:MouseEvent):void{
for each(var order:Object in orderArray){
TweenLite.to(order, .5,{x:order.x-60});
}
}
Basicly what i want is that the objects(ordercontainer) are added to my movieclip in 2 collumns, so 1 left, 1 right, move the y-position down to below the 2 i just added and repeat.
till i get 3 2-collumns under eachother, when it reaches this, the yPosition should get reset to the top and the xPosition should move to the right so i can create a 2-column again next to it, again to 3 2-collumns, reset the yPositon again and repeat till all my objects are added, the amount of objects is variable so the calculation should be flexible.
Its working with the code i have but i have a feeling that i am making it way to complicated again.
You will see that the xPosition adds (teller*8) this is just because my allignment should be slightly diagonal on the yPosition.
There is also a tween attached to a button wich makes all the objects move to the left so the next collumn is visible(this isnt working very well thou, no idea why).
so to summ it up it should go like this:
**(1)** **(2)** **(7)** **(8)**
**(3)** **(4)** **(9)** **(10)**
**(5)** **(6)** **(11)** **(12)**
numbers are for the order the objects are added.
Here's one solution. Suppose you have an array of movieclips called objs.
const colNum:int = 2;
const rowNum:int = 3;
var offset:int = 0;
while (objs.length)
{
for (var j:int=0; j<rowNum; j++)
{
for (var i:int = 0; i<colNum; i++)
{
if (objs.length)
{
var nextObj:MovieClip = objs.shift();
nextObj.x = (offset+i) * nextObj.width;
nextObj.y = j * nextObj.height;
}
}
}
offset+=colNum;
}

How to modify position of children inside loop in AS3

I'm trying to make a dynamic image gallery from and xml. From my tutorials, right now i've got it so it will constantly add the next thumbnail below the other, which is fine, but I'm trying to figure out how to make it that once it reaches a certain y coordinate, it will move the x coordinate over and stack them again. So that rather one long list of thumbs, it will be a side by side stack. For some reason, I can't get it in my head how something like this would work. My goal is to have a side by side stack that I will end up putting in a movie clip that will be masked to show only 2 stacks at a time. Then when clicking a button will slide it over. I was planning to use the "movieclip.length" to calculate how far over to move it, but i haven't gotten that far yet. This is what I got:
var gallery_xml:XML;
var xmlReq:URLRequest = new URLRequest("xml/content.xml");
var xmlLoader:URLLoader = new URLLoader();
var imageLoader:Loader;
function xmlLoaded(event:Event):void
{
gallery_xml = new XML(xmlLoader.data);
info_txt.text = gallery_xml.screenshots.image[0].attribute("thumb");
for(var i:int = 0; i < gallery_xml.screenshots.image.length(); i++)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(gallery_xml.screenshots.image[i].attribute("thumb")));
imageLoader.x = 0;
imageLoader.y = i * 70 + 25;
imageLoader.name = gallery_xml.screenshots.image[i].attribute("src");
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
}
}
xmlLoader.load(xmlReq);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
function showPicture(event:MouseEvent):void
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));
imageLoader.x = 200;
imageLoader.y = 25;
addChild(imageLoader);
}
I can't seem to wrap my head around what I can do to move things over dynamically without having to write a custom if for each set of positions.. I get the feeling I've totally forgotten how to do algebra.
I'd suggest one of the following two solutions (untested):
var next_x:Number = 0.0;
var next_y:Number = 25.0;
for (var i:int = 0; i < gallery_xml.screenshots.image.length(); ++i)
{
// ...
imageLoader.y = next_y;
imageLoader.x = next_x;
next_y += 70;
if (next_y > THRESHOLD)
{
next_x += X_OFFSET;
next_y = 25.0;
}
}
That is, just keep track of where your next image will be placed and adjust that coordinate accordingly when you exceed thresholds. If you want to use your i variable, you'll have to calculate what row and column the image will be placed at:
for (var i:int = 0; i < gallery_xml.screenshots.image.length(); ++i)
{
// ...
var row:int = i % MAX_ITEMS_PER_COLUMN;
var column:int = i / MAX_ITEMS_PER_COLUMN;
imageLoader.y = 25 + row * 70;
imageLoader.x = column * COLUMN_WIDTH;
}