Highlighted

Javascript Fadein movieclip

Explorer ,
Sep 27, 2019

Copy link to clipboard

Copied

I want to have a movieClip to fadin after a button has been clicked. My old AS3file used transition class. But I am unsure how to do this in Animate HTML5 format?  My drop box with my files Dropbox

//AS3
var fadeIn:Tween;
function widgitFadeIn():void
{
	fadeIn = new Tween(widgit_mc,"alpha",Strong.easeInOut,0,1,1,true);
}
//Button sample
iNav_mc.play_btn.addEventListener(MouseEvent.CLICK, onNext);

function onNext(e:MouseEvent):void
{
	widgitFadeIn();
	if (widgit_mc.currentFrame >= 1)
	{
		widgit_mc.nextFrame();
		Tools.disableButton(iNav_mc.pause_btn);
		Tools.enableButton(iNav_mc.back_btn);
		direction_txt.text = "Click to advance";
	}

	if (widgit_mc.currentFrame == widgit_mc.totalFrames)
	{
		Tools.enableButton(iNav_mc.back_btn);
		Tools.disableButton(iNav_mc.play_btn);
		direction_txt.text = "Previous view";
	}
}

. This is my current JavaScript code

//JavaScript
stage.on("drawstart", setInt, this, true);
function setInt(){
	this.iNav_mc.back_btn.mouseEnabled = false;
	this.iNav_mc.back_btn.alpha = .5;
	this.direction_txt.textBaseline='top';
}
this.iNav_mc.play_btn.addEventListener("click", onNext.bind(this));
function onNext(){
	if(this.widgit_mc.currentFrame >= 0){
		this.widgit_mc.gotoAndStop(this.widgit_mc.currentFrame + 1);		
	}
	if(this.widgit_mc.currentFrame == this.widgit_mc.timeline.duration -1){
		this.iNav_mc.play_btn.mouseEnabled = false;
		this.iNav_mc.play_btn.alpha = .5;
		this.direction_txt.text = "END of Widgit";
	}else{
		this.iNav_mc.back_btn.mouseEnabled = true;
		this.iNav_mc.back_btn.alpha = 1.0;
	}
}
this.iNav_mc.back_btn.addEventListener("click", onPrev.bind(this));
function onPrev(){
	if(this.widgit_mc.currentFrame == this.widgit_mc.timeline.duration -1 || this.widgit_mc.currentFrame > 0){
		this.widgit_mc.gotoAndStop(this.widgit_mc.currentFrame - 1);
	}
	if (this.widgit_mc.currentFrame == 0){
		this.iNav_mc.back_btn.mouseEnabled = false;
		this.iNav_mc.back_btn.alpha = .5;
		this.iNav_mc.play_btn.mouseEnabled = true;
		this.iNav_mc.play_btn.alpha = 1.0;		
		this.direction_txt.text = "Click to advance";
	}else{
		this.iNav_mc.back_btn.mouseEnabled = true;
		this.iNav_mc.back_btn.alpha = 1.0;
		this.iNav_mc.play_btn.mouseEnabled = true;
		this.iNav_mc.play_btn.alpha = 1.0;		
		this.direction_txt.text = "Click to advance";
	}
}

 

Views

210

Likes

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

Javascript Fadein movieclip

Explorer ,
Sep 27, 2019

Copy link to clipboard

Copied

I want to have a movieClip to fadin after a button has been clicked. My old AS3file used transition class. But I am unsure how to do this in Animate HTML5 format?  My drop box with my files Dropbox

//AS3
var fadeIn:Tween;
function widgitFadeIn():void
{
	fadeIn = new Tween(widgit_mc,"alpha",Strong.easeInOut,0,1,1,true);
}
//Button sample
iNav_mc.play_btn.addEventListener(MouseEvent.CLICK, onNext);

function onNext(e:MouseEvent):void
{
	widgitFadeIn();
	if (widgit_mc.currentFrame >= 1)
	{
		widgit_mc.nextFrame();
		Tools.disableButton(iNav_mc.pause_btn);
		Tools.enableButton(iNav_mc.back_btn);
		direction_txt.text = "Click to advance";
	}

	if (widgit_mc.currentFrame == widgit_mc.totalFrames)
	{
		Tools.enableButton(iNav_mc.back_btn);
		Tools.disableButton(iNav_mc.play_btn);
		direction_txt.text = "Previous view";
	}
}

. This is my current JavaScript code

//JavaScript
stage.on("drawstart", setInt, this, true);
function setInt(){
	this.iNav_mc.back_btn.mouseEnabled = false;
	this.iNav_mc.back_btn.alpha = .5;
	this.direction_txt.textBaseline='top';
}
this.iNav_mc.play_btn.addEventListener("click", onNext.bind(this));
function onNext(){
	if(this.widgit_mc.currentFrame >= 0){
		this.widgit_mc.gotoAndStop(this.widgit_mc.currentFrame + 1);		
	}
	if(this.widgit_mc.currentFrame == this.widgit_mc.timeline.duration -1){
		this.iNav_mc.play_btn.mouseEnabled = false;
		this.iNav_mc.play_btn.alpha = .5;
		this.direction_txt.text = "END of Widgit";
	}else{
		this.iNav_mc.back_btn.mouseEnabled = true;
		this.iNav_mc.back_btn.alpha = 1.0;
	}
}
this.iNav_mc.back_btn.addEventListener("click", onPrev.bind(this));
function onPrev(){
	if(this.widgit_mc.currentFrame == this.widgit_mc.timeline.duration -1 || this.widgit_mc.currentFrame > 0){
		this.widgit_mc.gotoAndStop(this.widgit_mc.currentFrame - 1);
	}
	if (this.widgit_mc.currentFrame == 0){
		this.iNav_mc.back_btn.mouseEnabled = false;
		this.iNav_mc.back_btn.alpha = .5;
		this.iNav_mc.play_btn.mouseEnabled = true;
		this.iNav_mc.play_btn.alpha = 1.0;		
		this.direction_txt.text = "Click to advance";
	}else{
		this.iNav_mc.back_btn.mouseEnabled = true;
		this.iNav_mc.back_btn.alpha = 1.0;
		this.iNav_mc.play_btn.mouseEnabled = true;
		this.iNav_mc.play_btn.alpha = 1.0;		
		this.direction_txt.text = "Click to advance";
	}
}

 

Views

211

Likes

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
Sep 27, 2019 0
Adobe Community Professional ,
Sep 27, 2019

Copy link to clipboard

Copied

Likes

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
Reply
Loading...
Sep 27, 2019 0
Explorer ,
Sep 27, 2019

Copy link to clipboard

Copied

I'm currently using Animate 2015 CC. Will I need to download tweenJS or is it already part of Animate? can I put this code into a funtion and change target to the MC I want to fade "createjs.Tween.get(target) .wait(500) .to({alpha:0, visible:false}, 1000) .call(handleComplete);" ?

Likes

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
Reply
Loading...
Sep 27, 2019 0
Adobe Community Professional ,
Sep 27, 2019

Copy link to clipboard

Copied

Animate Canvas documents use CreateJS. CreateJS is a library suite comprised of EaselJS, TweenJS, SoundJS, and PreloadJS. If you examine the JavaScript generated by Animate, you'll see that it internally uses TweenJS for all animation.

 

https://createjs.com/

 

Likes

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
Reply
Loading...
Sep 27, 2019 1
Explorer ,
Sep 27, 2019

Copy link to clipboard

Copied

thank you

Likes

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
Reply
Loading...
Sep 27, 2019 0