Fade in/out to a certain frame

[LanLing]

Does anyone know if it's possible to fade in/out to another frame of a layer? For example I have a file called Project.fla, inside it there is a Text class, inside the Text class there is an Icons class, then inside the Icons class there are 4 frames (representing 4 icons). If I currently have icon 1 (frame 1) on the stage, how would I fade out this icon then fade in let's say icon 3 (frame 3)?

Thanks.

[Carl]

there are number of ways you can set this up.

the important aspect is getting the icon clip to advance to the right frame at the right time.

 

below is one way of doing it:

 

 

import com.greensock.*;
OverwriteManager.init(2);

mc.stop();

TweenLite.to(mc, 1, {alpha:0, onComplete:mc.nextFrame});
TweenLite.to(mc, 1, {alpha:1, delay:1});

 

when the first tween is done fading to 0, mc will advance to frame 2 and then the second tween will fade back in.

 

if you want to go to a frame other than the next frame you can do something like:

 

import com.greensock.*;
OverwriteManager.init(2);
mc.stop();

//specify which frame to go to next in the onCompleteParams

TweenLite.to(mc, 1, {alpha:0, onComplete:mc.gotoAndStop, onCompleteParams:[4]});
TweenLite.to(mc, 1, {alpha:1, delay:1});

[LanLing]

Thank you!

That worked perfectly.

Just a very minor problem, when I first test the movie it first shows a certain frame for around half a second then immediately fade to the correct frame. I've tried the "characterIcon.stop()" you wrote, "characterIcon.gotoAndStop(1)", neither works. Do you know what might be causing this? Is it on the code side or the flash side?

[Carl]

the only thing that I can imagine is that perhaps the characterIcon clip is playing before your code executes.

 

try to put a stop() action in frame 1 of characterIcon and see if that helps.

[LanLing]

Thanks, I found the problem is that I have the tweenlite activated at the beginning of the program, which will run when I launch the swf. It should only activate upon mouse click.

I was wondering if it's possible to tween to a frame, but also keep the contents of the last frame? For example, on a layer called "characterIcon", right now I'm on icon 1 (frame 1), when I mouse click it fades in/out to icon 2 (frame 2), but I want to only change opacity of icon 1 to around 50% then bring icon 2 onto the stage, not erase icon 1 completely. Is this possible? Trying to make a text dialogue system where I can still see the faded portrait of the person who last spoke.

 

This is the relevant code I have right now:

 

package  {

import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.media.Sound;
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([FrameLabelPlugin, FramePlugin]);
OverwriteManager.init(2);

public class DialogueText extends MovieClip {

...
...

 public function startText():void {	  //starting the program
  _currentTextBlock = _textBlocks[_currentTextBlockIndex][TEXT];

  characterIcon.gotoAndStop(_textBlocks[_currentTextBlockIndex][sPEAKER]); //go to the correct character icon
  addEventListener(Event.ENTER_FRAME, updateText);
  addEventListener(MouseEvent.CLICK, fillText);
 }

...
...

 private function nextTextBlock(e:MouseEvent):void {   //advances to correct text and portrait upon mouse click
  characterIcon.stop();
  removeEventListener(MouseEvent.CLICK, nextTextBlock);
  txt.text = ""; // clear the text
  _currentTextBlockIndex++;
  _currentTextBlock = _textBlocks[_currentTextBlockIndex][TEXT]; // set the text

  TweenLite.to(characterIcon, 0.5, {alpha:0, onComplete:characterIcon.gotoAndStop, onCompleteParams:[_textBlocks[_currentTextBlockIndex][sPEAKER]]}); //fades out the last char portrait
  TweenLite.to(characterIcon, 0.5, {alpha:1, delay:0.5}); //fades in new portrait

  addEventListener(Event.ENTER_FRAME, updateText); // start updating the text
  addEventListener(MouseEvent.CLICK, fillText);
 }

}

}

[Carl]

The limitation of putting assets on different frames is that the play head can only be in 1 frame ate time.

 

A better approach would be to have all the icons on frame 1 and then you can tween multiple icons at the same time to different values.

 

 

[LanLing]

The limitation of putting assets on different frames is that the play head can only be in 1 frame ate time.

 

A better approach would be to have all the icons on frame 1 and then you can tween multiple icons at the same time to different values.

You mean putting all icons on different layers and assigning each one to a class/instance?

The problem is I need to assign an icon for each section of dialogue. This is how my dialogue is laid out:

 

var textBlocks:Array = new Array(
		["Person1",	 "speech of person 1"],
		["Person2",	 "speech of person 2"],
		["Person1",	 "speech of person 1"],
		 ...
		 ...
		  );

 

"Person1" and "Person2" are frame labels that I put in each of the 4 frames in Flash, each frame has the corresponding icon. This section of the script:

 

public function startText():void {	  //starting the program
  _currentTextBlock = _textBlocks[_currentTextBlockIndex][TEXT];

  characterIcon.gotoAndStop(_textBlocks[_currentTextBlockIndex][sPEAKER]); //go to the correct character icon
...
...
}

 

will read "Person1" and "Person2" as frame labels, using "gotoAndStop" and thus display the icon and text on the correct frame. For example "gotoAndStop(Person1)" will display person1's icon.

 

If I put all the icons on separate frames I'm not sure how I would tell flash which of the 4 icons to display.

[Carl]

if you want to leave your content on different frames, that's fine, but you won't be able to do any sort of cross-fades.

 

and yes, you could have all your icons and text on the same frame and even different layers.

if you are storing "frame labels" in an array and dynamically telling flash which frame to go to based on a certain array index, you could just as well store references to movie clips in your array and tween their alpha.

 

var textBlocks:Array = new Array(
		[person1_mc,  "speech of person 1"],
		[person2_mc,  "speech of person 2"],
		[person3_mc,  "speech of person 3"],
		 ...
		 ...
		  );
var currentIndex:int = 3;
TweenLlite.to(textBlocks[currentIndex][0], 1, {alpha:1});

 

in addition you could also store a reference to the currently displayed clip so that you know which one to fade out when a new one fades in. or you could loop through all the items in the array and fade them out and then fade in the new one.

 

Hopefully that gives you some ideas.

[LanLing]

Thank you, I sort of get what you mean.

However using this format:

var textBlocks:Array = new Array( 
	    [person1mc,	 "conversation1"], 
	    [person2mc,	 "conversation2"],
...
...
);

 

Gave a "Line 11 1120: Access of undefined property person1mc."

I clearly have the movieclip "person1mc" on the stage, with class name "Person1mc". Why is it not finding it?

Earlier using the label name as a string worked...

[LanLing]

Update: I figured it out!

My movieclips were in a sub-class of the main class, that's why it wasn't able to access it.

I just had to use the string version of the movieclip instance names like "person1mc" in the dialogue array, then in my sub-class use "this[person1mc]" to convert it into a usable movieclip instance.

Thanks for your help!