Skip to main content
S
shiv rama krishr93754390
Participating Frequently
December 8, 2022
Answered

HTML5 banner looks like dynamic ads but not dynamic

  • December 8, 2022
  • 2 replies
  • 519 views

Hi All,

 

can somebody help me with this, Actually I'm trying to create a banner like dynamic ads? but it will not be a dynamic ad. 

 

It should have a simple animation if someone clicks on the next button the images should scroll and show the next image if the user clicks one previous button then the image should show the previous image. also, every product has there own different web URL.

 

It would be great if you can help me with this.

It's my office task. So need to submit it asap.

 

I'm attaching the source file here. https://drive.google.com/file/d/1G9AK9AVpIiBgP3pADoAOkW4Tp4jOOMFm/view?usp=sharing

 

Thanks,

Jonathan

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi.

     

    Here is a suggestion:
    https://bit.ly/3UOHrya

     

    Code used (for reference only):

    var links =
[
	"https://www.pexels.com/pt-br/foto/sears-tower-eua-1722183/",
	"https://www.pexels.com/pt-br/foto/edificio-de-vidro-na-fotografia-worm-s-eye-290275/",
	"https://www.pexels.com/pt-br/foto/edificio-de-concreto-cinza-vermelho-e-laranja-439391/",
	"https://www.pexels.com/pt-br/foto/edificios-altos-cinzentos-936722/",
	"https://www.pexels.com/pt-br/foto/fotografia-vista-da-cidade-perto-da-agua-290595/",
	"https://www.pexels.com/pt-br/foto/empire-state-building-nova-york-466685/"
];

var prevButton, nextButton, thumbs;

function main()
{
	setup();
	setNavigation();
	setLinks();
}

function setup()
{
	createjs.Touch.enable(stage);
	
	createjs.MovieClip.prototype.playUntil = function(positionOrLabel, ease)
	{
		var duration;
		var to = this.timeline.resolve(positionOrLabel);
		
		this.tweenFrame = this.timeline.position;
		
		if (this.tweenFrame == null)
			return;

		duration = Math.abs(((to - this.tweenFrame) / lib.properties.fps) * 1000);
		
		createjs.Tween.get(this, { override: true }).to({ tweenFrame: to }, duration, ease).addEventListener("change", function(e)
		{
			var target = e.currentTarget.target;
			
			target.gotoAndStop(Math.round(target.tweenFrame));
			
			if (target.tweenFrame === to)
				e.remove();	
		});
	};

	prevButton = root.prevButton;
	nextButton = root.nextButton;
	thumbs = root.thumbs;
	root.stop();
}

function setNavigation()
{
	thumbs.index = 0;
	thumbs.stop();
	prevButton.on("click", onPrev);
	nextButton.on("click", onNext);
}

function onPrev()
{
	thumbs.index = Math.max(thumbs.index - 1, 0);
	thumbs.playUntil("thumb" + thumbs.index, createjs.Ease.sineInOut);
}

function onNext()
{
	thumbs.index = Math.min(thumbs.index + 1, thumbs.labels.length - 1);
	thumbs.playUntil("thumb" + thumbs.index, createjs.Ease.sineInOut);
}

function setLinks()
{
	thumbs.children.forEach(function(child, index)
	{
		child.mouseChildren = false;
		child.cursor = "pointer";
		
		child.on("click", function()
		{
			window.open(links[index], "_blank");
		});
	});
}

if (!this.started)
{
	window.root = this;
	main();
	this.started = true;
}

     

    I hope it helps.

     

    Regards,

    JC

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    December 9, 2022

    Hi.

     

    Here is a suggestion:
    https://bit.ly/3UOHrya

     

    Code used (for reference only):

    var links =
[
	"https://www.pexels.com/pt-br/foto/sears-tower-eua-1722183/",
	"https://www.pexels.com/pt-br/foto/edificio-de-vidro-na-fotografia-worm-s-eye-290275/",
	"https://www.pexels.com/pt-br/foto/edificio-de-concreto-cinza-vermelho-e-laranja-439391/",
	"https://www.pexels.com/pt-br/foto/edificios-altos-cinzentos-936722/",
	"https://www.pexels.com/pt-br/foto/fotografia-vista-da-cidade-perto-da-agua-290595/",
	"https://www.pexels.com/pt-br/foto/empire-state-building-nova-york-466685/"
];

var prevButton, nextButton, thumbs;

function main()
{
	setup();
	setNavigation();
	setLinks();
}

function setup()
{
	createjs.Touch.enable(stage);
	
	createjs.MovieClip.prototype.playUntil = function(positionOrLabel, ease)
	{
		var duration;
		var to = this.timeline.resolve(positionOrLabel);
		
		this.tweenFrame = this.timeline.position;
		
		if (this.tweenFrame == null)
			return;

		duration = Math.abs(((to - this.tweenFrame) / lib.properties.fps) * 1000);
		
		createjs.Tween.get(this, { override: true }).to({ tweenFrame: to }, duration, ease).addEventListener("change", function(e)
		{
			var target = e.currentTarget.target;
			
			target.gotoAndStop(Math.round(target.tweenFrame));
			
			if (target.tweenFrame === to)
				e.remove();	
		});
	};

	prevButton = root.prevButton;
	nextButton = root.nextButton;
	thumbs = root.thumbs;
	root.stop();
}

function setNavigation()
{
	thumbs.index = 0;
	thumbs.stop();
	prevButton.on("click", onPrev);
	nextButton.on("click", onNext);
}

function onPrev()
{
	thumbs.index = Math.max(thumbs.index - 1, 0);
	thumbs.playUntil("thumb" + thumbs.index, createjs.Ease.sineInOut);
}

function onNext()
{
	thumbs.index = Math.min(thumbs.index + 1, thumbs.labels.length - 1);
	thumbs.playUntil("thumb" + thumbs.index, createjs.Ease.sineInOut);
}

function setLinks()
{
	thumbs.children.forEach(function(child, index)
	{
		child.mouseChildren = false;
		child.cursor = "pointer";
		
		child.on("click", function()
		{
			window.open(links[index], "_blank");
		});
	});
}

if (!this.started)
{
	window.root = this;
	main();
	this.started = true;
}

     

    I hope it helps.

     

    Regards,

    JC

      S
      shiv rama krishr93754390Author
      Participating Frequently
      December 9, 2022

      Thank you so much, sir, Exactly what I'm looking for. 🙂 

        JoãoCésar17023019
        Community Expert
        JoãoCésar17023019Community Expert
        Community Expert
        December 9, 2022

        You're welcome!

          kglad
          Community Expert
          kgladCommunity Expert
          Community Expert
          December 8, 2022

          are you asking for someone to do this for you, or have you tried encoding those actions and need help?

          S
          shiv rama krishr93754390Author
          Participating Frequently
          December 9, 2022

          Actually, I have included the below code in the files. but I'm not sure how to properly use it. 

           

          this.navigationLoop = true; // set to true or false to enable or disable loop when the current position is the first or the last frame

          if (!this.hasStarted)
          {
          this.prevFrame = function (e)
          {
          if (this.navigationLoop && this.currentFrame == 0)
          this.gotoAndStop(this.timeline.duration - 1);
          else
          this.gotoAndStop(this.currentFrame - 1);
          };
          this.nextFrame = function (e)
          {
          if (!this.navigationLoop && this.currentFrame == this.timeline.duration - 1)
          return;
          this.gotoAndStop(this.currentFrame + 1);
          };
          this.prevButton.on("click", this.prevFrame, this);
          this.nextButton.on("click", this.nextFrame, this);
          this.stop();
          this.hasStarted = true;
          }

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices