Intermittent/staggered loading of an object - actionscript-3

I've just recently tried my hand at actionscript 3 and have come across a road block.
How do I go about rendering the cubes (cube1) intermittently, ie. staggered loading. I need the cubes to load a split second from each other.
Below is a snippet of what I have so far:
var rows:int = 5;
var cols:int = 3;
var spacery:int = 100;
var spacerx:int = 120;
var box_count:int = 8;
for(var i:int; i < box_count; i++) {
cube1 = new Cube(ml,100,10,80,1,1,1);
cube1.y = ((i % rows)) * (cube1.x + spacery);
cube1.x = Math.floor(i/rows) * (cube1.x +spacerx);
cube1.z = 0;
bigBox.addChild(cube1);
}

//Create an array out side the function; as a global (instance) variable:
var cubes:Array = [];
//instead of bigBox.addChild(cube1), store them in the array:
cubes.push(cube1);
//initialize a timer outside after for loop
//Fire every 100 milliseconds, box_count times
var timer:Timer = new Timer(100, box_count);
timer.addEventListener(TimerEvent.TIMER, onTick);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTickDone);
function onTick(e:Event):void
{
bigBox.addChild(cubes[timer.currentCount]);
}
function onTickDone(e:Event):void
{
cubes = null;
timer.removeEventListener(TimerEvent.TIMER, onTick);
timer.removeEventListener(TimerEvent.TIMER_COMPLETE, onTickDone);
timer = null;
}

Related

AS3: FPS get down

Ahoy. When i want update information with ENTER_FRAME like this:
import flash.events.Event;
var ticks:uint = 0;
var last:uint = getTimer();
var food:uint = 10;
var wood:uint = 10;
var stone:uint = 10;
stage.addEventListener(Event.ENTER_FRAME, update); // getFPS
stage.addEventListener(Event.ENTER_FRAME, list); //get Materials Info
function update(e:Event){
ticks++;
var now:uint = getTimer();
var delta:uint = now - last;
if (delta >= 1000) {
var fps:int = ticks / delta * 1000;
fpsText.text = String(fps+"fps");
ticks = 0;
last = now;
}
}//
function list(e:Event){
foodText.text = String(food+"food");
woodText.text = String(wood+"wood");
stoneText.text = String(stone+"stone");
}//
fps drop down.
When i change code like this:
import flash.events.Event;
var ticks:uint = 0;
var last:uint = getTimer();
var food:uint = 10;
var wood:uint = 10;
var stone:uint = 10;
stage.addEventListener(Event.ENTER_FRAME, update); // getFPS
function update(e:Event){
ticks++;
var now:uint = getTimer();
var delta:uint = now - last;
if (delta >= 1000) {
var fps:int = ticks / delta * 1000;
fpsText.text = String(fps+"fps");
list();
ticks = 0;
last = now;
}
}//
function list(){
foodText.text = String(food+"food");
woodText.text = String(wood+"wood");
stoneText.text = String(stone+"stone");
}//
fps drop down after 15 minutes.
I know problem is in function list(), but how I list materials quick without slowing fps.
How i change this for clean run?
Thx for hlp.
I'm assuming there is more code somewhere else that will change the values of food, wood, and stone. No need to update the values on enterframe if they aren't changing. Perhaps you could update the UI only when you change the values? So remove list() from the enter frame and do something like this when you change the values?
function getWood(){
wood++;
list();
}
function useWood(){
wood--;
list();
}

How to add Looped URLRequest image and add them to 1 viewport?

I am trying to loop (add images from Loader thru URLRequest), And the images are added to contentHolder, and then i place all these images which are inside contentHolder into a viewport. But at the moment I have to put the add images to viewport step inside the loop, so it creates a problem, which is each loop, a viewport is added. So 10 viewport overlaps each other. I tested it in debug mode and when the first image is loaded i can quickly slide it, because the viewport has a scrollpane, then second image is added, and i can slide that one, and third one is added on top etc.
But if i put the add Holder to viewport step outside the loop, it gives me the error Error #2007: Parameter child must be non-null, i dont know what to do. Please help, thanks for your time! I had been trying this for 6 hrs already!
And the error is on the line viewport.addChild(_contentHolder1); which is the last part of the code, if you scroll to the bottom.
for (var j:int = 5; j < somedata.length; j++)
{
if(somedata[j]){
var myLoader:Loader = new Loader();
var image:Bitmap;
var url:URLRequest = new URLRequest("http://www.rentaid.info/rent/"+somedata[j]);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
myLoader.load(url);
function onImageLoaded(e:Event):void {
image = new Bitmap(e.target.content.bitmapData);
var currentY:int = 10;
var h = image.height;
var k=image.width/image.height;
_contentHolder = new Sprite();
_contentHolder.y = currentY;
currentY += _contentHolder.height + 10;
addChild(_contentHolder);
_contentHolder.addChild(image);
for (var j:int = 5; j <somedata.length; j++)
{
_contentHolder1 = new Sprite();
addChild(_contentHolder1);
_contentHolder1.addChild(_contentHolder);
var viewport:Viewport = new Viewport();
viewport.y = 0;
viewport.addChild(_contentHolder1);
var scroller:TouchScroller = new TouchScroller();
scroller.width = 300;
scroller.height = 265;
scroller.x = 10;
scroller.y = 100;
scroller.viewport = viewport;
addChild(scroller);
}
}}
Edit:
var loadedArray:Array = new Array();
var counter:int=0;
function loadImage():void{
for (var j:int = 5; j < somedata.length; j++)
{
if(somedata[j]){
var loader:Loader = new Loader();
var image:Bitmap;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
loader.load(new URLRequest("http://www.rentaid.info/rent/"+somedata[j][counter]));
}
}
}
function onImageLoaded(e:Event):void {
loadedArray.push(e.currentTarget.loader.content as Bitmap);
if(counter == somedata.length-1){
var _contentHolder: Sprite = new Sprite;
addChild(_contentHolder);
for(var i:uint = 5; i < loadedArray.length; i++){
_contentHolder.addChild(loadedArray[i]);
currentY += _contentHolder.height + 10;
}
}
else{
counter++;
loadImage();
}
var viewport:Viewport = new Viewport();
viewport.y = 0;
viewport.addChild(_contentHolder);
var scroller:TouchScroller = new TouchScroller();
scroller.width = 300;
scroller.height = 265;
scroller.x = 10;
scroller.y = 100;
scroller.viewport = viewport;
addChild(scroller);
}
you can use Starling Framework and a loader loop such as:
private var count:uint = 0; //add this in your class
private var imagesVector:Vector.<Image> = new Vector.<Image>(); //add this in your class
private var imagesUrlVector:Vector.<String> = new <String>["url1","url2","url3","etc"]; //add this in your class
private function loadImages():void
{
//create the loader
var loader:Loader = new Loader();
//when texture is loaded
loader.contentLoaderInfo.addEventListener ( Event.COMPLETE, onComplete );
//load the texture
loader.load( new URLRequest (imagesUrlVector[count]));
}
private function onComplete ( e : Event ):void
{
// grab the loaded bitmap
var loadedBitmap:Bitmap = e.currentTarget.loader.content as Bitmap;
// create a texture from the loaded bitmap
var texture:Texture = Texture.fromBitmap ( loadedBitmap );
var card:CustomImage = new CustomImage(texture);
imagesVector.push(card);
trace("load image number" + count);
count++;
if (count < imagesUrlVector.length) {
loadImages();
} else displayImages();
}
private function displayImages():void {
var x:uint = 150;
var i:Number;
for (i = 0; i < cardVector.length; i++ )
{
x += 100;
imagesVector[i].x = x;
addChild(imagesVector[i]);
}
}

elastic string script makes flash crash

I'm in over my head in this AS3 project.
I'm no expert in actionscript and certainly not in AS3 but I managed to create (with help from this: http://swamy-techtalk.blogspot.com/2011/07/elastic-string-to-mouse-pointer-effect.html) a eleastic string effect from a point to a draggable movieclip.
Problem is the script seems to crash flash or the browser when I test it. (Not right away just when I'm playing around with the movieclip)
Sinse I'm in over my head in the script I compiled I'm not exactly sure whats wrong.
A bit of google research hinted that it might have something to do with removeChildAt() wich I changed from removeChildAt(0) to removeChildAt(1) to prevent it from removing my movieclip.
Hope somebody has the patience to read through my script to see what I did wrong.
Example here: http://www.madsringblom.dk/flash/pullstring.html (beware it might crash your browser)
Code below:
Object(this).leaf_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
var origX:int = Object(this).leaf_mc.x + 1;
var origY:int = Object(this).leaf_mc.y + 2;
var pullbackX:int = Object(this).leaf_mc.x;
var pullbackY:int = Object(this).leaf_mc.y;
var dragging:Boolean = false;
//speed of pulling and rotating back when stop dragging.
var speed:int = 15;
var addX:int = 2
var addY:int = 3
function mouseDownHandler(e:MouseEvent):void
{
var obj = e.target;
obj.startDrag();
dragging = true;
}
function mouseUpHandler(e:MouseEvent):void
{
var obj = e.target;
Object(this).leaf_mc.stopDrag();
dragging = false;
}
import flash.display.*;
import flash.events.MouseEvent;
import flash.events.Event;
var haschild:Boolean = false;
var gotonodes:Array = new Array();
var currentnodes:Array = new Array();
var posX:int = Object(this).leaf_mc.x + addX;
var posY:int = Object(this).leaf_mc.y + addY;
gotonodes = Interpolate(posX,posY,origX,origY,25);
currentnodes = gotonodes;
stage.addEventListener(Event.ENTER_FRAME, onmove1);
function onmove1(e:Event)
{
for (var node = 0; node < gotonodes.length - 1; node++)
{
currentnodes[node].xco=currentnodes[node].xco+(gotonodes[node].xco-currentnodes[node].xco)/(node*node/30+1);
currentnodes[node].yco=currentnodes[node].yco+(gotonodes[node].yco-currentnodes[node].yco)/(node*node/30+1);
}
var posX:int = Object(this).leaf_mc.x + addX;
var posY:int = Object(this).leaf_mc.y + addY;
gotonodes=Interpolate(posX,posY,origX,origY,25);
// pull leaf_mc back to starting point when released. And rotate back.
if (dragging == false)
{
Object(this).leaf_mc.x-=(Object(this).leaf_mc.x-pullbackX)/speed;
Object(this).leaf_mc.y-=(Object(this).leaf_mc.y-pullbackY)/speed;
Object(this).leaf_mc.rotation+=Object(this).leaf_mc.rotation/speed;
}
// rotating the leaf_mc according to the point (origX,origY)
var theX:int = origX - Object(this).leaf_mc.x;
var theY:int = (origY - Object(this).leaf_mc.y) * -1;
var angle = Math.atan(theY/theX)/(Math.PI/180);
Math.atan( -5 / 10) / (Math.PI / 180);
if (theX < 0)
{
angle += 180;
}
if (theX >= 0 && theY < 0)
{
angle += 360;
}
Object(this).leaf_mc.rotation = (angle*-1) + 90;
DrawNodes(currentnodes);
}
function FindAngle(x1, x2, y1, y2):Number
{
return Math.atan2(y2-y1, x2-x1);
};
function Distance(x1, x2, y1, y2):Number
{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}
function Interpolate(x1, y1, x2, y2, n):Array
{
var dist= Distance(x1,x2,y1,y2);
var ang = FindAngle(x1,x2,y1,y2);
var points = [];
for (var l = 0; l <= dist; l += dist / n)
{
var x3 =x1+l*Math.cos(ang);
var y3 = y1+l*Math.sin(ang);
points.push({xco:x3,yco:y3});
}
points.push( { xco:x1, yco:y1 } );
return points;
}
function DrawNodes(array):void
{
if(haschild)
{
this.removeChildAt(1);
haschild=false;
}
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0x331100,40);
shape.graphics.moveTo(array[0].xco, array[0].yco);
for (var i = 0; i < array.length - 1; i++)
{
shape.graphics.lineTo(array[i].xco,array[i].yco);
}
shape.graphics.beginFill(0xFBFFA4,1);
shape.graphics.drawCircle(array[0].xco,array[0].yco,1);
shape.graphics.endFill();
this.addChild(shape);
haschild = true;
}
Where is this code placed? From what you pasted, I'm thinking on the stage.
A stop(); somewhere in the script might be a start and help quite a bit - otherwise the Flash movie will loop, and every time it hits this frame (every frame if you only have one), you'll add new event handlers etc. Eventually you'll run out of memory, and the onmove1 event handler will eat up your CPU, running 50 times per frame after 50 frames, 200 times after 200 frames etc.

AS3 proportionally scaling external image

Currently I am using a for loop to dynamically load XML images and place them in a grid as thumbnails. I have the arrangement set and all the data is loading smoothly, but now I need to make the images scale to small 100px x 100px thumbs in small container movieclips. My code is as follows.
import gs.*;
import gs.easing.*;
var bttnHeight:Number = 20;
var select:Number = 0;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, showXML);
xmlLoader.load(new URLRequest("testxml.xml"));
var list_mc:Array = new Array();
function showXML(e:Event):void {
XML.ignoreWhitespace = true;
var nodes:XML = new XML(e.target.data);
var gallcount = nodes.gallery.length();
var list_mc = new listitem();
//Generate menu to select gallery
function populateMenu():void {
var spacing:Number = 0;
for (var i=0; i<gallcount; i++) {
list_mc[i] = new listitem();
list_mc[i].name = "li" + i;
list_mc[i].y = i*bttnHeight;
list_mc[i].gallname.text = nodes.gallery[i].attributes();
menu_mc.addChild(list_mc[i]);
list_mc[i].addEventListener(MouseEvent.ROLL_OVER, rollover);
list_mc[i].addEventListener(MouseEvent.ROLL_OUT, rollout);
list_mc[i].buttonMode = true;
list_mc[i].mouseChildren = false;
}
menu_mc.mask = mask_mc;
}
//list_mc.mask(mask_mc);
var boundryWidth = mask_mc.width;
var boundryHeight = mask_mc.height;
var diff:Number = 0;
var destY:Number = 0;
var ratio:Number = 0;
var buffer:Number = bttnHeight*2;
function findDest(e:MouseEvent):void {
if (mouseX>0 && mouseX<(boundryWidth)) {
if (mouseY >0 && mouseY<(boundryHeight)) {
ratio = mouseY/boundryHeight;
diff = menu_mc.height-boundryHeight+buffer;
destY = Math.floor(-ratio*diff)+buffer/2;
}
}
}
var tween:Number = 5;
//This creats the scroll easing
function moveMenu() {
if (menu_mc.height>boundryHeight) {
menu_mc.y += (destY-menu_mc.y)/tween;
if (menu_mc.y>0) {
menu_mc.y = 0;
} else if (menu_mc.y<(boundryHeight-menu_mc.height)) {
menu_mc.y = boundryHeight-menu_mc.height;
}
}
}
function rollover(e:Event):void {
TweenLite.to(e.currentTarget.li_bg, .4, {tint:0x334499});
}
function rollout(e:Event):void {
TweenLite.to(e.currentTarget.li_bg, .4, {removeTint:true});
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, findDest);
stage.addEventListener(Event.ENTER_FRAME, moveMenu);
populateMenu();
select = 0;
//Generate thumbnails
function genThumb():void {
var photos = nodes.gallery[select].photo;
var thumbframe:Array = new Array();
var row = 0;
var column = 0;
var loaderArray:Array = new Array();
for (var i=0; i<photos.length(); i++) {
thumbframe[i] = new Sprite;
thumbframe[i].graphics.beginFill(0x0000FF);
thumbframe[i].graphics.drawRect(0,0,100,100);
thumbframe[i].graphics.endFill();
thumbframe[i].y = row;
thumbframe[i].x = column;
loaderArray[i] = new Loader();
loaderArray[i].load(new URLRequest(photos[i].text()));
trace(loaderArray[i].height);
var index = i+1;
container_mc.addChild(thumbframe[i]);
if (index%5 == 0) {
row=row+120;
column = 0;
} else {
column=column+120;
}
thumbframe[i].addChild(loaderArray[i]);
}
}
genThumb();
}
Both the loaders and the containers are in respective arrays. The images load correctly, but I am at a loss for how to scale them (ultimately I'd like to integrate a tween to animate as they load as well if possible.)
Thanks in advance for any aid!
You look like you need to scale your bitmaps into a 100x100 square. You'll need to wait until the loader has completed loading to do that because until then you won't know what the dimensions of the item are.
When you create your loader, add an event listener, like this:
loaderArray[i].contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
and then add this function:
function onLoadComplete(event:Event):void
{
var info:LoaderInfo = LoaderInfo(event.currentTarget);
info.removeEventListener(Event.COMPLETE);
var loader:Loader = info.loader;
var scaleWidth:Number = 100 / loader.width;
var scaleHeight:Number = 100 / loader.height;
if (scaleWidth < scaleHeight)
loader.scaleX = loader.scaleY = scaleWidth;
else
loader.scaleX = loader.scaleY = scaleHeight;
}
This may be a bit complicated, but all it really does is clean up the event listener that you had added, and find the dimensions of the loader (which it can get now because it's finished loading), and scale the loader appropriately.
If you need it to be centered within your thumbnail, add this to the bottom of the onLoadComplete method:
loader.x = (100 - loader.width) * 0.5;
loader.y = (100 - loader.height) * 0.5;
or you need it to take up the whole thumbnail and cut off the edges, change it to this (the inequality is the other-way around)
if (scaleWidth > scaleHeight)
loader.scaleX = loader.scaleY = scaleWidth;
else
loader.scaleX = loader.scaleY = scaleHeight;
and add this:
var shape:Shape = new Shape();
var g:Graphics = shape.graphics;
g.beginFill(0x00FF00);
g.drawRect(0, 0, 100, 100);
g.endFill();
loader.mask = g;
I haven't tested this, so there may be a few glitches, but hopefully it gives you the right idea.

Single Loader to multiple Sprite Possible?

I've looked in various resources regarding this topic, and it seems to me that I need a Loader for every Sprite which contains an image file (png).
I'm trying to make a Tile Rendering System, and have created a grid of X by Y sprites, but all of them actually reference the same image file.
Is there any other way to do this? (Make the sprite share the same png data file)
Some sample code of what I have done.
// Create an array of X * Y Loaders
var cTileLoaders:Array = new Array( 100 ); // for example 10 by 10 grid
var cTiles:Array = new Array( 100 );
var nIndex:int = 0;
var nImgLoadCount:int = 0;
for ( ; 100 > nIndex; ++nIndex ) {
cTileLoaders[ nIndex ] = new Loader();
cTiles[ nIndex ] = new Sprite();
// perform more sprite initialization
....
cTileLoaders[ nIndex ].contentLoaderInfo.addEventListener( Event.COMPLETE, ImageLoaded
cTileLoaders[ nIndex ].Load( new URLRequest( "some image path" ) );
}
// handler for image loaded
function ImageLoaded( eEvent:Event ):void {
++nImgLoadCount;
// when all 100 sprite data are loaded
// assuming there is no i/o error
if ( 100 == nImgLoadCount ) {
cTiles[ nIndex ].addChild( cTileLoaders[ nIndex ].content );
}
}
I think the answer in your case is to utilise the Bitmap data contained within the image you're loading like this:
var tilesWide:uint = 10;
var tilesHigh:uint = 10;
var tileHolder:Sprite = new Sprite();
this.addChild(tileHolder);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImgLoaded);
loader.load(new URLRequest("tile.png"));
function onImgLoaded(e:Event):void
{
/* Create a template bitmap to hold the image info */
var templateBitmap:Bitmap = e.target.content;
var templateBitmapData:BitmapData = templateBitmap.bitmapData;
/* Loop through your tiles */
for (var a:uint = 0; a < tilesWide; a++)
{
for (var b:uint = 0; b < tilesHigh; b++)
{
var tile:Sprite = new Sprite();
/* Attach the template BitmapData to each tile */
var tileBitmap:Bitmap = new Bitmap(templateBitmapData);
tile.addChild(tileBitmap);
tile.x = a * tile.width;
tile.y = b * tile.height;
tileHolder.addChild(tile);
}
}
}
You could also use SpriteFactory, a little library I wrote specifically for this:
var tilesWide:uint = 10;
var tilesHigh:uint = 10;
var tileHolder:Sprite = new Sprite();
var tilePath:String = "some/image/path.png";
var factory:SpriteFactory = new SpriteFactory();
factory.loadBitmap("tile", tilePath);
for (var a:uint = 0; a < tilesWide; a++)
{
for (var b:uint = 0; b < tilesHigh; b++)
{
var tile:Sprite = factory.newSprite("tile");
tile.x = a * tile.width;
tile.y = b * tile.height;
tileHolder.addChild(tile);
}
}
The advantage here being that you can use the sprites right away, and they'll automatically be filled with the bitmap once it's loaded.