Flash and Actionsript tutorials, Dreamweaver tips, Photoshop source file,Html tips and tricks, Flash with xml tutorials, Free Style Sheet codings. Using php and xml in flash, Import text file and css file in flash, Free layout design, Create dynamic webstie, E-commerse, flash sites, shopping website tips, free flash codings, easy templates, Model templates, flash validation forms, seo tips and tricks, easy seo steps, easy to optimize your website in google, yahoo, msn and major search engines.
When tweening properties with MC Tween, there are several different animation types (or easing equation or transition types) that can be used . They are all based on Robert Penner's easing equations, so if you have played with other tweening systems, chances are you already know them by name (I even used his own words to describe most of the transition types here). If you don't, don't worry; they're quite simple to learn and use: just specify the type you want depending on the transition you want to achieve.
How to chose the best transition type? That's a tough question. It depends on where you are applying the tweening. As a rule of thumb, I usually use easeOutExpo or easeInOutExpo on movieclip sliding and transformation (or easeOutBack or easeOutElastic when I want something extra-fancy); I use linear transitions on all color transitions, including alpha changes, and on all sound transitions. Be careful, though, to take animation time into consideration too - if you do a easeOutElastic transition in 0.3 seconds, you won't even notice it. So try different ammount of times until you find the value that fits your animation best.
To exemplify the animation types available in a more graphical fashion, below is a list of all of them with a little animation and some explanation: look at the small circle on the right-side of the movie and notice how different animation types make it move differently. The graph on the middle shows the relation between time and value applied when sliding the circle. Keep in mind that while I have chosen to animate an object in this example, 'moving' objects is just one of the possibilities of this tweening extension. These different transition types can be applied to alpha changes, rotations, time seeks, sound volume control, or to whichever numerical-based attributes you can think of.
Also notice that the "animation type" parameter is case-insensitive on MC Tween methods. The example movie used below can be download from the examples page (source included).
STANDARD TRANSITION
Example
Description
"linear"
The 'standard' animation - starts on the current value and slowly progresses until it reaches the target value, with no easing, acceleration or deacceleration whatsoever.
EQUATION-BASED TRANSITIONS
These animations are the basic acceleration or deacceleration transitions. There are little differences between them - mainly acceleration/deacceleration speed, and the curve acuteness. Chosing the best transition type for each application should be a test-and-see process - depending on how much time your transition will take, different transition types will fit better. That's how animation tweaking works after all.
Example
Description
"easeInQuad"
Quadratic easing in - starts at zero velocity then accelerates.
"easeOutQuad"
Quadratic easing out - starts at full velocity then deaccelerates to zero.
"easeInOutQuad"
Quadratic easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInCubic"
Cubic easing in - starts at zero velocity then accelerates.
"easeOutCubic"
Cubic easing out - starts at full velocity then deaccelerates to zero.
"easeInOutCubic"
Cubic easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInQuart"
Quartic easing in - starts at zero velocity then accelerates.
"easeOutQuart"
Quartic easing out - starts at full velocity then deaccelerates to zero.
"easeInOutQuart"
Quartic easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInQuint"
Quintic easing in - starts at zero velocity then accelerates.
"easeOutQuint"
Quintic easing out - starts at full velocity then deaccelerates to zero.
"easeInOutQuint"
Quintic easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInSine"
Sinusoidal easing in - starts at zero velocity then accelerates.
"easeOutSine"
Sinusoidal easing out - starts at full velocity then deaccelerates to zero.
"easeInOutSine"
Sinusoidal easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInExpo"
Exponential easing in - starts at zero velocity then accelerates.
"easeOutExpo"
Exponential easing out - starts at full velocity then deaccelerates to zero.
"easeInOutExpo"
Exponential easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInCirc"
Circular easing in - starts at zero velocity then accelerates.
"easeOutCirc"
Circular easing out - starts at full velocity then deaccelerates to zero.
"easeInOutCirc"
Circular easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
SPECIAL TRANSITIONS
These transitions are still equation-based; however, since they perform in a different fashion (not only envolving acceleration or deacceleration), I moved them to a separate list, for organization's sake. These animation types are great to use sometimes, but overuse can also ruin an interface fast. Use with caution.
Example
Description
"easeInElastic"
Elastic easing in - starts at zero velocity then accelerates.
"easeOutElastic"
Elastic easing out - starts at full velocity then deaccelerates to zero.
"easeInOutElastic"
Elastic easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInBack"
Back easing in - starts at zero velocity then accelerates.
"easeOutBack"
Back easing out - starts at full velocity then deaccelerates to zero.
"easeInOutBack"
Back easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
"easeInBounce"
Bouncing easing in - starts at zero velocity then accelerates.
"easeOutBounce"
Bouncing easing out - starts at full velocity then deaccelerates to zero.
"easeInOutBounce"
Bouncing easing in and out - starts at zero velocity, accelerates until halfway, then deaccelerates to zero velocity again
When optimizing web performance, most consideration is given to reduce number and file size of images, CSS and JS etc., and less consideration is given to size of HTML being sent to browser, called “document size”. Optimizing document size can be very beneficial.
There are two ways you can reduce the document size 1. Reduce HTML 2. Compress HTML sent
1. Reducing HTML: Well its not easy for developers, but its good to consider during writing html. A good way to do it is to use DIVs instead of tables. If used correctly divs reduces the code to text ratio in document. Secondly avoid using inline css styles and java script. You can use external css and js files for this purpose.
2. Compressing HTML: The best way to reduce the document size is to send html in compressed form. Today most of the browser capable of receiving html in compressed format, un compress it on client side and display it correctly. This reduces the time spent and bandwidth usage between browser and server significantly. If you are working with PHP and apache it is really easy to compress HTML before sending to client. Most of the PHP installations have built in gzip library. You only have to use it. If you have static files or don’t want to use PHP or have static html files you can use apache module mod_deflate to compress html. Both of above methods use gzip compression.
How gzip Works gzip compression works by finding identical strings within a html, and replacing those temporarily to make the overall size smaller. Its compression algorithm makes is very suitable to be used with html, css as they have repetitive tags and definitions. For example if our html has tag 100 times it will replace this tag during compression thus reducing the size significantly.
Using persistent connections (keep-alive) is another great feature to be used for web application performance. HTTP is based on TCP, in early versions of HTTP a connection has to be opened for each request and closed later.
In later version this feature was introduces where browser and server use same connection to receive and send many requests on a single connection. This saves the overhead of opening and closing connections. On
Browser and server send a “connection” header to specify that they support keep-alive or persistent connections. Sample request and response headers can look like
