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

Issue with using Create JS in Animate to use external assets (images/audio)

New Here ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

Hi!

Im trying to make an interactive html ad using Adobe Animate and I do know how to do with the tools it provides while having assets stored either on a local drive or in a folder on a server. But the issue is that my client wants me to export the ad as HTML and wants me to use all the assets from the web (he's providing me with all the URL links) but I have no idea how to use create js' libraries and commands so I can use those links to import the assets into the projects.

I'd really appreciate if someone could help!

TOPICS
ActionScript , How to , Import and export

Views

337

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 ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

what kind of assets?

 

(and the client is aware that doing loading the assets is going to cause a delay in the ad's appearance.)

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
New Here ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

multiple png images and mp3 audio file (most likely 10 seconds long loop)

im pretty sure he has 0 knowledge about it but it shouldn't be an issue because ill ask him to compress everything first as much as possible

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
Community Expert ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

to load images

 

if(!alreadyExecuted){

this.imageA = [];

var imagePaths("./images/image1", etc);

alreadyExecuted = true;

var index = 0;

imageF.bind(this)(imagePathA[0])

}

 

function loadF(){

imageF(imagePathA[index])

}

 

function imageF(imgPath) {
var image = new Image();
image.onload = onLoadF.bind(this);
image.src=imgPath;

}

function onLoadF(e) {
var img = new createjs.Bitmap(e.target);

this.imageA.push(image);  // still hasn't been added to display list or positioned

index++;

if(index<imagePathsA.length){

imageF.bind(this)(imagePathA[index])

} else {

// loading complete. do whatever

}

}

 

to load sound and play a sound:

 

createjs.Sound.registerSound(path to sound, "soundID");

 

this.your_button.addEventListener('click',playF.bind(this));

 

function playF(){
var soundInstance = createjs.Sound.play("soundID");
//soundInstance.addEventListener("complete",cF.bind(this));  // if you want to know when sound completes play

}

 

");

 

 

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
New Here ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

For some reason it didn't work for me. Or maybe I just don't know how and where to paste the code correctly.

Let's I used to have this image on my pc and I used it in my Animate project. But now I want to replace it with a external web version. How do I do it?

link to image 

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
Community Expert ,
Apr 01, 2022 Apr 01, 2022

Copy link to clipboard

Copied

LATEST

var alreadyExecuted;
if (!alreadyExecuted) {
this.imageA = [];
var imagePathA = ["https://www.iconspng.com/images/business-man-fist-pump/business-man-fist-pump.jpg"];
alreadyExecuted = true;
var index = 0;
imageF.bind(this)(imagePathA[0])
}

function imageF(imgPath) {
var image = new Image();
image.onload = onLoadF.bind(this);
image.src=imgPath;
}

function onLoadF(e) {
var img = new createjs.Bitmap(e.target);
this.imageA.push(img); // still hasn't been added to display list or positioned
this.addChild(img);
index++;
if (index < imagePathsA.length) {
imageF.bind(this)(imagePathA[index])
} else {
// loading complete. do whatever
}
}

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