• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Child movies always at highest Z index (help!)

Community Beginner ,
May 23, 2024 May 23, 2024

Copy link to clipboard

Copied

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();



TOPICS
ActionScript

Views

67

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 23, 2024 May 23, 2024

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines