Josh Talks Flash

I quite like the new homepage, text layout and colours are great.

Sorry, stupid question,
i importend the class in my flash project.
but don’t really know how tell the class to start working on my textfield.

could you pls explain this to a noob

best

Trying to run this in a Flex project. I created the .as class, then instantiated it as:

This doesn’t work. Nor does it work when I set the text using a creationComplete function:

private function initApp() : void
{
typingText.text = “this is my beautiful text”;
}

What am I doing wrong?

Hi Josh,

I played with the typing textfield class and Flex 2.

I derived the class from TextArea ( mx.controls.TextArea) instead of Textfield and just added one line into the function timerUpdateHandler(event:TimerEvent):void
{
…
textField.scrollV += 1;
}
to make the scrolling working.

If I set width/height for my instance it works pretty well with Flex

best regards,
kcell

warren, can you share some source code, maybe? I can’t help if I have no idea what the problem might be.

Hi,

i don’t understand why i can’t add a textformat, with set setTextFormat, pls help.

greetz

THX,

defaultTextFormat works, i wonder that setTextFormat don’t work.
And of course thx for sharing this classes.

I guess .fla sample file will be better. If somebody interested in letter cycling codes too, so can chech the blog. The sample there is AS as document class, no .fla again.

Yann, your requirement sounded interesting, so I quickly wrote a class to approximate the effect you requested:

////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2009 Josh Tynjala
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
//  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
//  IN THE SOFTWARE.
//
////////////////////////////////////////////////////////////////////////////////

package com.joshtynjala.text
{
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.text.TextField;
	import flash.utils.Timer;

	import mx.utils.StringUtil;

	//--------------------------------------
	//  Events
	//--------------------------------------

	/**
	 * Event that is fired when the text effect is complete.
	 *
	 * @eventType flash.events.Event.COMPLETE
	 */
	[Event(name="complete",type="flash.events.Event")]

	/**
	 * A TextField that looks a bit like a classic airport departures board.
	 *
	 * @author Josh Tynjala
	 */
	public class AirportDepartures extends TextField
	{

	//--------------------------------------
	//  Static Properties
	//--------------------------------------

		private static const TARGET_COUNT:int = 5;

	//--------------------------------------
	//  Constructor
	//--------------------------------------

		/**
		 * Constructor.
		 */
		public function AirportDepartures()
		{
			super();
			this._typingTimer = new Timer(this.delay);
			this._typingTimer.addEventListener(TimerEvent.TIMER, timerUpdateHandler);
		}

	//--------------------------------------
	//  Properties
	//--------------------------------------

		/**
		 * @private
		 */
		private var _typingTimer:Timer;

		/**
		 * @private
		 */
		private var _position:int;

		/**
		 * @private
		 */
		private var _count:int;

		/**
		 * @private
		 * Storage for the delay property.
		 */
		private var _delay:Number = 30;

		/**
		 * The number of milliseconds before a new character is decrypted.
		 */
		public function get delay():Number
		{
			return this._delay;
		}

		/**
		 * @private
		 */
		public function set delay(value:Number):void
		{
			this._delay = value;
		}

		/**
		 * @private
		 * Storage for the text property.
		 */
		private var _text:String = "";

		/**
		 * @copy flash.text.TextField#text
		 */
		override public function get text():String
		{
			return this._text;
		}

		/**
		 * @private
		 */
		override public function set text(value:String):void
		{
			this._text = value;

			super.text = StringUtil.trim(super.text);
			this._text = StringUtil.trim(this._text);

			//it's easiest if we make the strings the same length. we can trim
			//the whitespace again later.
			var maxLength:Number = Math.max(super.text.length, this._text.length);
			while(this._text.length < maxLength)
			{
				this._text += " ";
			}
			while(super.text.length < maxLength)
			{
				super.text = super.text + " ";
			}

			this._position = 0;
			this._count = 0;

			if(value.length > 0)
			{
				this._typingTimer.delay = this.delay;
				this._typingTimer.start();
			}
		}

		/**
		 * @private
		 * Storage for the keepSpaces property.
		 */
		private var _keepSpaces:Boolean = false;

		/**
		 * If true, the TextField will always choose a space
		 * during randomization when it encounters a space in the original
		 * text. This can help the aesthetics when displaying multiple lines.
		 */
		public function get keepSpaces():Boolean
		{
			return this._keepSpaces;
		}

		/**
		 * @private
		 */
		public function set keepSpaces(value:Boolean):void
		{
			this._keepSpaces = value;
		}

	//--------------------------------------
	//  Private Methods
	//--------------------------------------

		/**
		 * @private
		 */
		private function timerUpdateHandler(event:TimerEvent):void
		{
			//it might change during the typing
			this._typingTimer.delay = this.delay;

			this._count++;
			if(this._count == TARGET_COUNT)
			{
				this._count = 0;
				this._position++;
			}

			if(this._position > this._text.length)
			{
				//if we've typed the full text, we can stop
				this._typingTimer.stop();

				//get rid of the extra whitespace used to make them the same
				//length
				super.text = StringUtil.trim(super.text);
				this._text = StringUtil.trim(this._text);

				this.dispatchEvent(new Event(Event.COMPLETE));
				return;
			}

			var oldText:String = super.text;
			super.text = this._text.substr(0, this._position);
			if(this._position < this._text.length)
			{
				super.text = super.text + this.randomChars("x") + (oldText.length > this._position ? oldText.substr(this._position + 1) : "");
			}
		}

		/**
		 * @private
		 *
		 * Generates a string of the specified length containing random
		 * characters in the character code range 33 to 126.
		 */
		private function randomChars(value:String):String
		{
			var result:String = "";
			var count:int = value.length;
			for(var i:int = 0; i < count; i++)
			{
				//for best results on word wrapped textfields,
				//spaces should be kept in the same locations.
				//a monospaced font makes it even better.
				if(this.keepSpaces && value.charAt(i) == " ")
				{
					result += " ";
				}
				else
				{
					result += String.fromCharCode(int(65 + Math.random() * 25));
				}
			}
			return result;
		}
	}
}

Note: Rather than flipping through each character in order, it displays five random characters before choosing the correct one. Not exactly, but it doesn’t look bad, in my opinion. For best results, use a fixed-width font like Courier New.

good stuff,
where I can download your com.joshtynjala class?
thanks!