Seamless image fade in/out

[Seaweedgirl 0 Likes (Newbie)]

Hello~!

 

I confess that I am a complete n00b at using greensock and flash, so I would be very appreciative if someone could help dumb it down for me! I have been searching the internet for hours trying to find a solution.

 

 

On my timeline, I have 4 buttons. The 4 buttons each go to a labelled frame when clicked. I have a different image and content in each labelled frame section.

 

What I would like to achieve:

When you click to go to a labelled frame section, the image from the previous frame section will fade out and the image in the current frame will fade in. I would like the images to fade in/out from one another no matter what sequence the buttons are clicked.

 

Any help for a poor, lost n00b, would be so very very appreciated :')

[jamiejefferson 1,185 Likes (Superhero)]

There was a recent thread here about this issue: Fade out Current frame to Targeted Frame

 

Have a look there and let us know if any of that makes sense. There are two methods proposed there, but you will probably benefit from converting your project to MovieClips at this early stage.

 

The screen capture method is really 'cheating', but would work fine in a pinch. A MovieClip approach is technically the best, and is likely to scale well with any features you add to the project. It all really comes down to your Actionscript ability and how much effort you want to put in.

[Seaweedgirl 0 Likes (Newbie)]

Thank you for the reply and link! Yes I think I will certainly be converting each section to a movie clip on the timeline

 

http://www.snorkl.tv/2011/03/teaser-bul ... ansitions/

The above link is very similar to what I would like to achieve - sequence plays quickly in reverse before introducing the next section on the timeline. Except I only want this applied to images...

 

I was reading through and it says "if you want transitions to overlap (think crossfade) you’ll have to explore a different approach.

Crossfade is kinda what I was hoping to achieve...

 

I was a little stumped at the the screen capture method...plus I'm not sure how I would apply it to one element, or if its only for fading out the whole frame... ^^;

 

 

So I was just seeing if anyone knew of a good approach they have used for image smooth transisitions between frames, otherwise I guess I'll try and follow along that link and see I can manage to apply the technique to just images.

[jamiejefferson 1,185 Likes (Superhero)]

---

Here's a quick example (I've just written this here off the top of my head, there could be syntax errors / not 'tested' etc, but the concept is sound enough)

 

Lets assume:

* the stage has 2 buttons on it, gotopage1 and gotopage2.

* in the library is two movieclips: Page1 and Page2. These contain page specific image and text content.

* 'Pages' each contain two movieclips named 'image' and 'otherContent'.

* the stage has only 1 frame. This frame contains the navigation buttons, and any background/common design etc

 

 

Store references to all your pages

var allPages:Array = new Array(new Page1(), new Page2()); // if you want to instantiate pages straight from the library

or

var allPages:Array = new Array(page1, page2); // if the pages are placed on the stage already

 

Make sure all pages are hidden (can re-display a default page if necessary)

for each (var page:DisplayObject in allPages) {
page.visible = 0; // hides page and prevents mouseevents
addChild(page); // adds page to the display list (only if pages weren't initially placed on the stage)
}

 

Functions to 'crossfade' to another page

function showPage(pageIndex:int) {
if (pageIndex < allPages.length) { // make sure the index is within bounds
	var targetPage:DisplayObject = allPages[pageIndex];
	for each (var page:DisplayObject in allPages) {
		if (page != targetPage) { // hide all other pages
			if (page.visible) { // only need to run an animation if the page is already displayed
				page.otherContent.alpha = 0; // hide text instantly
				TweenMax.to(page.image, 1, { alpha:0, onComplete:hidePage, onCompleteParams:

---

 } ); // fade out image
			}
		}
	}
	targetPage.visible = 1; // show page
	targetPage.otherContent.alpha = 1; // show text instantly
	targetPage.image.alpha = 0; // start hidden
	TweenMax.to(targetPage.image, 1, { alpha:1 } ); // fade in image
}
}

function hidePage(page:DisplayObject) {
page.visible = 0; // hide
}

 

After setting that up, just have gotopage1's click listener call showPage(0), gotopage2: showPage(1) etc.

Just add more pages to the allPages array as you create them, and a nav button to get there.

 

 

*Edit: made a few changes to better reflect your desire for just image transitions. This is all very basic, but it's a good start for some simple transitions.

[Carl 9,066 Likes (Superhero)]

Jamie, again, has a great approach which is quite elegant.

 

Here is a slightly more simplistic approach, perhaps more beginner-friendly

 

Demo:

http://snorkl.tv/dev/crossFade/crossFade.html

 

CS4 Fla

http://snorkl.tv/dev/crossFade/crossFade.fla

 

import com.greensock.*;


black_btn.addEventListener(MouseEvent.CLICK, crossFade);
blue_btn.addEventListener(MouseEvent.CLICK, crossFade);
red_btn.addEventListener(MouseEvent.CLICK, crossFade);
green_btn.addEventListener(MouseEvent.CLICK, crossFade);

//tell each button which movie clip to control
black_btn.mc = black;
blue_btn.mc = blue;
red_btn.mc = red;
green_btn.mc = green;

//start with all clips except black hidden
blue.alpha = 0;
red.alpha = 0;
green.alpha = 0;

//this variable stores a reference to the currently visible clip
var currentClip:MovieClip = black;

function crossFade(e:MouseEvent):void{
//make sure the currentClip isn't related to the button you just clicked
if(currentClip != e.target.mc){

	//hide the current clip
	TweenLite.to(currentClip, 1, {alpha:0});

	//show the clip related to the btn you just pressed
	TweenLite.to(e.target.mc, 1, {alpha:1});
	}

//reset currentClip to reflect the clip related to the button you just clicked	
currentClip = e.target.mc;	
}

 

 

I think you just gave me an idea for a new tutorial:)

[Seaweedgirl 0 Likes (Newbie)]

Oh wow!! Thank you guys so very very much! Exactly what I was after

 

The second technique posted by carl looks much more familiar to something I could hand (I'm a major beginner). I applied it to my flash file and it works awesomely!

Just a question though...is it possible to have the movie clip play through rather than being static? For example, just say I wanted an image inside the movie clip to fade on first, then a second image after.

 

 

Thank you so much again! I've been looking for a solution for days, so you've really made my day! Haha

[Chrysto 143 Likes (Specialist)]

Hi, I use one class, called content manager. Let me show it to you:

package {

import flash.display.*;

import flash.events.*;

import caurina.transitions.Tweener;

 

public class Content_Manager2 extends MovieClip {

 

public var current_content:MovieClip;

private var old_content:Array;

private var open_tween:Object; // Object to hold the tween that introduce a new clip

private var close_tween:Object; // Object to hold tween that exits a clip

private var starting_values:Object;

 

public function Content_Manager2( o_tween:Object, c_tween:Object, start_obj:Object ) {

old_content = new Array();

open_tween = o_tween;

close_tween = c_tween;

close_tween.onComplete = remove_content; // Make sure to add the onComplete call to remove_content

 

starting_values = start_obj;

}

 

public function add_content( id ):MovieClip {

if ( current_content != null ) {

Tweener.addTween( current_content, close_tween );

old_content.push( current_content );

}

 

current_content = new id();

 

for ( var p in starting_values ) {

current_content[ p ] = starting_values[ p ];

}

 

Tweener.addTween( current_content, open_tween );

addChild( current_content );

return current_content;

}

 

private function remove_content():void {

old_content[0].destroy();

removeChild( old_content[0] );

old_content.splice( 0, 1 );

}

}

}

 

 

This is the class that handles all the transitions, here is the app class:

package {
import flash.display.*;
import flash.events.*;
import Content_Manager2;	// Import Content_Manager2

public class Add_Page2 extends MovieClip {
	private var my_cm:Content_Manager2;	// Declare a variable to hold an instance of Content_Manager2

	public function Add_Page2() {
		// Define some objects that will be used with Tweener to animate things
		var close_tween = { y:440, time: 1, transition:"easeoutelastic" };	// This will set how objects move off the stage
		var open_tween = { y:40, time:1, transition:"easeoutelastic" };		// This will set how objects move onto the stage
		var start_values = { x:100, y:-400 };								// This object sets the intial starting properties of an object when it is added to the stage

		// Create a new instance of Content_Manager2. The first parameter sets the host clip. This is the clip that 
		// will clips that are added to the stage through Content_Manager2
		my_cm = new Content_Manager2( open_tween, close_tween, start_values );

		addChild( my_cm );	// Add an instance to the stage

		b_0.addEventListener( MouseEvent.CLICK, b_0_click );
		b_1.addEventListener( MouseEvent.CLICK, b_1_click );
		b_2.addEventListener( MouseEvent.CLICK, b_2_click );
		x_mc.addEventListener(MouseEvent.CLICK, xClick);
	}


	private function b_0_click( evt:Event ):void {
		my_cm.add_content( OrangeBox );	// Add a linked symbol from the library
	}

	private function xClick(evt:Event):void{
		my_cm.add_content(text2);
		}

	private function b_1_click( evt:Event ):void {
		my_cm.add_content( RedBox );
	}

	private function b_2_click( evt:Event ):void {
		my_cm.add_content( GreenBox );
	}

}
}

 

just use my_cm.add_content() and then pass as parameter new DisplayObject class ! here is my modfication of this class:

package bassta.extentions  {

import flash.display.DisplayObject;
import bassta.display.BSprite;
import com.greensock.TweenLite;
import bassta.utils.Hash;
import bassta.utils.Colors;
import bassta.utils.ArrayTools;

public class ContentManager extends BSprite{

	public var current_content:DisplayObject;
	private var old_content:Array;
	private var openTween:Hash;
	private var closeTween:Hash;
	private var startingValues:Hash;

	public function ContentManager(starting_values:Object, open_tween:Object, close_tween:Object) {
		old_content = new Array();
		openTween = Colors.convertColors(new Hash({time:0.5}).merge(open_tween));					
		closeTween = Colors.convertColors(new Hash({time:0.5}).merge(close_tween));
		closeTween.onComplete = remove_content;
		startingValues = Colors.convertColors(new Hash( starting_values ));
	}

	public function addContent(_newContent:DisplayObject):DisplayObject{

		if ( current_content != null ) {
			TweenLite.killDelayedCallsTo(current_content);
			TweenLite.killTweensOf(current_content);
			TweenLite.to(current_content, closeTween.time, closeTween.withoutKeys("time"));
			old_content.push( current_content );
		} 

		current_content = _newContent;

		addChild( current_content );
		TweenLite.to(current_content, 0, startingValues.withoutKeys("time"));
		TweenLite.to(current_content, openTween.time, openTween.withoutKeys("time"));

		return current_content;
	}

	/*
	Removes the content, if it have public function 'destroy' it is called - can displose BitmapData, remove Listenrs, etc
	*/
	private function remove_content():void {
		if ("destroy" in old_content[0] && old_content[0]["destroy"] is Function){
			old_content[0].destroy();
		}
		removeChild( old_content[0] );
		old_content[0] = null;
		old_content.splice( 0, 1 );
	}

	public function destroy():void{
		TweenLite.killTweensOf(this);
		TweenLite.killDelayedCallsTo(this);

		if(!ArrayTools.is_empty(old_content)){
			remove_content();
			ArrayTools.clear(old_content);
		}
		if(current_content){
			TweenLite.killTweensOf(current_content);
			this.removeChild(current_content);
			current_content = null;
		}
	}


}//end
}

 

 

 

And to Snorkl ---> I'm developing small util , similar to GrantSkinner's MemoryGauge, but have some other usefull functions - Grawl like notification (you can get output , like trace() in browser) here is demo : http://burnandbass.com/stats-bab/ check this, click on the text or on the circle, are you interested?

[laxbuddha 1 Likes (Newbie)]

thanks! This was awesome!