Animation easing

Hi all,
Does anyone know if there is a way to apply easing to
specific ranges in a motion tween?
I have to say the new tween tools are very dissapointing - it
takes me twice as long to do stuff and I often get un-predictable
effects.
Also, can anyone tell me if there is a way to simply adjust
bezier curves on the x, y and z motion? I do not understand why I
cannot easily do this.
In short, I hate the new easing system and would rather just
draw my own motion curves with easing incorporated.
Any help would be welcome :)
Thanks,
Jon

quote:
alters the timing of everything and can only be applied to
the whole tween, not specific parts (this gives me a headache!)
I hear you. That was my initial frustration. I'm learning to
think about it a different way, but it takes some time. You can
always take you last keyframe and duplicate it to a new layer, then
use it as a start keyframe of a new tween. You can also still use a
'classic' on in these cases as well.
quote:
can't edit the curves for x and y motion in the motion editor
I see that now. You can add points, but you can't drag out
handles. I'm pretty familiar with the new motion model after
creating 3 extensions that use it. I can't pinpoint the reason why,
but I think there might be good cause for this. I do know that
spacial properties are special in this model. They can do things
that other properties can't, and that may be why they have some
limitations.
I highly recommended checking out this post (and the blog in
general):
http://flashthusiast.com/2008/11/20/flash-cs4-how-to-ease-between-keyframes-using-new-moti on-tweens/
Flashthusiast is run by the Flash motion team, there's tons
of in-depth information and you can post questions for the creators
themselves.
Hopefully you can find a workflow that works for you.
Best,
Justin

Similar Messages

Photoshop Animation Ease In/Ease Out

I can't seem to find any way to do a tween with an ease in/ease out in the animation panel of Photoshop. Is there any way to do this? And could it be made a feature?

Yes, I remember wishing for this feature years ago. Although I haven't explored these features in years, I think its true to say that tweening in Photoshop doesn't support ease-in and ease-out. Which would provide smoother more natural animated transitions.
The Animation features on Photoshop were imported from ImageReady, a really good, and cleverly put together application. Now discontinued.

Looking for an advanced flash animation part-time course

Hi folks,
I am primarily a programmer, a games programmer by trade who happened to pick up Flash on the side and later through a series of coincidences became a full time flash developer. Most of my work thus far has been code heavy, and has focussed on such things as interacting with web services, localization with xml files, flash video, streaming video, networking etc.
My employer recently lost one of its contractors who built a lot of animation heavy flash apps for them, and as I know my way around the Flash IDE quite well, and have created fairly complex animations in the past, they have asked me to assume a more animation orientated role. To this end, they have offered to send me on courses to get up to speed with Flash animation.
As I know probably 90-95% of Flash's capabilities, and am comfortable with animating / easing / masking / filters / tweening and how to produce these effects programmatically, my interest would lie in a course that teaches fairly advanced uses / best practices of flash. For instance, I find that there are many ways to do things in Flash, but only a few approaches that will get you there without the entire IDE coming to a grinding halt (shape hints is a good one, or perhaps an approach has forced you into a corner with many tweened animations which now need a small alteration made to all of them).
Are any of you aware of courses that can take a fairly advanced flash user's knowledge and turbo charge it with tips, tricks, best practices and approaches to complex animation? I've found plenty of courses that will teach you the basics, but going on them would be a waste of time and money. If any of you are familiar with the Programming Gems series of books, what they do for a game programmers knowledge of programming would be a good analogy for what I'd like a course in flash animation to do for me.

I have no idea to offer regarding courses for what you request. Since you seem to be confident of your skills, maybe you should just create a project for yourself that would involve needing to know the things you want to learn and pursue it with extreme prejudice--solving aspects one at a time as you encounter them. That's pretty much the approach I took in learning AS3 and it helped alot.

Java fade vs scrollbar conflict

i created a scrollbar:
http://toddheymandirector.com/REEL/
but i want the rollover images to fade on one by one like they do here:
http://toddheymandirector.com/MORE/
i tried here but it stacks them and gets funky - float left doesnt work
http://toddheymandirector.com/REEL/scrollie.html
help?
thanks

Try this. Your previous code was a mess. I fixed the major errors and gave the thumbnail scroller images (#tS1 img) a fadeIn rate of 7200 milliseconds. Function code is near the bottom. You can adjust fadeIn rate to suit. Tested & works in Firefox12 & IE9.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="http://toddheymandirector.com/favicon.ico" />
<title>TODD HEYMAN</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://toddheymandirector.com/css/supersized.core.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css' />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script type="text/javascript" src="http://toddheymandirector.com/js/jquery-ui-1.8.13.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://toddheymandirector.com/css/jquery.thumbnailScroller.css" />

<script type="text/javascript" src="http://toddheymandirector.com/js/jquery.thumbnailScroller.js"></script>
<script type="text/javascript" src="http://toddheymandirector.com/js/supersized.core.3.2.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
<script type="text/javascript" src="../js/shadowbox.js"></script>
<style type="text/css">
body {background-color: #3e403f;}
#mast_ {
position:absolute;
left:-10px;
top:20px;
width:296px;
height:70px;
#reel_ {
position:absolute;
left:-10px;
top:97px;
width:161px;
height:26px;
#more_ {
position:absolute;
left:-10px;
top:123px;
width:161px;
height:26px;
#film_ {
position:absolute;
left:-10px;
top:149px;
width:161px;
height:22px;
#boards_ {
position:absolute;
left:-10px;
top:171px;
width:161px;
height:27px;
#news_ {
position:absolute;
left:-10px;
top:198px;
width:161px;
height:25px;
#about_ {
position:absolute;
left:-10px;
top:223px;
width:161px;
height:25px;
#contact_ {
position:absolute;
left:-10px;
top:248px;
width:161px;
height:25px;
div.fadehover {
position: relative;
img.a {
position: relative;
left: 0;
top: 0;
z-index: 10;
img.b {
position: absolute;
left: 0;
top: 0;
z-index: 10;
opacity: 0;
filter: alpha(opacity=0);
#footer {
background: url(http://toddheymandirector.com/Images/common_jsh/footer_bg5.png) 0 0 repeat;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
#reel_footer {
position:absolute;
left:0px;
bottom:0px;
#more_footer {
position:absolute;
left:75px;
bottom:0px;
#film_footer {
position:absolute;
left:122px;
bottom:0px;
#boards_footer {
position:absolute;
left:161px;
bottom:0px;
#news_footer {
position:absolute;
left:215px;
bottom:0px;
#about_footer {
position:absolute;
left:263px;
bottom:0px;
#contact_footer {
position:absolute;
left:311px;
bottom:0px;
#copyright_footer {
position:absolute;
right:0px;
bottom:0px;
#facebook_footer {
position:absolute;
right:141px;
bottom:0px;;
#twitter_footer {
position:absolute;
right:80px;
bottom:0px;
#share_footer {
position:absolute;
right:20px;
bottom:0px;
#container { width: 100%; height: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
</style>
<script type="text/javascript" src="http://toddheymandirector.com//js/supersized.3.1.3.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
    $("img.b").hover(function() {
    $(this).stop().animate({"opacity": "1"}, "70");
    function() {
    $(this).stop().animate({"opacity": "0"}, "100");
</script>
<script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
</script>

</head>
<body>
<div id= "mast_"><a href="http://toddheymandirector.com/"><img id="mast" src="http://toddheymandirector.com/Images/common_jsh/mast.png" width="296" height="70" alt="mast" /></a></div>
<div id="reel_"><a href="http://toddheymandirector.com/REEL/"><img src="http://toddheymandirector.com/Images/common_jsh/reel_down.png" alt="" /></a> </div>
<div class="fadehover" id="more_"><a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/more.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/more_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="film_"><a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/film.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/film_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="boards_"><a href="http://toddheymandirector.com/BOARDS/"><img src="http://toddheymandirector.com/Images/common_jsh/boards.png" alt="" class="a" /></a><a href="http://toddheymandirector.com/BOARDS/"> <img src="http://toddheymandirector.com/Images/common_jsh/boards_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="news_"><a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/news.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/news_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="about_"><a href="http://toddheymandirector.com/ABOUT/"><img src="http://toddheymandirector.com/Images/common_jsh/about.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/ABOUT/"><img src="http://toddheymandirector.com/Images/common_jsh/about_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="contact_"><a href="mailto:[email protected]?subject=Director Todd Heyman"><img src="http://toddheymandirector.com/Images/common_jsh/contact.png" alt="" class="a" /></a> <a href="mailto:[email protected]?subject=Director Todd Heyman"><img src="http://toddheymandirector.com/Images/common_jsh/contact_hot.png" alt="" class="b" /></a></div>
<div id="footer" style=" height: 20px">
<div class="faded2 fadehover" id="reel_footer"><a href="http://toddheymandirector.com/REEL/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/reel_footer_hot.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/REEL/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/reel_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="more_footer"><a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/more_footer.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/MORE/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/more_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="film_footer"><a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/film_footer.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/FILM/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/film_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="boards_footer"><a href="http://toddheymandirector.com/BOARDS/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/boards_footer.png" alt="" class="a" /></a><a href="http://toddheymandirector.com/BOARDS/"> <img src="http://toddheymandirector.com/Images/common_jsh/footer/boards_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="news_footer"><a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/news_footer.png" alt="" class="a" /></a> <a href="http://toddheymandirector.com/NEWS/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/news_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="about_footer"><a href="http://toddheymandirector.com/ABOUT/"><img src="http://toddheymandirector.com/Images/common_jsh/footer/about_footer.png" alt="" class="a" /></a><a href="http://toddheymandirector.com/ABOUT/"> <img src="http://toddheymandirector.com/Images/common_jsh/footer/about_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="contact_footer"><a href="mailto:[email protected]?subject=Director Todd Heyman"><img src="http://toddheymandirector.com/Images/common_jsh/footer/contact_footer.png" alt="contact"/></a>
<a href="mailto:[email protected]?subject=Director Todd Heyman"> <img src="http://toddheymandirector.com/Images/common_jsh/footer/contact_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover2" id="facebook_footer"><a href="https://www.facebook.com/lists/10150298499390382" target="new"><img src="http://toddheymandirector.com/Images/common_jsh/footer/facebook_footer.png" alt="" class="a" /></a> <a href="https://www.facebook.com/lists/10150298499390382" target="new"><img src="http://toddheymandirector.com/Images/common_jsh/footer/facebook_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="twitter_footer"><a href="http://twitter.com/toddheyman" target="new" ><img src="http://toddheymandirector.com/Images/common_jsh/footer/twitter_footer.png" alt="" class="a" /></a><a href="http://twitter.com/toddheyman" target="new" > <img src="http://toddheymandirector.com/Images/common_jsh/footer/twitter_footer_hot.png" alt="" class="b" /></a></div>
<div class="fadehover" id="share_footer"><a href="mailto:?subject=TODDHEYMANDIRECTOR: REEL &body=Check This Out: http://toddheymandirector.com/REEL" target="new" ><img src="http://toddheymandirector.com/Images/common_jsh/footer/share_footer.png" alt="" class="a" /></a>
<a href="mailto:?subject=TODDHEYMANDIRECTOR: REEL &body=Check This Out: http://toddheymandirector.com/REEL" target="new" ><img src="http://toddheymandirector.com/Images/common_jsh/footer/share_footer_hot.png" alt="" class="b" /></a></div>
</div>

<div id="tS1" class="jThumbnailScroller" style="margin-top:325px;">
<div class="jTscrollerContainer" >
<div class="jTscroller">
<div style="float:left;" class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike.png" alt="nike > the getaway" border="0" class="a" /></a> <a href="http://toddheymandirector.com/movies/spots/800/NIKE_theGetaway_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Nike > The Getaway"><img src="http://toddheymandirector.com/Images/thumbs_jsh/nike_hot.png" alt="" class="b" /></a> </div>
<div style="float:left;" class="faded fadehover"><a href="" title="Total Defense > Bad Cops"><img src="http://toddheymandirector.com/Images/thumbs_jsh/td_cops.png" alt="nike" border="0" class="a" /></a> <a href="http://toddheymandirector.com/movies/spots/800/TD_COPS_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Total Defense > Bad Cops"><img src="http://toddheymandirector.com/Images/thumbs_jsh/td_cops_hot.png" alt="" class="b" /></a> </div>
<div style="float:left;" class="faded fadehover"><a href="p"><img src="http://toddheymandirector.com/Images/thumbs_jsh/chex.png" alt="nike" border="0" class="a" /></a> <a href="http://toddheymandirector.com/movies/spots/800/chex_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Chex > Mix It Up"><img src="http://toddheymandirector.com/Images/thumbs_jsh/chex_hot.png" alt="" class="b" /></a> </div>
<div style="float:left;" class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/florastor.png" alt="nike" border="0" class="a" /></a> <a href="http://toddheymandirector.com/movies/spots/800/Florastor_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Florstor > Because"><img src="http://toddheymandirector.com/Images/thumbs_jsh/florastor_hot.png" alt="" class="b" /></a> </div>
<div style="float:left;" class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/ulife.png" alt="nike" border="0" class="a" /></a> <a href="http://toddheymandirector.com/movies/spots/800/ULIFELINE_JUMPER_800.mov" rel="shadowbox[REEL];width=800;height=450" title="Ulifeline > Jumper"><img src="http://toddheymandirector.com/Images/thumbs_jsh/ulife_hot.png" alt="" class="b" /></a> </div>
<div style="float:left;" class="faded fadehover"><a href=""><img src="http://toddheymandirector.com/Images/thumbs_jsh/fdic.png" alt="nike" border="0" class="a" /></a> <a href="http://toddheymandirector.com/movies/spots/800/FDIC_800.mov" rel="shadowbox[REEL];width=800;height=450" title="FDIC > the Mattress"><img src="http://toddheymandirector.com/Images/thumbs_jsh/fdic_hot.png" alt="" class="b" /></a> </div></div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>

<script type="text/javascript">
(function($){
window.onload=function(){
    $("#tS1").thumbnailScroller({
        scrollerType:"hoverAccelerate",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
})(jQuery);
</script>

<script type="text/javascript">
jQuery(function($){
    $.supersized({
    slides :      [ {image : 'http://toddheymandirector.com/Images/common_jsh/bgs/nike.jpg'} ]
</script>

<script type="text/javascript">
Shadowbox.init();
</script>

<script type="text/javascript">
$(window).ready(function(){
    $('#tS1 img').hide().fadeIn(7200);//fadeIn rate in milliseconds. A bigger value = slower fade rate//
</script>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Add ease in/out to curves when animating scale?

Im trying to animate the scale and position of a clip to go from full screen to the top corner. The position keys seem to have an automatic ease in and ease out to their curves. Scale seems dead linear. Needless to say the finished effect looks awful. The Video Animation editor doesnt appear to allow me to access the curves for transform. This is ridiculous! Am I doing something wrong? Anyone know of a workaround?
Thanks,
Andy

Yes, it should be more flexible. But all is not lost.
You just have to add a few more keyframes along the way to get a more nuanced variation. Not as elegant nor as easy as handling some Bezier curve, for sure. But you don't have to resign to setting one keyframe at the beginning and one at the end and let FCP X scale linearly.

Actionscript animation with easing

Hi,
i need to create a var that contains animation instructions
that can be called up and applied to a movie clip when a button is
pressed.
At the moment i have a movieclip called 'mover' that moves
down 54 px when a button is pressed (see below command), but i need
it to animate 54px in 1 second with +100 easing, i have had a
search on the web but it is not entirely clear how to apply
actionscripted animation.
on (release){
mover._y += 54;
Cheers for any help.
Rob.

try the Tween class;
i have not much experience with this but maybe this is
usefull..
http://www.kirupa.com/developer/actionscript/tween.htm

Animation with easing via ActionScript

How cain I make animation of an object in Flash with easing
by using actionscript...

Check out
http://laco.wz.cz/mc_tween/
and download the Custom Tween Extension

Easing animation navigation like Yugo

Peace fam
I am new to this Fuse Kit and I wanted to know if anyone
knows of a tutorial or something that will allow me to do a
navigation system like this one here:
http://www.showlogic.com/
There is a similar example below at the Laco site for the
Yugo navigation:
http://laco.wz.cz/tween/?page=examples
Any help would be appreciated. I do not even know where to
begin the process of creating it. Even if you have a method not
using Fuse Kit, I would appreciate that as well.

Okay I checked the code out and it seems pretty simple. But I
don't know how to add a URL in the "addItem" section. The code used
to generate the buttons is as follows:
quote:
testHandler = function(){
trace("Itemnumber: " + this.id);
yugopMenu0.addItem("Icon1","LABEL0",testHandler);
yugopMenu0.addItem("Icon1","LABEL2",testHandler);
yugopMenu0.addItem("Icon1","LABEL3",testHandler);
yugopMenu0.addItem("Icon1","LABEL4",testHandler);
yugopMenu0.addItemAt(1,"Icon1","LABEL1",testHandler);
yugopMenu0.minDimension = 20;
yugopMenu0.maxDimension = 200;{
The break down of the code is this
quote:
// YugopMenu Methods
addItem(iconLibID:String,label:String,
handler:Function);
Adds an item at the last position
addItemAt(position:Number,iconLibID:String,label:String,handler:Function);
Adds an item at a specified position
update();
Refreshs the menu
removeItemAt(position:Number);
Delets an item at specified position
removeAll();
Removes all items
destroy();
Destroys the whole menu
I'm assuming that the url needs to go into the
handler:Function but I don't know how to do it. Can someone help me
out? I pretty much get everything else but it is useless if I can't
get the buttons to get external URL's.

Complaint: Animated GIF, Photoshop CS4

I am a freelance print designer. Needless to say that I have upgraded to the Design Standard Edition of the Creative Suite 4. Still, some customers ask me to do their web banners, too.
Fact 1:
There is an animation palette in Photoshop CS4 Standard.
Fact 2:
You can create animations with that palette.
Fact 3:
You can save the animation as an animated GIF.
Fact 4:
Opening the animated GIF, you only get the first frame, so you cannot edit the animation or content inside the GIF.
Fact 5:
I need to alter a few animated GIFs which I created several years ago using Photoshop CS2. Due to a harddrive crash, I don't have access to the original layered PSD files any more.
Fact 5:
Photoshop CS4, the most advanced image editing tool on the face of the earth, is absolutely useless at this point, and I have to find freeware or shareware to do the job. Finding and purchasing this sort of software is MY time, and that is MY money.
Whatever drove Adobe to cripple Photoshop CS4 Standard, whatever drove them to expel the simple "Open Animated GIF" feature from Photoshop CS4, it was the wrong decision.
This, Adobe, is a customer complaint. Take it serious. There is competition, and I hear a lot about GIMP these days.
Frustrated,
Gero

I know this thread is getting on a bit now, but I do have the answers.
Quite simply, as far as I can tell, this cannot be done without Quicktime installed.
To open an animated gif in CS4 on a PC:
1. Go to File->Import->Video Frames to Layers
2. In the File Name box type “*” ( or you can type the name manually) The window will now show every type of file
3. Select your gif and you are done
To open animated gif in CS4 on a MAC:
1. Go to open, select your GIF, then in the bottom left corner of the open file dialogue box select Quicktime Movie as the format, then open your GIF.
2. You’ll need to open your animations window by going to window -> animation. This will bring up the time line.
3. If you want to have all of the frames broken up into layers, click the options in the animation window, and select “Flatten Frames into Layers”.
This will give you access to all the frames as layers and you can now edit the GIF as though it was a movie.
I hope this helps to ease somebody's frustration.

Using interactive .gif animations in Dreamweaver

If anybody could help me out with this, it would be really appreciated. This doesn't seem like it should be too complicated, but I'm having a really hard time doing it.
Here's what I'm trying to do - I want to have a series of buttons on my page, where, when the user clicks on one of them, they do a quick animation and then revert back to their original, motionless state. Anyways, I can't seem to place the .gif on the page in a motionless state, have it animate when clicked, and then return to the motionless state. Any advice? I've been using .gifs for this, because I don't really have any experience with Flash, but maybe that would work better?

Copy & paste this code into a new, blank document. SaveAs test.html and preview in browsers. This is all done with CSS transitions. No images required.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with CSS Animation</title>
<style>
body {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 100%;
button {
    font-size: 26px;
    padding: 1em;
    margin: 5em 1em 0 1em;
    cursor:pointer;
/**BEGIN CSS ANIMATION**/
.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -ms-animation-duration: 5s;
    -o-animation-duration: 5s;
    animation-duration: 5s;
/**safari, chrome**/
@-webkit-keyframes shake { 0%, 100% {
-webkit-transform: translateX(0);
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
/**firefox**/
@-moz-keyframes shake { 0%, 100% {
-moz-transform: translateX(0);
10%, 30%, 50%, 70%, 90% {
-moz-transform: translateX(-10px);
20%, 40%, 60%, 80% {
-moz-transform: translateX(10px);
/**opera**/
@-o-keyframes shake { 0%, 100% {
-o-transform: translateX(0);
10%, 30%, 50%, 70%, 90% {
-o-transform: translateX(-10px);
20%, 40%, 60%, 80% {
-o-transform: translateX(10px);
/**W3C**/
@keyframes shake { 0%, 100% {
transform: translateX(0);
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
20%, 40%, 60%, 80% {
transform: translateX(10px);
.shake:hover, .shake:active, .shake:focus {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
@-webkit-keyframes wobble { 0% {
-webkit-transform: translateX(0%);
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
30% {
-webkit-transform: translateX(20%) rotate(3deg);
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
60% {
-webkit-transform: translateX(10%) rotate(2deg);
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
100% {
-webkit-transform: translateX(0%);
@-moz-keyframes wobble { 0% {
-moz-transform: translateX(0%);
15% {
-moz-transform: translateX(-25%) rotate(-5deg);
30% {
-moz-transform: translateX(20%) rotate(3deg);
45% {
-moz-transform: translateX(-15%) rotate(-3deg);
60% {
-moz-transform: translateX(10%) rotate(2deg);
75% {
-moz-transform: translateX(-5%) rotate(-1deg);
100% {
-moz-transform: translateX(0%);
@-o-keyframes wobble { 0% {
-o-transform: translateX(0%);
15% {
-o-transform: translateX(-25%) rotate(-5deg);
30% {
-o-transform: translateX(20%) rotate(3deg);
45% {
-o-transform: translateX(-15%) rotate(-3deg);
60% {
-o-transform: translateX(10%) rotate(2deg);
75% {
-o-transform: translateX(-5%) rotate(-1deg);
100% {
-o-transform: translateX(0%);
@keyframes wobble { 0% {
transform: translateX(0%);
15% {
transform: translateX(-25%) rotate(-5deg);
30% {
transform: translateX(20%) rotate(3deg);
45% {
transform: translateX(-15%) rotate(-3deg);
60% {
transform: translateX(10%) rotate(2deg);
75% {
transform: translateX(-5%) rotate(-1deg);
100% {
transform: translateX(0%);
.wobble:hover,
.wobble:active,
.wobble:focus {
    -webkit-animation-name: wobble;
    -moz-animation-name: wobble;
    -o-animation-name: wobble;
    animation-name: wobble;
.spin:hover,
.spin:active,
.spin:focus {
-webkit-transition:all 2s ease-in;
-moz-transition:all 2s ease-in;
-ms-transition:all 2s ease-in;
-o-transition:all 2s ease-in;
transition:all 2s ease-in;
-webkit-transform: rotate(1440deg);
-moz-transform: rotate(1440deg);
-ms-transform: rotate(1440deg);
-o-transform: rotate(1440deg);
transform:rotate(1440deg);
</style>
</head>
<body>
<button class="animated shake">Shake</button>
<button class="animated wobble">Wobble</button>
<button class="spin">Spin</button>
</body>
</html>
Nancy O.

How Can You Disable Ease-In and Ease-Out Of Ken Burns

It seems that along with everything else that has changed with iMovie version 10, when you add photos to the timeline it automatically places an ease-in and ease-out to the Ken Burns move. For those of you who have been on a Mac for a while, this was how iMovie behaved in version 6 and earlier, and it feels rather dated.
If you are putting together a video slide show with multiple photos back to back, having the zoom ease in and out for every image is incredibly obnoxious. I can see situations when you are providing a narrative that it might be important, but often photos are just being animated to music. Is there a way to disable the easing or am I just best keeping to iMovie 9.0.9?
Thanks!

Hi Douglas,
Thanks for visiting Apple Support Communities.
It does look like this is the default behavior for imported pictures in iMovie 10, and can't be disabled from the iMovie preferences. The best workaround is to select all of the pictures in your timeline and turn off the Ken Burns effect using the Adjust menu.
iMovie Help
http://help.apple.com/imovie/mac/10.0/#mov26d3f6a6c
Modify a crop, rotation, or Ken Burns effect
In the timeline, select the photos you want to modify or restore to their original state.
Click the Adjust button in the toolbar.
The adjustments bar appears above the clip in the viewer.
To show the cropping controls, click the Cropping button.
In the cropping controls, change Style from Ken Burns to Fit to display the pictures in their original size. From there, you can crop them individually as needed.
Best,
Jeremy

Animating controls between states.

Hi Oracle community.
A while ago I started a thread here on the forum where I had put three different subjects to be treated. The user jsmith guided me saying that I was supposed to separate things, dividing each subject in a separate thread. The original discussion is at the following link:
Interesting things, however, unknown? StackPane, animations and filters.
So in this discussion, I will be talking about controls and animations. A few weeks ago I started studying JavaFX, and some days I came across the need to develop a specific type of test. This test involved in making the JavaFX controls to suffer animations between their states. We know we can change the appearance of controls between it's various states using CSS. We can also apply certain types of animations to them using JavaFX API. However, I do not believe that we can easily apply more complex animations. For example, suppose we have a simple button. Would it be possible to apply a particle emitter on the button when you hover the mouse over it? Would it be possible to also play the animation of a rectangle moving inside a button when it is clicked? Notice also that changing the appearance of controls when their states are changed abruptly. A button has an appearance, and by passing the mouse over, he suddenly changes his appearance instantly.
These are just examples, not real things I have to do, because they are things I've done in the past using Swing and Timing Framework libraries. I believe that JavaFX has much more to mature. Or maybe not. Maybe the developers just forgot to better document this technology to us. Why do I say this? Well, there are things that differentiate applications when they are put on the market, especially if they are things that fill the eyes with curiosity. I simply can not build an app that just has to look different from other applications. That would not call the public's attention. We all know that. I think that JavaFX is a fascinating technology, and I hope that this kind of feature is really possible. Maybe I am not seeing how this can be done, so I need a hand, I don't know yet.
In any case, I thank you for your attention.

jsmith
Back when we used Swing all we had to do was create a JComponent, perhaps a model class, and a ComponentUI class. It was basically what we did when we did not want to use a pluggable UI. With the override of the painting method in ComponentUI, and the use of animations with Timing Framework library, anything was possible. One thing that made me migrate to JavaFX was it's performance, ease of doing many things (way beyond Swing), and new features (of course). There are certain things nowadays that we have to open a little more our heads. Why am I saying that? Well...
What differentiates us as living beings? It's our personal possessions? Our powers? Our social status? All of us today are seen as equal (or at least it should be), and so we got unsure how we can be different. When we create something new, how it can be considered new? We see many movies in the cinema today, then we observe it's history. If we are critical in a positive way, we think of various aspects of the film, but no matter what, we always observe the history of film. Oftentimes we clearly came to the conclusion that the film's story is a cliché. We've seen this story being told before, but in another way. This kind of conclusion comes not spoil our enjoyment of watching the movie. Nowadays, with so many special effects, it is likely you do not care to see the same story told in a different way. But if you think about it, we can see that a film is not just a set of actors acting, it is not several hours of rendering scenes made on computer, or even spending more than 100 million dollars. A film is a set of things, all of which are carefully put together around the story. Without a story, a film does not exist. Therefore, it is remarkable that the story of a movie is something crucial, and also something unique. In the same way that a director has several concerns with a movie, a software designer have with a project.
Now leaving all the "nonsense" I said before, let me ask you a simple thing: Which type of interface do you think people will be attracted...
These (Please see all the links):
Lab Manager - JavaFX Application - YouTube
http://3.bp.blogspot.com/-t0ID3U3qHrE/TxwJaYMLwiI/AAAAAAAAABM/RxcHh7Jy8Jw/s1600/CalendarStyle.png
http://www.toedter.com/blog/wp-content/uploads/2012/02/contacts-javafx-dark-2.1-beta-build12-font.png
http://cache.fxexperience.com/wp-content/uploads/2012/02/Screen-Shot-2012-02-29-at-11.32.36-AM1.png
http://fxexperience.com/wp-content/uploads/2013/01/Modena-Windows.png
Or these (Please see all the links):
ListCell Animation in ListView JavaFX - YouTube
after effects ui test soundblaster - YouTube
GUI Concept - Borderless (2009) - YouTube
ui animation - YouTube
FUTURE DESIGN - Hi-Tech Car User Interface GUI / Dashboard Speedometer - YouTube
I want to make clear that the visual design of an application is not everything. An application must be functional and do what it purports to accomplish. But again I ask you: What differentiates us as living beings?. In fact, it's not our appearance, but our creativity. It is the things that are inside us. Our emotions, our hearts and our desires.
Here is the question: How could I differentiate my application in the market? Changing the appearance and functionality of the controls is one of the things that will make my application prevails in the market among my competitors. For that to happen, as a human being I just need to be creative. I hope you have understood for what reason I think things should be easier. I did not mean to offend anyone having spoken about all this. I just wanted to express for what reason I think some things are really more important at some point. Many people do not notice it, or do not have an open mind. And that's not a problem. Most of us do not notice much. For example, I do not notice the nails of my wife when she goes to the salon. (she gets a wild animal ).
It is not the material we study, It's us. Of course the better the creation tool, the better the creation. But at the end of it all, all the work is always in our hands (in our heads, actually).
Regarding my studies on the customization of the JavaFX controls, I think I'm close to figuring out how I can finally do what I want. From what I'm seeing, with the arrival of JavaFX 8, it is necessary that the developer also learn about the new CSS API. We must also be aware of the hierarchical properties of Node, Parent, Region, and Control, and finally put some logic in SkinBase, reusing its existing methods. If God wills, I'll soon be aware of how to do this.
Thanks again for the help and attention.

I would like to see targets have "fly-in" animation capabilities...

I would like to see targets have "fly-in" animation capabilities to be used with menus, panels, etc. I would be great to click on a trigger and have a menu fly in from left, right, top or bottom - control it the way you do with scrolling effects.

Plus you will need to buy a Blu ray DVD burner.
There have been discussions about quality issues with iMovie 08 because it uses single field processing to create the video images. Basically, this removes half of the lines of resolution from your original footage. This has to create some loss of quality. iMovie HD6, on the other hand, does not do this, keeping both fields intact.
iMovie 08 was really created to appeal to You Tubers and other web video users, where high quality is less of an issue. iMovie HD6 and previous versions were created to appeal to the budding moviemaker who wants a pro style editing platform with great quality, but ease of use, as compared to Final Cut programmes. That's also why iMovie HD6 was designed to work solely with miniDV tape cams, in either SD or HD format. DV Stream is a lossless format that produces superior results to any of the other high compression formats, such as AVCHD.
So, you need to spend more money to get HD DVDs, but your quality will suffer using iMovie 08, which your camcorder forces you to do. Perhaps some consideration of a suitable cam to begin with will be of help.

Can haz animation advice? squiggling line

Hi, kinda new to flash animation, and i'm probably taking on something too intense... just wanted some advice.
So I'm trying to animate a logo. I have story-boarded the basics of the animation in Illustrator. Here it is.
Imagine you squirt some silly-string underwater, and at the end of the silly string is a heavy marble. The string shoots out and the marble pulls the elastic string tight and recoils. The string recoils into the wordmark.
I know i can have the whole line from the beginning, just masked off and revealed as it motion-tweens to the left.
I know i can tweak 'easing' to give it some organic reality.
But i need to figure out how to create the basic line animation...
- I can't seem to get a decent shape tween (or multiple jerky shape tweens). I hate that my smooth pen-tool created line in flash ultimately breaks down to a basic mushy pixel-based 'drawing object' and loses the math.
- I have considered constructing a chain of IK bones made of like 300 little circles... seriously? i mean i can do it, but i think IK eats up memory?
- I don't know too much actionscript, though i'm not terrible at math... and would settle for a modified sine-wave sorta thing.
any thoughts?

I did some further Investigation on my own. Actually YES YOU CAN EXPORT VIDEO DIRECTLY from flash to AVI - MOV
just select export/export movie/avi
From there you can select the output resolution and have full HD 1920x1080.

Free Transform as Animation? (6.2.2. - 10.10)

Hi!
I'm creating some simple motion graphics in keynote (a surprisingly good balance of power - ease of use!) However, I want to animate a box transforming in length, i.e. getting broader. With the normal animations, you can only scale shapes, mening there is no way to make a prefect square rectangular.
Is there a work around or tool I'm missing, or is this simply not possible?

The scale action would be the effect to use, but it does not allow the shape to be changed, as constrain proportion is locked on.
A work around is to create another shape with the same colour but sized as a rectangle with an opacity effect to use as a dissolve:
select the rectangle:
Inspector > Format > Style > Opacity; drag the slider to 0%
Inspector > Animate > Action > Opacity: drag the slider to 100%

Animation easing

Similar Messages

Maybe you are looking for