Complex Gallery in Flash 8

 

I’ve decided to use and publish my latest version of a flash gallery as a private photo book - http://galeria.czytnik.com . 

The gallery uses some cool features:

 - ColorMatrix for _saturation and _contrast effects,

- Built in Tweening Class for image transitions and animations

- Stage (100%) with Stage.onResize

- Bitmap Filters and matrices for creating dynamic glass effects under photos

Feel free to comment the effort I’ll include the sources soon so stay tuned. Maybe someone will need something like that in his own project/gallery.

 Have fun,

Flaim

Tweening part 3 - scaling, easing, blur

 

A slightly different approach to the Tweening Class - Now I’m using it to dynamically change the _xscale and _yscale values of a movieclip on roll over. In conjunction with the Elastic.easeOut and BlurFilter we’re getting nice effects needed for juicy user interaction. Experimenting with it is fun.

Click to see it running here.


import mx.transitions.Tween; // first the import
import flash.filters.BlurFilter // some eye-candy
// YourMC needs a filter in the beginning
YourMC.filters=[new BlurFilter((205-100-YourMC._xscale),(205-100-YourMC._xscale),3)];
MovieClip.prototype.expand = function(speed,from,to) //movieclip extended
{
// this needs a name that would be visible in the onMotionChanged
var what = this;
//tweens for both scales and _x for moving MC to center
var scale_x:Tween = new Tween(this, “_xscale”,mx.transitions.easing.Elastic.easeOut, from, to, speed, false);
var scale_y:Tween = new Tween(this, “_yscale”,mx.transitions.easing.Elastic.easeOut, from, to, speed, false);
scale_x.onMotionChanged = function()
{
// dynamic blurring with _xscale dependency
scx = what._xscale;
what.filters=[new BlurFilter((205-100-scx),(205-100-scx),3)];
}
};
// example usage
somebutton.onRollOver = function()
{
YourMC.expand(70,YourMC._xscale,250);
};
somebutton.onRollOut = function()
{
YourMC.expand(70,YourMC._xscale,100);
};

Note that it is highly important not to use the tweened MC as a button as well - in this case I used a fake button (’somebutton’) in order to avoid glitches (rollouts and rollovers would happen automatically if the MC resized). Stay tuned for the next parts of the Tweening series. You can download the .FLA source here.

Have Fun,
Flaim

Tween Class part 2 - moving MC’s

 

In the previous post I used tweening to fade (_alpha) movieclips. Now we will try to complicate the situation and use the same routine to move some MC’s . Source:


import mx.transitions.Tween; // first the import
MovieClip.prototype.easeclip = function(startx,starty,endx,endy,speed) //movieclip extended
{
  //tweens for both x and y
  var movex:Tween = new Tween(this,”_x”,mx.transitions.easing.Regular.easeOut,startx,endx,speed,false);
  var movey:Tween = new Tween(this,”_y”,mx.transitions.easing.Regular.easeOut,starty,endy,speed,false);
};
// example usage
overlayMC.onRelease = function()
{
 YourMC.easeclip(YourMC._x,YourMC._y,Math.round(_xmouse),Math.round(_ymouse),30);
};


Note the usage of Math.round(); - MC’s in Flash do not like being positioned on half-pixels (i.ex. x:28.2 y:25.4) - using round or floor is a good solution for this problem.

I’m using “.Regular.easeOut” for the tweens - please note that there are several other options (depends on the effect you want to achieve) - Elastic.easeOut, easeIn, easeInOut and several others including the None.easeNone for “non-eased” transitions.
You can download the .FLA source here. 
Have Fun,

Flaim

Dynamic Fadeouts with the Tween Class

 

If you ever needed a quick dynamic solution for fade-outs and ins - here it is:
 

import mx.transitions.Tween; // first the import
MovieClip.prototype.alphize = function(from,to,speed) //movieclip extended
{
  // and a proper usage of the Tweening Class 
  var alphizeT:Tween = new Tween(this,”_alpha”,mx.transitions.easing.Regular.easeOut,from,to,speed,false);
};
// example usage
YourMC.onRollOver = function()
{
  this.alphize(this._alpha,100,10);
};
YourMC.onRollOut = function()
{
  this.alphize(this._alpha,0,10);
};
And that’s more or less an easy way to smoothly fadein/out movieclips without those glitchy animation errors when using the Timeline (bleh!). I’ll extend this idea onto other uses in my next posts.

You can download the .FLA source here. 
Have Fun,

Flaim