Copy link to clipboard
Copied
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:
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.
Samples are not created with Animate. That banners are hand-coded with CSS/JS without using of any of JS library.
Copy link to clipboard
Copied
Samples are not created with Animate. That banners are hand-coded with CSS/JS without using of any of JS library.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
Yes, you can do it with timeline or code. I dont know about tutorial. You can try to hire someone for that.
Copy link to clipboard
Copied
Here is sample http://www.marjantrajkovski.com/cta.zip
Copy link to clipboard
Copied
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});
}
Copy link to clipboard
Copied
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);
}
Copy link to clipboard
Copied
I feel like that code is a bit repetitive. ClayUUID might be able to help with something more concise.
Copy link to clipboard
Copied
Yes it is 🙂 but is clean for begginers. You can read it like a book and learn something from it 🙂