Child movies always at highest Z index (help!)

Report · May 23, 2024

Im trying to have a random amount of clone child movies randomly placed on a canvas.
I'd like them to sit behind some of the elements like Paper Light, Paper Dark etc. - you'll see them in the code.

But they are always rendering in front of everything even though I'm trying to give the negative z indexes way below everything else.

Also, occasionally this code just crashes the browser. Is there anything wrong with the code or is it likely large image filesize I am using in the Animate file output?

// Ensure this code is placed in the Actions panel for the first frame

// Function to generate a random number within a range
function getRandomInRange(min, max) {
    return Math.random() * (max - min) + min;
}

// Function to randomly return true or false
function getRandomBoolean() {
    return Math.random() < 0.5;
}

// Reference to the original MovieClip on the stage
var originalClip = this.originalClip;

// Reference to the PaperLight MovieClip on the stage
var paperLight = this.PaperLight;

// Reference to the PaperDark MovieClip on the stage
var paperDark = this.PaperDark;

// Reference to the MainFrame MovieClip on the stage
var mainFrame = this.MainFrame;

// Reference to the Background MovieClip on the stage
var background = this.Background;

// Define the minimum and maximum number of instances to create
var minInstances = 1;
var maxInstances = 5;

// Generate a random number of instances within the specified range
var numberOfInstances = Math.floor(getRandomInRange(minInstances, maxInstances));

// Define the controlled area for random positions
var xMin = 180, xMax = 880;
var yMin = 60, yMax = 175;

// Define the range for random scale
var scaleMin = 0.7, scaleMax = 0.78;

// Define the minimum distance between instances on the x-axis
var minDistanceX = 150;

// Create an array to hold all new instances for z-index sorting
var instances = [];

// Create and position instances
for (var i = 0; i < numberOfInstances; i++) {
    // Create a new instance by cloning the original MovieClip
    var newClip = originalClip.clone();

    // Set random but controlled x and y positions
    newClip.x = getRandomInRange(xMin, xMax);
    newClip.y = getRandomInRange(yMin, yMax);

    // Ensure minimum distance between instances on the x-axis
    for (var j = 0; j < instances.length; j++) {
        while (Math.abs(newClip.x - instances[j].clip.x) < minDistanceX) {
            newClip.x = getRandomInRange(xMin, xMax);
            j = 0; // Reset the loop to check against all existing instances again
        }
    }

    // Set random scale
    var scale = getRandomInRange(scaleMin, scaleMax);
    newClip.scaleX = newClip.scaleY = scale;

    // Apply random horizontal flip
    if (getRandomBoolean()) {
        newClip.scaleX *= -1; // Flip horizontally by inverting the scaleX
    }

    // Set zIndex for newClip instances between 100 and 200
    newClip.zIndex = Math.floor(getRandomInRange(100, 201));

    // Add the new instance to the instances array for z-index sorting
    instances.push({ clip: newClip, scale: scale });
}

// Sort instances by scale to achieve perspective effect
instances.sort(function(a, b) {
    return a.scale - b.scale;
});

// Add sorted instances to the stage with negative z-index values between -100 and -200
var zIndexCounter = -100;
instances.forEach(function(instance) {
    var clip = instance.clip;
    clip.zIndex = zIndexCounter--; // Decrement zIndexCounter for each instance
    stage.addChild(clip);
});

// Set z-index and position for PaperLight movie clip
paperLight.x = 500;
paperLight.y = 749;
paperLight.zIndex = 999999;
stage.addChild(paperLight);

// Set z-index and position for PaperDark movie clip
paperDark.x = 500;
paperDark.y = 749;
paperDark.zIndex = 999998;
stage.addChild(paperDark);

// Set z-index and position for MainFrame movie clip
mainFrame.x = 500;
mainFrame.y = 749;
mainFrame.zIndex = 999997;
stage.addChild(mainFrame);

// Set z-index and position for Background movie clip
background.x = 500;
background.y = 749;
background.zIndex = -500;
stage.addChild(background);

// Update the stage to render the new instances
stage.update();

Report · May 23, 2024

Hi.

CreateJS' containers don't have a zIndex property. If you want to change the depth of a child in the display list, you need to use one or more of the following methods: addChild, addChildAt, setChildIndex, sortChildren, swapChildren and swapChildrenAt.

https://createjs.com/docs/easeljs/classes/Container.html

Regards,

JC