Slotmachine effect

UPDATE
I’ve uploaded an example with an working FLA

Get Adobe Flash player


(click the swf to replay it)

Slotmachine FLA
Dependencies – TweenLite

Example:

var sm:SlotMachine = new SlotMachine('€15533', font, 35, '0123456789€');
addChild(sm);
sm.addEventListener(Event.COMPLETE, _complete);
sm.render();
 
function _complete(aEvent:Event):void {
	trace("SlotMachine COMPLETE");
}

/**
 * com.deviouswork.display.effects.SlotMachine
 * @version 1.0.0
 * @author Joakim Roos  - http://www.deviouswork.com
 * Copyright � 2009 Deviouswork. All Rights Reserved.
 * 
 * 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.deviouswork.display.effects {
	import flash.events.Event;
	import com.greensock.TweenLite
	import com.greensock.plugins.BlurFilterPlugin;
	import com.greensock.plugins.TweenPlugin;
 
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.TimerEvent;
	import flash.text.Font;
	import flash.utils.Timer;
 
 
	[Event(name="complete", type="flash.events.Event")]
 
	/**
	 * SlotMachine
	 */
	public class SlotMachine extends Sprite {
 
		public function get characterRange() : String {	return _characterRange_str; }
		public function set characterRange(aInput_str : String):void {	_characterRange_str = aInput_str; }
		private var _characterRange_str : String;
 
		private var _slotText_str : String;
		private var _bcContainer_mc : Sprite;
		private var _currentChar_int : Number;
 
 
		public function SlotMachine(aSlotText:String,  aFont:Font = null, aSize:uint = 12, aCharacterRange:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890") {
 
			TweenPlugin.activate([BlurFilterPlugin]);
			characterRange = aCharacterRange;
			_slotText_str = aSlotText;
			var reverse_str:String = _slotText_str.split('').reverse().join('');
			var i: uint = reverse_str.length;
			var ox:Number = 0;
			_bcContainer_mc = new Sprite();
			addChild(_bcContainer_mc);
			while(i--) {				
				var bc:BitmapCharacter = new BitmapCharacter(characterRange, aSize, aFont);
				bc.name = "BitmapCharacter_" + reverse_str.charAt(i) +"_" + Math.random();
				_bcContainer_mc.addChild(bc);
				bc.x = ox;
				bc.getChildByName("bmp_" + reverse_str.charAt(i)).visible = true;
				ox = bc.x + bc.width;
				bc.getChildByName("bmp_" + reverse_str.charAt(i)).visible = false;
			}
			var bcMask_mc:Sprite = new Sprite();
			addChild(bcMask_mc);
			with(bcMask_mc.graphics) {
				beginFill(0x000000, .1);
				drawRect(0, 0, _bcContainer_mc.width, _bcContainer_mc.height);
				endFill();
			}
			_bcContainer_mc.mask = bcMask_mc;			
		}
 
		public function render():void {
 
			_currentChar_int = 0;
			var chars: int = characterRange.length;
 
			var t:Timer = new Timer(100, chars);
			t.addEventListener(TimerEvent.TIMER, _updateAnimation);
			t.addEventListener(TimerEvent.TIMER_COMPLETE, _endAnimation);
			t.start();
		}
 
		private function _updateAnimation(aEvent_te:TimerEvent):void {
 
			for(var i:int = 0; i < _bcContainer_mc.numChildren; i++) {				
				var bc:BitmapCharacter = _bcContainer_mc.getChildAt(i) as BitmapCharacter;	
				var	bmp:Bitmap = bc.getChildAt(_currentChar_int) as Bitmap;
				bmp.y = bmp.height;
				bmp.visible = true;
				if(bc.currentCharacter != null) {
					TweenLite.to(bc.currentCharacter, 0.1, {y:-bc.currentCharacter.height, delay:i*.1, overwrite:false});				
				}
				TweenLite.to(bmp, 0.1, {y:0,blurFilter:{blurY:10}, delay:i*.1, overwrite:false});
				bc.currentCharacter = bmp;	
			}
			if(_currentChar_int < characterRange.length-1) _currentChar_int++;
			else _currentChar_int = 0;
 
		}
 
		private function _endAnimation(aEvent_te:TimerEvent):void {
			for(var i:int = 0; i < _bcContainer_mc.numChildren; i++) {
				var bc:BitmapCharacter = _bcContainer_mc.getChildAt(i) as BitmapCharacter;
				TweenLite.to(bc.currentCharacter, 0.1, {y:-bc.currentCharacter.height, delay:0, overwrite:true});
				for(var j:int = 0; j < characterRange.length; j++) {
					var delay_num:Number = i*.1 + j*.1;		
					var	bmp:Bitmap = bc.getChildAt(j) as Bitmap;
					TweenLite.to(bc.currentCharacter, 0.1, {y:-bc.currentCharacter.height, delay:delay_num, overwrite:false});
					bc.currentCharacter = bmp;
					if(bmp.name == "bmp_"+ _slotText_str.charAt(i)) {
						TweenLite.to(bmp, 0.1, {y:0, blurFilter:{blurY:0}, delay:delay_num, overwrite:false});				
						break;
					} else {
						TweenLite.to(bmp, 0.1, {y:0,blurFilter:{blurY:10}, delay:delay_num, overwrite:false});
 
					}
				}
			}
 
			var t:Timer = aEvent_te.target as Timer;
			t.stop();
			t.removeEventListener(TimerEvent.TIMER_COMPLETE, _endAnimation);
			t = null;
			TweenLite.delayedCall(delay_num, _dispatchCompleteEvent);
 
		}
 
		private function _dispatchCompleteEvent():void {
			dispatchEvent(new Event(Event.COMPLETE));
		}
	}
}
 
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.text.Font;
import flash.text.FontStyle;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
 
internal class BitmapCharacter extends Sprite { 
 
	public function get currentCharacter() : Bitmap {	return _currentCharacter_bitmap; }
	public function set currentCharacter(aInput_bitmap : Bitmap):void {	_currentCharacter_bitmap = aInput_bitmap; }
	private var _currentCharacter_bitmap : Bitmap;
 
	public function BitmapCharacter(aCharacterRange:String, aSize:uint, aFont:Font = null):void {
 
		var fmt:TextFormat = new TextFormat();
		fmt.font = "_sans";
		if(aFont) {
			fmt.font = aFont.fontName;
			switch (aFont.fontStyle) {
				case FontStyle.BOLD:
					fmt.bold = true;
					break;
				case FontStyle.BOLD_ITALIC:
					fmt.bold = true;
					fmt.italic = true;
					break;
				case FontStyle.ITALIC:
					fmt.italic = true;
					break;
			}
		}
		fmt.size = aSize;
		fmt.color = 0xFFFFFF;
 
		var tf:TextField = new TextField();
		tf.width = 1;
		tf.height = 1;
		tf.autoSize = TextFieldAutoSize.LEFT;
		tf.selectable = false;
		tf.defaultTextFormat = fmt;
		if(aFont) tf.embedFonts = true;
		addChild(tf);		
 
		var i : int = aCharacterRange.length;
		while(i--) {
			tf.text = aCharacterRange.charAt(i);
			var bmd:BitmapData = new BitmapData(tf.width, tf.height, true, 0x000000);
			var bmp:Bitmap = new Bitmap(bmd, "auto", true);
			bmp.y = 100;
			bmp.name = "bmp_" + aCharacterRange.charAt(i);
			bmp.visible = false;
			addChild(bmp);
			bmd.draw(this);
		}
		removeChild(tf);
		tf = null;	
	}
}

No Trackbacks

2 Comments

  1. Natalia Vikhtinskaya

    Thank you for your code. But I have difficulties to make it works. Can you send working fla? Also maybe you have code for AS2. Please if that possible share with it.
    Thank you very much,
    Natalia

    Posted 5 November, 2010 at 10:30 | Permalink
  2. Massimiliano

    hello, how can i see a pratical example of this code?? i need some advice to create a image rotator in flash with a slot machine effect like this: activeden.net/item/ultimate-banner-rotator-with-slot-machine-effect/94632 … can you help me??

    P.s: sorry for my english!

    Posted 16 February, 2011 at 18:21 | Permalink

Post a Comment

Your email is never shared. Required fields are marked *

*
*