Tutorials or template on creating effects like the banner linked

[lauriel85544203]

I am trying to create a series of banners that has 3 or 4 click through options. When a user mouse over an option, that option is highlighted by slightly becoming larger AND the other options greyed out.

An example can be seen here:

https://testpages.eyereturn.com/CustomPreview/testpage.html?c2Vncz18NTQ5MjIwM3wqfDU0OTIyMDl8Knw1NDky...

If you click on one option, it increases in size and fades out the other options.

Is there an online tutorial that can demonstrate how that's done; or an online CC Animate template that has a similar function for sale that I can purchase and view how it's made in Animate?

I am using Adobe Animate CC2015 but can upgrade to 2017 if necessary.

thanks in advance!

L.L.

[marjantrajkovski · Accepted solution]

Samples are not created with Animate. That banners are hand-coded with CSS/JS without using of any of JS library.

[lauriel85544203]

Thank you. Perhaps I should be more clear in my question: Can I achieve this effect and manner using Animate?

And if so, are there online tutorials that can demonstrate how that's done; or an online CC Animate template that has a similar function for sale that I can purchase and view how it's made in Animate?

[marjantrajkovski]

Yes, you can do it with timeline or code. I dont know about tutorial. You can try to hire someone for that.

[marjantrajkovski]

Here is sample http://www.marjantrajkovski.com/cta.zip

[marjantrajkovski]

Create 4 buttons with instance names e.g cta1, cta2, cta3, cta4 (3 buttons and one for bg behind them)

Code:

this.cta1.addEventListener("click", function () { window.open(window.clickTag1) });

this.cta1.addEventListener("mouseover", ctaOver1.bind(this));

this.cta1.addEventListener("mouseout", ctaOut.bind(this));

this.cta2.addEventListener("click", function () { window.open(window.clickTag2) });

this.cta2.addEventListener("mouseover", ctaOver2.bind(this));

this.cta2.addEventListener("mouseout", ctaOut.bind(this));

this.cta3.addEventListener("click", function () { window.open(window.clickTag3) });

this.cta3.addEventListener("mouseover", ctaOver3.bind(this));

this.cta3.addEventListener("mouseout", ctaOut.bind(this));

this.cta4.addEventListener("click", function () { window.open(window.clickTag4) });

function ctaOver1()

{

  cjs.Tween.get(this.cta1).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

  cjs.Tween.get(this.cta2).to({alpha:0.4});

  cjs.Tween.get(this.cta3).to({alpha:0.4});

}

function ctaOver2()

{

  cjs.Tween.get(this.cta1).to({alpha:0.4});

  cjs.Tween.get(this.cta2).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

  cjs.Tween.get(this.cta3).to({alpha:0.4});

}

function ctaOver3()

{

  cjs.Tween.get(this.cta1).to({alpha:0.4});

  cjs.Tween.get(this.cta2).to({alpha:0.4});

  cjs.Tween.get(this.cta3).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

}

function ctaOut()

{

  cjs.Tween.get(this.cta1).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

  cjs.Tween.get(this.cta2).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

  cjs.Tween.get(this.cta3).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

  cjs.Tween.get(this.cta1).to({alpha:1});

  cjs.Tween.get(this.cta2).to({alpha:1});

  cjs.Tween.get(this.cta3).to({alpha:1});

}

[marjantrajkovski]

This code better fits (smoothly)

this.cta1.addEventListener("click", function () { window.open(window.clickTag1) });

this.cta1.addEventListener("mouseover", ctaOver1.bind(this));

this.cta1.addEventListener("mouseout", ctaOut1.bind(this));

this.cta2.addEventListener("click", function () { window.open(window.clickTag2) });

this.cta2.addEventListener("mouseover", ctaOver2.bind(this));

this.cta2.addEventListener("mouseout", ctaOut2.bind(this));

this.cta3.addEventListener("click", function () { window.open(window.clickTag3) });

this.cta3.addEventListener("mouseover", ctaOver3.bind(this));

this.cta3.addEventListener("mouseout", ctaOut3.bind(this));

this.cta4.addEventListener("click", function () { window.open(window.clickTag4) });

function ctaOver1()

{

  cjs.Tween.get(this.cta1).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

  this.cta2.alpha=0.4;

  this.cta3.alpha=0.4;

}

function ctaOver2()

{

  this.cta1.alpha=0.4;

  cjs.Tween.get(this.cta2).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

  this.cta3.alpha=0.4;

}

function ctaOver3()

{

  this.cta1.alpha=0.4;

  this.cta2.alpha=0.4;

  cjs.Tween.get(this.cta3).to({scaleX:1.2, scaleY:1.2}, 400, cjs.Ease.backOut);

}

function ctaOut1()

{

  cjs.Tween.get(this.cta1).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

  this.cta2.alpha=1;

  this.cta3.alpha=1;

}

function ctaOut2()

{

  this.cta1.alpha=1;

  cjs.Tween.get(this.cta2).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

  this.cta3.alpha=1;

}

function ctaOut3()

{

  this.cta1.alpha=1;

  this.cta2.alpha=1;

  cjs.Tween.get(this.cta3).to({scaleX:1, scaleY:1}, 400, cjs.Ease.backOut);

}

[just.emma]

I feel like that code is a bit repetitive.  ClayUUID might be able to help with something more concise.

[marjantrajkovski]

Yes it is 🙂 but is clean for begginers. You can read it like a book and learn something from it 🙂