FLASH TUTORIALS AND TECHNICS

Here u can learn flash tutorials and technics and small tips. i can also teach u web designs and graphic designs.

Wednesday, December 9, 2009

Hi friends another snow fall effect in simple javascript..just copy and paste the below bold content to a notepad and save as "snowstorm.js".

Then add this line inside the head of your html page


script type="text/javascript" src="snowstorm.js" /script

"YOUR CHRISTMAS SNOW FALL EFFECT IS READY NOW"



var snowStorm = null;

function SnowStorm() {

// --- PROPERTIES ---

this.flakesMax = 128; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

// --- less-used bits ---

this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range
this.zIndex = 0; // CSS stacking order applied to each snowflake

// --- End of user section ---

// jslint global declarations
/*global window, document, navigator, clearInterval, setInterval */

var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
});

var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.removeEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
});

function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}

function plusMinus(n) {
return (parseInt(rnd(2),10)==1?n*-1:n);
}

var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;

var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var flakeTypes = 6;
var fixedForEverything = false;
var opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
})();
var docFrag = document.createDocumentFragment();
if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
}
if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
}

this.meltFrameCount = 20;
this.meltFrames = [];
for (var i=0; i this.meltFrames.push(1-(i/this.meltFrameCount));
}

this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX,0.2));
vRndY = rnd(s.vMaxY,0.2);
if (this.flakes) {
for (var i=0; i if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};

this.scrollHandler = function() {
// "attach" snowflakes to bottom of window if no absolute bottom value was given
scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};

this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
}
screenX2 = parseInt(screenX/2,10);
};

this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};

this.freeze = function() {
// pause animation
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i=s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};

this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};

this.toggleSnow = function() {
if (!s.flakes.length) {
// first run
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};

this.stop = function() {
this.freeze();
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window,'scroll',s.scrollHandler);
removeEvent(window,'resize',s.resizeHandler);
if (!isOldIE) {
removeEvent(window,'blur',s.freeze);
removeEvent(window,'focus',s.resume);
}
};

this.show = function() {
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};

this.SnowFlake = function(parent,type,x,y) {
var s = this;
var storm = parent;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);

this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
}
s.o.style.left = s.x+'px';
s.o.style.top = s.y+'px';
};

this.stick = function() {
if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};

this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};

this.move = function() {
var vX = s.vX*windOffset;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
var yDiff = screenY+scrollY-s.y;
if (yDiff s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 chance of melting mid-air, with each frame
s.melting = true;
s.melt();
// only incrementally melt one frame
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random()>0.9) {
s.twinkleFrame = parseInt(Math.random()*20,10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};

this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
};

this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};

this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};

this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
s.recycle();
}
}
};

this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};

this.recycle(); // set up x/y coords etc.
this.refresh();

};

this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
var flake = null;
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};

this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};

this.createSnow = function(limit,allowInactive) {
for (var i=0; i s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
if (allowInactive || i>s.flakesMaxActive) {
s.flakes[s.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};

this.timerInit = function() {
s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
};

this.init = function() {
s.randomizeWind();
s.createSnow(s.flakesMax); // create initial batch
addEvent(window,'resize',s.resizeHandler);
addEvent(window,'scroll',s.scrollHandler);
if (!isOldIE) {
addEvent(window,'blur',s.freeze);
addEvent(window,'focus',s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
addEvent(document,'mousemove',s.mouseMove);
}
s.animationInterval = Math.max(20,s.animationInterval);
s.timerInit();
};

var didInit = false;

this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// already loaded and running
return true;
}
if (typeof s.targetElement == 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
if (s.targetElement != document.documentElement && s.targetElement != document.body) {
s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
s.resizeHandler(); // get bounding box elements
s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};

function doStart() {
s.start(true);
}

if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);
window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}

}

snowStorm = new SnowStorm();

Saturday, November 29, 2008

how to create a snow fall effect

hi friends as christmas is coming me going to show u how to create a snow fall effect for u..

easy 5 steps..

  1. first open the flash then create a movie clip name it as snow..
  2. then create a white color cirlce and go the parameters and give some blur to that movie clip.
    note that don create the snow image as graphic because u may not allowed to give the parameters
  3. then give the movie clip instance name as "snowflake".. dont put in double codes and all..
  4. then go the layers create another new layer .name it as action..first frame's action write this
    maxsnowflakes = 100;
    var snowflakes = new Array();
    for (i = 0; i < _x =" Stage.width" _y =" Stage.height" _xscale =" 40" _yscale =" snowflakes[i]._xscale;" yspeed =" Math.random()" increment =" -2.500000E-002" onenterframe =" function" radians =" this.increment" _y =" this.yspeed" _x =" Math.sin(this.radians)"> Stage.height)
    {
    this._y = -10;
    this._x = -10 + Math.random() * Stage.width;
    } // end if
    };
    } // end of for
    play ();
  5. in second layer paste this
    stop ();
see the image for the appearance..
ctlr+enter and check it..

Friday, October 10, 2008

Bouncing Effect in Flash

Demonstration

This tutorial will teach you how to create a bouncing effect animation using Motion Tween and Shape Tween in Flash MX 2004. The .fla download file is included at the end of the tutorial.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download the .fla file.

In the demonstration, the bouncing heart animation is created using motion tween and the shadow effect using shape tween.

TO CREATE MOTION TWEEN

Steps to Follow :

Create a Symbol

  • First draw an object for Motion Tween.
    Like in the above demonstration I used heart.
  • Select the object you have drawn and press F8 to convert this object to a Symbol.
  • In the Symbol window which appears now. Name this object heart_mc, choose Movie clip behavior and bottom center square for registration. Press OK.

Create a Motion Tween

  • Double click on the Layer and type "Heart".
  • Select Frame 30 and press F6 to insert a keyframe.
  • Select Frame 15 and press F6 to add another keyframe.
  • With the playhead still on Frame 15, hold the Shift key to move the heart_mc in a straight line, and drag the heart_mc up.
  • Select any frame between Frames 2 and 14 and select Motion from the tween pop-up menu in the Property inspector.
  • Select any frame between Frames 16 and 29 and select Motion from the tween pop-up menu in the Property inspector.
  • Press Ctrl+S to save your changes.

Create a Shape Tween

  • Insert a new Layer and call it "Shadow".
  • Select the first frame in the Shadow Layer, draw borderless shadow relevant to your Symbol.
  • If your Color Mixture Window is not open, press Shift+F9 to open it.
  • Select Eyedropper tool from your Tool box. Click it on your shadow. Now go to Color Mixture Window and type 25% for Alpha value.

  • Select Frame 30 and press F6 to insert a keyframe, then select Frame 15 and press F6 to insert a keyframe.
  • With the playhead on Frame 15, select the Free Transform tool. Slightly reduce the size of the Shadow.
  • With Frame 15 still selected, select the Eyedropper tool in the toolbar, and then click on your shadow object. Now go to Color Mixture Window and change Alpha value to 10%.
  • Select any frame between Frames 2 and 14 on the Shadow layer. In the Property inspector, select Shape from the Tween pop-up menu.
  • Select any frame between Frames 16 and 29 on the Shadow layer. In the Property inspector, select Shape from the Tween pop-up menu.

Now its time for Final touch up

  • Select Frame 1 of the Heart layer. Press F6 to add a keyframe. A new keyframe is added, and the playhead moves to Frame 2.
  • Go back to frame 1, select the Free Transform tool from your toolbox.
  • Select the transformation center point (the small circle near the center of the movie clip) and drag it to the bottom of the heart. On the Stage, drag the upper middle transform handle down to slightly compress the heart shape.
  • Right-click Frame 1 of the heart layer and select Copy Frames from the context menu. Go to 29th frame and press F8 to insert a new keyframe. Right-click 29th frame and choose Paste Frame from the context menu.
  • Click on the Stage, away from any objects. Type "28" in the Frame Rate text box of your Property inspector window.
  • On the heart layer, select any frame between Frames 2 and 14. Then in the Property inspector, in the Ease text box, type 100. Similarly select any frame between Frames 16 and 29 in the same layer, then go back to Property inspector window and type -100 in the Ease text box. Do the same thing to the Shadow layer.

Press Ctrl+Enter to view your animation.

Download the .fla file

Flash Analog Clock

his tutorial will teach you how to create an Analog Clock in Flash MX 2004. The free download .fla file is also included at the end of the tutorial.

Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download the .fla file.

You wouldn't imagine how simple it is to create a Flash clock.
Are you ready? Just follow the steps below.

STEPS TO FOLLOW

  1. Create a background for your clock, You can either draw it in fireworks or photoshop and import it onto your stage or draw it in flash itself.
  2. Add 5 Layers in your Timeline window.
    Name them - interface, sec, min, hour and actions. Similar to the Timeline window shown below.


  3. Import your clock background design into your interface Layer if you had created it else where.
  4. Draw a line in your sec Layer. Select the line and press F8 to convert it to Symbol. Call this Symbol sec_mc, choose Movie clip behavior and select the bottom center square in registration. Similar to the Symbol window shown below.


    Press OK.
  5. In your sec Layer, place sec_mc right at the center of your clock background design. Name it "sec" in instance text box of your property window. This is going to be your seconds needle.
  6. Drag sec_mc into your min Layer from your library. If your library window is not open, press (Ctrl+L) to open it. Reduce sec_mc's height, may be by 3pix. Place it right at the center of your clock background design. Name it "min" in instance text box of your property window. This is going to be your minutes needle.
  7. Drag sec_mc into your hour Layer from your library. Reduce its height, may be by 5 to 6pix. Place it right at the center of your clock background design. Name it "hour" in instance text box of your property window. This is going to be your Hours needle.
  8. Copy and Paste the code given below in your actions window of actions Layer.

    time=new Date(); // time object
    seconds = time.getSeconds()
    minutes = time.getMinutes()
    hours = time.getHours()

    hours = hours + (minutes/60);

    seconds = seconds*6; // calculating seconds
    minutes = minutes*6; // calculating minutes
    hours = hours*30; // calculating hours

    sec._rotation=seconds; // giving rotation property
    min._rotation=minutes; // giving rotation property
    hour._rotation=hours; // giving rotation property





  9. Now go to second frame of each layer and press F5 to insert new frame.

Your clock is ready. Press Ctrl+Enter to view your clock.

Labels:

Masking in Flash

Masking is revealing portion of your picture or graphic in the layer below.

While surfing through net you might have come across lots of beautiful Flash effects such as ripple effect , some wording with sky background or glitter bordering an object, and wondered "How? What is the logic behind this". The answer for all this is masking.

This tutorial will teach you the basics of masking in Flash MX 2004. The download .fla file is also included at the end of the tutorial.

This tutorial will teach you the basics of masking in Flash MX 2004. The download .fla file is also included at the end of the tutorial.

Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download and view the .fla file.

I shall start this tutorial assuming that the reader has basic knowledge of flash such as Shape Tween and working with layers.

Okay! if you are ready, just follow the steps given below.

STEPS TO FOLLOW

Inserting Layers and Naming them

  • By default you will have a layer in your timeline window. Insert one more layer, totally you need two layers to mask an object.
  • Rename the top layer to "Mask" and the layer below that to "background".

Creating Shape Tween

  • Import your picture to the "background" layer.
  • Using Oval tool from your tool box, draw a circle in your "Mask" layer and delete it's border.
  • Drag the circle to one end of your picture.
  • Now go to"frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.
  • Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that your background image is available all through your mask.
  • Select "frame 40" of your "Mask" layer, that is your new keyframe, Keeping the playhead on "frame 40" of "Mask" layer, drag the circle to other end of your picture.
  • Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your "Mask" layer, select Shape tween in your properties window.

Masking

  • Right click on the "Mask" layer (the area where you named the layer not where the frames exist) and select Mask.

Your Mask is all ready. Press Ctrl+Enter to view your Mask.

DOWNLOAD .FLA FILE HERE (SOURCE FILE)

Blur Effect in Flash 8.0

Step 1: Import an image and create a movie clip
  • Open Flash 8.0. Select New/Flash Document.
  • Import the image you would like to blur by clicking on File/Import to Stage and select the image.
  • Select the image on the stage and choose Modify/Convert To Symbol. Name the symbol blur and choose Movie Clip as Type.

Step 2: Create the blur effect

  • Select the blur symbol on the stage.
  • In the Properties Inspector, choose the Filters tab
  • Click on the '+' icon and choose Blur.
  • Choose 100 for Blur X and Blur Y and Quality as Medium.
    blur filter

Step 3: Create the animation

  • In the timeline window right click on the 50th frame choose insert keyframe. Select the movie clip and change the blur filter X and Y values to 0 to remove the blur effect.
  • Select any frame between Frames 1 and 50 and select Motion from the tween pop-up menu in the Property inspector.
  • Press Ctrl+S to save your changes.

Press Ctrl+Enter to view your animation.

You can also blur only the X coordinates by removing the lock icon in the filters inspector and changing Blur X to 100 and Blur Y to 0. The effect can be seen below. You can try different blur effects by simply adjusting the blur X and blur Y values.


DOWNLOAD FLA FILE

FADE IN FADE OUT EFFECT IN FLASH

STEPS TO BE FOLLOWED :

  1. Open a new file. Go to File >New. A Screen called New Document will appear. Select Flash Document and click on OK. Go to Modify>Document and give a file size of 300px by 200px. This is the same size as the Bitmap pictures we have.
  2. Select the Bitmap pictures that you want to Fade in and Fade out from your picture file and bring it to the Flash Library. Select File>Import to Library from the Menu Bar. A Screen named Import To Library will open. Choose the file name and click on Open. Repeat these steps for all the Bitmap pictures. To open Library, go to Window>Library. You can see the pictures in the Library panel.
  3. Drag the picture from the Library panel to the Stage. Select the picture by clicking on it.
    Go to Modify>Convert To Symbol from the Menu Bar. A dialog Box named Create New Symbol will appear. Give the name as pic1_mc. Select Movie Clip. Click on OK.
  4. Click on your Movie Clip. Go to Frame 15. Insert a Keyframe. Right click on layer 1 in the middle of the frames 1 to frames 15. The frames will become black. Select Create Motion Tween. An arrow from frame 1 to frame 15 will appear. Again click on Frame 30. Insert a Keyframe. A second arrow will appear automatically.
  5. Click on Frame 1. Here we will give the fade in effect. Select the picture by clicking on it. Go to Properties in the panel below the Stage. Go to Color>Alpha give 0% to it.



  1. Your picture has faded in. Click on Frame 30. Here we will give the fade in effect. Select the picture by clicking on it. Go to Properties in the panel below the Stage. Go to Color>Alpha give 0% to it.
  2. Repeat the steps 3 to 5 in layer 2 from the frame 31 to 45 to 60. To make a new layer, click on the following button which is on the right side below the layers. Repeat the above steps for all the images in new layers and you will create a simple fade in and fade out Flash animation.

Press on Ctrl+Enter to see the Fade in & Fade out Effect of the 4 pictures.