Link to home
Start Free TrialLog in
Avatar of MJ
MJFlag for United States of America

asked on

Have Text Fade in/out

Currently I have a movie that fades pics in and our based on some params in an inf file. Works great. My next step is to have the picture fade in as it currently does, stop, and then have text fade in over top the picture, and then have the text fade back out,  and then have the picture fade back out. I want to know how I would change this exisitng Movie. Ideally like to have the text and timing of text fade, in the config file also.

Current movie:

1) picture fades in
2) picture fades out

Desired movie:

1) picture fades in
2) Stops
3)text fades in
4) text stops
4) text fades out
2) picture fades out

loops through all pics in config. file.



http://www.4shared.com/file/36253938/11fd147/fade.html
Avatar of Ten90Group
Ten90Group

Well, first off, I would begin by putting the data for the text and timing into a really simple XML file, formatted like below. Then I would have your actionscript file parse the XML into a 2 dimensional array, like this:
var textEntries:Array = new Array( new Array( value, timing ), .....);

Then I would use the setTimeout function within the startSlideshow function of your FLA to start the fade in of the text. Flash has built in a really cool class which will let you program a Tween, and you can find that here: http://www.kirupa.com/developer/actionscript/tween.htm.
<xml>
  <textItem>
    <value>Text/Caption Goes Here</value>
    <timing>1000</timing>
  <textItem>
  ..
  ..
</xml>

Open in new window

Here is a good guide for parsing XML with Flash: http://www.darronschall.com/weblog/archives/000065.cfm
this application cannot be just modified. I took a look at your code and it needs to be rewritten, because the structure of what you need now is totally different from what you have.You need a chained animation flow , and what you have is a simple in out. It seems to me you got some code from internet. I think it will be difficult for someone to alter that code for you since it is all in AS 1.0 syntax (which is very old and boring ;) ). If you are interested in AS 3.0 or even AS 2.0 solution let me know. Although I spent some years of my life programming AS 1.0  , I really don't like it. So if you want just let me know.
Avatar of MJ

ASKER

Hi Julianopolito... sure would appreciate the help! :0)
ok, so wait that I'm already doing it for you.
Here goes the swf file. It was made in AS3 using the caurina.transitions.Tweener class for animation.
The code below is the class SlideShowText wich does everything. Made it in flex 2. But it should be easy to use it in flash cs 3 since I did not use nothing specific to flex, only it is important to embed the font in the flash cs3 library and export for action script so it can be faded.
package{
	import caurina.transitions.Tweener;
	
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLLoaderDataFormat;
	import flash.net.URLRequest;
	import flash.net.URLVariables;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class SlideShowText extends Sprite{
		private var images:XMLList;
		private var texts:XMLList;
		private var delay:Number = 0;
		private var currentIndex:int = 0;
		private var loader:Loader;
		private var text:TextField;
		private var xml:XML;
		private var uloader:URLLoader;
				
		[Embed(mimeType='application/x-font', source="arial.ttf", fontName="MyArial")]
		private var uiArial:Class;
		
		public function SlideShowText(){
			uloader = new URLLoader();
			uloader.addEventListener(Event.COMPLETE,onComplete);
			uloader.load(new URLRequest("images.xml"));
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageComplete);
			loader.addEventListener(IOErrorEvent.IO_ERROR,onError);
			loader.alpha = 0;
			loader.y = 15;
			text = new TextField();
			text.autoSize = "left";
			trace(Font.enumerateFonts()[0].fontName);
			var tf:TextFormat = new TextFormat("MyArial");
			text.alpha = 0;
			text.defaultTextFormat = tf;
			text.embedFonts = true;
			addChild(loader);
			addChild(text);
		}
		
		private function onComplete(e:Event):void{
			xml = new XML(uloader.data as String);
			images = xml..image;
			texts = xml..text;
			delay = Number(xml.@delay);
			initSlideShow();
		}
		private function onError(e:IOErrorEvent):void{
			trace(e.text);
		}
		private function initSlideShow():void{
			//First step - load first image and fade
			loadImage(currentIndex);
		}
		private function loadImage(index:int):void{
			var url:String = images[index].toString();
			loader.load(new URLRequest(url));
		}
		public function imageComplete(e:Event):void{
			text.text = texts[currentIndex];
			imageIn();
		}
		public function imageIn():void{
			Tweener.addTween(loader,{alpha:1.0,time:1,onComplete:textIn});
		}
		public function textIn():void{
			Tweener.addTween(text,{alpha:1.0,time:1,onComplete:textOut});
		}
		public function textOut():void{
			Tweener.addTween(text,{alpha:0.0,time:1,delay:3,onComplete:imageOut});
		}	
		public function imageOut():void{
			Tweener.addTween(loader,{alpha:0.0,time:1,onComplete:nextImage});
		}
		public function nextImage():void{
			currentIndex++;
			if(currentIndex >= images.length())currentIndex = 0;
			loadImage(currentIndex);
		}
		
		
	}
}

Open in new window

slideshowtext.swf.pdf
also used a xml file. You need to put it in the same folder as the swf.

filename:images.xml
<?xml version="1.0" encoding="utf-8" ?>
<gallery delay="3000">
	<item>
		<image>images/km8030.jpg</image>
		<text>text 1</text>
	</item>
	<item>
		<image>images/bh750.jpg</image>
		<text>text 2</text>
	</item>
	<item>
		<image>images/km5050.jpg</image>
		<text>text 3</text>
	</item>
	<item>
		<image>images/bh650.jpg</image>
		<text>text 4</text>
	</item>
</gallery>

Open in new window

And about the "design", I did not bother about the look and feel. just made it functional so you can understand, and then create the look yourself.
Avatar of MJ

ASKER

Hi Julian,
Thanks for all your help. Truly appreciate it! The question I still have is about  the code you provided. Excuse my ignorance, it has been about 18 - 24 months since I've touched Flash and I was never any good at it! :0) But how do I use it? I've called external packages before but it was always as support to the main movie. Not sure how this fits in to Flash and using it would work???Do I just make my background and call the SlideShowText class? I'm assuming the package needs to be named also?

import ???.SlideShowText;

Thanks!
I'll make a flash cs3 version for you if you can wait till tonight. Then I explain some basics to you.ok?
Avatar of MJ

ASKER

That would be incredible. Really appreciate the effort!

Thanks!
Here it goes. Unzip in the same folder. The fla document is in flash cs3 format. Change the extension to zip.

You 'll see I've commented all the code, so you can understand better. On stage you will find the textfield, so you can change color and font (don't forget to embed the font). The images must be 200x200 pixels (OR YOU CAN CHANGE STAGE SIZE in document properties - images will be scaled to the stage size - it is commented in the code). The xml contains the image paths and texts, and the delay (it is used for the text delay on the image)

Juliano Polito
Avatar of MJ

ASKER

Hi Juliano,
Thanks for all your help. The one issue is I don't see a link to the zip? :0)

Thanks,
Michael
ASKER CERTIFIED SOLUTION
Avatar of julianopolito
julianopolito
Flag of Brazil image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of MJ

ASKER

Got it! :0) Another question. I noticed the swf blacks out when it tries to fade the picture out. IS that by design or is just because there is no background? I will look at the code tonight.

Thanks again Juliano!

Michael
Avatar of MJ

ASKER

ALso confused about the fla now that I look at it. I only see the loader and an "A" on a black background. Where is all the code contained?

Thanks!
the code is in the class .as. If you click the stage, take a look at the properties of the document. There is a field called Document Class, there i put the name of my class tha controls everything, the code is inside the as. The A in the stage is nothing, just need the textfield there so you can format as you want. After image fades out, it goes to black because there is no background.
Avatar of MJ

ASKER

Much appreciated! I wish I could give you a million points! :0)
Avatar of MJ

ASKER

Most impressive help I've ever gotten!

Take care!

Michael
if you want just open another 100 posts saying thank you, and accept my welcome solution! LoL ... you are welcome, don't need million points for that. hope that helps, and anytime need help, just tell me. you can reach me sending a post to this question letting me know about your other posts
Avatar of MJ

ASKER

Thanks again. I'm sure I'll be posting more questions soon!

take care!
Avatar of MJ

ASKER

Sorry still confused. I clicked on the stage and the properties shows:

Document class: SlideShowText

But how do I see the code of the as file? If I click on the little pencil icon next to the textbox that says SlideShowText I get a dialog pop-up box that says "A definition for the document class could not be found in the classpath, so one will be automatically generated in the SWF file upon export".  I also just upgraded from 8 to CS3 so this is the first time I've even used it.

I'll post another question with points for you.

Thanks,
Michael
Avatar of MJ

ASKER

Hi,
I'll post this question for you but is there a way to put a stroke (outline around the text? ?

Thanks!
no man. the only way is to use an outlined font family like "HelveticaNeueLT Std Bold Outln" .