Как масштабироватьX объект сбоку, а не по центру в Animate CC HTML5?

Мне удалось создать индикатор выполнения, в котором я использовал queue.on("прогресс", handleProgress); для изменения шкалаX мувиклипа, который я назвал bar_mc.

var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete);
queue.on("progress", handleProgress);
queue.loadFile({
    id: "img",
    src: "images/image.jpg"
});



function handleComplete(evt) {
    console.info("Done!");
    createjs.Ticker.removeAllEventListeners();
};

function handleProgress(event) {
    console.info("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%");
};


createjs.Ticker.addEventListener("tick", handleTick.bind(this));

function handleTick(event) {
    console.info("ticking");
    this.bar_mc.scaleX = queue.progress;
};

Это работает, но начинается в центре, как в а):

Как масштабироватьX объект сбоку, а не по центру в Animate CC HTML5?

Как сделать так, чтобы он начинался сбоку, как в б)?

Кроме того, это дало мне ошибку, когда я попробовал, но есть ли способ поместить this.bar_mc.scaleX в функция handleProgress (событие) вместо использования отдельной функции тикера для анимации bar_mc?


Обновлять: Я уверен, что это можно сделать с помощью кода, но я не знаю, как это сделать. Все, что мне нужно было сделать, это изменить точку преобразования в Animate: Как масштабироватьX объект сбоку, а не по центру в Animate CC HTML5?

Теперь bar_mc масштабируется сбоку!


Обновление 2: Использовал информацию Мухаммеда Маруфа о "fileprogress" и изменил код. Теперь он выглядит чище без использования отдельного тикера для масштабирования bar_mc.

Добавление вар кореньдо к кодам очередь.на позволило мне добавить root.bar_mc.scaleX в функция handleProgress (событие) без необходимости изменять «прогресс»:

var root = this;

root.bar_mc.scaleX = 0;

var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete);
queue.on("progress", handleProgress);
queue.loadFile({
    id: "img",
    src: "images/image.jpg"
});

function handleComplete(evt) {
    console.info("Done!");
    // do other stuff
};

function handleProgress(event) {
    console.info("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%");
    root.bar_mc.scaleX = queue.progress;
};

похоже, вы отвечаете на свой вопрос менее чем за 1 час ... может быть, это не стоит вопроса

Helder Sepulveda 19.03.2022 23:58

Перед публикацией я пытался часами искать, как это закодировать, но не нашел ничего полезного. Только когда я прочитал сообщение на дискуссионном форуме Adobe Animate о том, как установить ширину и высоту символа на сцене, я случайно нашел точку преобразования. Надеюсь, этот вопрос поможет другим новичкам, таким как я. :)

Trial 20.03.2022 00:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
42
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот как я обновил код. Обратите внимание, что я использовал «fileload» вместо «complete» и «fileprogress» вместо «progress».

var root = this;
root.bar_mc.scaleX = 0;
var source = "https://loremflickr.com/cache/resized/65535_49259263438_7e86e005b3_h_1280_960_nofilter.jpg?" + Math.random();
var queue = new createjs.LoadQueue();
queue.on("fileload", handleComplete);
queue.on("fileprogress", handleProgress);
queue.loadFile({
    id: "img",
    src: source
});

function handleComplete(evt) {
    console.info("Done!");
    console.info(queue.progress);
    root.bar_mc.scaleX = queue.progress;
};

function handleProgress(event) {
    console.info("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%, " + queue.progress);
    root.bar_mc.scaleX = queue.progress;
};

Интересный. Когда я отредактировал код таким образом, «завершение» и «прогресс» начали работать правильно. Значит что-то не так с кодом. Вы можете использовать его двумя способами.

Muhammed Maruf 20.03.2022 00:41

О, ты прав! Я думаю, что наличие var root до того, как коды queue.on заставили его работать. Раньше я добавлял var root внизу после всех queue.on, что выдавало мне ошибки.

Trial 20.03.2022 01:19

Другие вопросы по теме