How could be achieved the chart drawn bellow with 1 Chart Series, which can represent multiple not connected, and if possible not sequential ( on the X axis ) lines ?
var sprite:Sprite = new Sprite();
drawChart([ [0,50], [70, 100], [120, 190] ], sprite);
private function drawChart(data:Array, sprite:Sprite):void {
var grachics:Graphics = sprite.graphics;
grachics.beginFill(0xffff00);
for (var i:int = 0; i < data.length; i++) {
var obj:Array = data[i] as Array;
var startX:int = obj[0];
var endX:int = obj[1];
grachics.drawRect(startX, 0, endX - startX, 30);
}
graphics.endFill();
}
Related
I have added 10 movieclips with the AS linkage Box in this function. I've named the different instances layer1 to layer10
My question is, how can one add an eventlistener to, lets say, only layer4?
var NUM_BOXES:int = 10;
var BOX_SPACING:int = 1;
var _boxes:Array = [];
function Test()
{
for (var i:int = 0; i < NUM_BOXES; i++)
{
var box:Box = new Box( i + 1 );
box.y = (box.height + BOX_SPACING) * i;
box.name= "layer" +( i + 1);
box.buttonMode = true;
box.addEventListener( MouseEvent.MOUSE_DOWN, onBoxPress );
box.addEventListener( MouseEvent.MOUSE_UP, onBoxRelease );
addChild( box );
_boxes.push( box );
}
}
Building on bluebill1049's answer:
The if(number == 4) approach is not scalable, i.e. if you want a hundred layers to have listeners, you can not write an if statement for each layer. The simple solution would be:
var NUM_BOXES:int = 10;
var BOX_SPACING:int = 1;
var _boxes:Array = [];
//Any numbers in this array are assigned listeners
var layers_with_listeners:Array = [1, 4, 9];
function Test()
{
for (var i:int = 0; i < NUM_BOXES; i++)
{
var box:Box = new Box( i + 1 );
box.y = (box.height + BOX_SPACING) * i;
box.name= "layer" +( i + 1);
box.buttonMode = true;
if(layers_with_listeners.indexOf(i+1) != -1) {
box.addEventListener( MouseEvent.MOUSE_DOWN, onBoxPress );
box.addEventListener( MouseEvent.MOUSE_UP, onBoxRelease );
}
addChild( box );
_boxes.push( box );
}
}
var NUM_BOXES:int = 10;
var BOX_SPACING:int = 1;
var _boxes:Array = [];
var number:int;
function Test()
{
for (var i:int = 0; i < NUM_BOXES; i++)
{
number = i + 1;
var box:Box = new Box(number);
box.y = (box.height + BOX_SPACING) * i;
box.name= "layer" +(number);
box.buttonMode = true;
if(number == 4)
{
box.addEventListener( MouseEvent.MOUSE_DOWN, onBoxPress );
box.addEventListener( MouseEvent.MOUSE_UP, onBoxRelease );
}
addChild( box );
_boxes.push( box );
}
}
Newbie question:
If I create several shape objects in a loop, like:
var i:int;
for (i = 0; i < 3; i++) {
var circle:Shape = new Shape();
circle.graphics.beginFill(color);
circle.graphics.drawCircle(100,100, radius);
circle.graphics.endFill();
addChild(circle);
}
How can I then call those different shapes separately, so I could manipulate their properties? It would seem to me they would all have the same name?
You can access them via their index (the order they have been put on the stage).
So something like:
DisplayObject(getChildAt(1)).x = 100; // Where the 1 is the index (starting at 0)
Actually, you can just have an array (or vector) of objects, so you won't depend on current displaylist.
var i:int;
var circleArray:Array = new Array();
for (i = 0; i < 3; i++) {
var circle:Shape = new Shape();
circleArrayList.push(circle);
circle.graphics.beginFill(color);
circle.graphics.drawCircle(100,100, radius);
circle.graphics.endFill();
addChild(circle);
}
//And then access them with
for(i = 0; i < circleArray.length, i++)
{
circleArrayList[i].x = 15 * i;
}
//Or
foreach(var circle:DisplayObject in circleArray)
{
circle.x = 15 * i;
}
for(int i=0;i<3;i++)
{
class x =new class(i);
x.print()
}
I am trying to create a floating circles effect using HTML5 and canvas. An example of what I'm going for can be seen on https://layervault.com/ You can see the example by going to the 4th slide (titled "Introducing LayerVault for iOS") in the slider. On that slide, lots of circles are floating up out of the object. So far in my code, I am only able to get 1 circle floating up. Any ideas on the approach I should take?
My Code so far:
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
var circleColors = new Array();
circleColors[0]="#f0f";
circleColors[1]="#0f0";
circleColors[2]="#00f";
circleColors[3]="#f00";
function makeCircles() {
var posX = Math.floor(Math.random()*500);
var posY = 500;
var theCircleColor = circleColors[Math.floor(Math.random()*circleColors.length)];
function renderContent()
{
context.save();
context.fillStyle=theCircleColor;
context.beginPath();
context.arc(posX,posY,40,0,2*Math.PI);
context.fill();
context.restore();
}//end function renderContent
function animationLoop()
{
canvas.width = canvas.width;
renderContent();
posY -= 5;
if (posY < -40)
posY = 500;
setTimeout(animationLoop, 33);
}//end function animationLoop
animationLoop();
}//end function makeCircles
makeCircles();
});//end document ready
You need to make an array of circles, each circle needs its own X/Y/Color and potentially speed, so they move at different rates.
So each circle will be a javascript object with
{
posX: someValue,
posY: someValue,
color: someValue,
speed: someValue
};
Then we will add many of those to an array. Here's an example using your code:
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
var circleColors = new Array();
circleColors[0] = "#f0f";
circleColors[1] = "#0f0";
circleColors[2] = "#00f";
circleColors[3] = "#f00";
var circles = [];
function makeCircles() {
for (var i = 0; i < 20; i++) {
var circle = {
posX: Math.floor(Math.random() * 500),
posY: 500,
color: circleColors[Math.floor(Math.random() * circleColors.length)],
speed: Math.floor(Math.random()*5)
};
circles.push(circle);
}
function renderContent() {
for (var i = 0; i < circles.length; i++) {
var c = circles[i];
context.fillStyle = c.color;
context.beginPath();
context.arc(c.posX, c.posY, 40, 0, 2 * Math.PI);
context.fill();
}
} //end function renderContent
function animationLoop() {
canvas.width = canvas.width;
renderContent();
for (var i = 0; i < circles.length; i++) {
var c = circles[i];
c.posY -= c.speed;
if (c.posY < -40) c.posY = 500;
}
setTimeout(animationLoop, 33);
} //end function animationLoop
animationLoop();
} //end function makeCircles
makeCircles();
And here it is live:
http://jsfiddle.net/vTaLF/
hey i am trying to add movie clips to the stage randomly from a list of cards, no 1- 10,
this is what i have tried so far but i get an error saying its my randomly selected card is not a function, just wondering if anybody can help or know the proper way of accomplishing it
thank you
var printArray:Array =new Array();
var randPrint:String;
var rand
for(var n:int = 1; n <= 28; n++)
{
randNo=Math.round(Math.random() * 10+.5);
randPrint = "cardPrint"+randNo;
printArray.push(randPrint);
}
var cardPrint1:MovieClip = new card_1();
var cardPrint2:MovieClip = new card_2();
var cardPrint3:MovieClip = new card_3();
var cardPrint4:MovieClip = new card_4();
var cardPrint5:MovieClip = new card_5();
var cardPrint6:MovieClip = new card_6();
var cardPrint7:MovieClip = new card_7();
var cardPrint8:MovieClip = new card_8();
var cardPrint9:MovieClip = new card_9();
var cardPrint10:MovieClip = new card_10();
for(var p:int = 1; p <= 1; p++)
{
trace(printArray[p]);
addChild(printArray[p]);
}
some help would be great, thank you so much
I think something like the following will do what you want. I populated an array with all the available assets and then filled an array with random numbers between 0-9. The last for loop just creates the movieclips and adds them to the stage.
var printArray:Array = [];
var mcs:Array = [card_1, card_2, card_3, card_4, card_5, card_6, card_7, card_8, card_9, card_10];
for(var n:int = 1; n <= 28; n++)
{
var randNo:int = int(Math.random() * 10);
printArray.push(randNo);
}
for(var p:int = 0; p < printArray.length; p++)
{
trace(printArray[p]);
var mc:MovieClip = new mcs[printArray[p]];
addChild(mc);
}
Having a bit of a problem with some code I've written. Basically what it does is take 3 values that constantly change and graphs them over time in the form of a cumulative line graph. It almost works except I get this weird line drawn across the entire stage and further and I can't figure out what the issue is. The full code is below, you can run it by pasting it into flash.
import flash.display.Shape;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.utils.Timer;
var y1:Array = new Array();
var y2:Array = new Array();
var y3:Array = new Array();
var avg:Array = new Array();
var y1Shape:Shape = new Shape();
var y2Shape:Shape = new Shape();
var y3Shape:Shape = new Shape();
var avgShape:Shape = new Shape();
var container:Sprite = new Sprite();
var scale:uint = 1;
var redrawGraph:int = setInterval(reDraw,500);
var y1Int:int = 0;
var y2Int:int = 0;
var y3Int:int = 0;
container.addChild(y1Shape);
container.addChild(y2Shape);
container.addChild(y3Shape);
container.addChild(avgShape);
this.addChild(container);
function reDraw():void
{
y1Shape.graphics.clear();
y2Shape.graphics.clear();
y3Shape.graphics.clear();
avgShape.graphics.clear();
y1Shape.graphics.lineStyle(1, 0x0066FF, 1);
y1Shape.graphics.beginFill(0x0066FF, 0.5);
y2Shape.graphics.lineStyle(1, 0x009900, 1);
y2Shape.graphics.beginFill(0x009900, 0.5);
y3Shape.graphics.lineStyle(1, 0x990000, 1);
y3Shape.graphics.beginFill(0x990000, 0.5);
avgShape.graphics.lineStyle(1, 0x000000, 1);
y1Int = rand();
y2Int = rand();
y3Int = rand();
trace(y1Int, y2Int, y3Int);
y1.unshift(y1Int);
y2.unshift(y2Int);
y3.unshift(y3Int);
popOut(y1);
popOut(y2);
popOut(y3);
var i:uint,sum:uint,aLength:uint,len:uint = y1.length,max:int = 0,height_:int = 400;
scale = 10;
for (i=0; i<len; i++)
{
max = Math.max(y1[i] + y2[i] + y3[i],max);
}
for (i=0; i<len; i++)
{
sum += y1[i] + y2[i] + y3[i];
}
avg.unshift(Math.round(sum/len));
/*--------------------------------MATCHED GRAPH------------------------------------------*/
var y1_commands:Vector.<int> = new Vector.<int>();
var y1_coord:Vector.<Number>= new Vector.<Number>();
var y1_coord_rev:Vector.<Number> = new Vector.<Number>();
y1_commands.push(1);
y1_coord.push(400,height_);
for (i=0; i<len; i++)
{
y1_commands.push(2);
y1_coord.push((400-i*scale),height_-(Math.round((y1[i]/max)*height_)));
y1_coord_rev.unshift((400-i*scale),height_-(Math.round((y1[i]/max)*height_)));
}
for (i=len; i>0; i--)
{
y1_commands.push(2);
y1_coord.push(400 - i*scale,height_);
}
y1_commands.push(2);
y1_coord.push(400,height_);
/*--------------------------------MATCHED GRAPH------------------------------------------*/
/*----------------------------------BUSY GRAPH-------------------------------------------*/
var y2_commands:Vector.<int> = new Vector.<int>();
var y2_coord:Vector.<Number>= new Vector.<Number>();
var y2_coord_rev:Vector.<Number> = new Vector.<Number>();
y2_commands.push(1);
y2_coord.push(400,height_-(Math.round((y1[i]/max)*height_)));
for (i=0; i<len; i++)
{
y2_commands.push(2);
y2_coord.push((400-i*scale),height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
y2_coord_rev.unshift((400-i*scale),height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
}
for (i=len; i>0; i--)
{
y2_commands.push(2);
y2_coord.push(400 - i*scale, height_-(Math.round((y1[i]/max)*height_)));
}
y2_commands.push(2);
y2_coord.push(400,height_-(Math.round((y1[i]/max)*height_)));
/*----------------------------------BUSY GRAPH-------------------------------------------*/
/*----------------------------------VAC GRAPH-------------------------------------------*/
var y3_commands:Vector.<int> = new Vector.<int>();
var y3_coord:Vector.<Number>= new Vector.<Number>();
var y3_coord_rev:Vector.<Number> = new Vector.<Number>();
y3_commands.push(1);
y3_coord.push(400,height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
for (i=0; i<len; i++)
{
y3_commands.push(2);
y3_coord.push((400-i*scale),height_-(Math.round(((y1[i]+y2[i]+y3[i])/max)*height_)));
y3_coord_rev.unshift((400-i*scale),height_-(Math.round(((y1[i]+y2[i]+y3[i])/max)*height_)));
}
for (i=len; i>0; i--)
{
y3_commands.push(2);
y3_coord.push(400 - i*scale, height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
}
y2_commands.push(2);
y2_coord.push(400,height_-(Math.round(((y1[i]+y2[i])/max)*height_)));
/*----------------------------------BUSY GRAPH-------------------------------------------*/
//y3Shape.graphics.drawPath(y3_commands, y3_coord);
y2Shape.graphics.drawPath(y2_commands, y2_coord);
y1Shape.graphics.drawPath(y1_commands, y1_coord);
}
function popOut(a:Array):void
{
if (a.length >=Math.ceil(400/scale))
{
a.pop();
}
}
function rand():int
{
return Math.floor(Math.random() * (1 + 5 - 0) + 0);
}
y3Shape is commented out until the problem with y2Shape is fixed (having both drawn just makes the problem harder to figure out).
Any ideas what could be up?
Thanks
If you insert trace your vectors near .drawPath, you'll see something like that:
trace(y2_commands); // 1,2,2,2,2
trace(y2_coord); // 400,171,400,57,390,NaN,400,171,400,57
So, NaN (Not a Number) means, that you have error in coordinates calculating.
ps. y1[i] in first calculating of BUSY GRAPH is undefined
You seem to be using beginFill(), when you draw a path that's not looped, Flash requires your path to get looped in order to fill it with something. So, it loops it implicitly by adding a line to your starting point and filling it. In order to receive a non-overlapping path, add two points to your path that will be right below 0 point in X axis, one right under the last point on your graph, and one right under the FIRST point on the graph.
Actually, you already have them installed, but for some reason you place not 2 points, but a whole lot of em, and height position of that line is plainly wrong. Your code states:
for (i=len; i>0; i--)
{
y2_commands.push(2);
y2_coord.push(400 - i*scale, height_-(Math.round((y1[i]/max)*height_)));
}
You should have:
for (i=len; i>0; i--)
{
y2_commands.push(2);
y2_coord.push(400 - i*scale, height_);
}
Or even better:
y2_commands.push(2);
y2_commands.push(2);
y2_coord.push(400 - len*scale, height_);
y2_coord.push(400, height_);