How Create "Wipe" Effect ?

[ugurcuk]

Hi my friends,

 

Thank you GreenSock, congratulations!

 

How use TweenLite/TweenMax create this similar Adobe tween "Wipe" effect? (ActionScript 3)

 

Similar example code and I upload attachment file;

import fl.transitions.*;
import fl.transitions.easing.*;

function playTween(evt:MouseEvent):void {
var myTM:TransitionManager=new TransitionManager(mc_mc);
myTM.startTransition({type:Wipe, direction:Transition.IN, duration: 1, easing:Strong.easeInOut});
}
play_btn.addEventListener(MouseEvent.CLICK , playTween);

 

Thank you my friend, have a nice days...

[TronicVolta]

I just threw this together by converting the adobe transition to a plugin. Give it a try, and see if it works for what you need.

 

/**
* VERSION: 1.0
* DATE: 3/12/2010
* ACTIONSCRIPT VERSION: 3.0
* @author Marco Di Giuseppe, marco[at]designmarco.com
* @link http://designmarco.com
* UPDATES AND DOCUMENTATION AT: http://www.TweenMax.com
**/
package com.greensock.plugins
{
import com.greensock.*;
import flash.display.*;
import flash.geom.*;
/**
 * WipeEffectPlugin provides a Wiping Transition Effect. 


 *
 * USAGE:


 * 
 * 		import com.greensock.TweenLite; 

 * 		import com.greensock.plugins.TweenPlugin; 

 * 		import com.greensock.plugins.WipeEffectPlugin; 

 * 		TweenPlugin.activate([WipeEffectPlugin]); //activation is permanent in the SWF, so this line only needs to be run once.


 *
 *		//Value is Number preset from 1 to 9 that represents the starting point-
 *	    //Top Left:1; Top Center:2, Top Right:3; Left Center:4; Center:5; Right Center:6; Bottom Left:7; Bottom Center:8, Bottom Right:9.
 * 		TweenLite.to(mc, 1, {wipe:1});
 * 
 *
 * Copyright 2010, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for corporate Club GreenSock members, the software agreement that was issued with the corporate membership.
 *
 * @author Jack Doyle, jack@greensock.com
 */
public class WipeEffectPlugin extends TweenPlugin
{
	/** @private **/
	public static const API:Number = 1.0;

	/** @private **/
	protected var _target:Object;
	protected var _mask:Sprite;
	protected var _innerMask:Shape;
	protected var _startPoint:uint;
	protected var _cornerMode:Boolean;
	protected var _innerBounds:Rectangle;

	/** @private **/
	public function WipeEffectPlugin()
	{
		super();
		this.propName = "wipe";
		this.overwriteProps = [];
	}

	/** @private **/
	override public function onInitTween(target:Object, value:*, tween:TweenLite):Boolean
	{
		if (!target is DisplayObject)
		{
			return false;
		}

		_target = target;
		_innerBounds = _target.getBounds(_target);
		_startPoint = value;
		initMask();

		return true;
	}

	/** @private */
	protected function initMask():void
	{
		_mask = new Sprite();
		_mask.visible = false;
		_target.addChild(_mask);
		_innerMask = new Shape();
		_mask.addChild(_innerMask);
		_innerMask.x = _innerMask.y = 50;
		_innerMask.graphics.beginFill(0xFF0000);
		drawBox(_innerMask, -50, -50, 100, 100);
		_innerMask.graphics.endFill();

		switch (_startPoint)
		{
			case 3:
			case 2:
				_innerMask.rotation = 90;
				break;
			case 1:
			case 4:
			case 5:
				_innerMask.rotation = 0;
				break;
			case 9:
			case 6:
				_innerMask.rotation = 180;
				break;
			case 7:
			case 8:
				_innerMask.rotation = -90;
				break;

			default:
				break;
		}

		if (_startPoint % 2)
		{
			_cornerMode = true;
		}

		var ib:Rectangle = _innerBounds;
		_mask.x = ib.left;
		_mask.y = ib.top;
		_mask.width = ib.width;
		_mask.height = ib.height;

		_target.mask = _mask;
	}

	/** @private */
	protected function drawSlant(mc:Shape, p:Number):void
	{
		mc.graphics.moveTo(-50, -50);
		if (p <= 0.5)
		{
			mc.graphics.lineTo(200 * (p - 0.25), -50);
			mc.graphics.lineTo(-50, 200 * (p - 0.25));
		}
		else
		{
			mc.graphics.lineTo(50, -50);
			mc.graphics.lineTo(50, 200 * (p - 0.75));
			mc.graphics.lineTo(200 * (p - 0.75), 50);
			mc.graphics.lineTo(-50, 50);
		}
		mc.graphics.lineTo(-50, -50);
	}

	/** @private */
	protected function drawBox(mc:Shape, x:Number, y:Number, w:Number, h:Number):void
	{
		mc.graphics.moveTo(x, y);
		mc.graphics.lineTo(x + w, y);
		mc.graphics.lineTo(x + w, y + h);
		mc.graphics.lineTo(x, y + h);
		mc.graphics.lineTo(x, y);
	}

	/** @private **/
	override public function set changeFactor(n:Number):void
	{
		_innerMask.graphics.clear();
		_innerMask.graphics.beginFill(0xFF0000);
		if (_cornerMode)
		{
			drawSlant(_innerMask, n);
		}
		else
		{
			drawBox(_innerMask, -50, -50, n * 100, 100);
		}
		_innerMask.graphics.endFill();
	}
}
}

[ugurcuk]

Thank you!

 

It's working.

 

How this add the ease style?

TweenLite.to(deneme_mc, 1, {wipe:4, onComplete:tweenEnd, ease:Strong.easeInOut});

 

Thank you...