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.

Similar Messages

How can i control gif animations?

I have a project in which i need some animations. The animations all have been created in After Effects. Now I can use the png sequences, but these are very big and i need a lot animations running on the same time. So i would rather use the gif animations. So my question: I can control when to play the gif animation but i can't play it more than one time. Is there a solution?
Thanks for answering!
Jannis

Hi there,
I see...you're controlling when it displays. Technically, that's not the same as controlling the animated GIF; you're just controlling when you see it. EA recognizes GIF only as an image format, and can't make the browser play from the beginning other than the first time it's displayed or when it loops back (if your animated GIF loops).
However, you could do something similar with an extra image file or two, jQuery, and css background-image to "load" the GIF file into a transparent image. Here's a link to an example that always runs the animated GIF from the beginning:
https://creative.adobe.com/share/52f15194-875b-4604-8857-9b9bf5f78e04
A single line of code that does the work is in the playBtn click handler.
hth,
Joe

Suggest program to make gif animations

Since Adobe's ImageReady is no longer in Creative Suite, I'm wondering which program to choose to make small, short gif animations? If possible - please include address where to download tutorial.
Thanks.

I use CoffeeCup GIF Animator. Floating Preview Window for easy Editing Loop the animation Forever or a certain number of times. Change the Delay make the animation slower or faster. Generates HTML source code on the fly Import .AVI format files up to 500K and convert them to animated GIFs. Select Transparency with just One Click Quickly Edit your existing Animated GIFs Easily Make High Quality Animated GIFs in a few steps Convert .jpg, .ico, .bmp and more to .gif automatically Converts .JPG, .BMP, .ICO and more to .GIF automatically

Hyperlink for GIF Animated

Hi,
Do any iWeb user know that how to use the GIF animated for Hyperlink?
Felt boring if just a Picture Banner or Shape button for Hyperlink...Wish to make my Banner more attractive ,say after ended of a few second GIF animation...there're something shape 1=hyperlink to Blog, Shape 2=hyperlink to about me ,Shape 2=hyperlink to photo album....and so on...
2ndly,when drop the GIF animated into iWeb it's a QT movie file...and after Published it will become GIF animated now...so,for the case above...we might unable to do the Hyperlink as i mentioned above...
What's your suggestion according to the issue above?
Hope you understand my question above...haaa...
Thanks for help and appreciate

nobody?

Using .gif animations in signature file

I have a .gif animation that I want to use in my signature file, but the animation doesn't seem to work. I have created a signature and placed the files in the signature - just no animation. Any suggestions?

First of all we are only talking about animated gifs, not static gifs and we are only talking about Mail.app.
Animated gifs are still viewable but it will be static if you attach one to a mail message and view it in Mail.app. It will play if you view it using other programs, like Preview or other Mail clients.

Does Fireworks have an easy to use GIF animator

Does Fireworks have an easy to use GIF animator. I use the old school MS GIF animator, but I was wondering does Adobe have one as well? Or a round about way?

Wouldn't this question be best asked in the Fireworks forum?
http://forums.adobe.com/community/fireworks

Slow gif animations from photoshop

Hi all. I have to create two small gif animations. Each one is only 10 frames and the file size of my animations is under 40k when exported. But no matter what timing setting I use, they seem sluggish when viewed in any browser (FF, IE, Safari). I've tried 0.5, 0.2, 0.1, 0.05, and even 0.0 between frames. The animation should really only take half a second to complete but they seem to take up to two seconds to complete when view in a browser.
Yet I can view other gif animation on the web that are much larger in size and they seem to animate quickly and smoothly (compared to my slow and choppy ones).
is there a trick to getting fast, smooth animations from photoshop?
Thanks!

> via the gif animation import
There is no such feature in DW. DW knows nothing about GIF
images other than
the fact that they are images. I'm guessing that you did not
properly
export the animated GIF from Photoshop. When you open that
image in the
browser, does it animate?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"sammydyer" <[email protected]> wrote in
message
news:fqhqc0$nuj$[email protected]..
>i have made a gif animation in photoshop (it is set to
forever), which
>plays
> fine, but when its imported into dreamweaver via the gif
animation import
> in
> dreamweaver, it wont play when viewed in a browser
> thanks
>

Artifacts in gif animation

I'm experiencing an issue with artifacts in gif animation and I hope the collective brain trust in here can help. I've attached the file so you can see what I'm talking about. I've loaded the file into Dreamweaver to run as the header background and when I preview the page in IE the aircraft leave artifacts behind at every frame and the text looks torn as well. When I preview the same page in Firefox it looks crisp.
I created the aircraft and their contrails as four separate layers and linked them prior to starting the animation process. The text is its own layer as well. Thinking the linking might be an issue, I also flattened the airfraft layers into one and reaccomplished the animation but go the same result.
I'm previewing the images in Firefox version 3.5.3 and IE 8.0.6001. The animation itself is 60 frames long each with a duration of .01. The file was "saved as web device" from Photoshop as a .gif 64 dithered (dithered 88%) and then inserted into the page I'm working on through Dreamweaver.
Anyone out there have a suggestion as to how I can clean this image up and make it look as good on IE as it does on Firefox?

Marian & Mylenium,
Thanks for the information. I tried to just animate the aircraft and while the artifact issue was solved, the animation simply wasn't smooth enough for my liking. I agree the SWF option is the way to go but due to IT restrictions, that software isn't readily available to the end users. I use Preimere Pro too so creating the files would be a breeze but pointless to do so if the file won't launch. I appreciate you both taking the time to not only answer the question but to explain why going the route I was going wasn't the best option. Cheers!
Erik

Flash animation into dreamweaver

hey everyone, i'm new at both flash and dreamweaver and currently have a project combining the two together and i really cant work it out (i'm even using html instead of css haha) :/
Anyway, what i want to do is have a zipper (as in a zipper on ones clothes) on my main page and when someone puts their mouse over the zip, it zips down and reveals the text for that page.
I have gone into photoshop and started editing a zipper at different stages of being pulled down, but am stuck as to how i'd
a) link it together on flash/what type of file to save it as?
b) put the actual code into dreamweaver
c) have it actually working functionally to reveal my text underneath.
thanks in advance for any help, i'd be very appreciative of anyone who could give me some advice

You'll probably need to spend time learning how to create things in Flash--maybe try lynda.com. Flash can be used for the animation and mouse interaction revealing text. Once you are able to create the animation in Flash, you can have Flash publish both the swf file, which is what goes into the web page, and an html file. You can copy the code from the Flash html file into the Dreamweaver file wherever you intend the Flash file to be inserted.

Centre flash animation into dreamweaver

Hi All,
I am a complete beginner with Dreamweaver, and having great
problems fixing the size of a flash animation I'm playing as an
intro. I have managed to get the animation in and it centred, but
when I tested it on another computer I noticed it had stretched and
for some reason it was possible to minimise the animation by using
the + and - signs whilst in the browser window. How can I prevent
this from happening, so no matter what machine you view from it
keeps the size and position the same.
Any advice will be much appreciated.

You'll probably need to spend time learning how to create things in Flash--maybe try lynda.com. Flash can be used for the animation and mouse interaction revealing text. Once you are able to create the animation in Flash, you can have Flash publish both the swf file, which is what goes into the web page, and an html file. You can copy the code from the Flash html file into the Dreamweaver file wherever you intend the Flash file to be inserted.

Animation With Dreamweave??

Day u'alll!
I was just wondering if anyone in hear can help me!
Is it possable to do very, very simple animation in
dreamweaver for example! Here you will see what I want to make in
Dreamweaver. This is an all flash site>
http://www.topangamountainschool.org
click the "enter" button after the preLoader. And you'll see the
buttons along the top of the page very simple 5-6 frame animated
buttons.
Can this be done in Dreamweaver without inporting any flash?
If so let me know or (even better) point me to a tutorial.
I'm having no joy findding anything.
Havent been using Dreamweaver all that long but I'm getting
to like it more every day! More of a flash person!
Thanks all!

Dreamweaver doesn't create graphics/Flash content (except
Flash Text and
built-in Flash Buttons). You'd need to create your buttons
outside of DW
in Flash or something else. If you don't want Flash, you can
probably
emulate those buttons using an animated GIF created in
Photoshop CS3 (or
ImageReady CS2). There's likely another way with a bunch of
JavaScript,
CSS, AJAX - but I think an animated GIF is you best non-Flash
bet.
Alec Fehl, MCSE, A+, ACE, ACI
Adobe Community Expert
AUTHOR:
Microsoft Office 2007 PowerPoint: Comprehensive Course
(Labyrinth
Publications)
Welcome to Web Design and HTML (Labyrinth Publications)
CO-AUTHOR:
Microsoft Office 2007: Essentials (Labyrinth Publications)
Computer Concepts and Vista (Labyrinth Publications)
Mike Meyers' A+ Guide to Managing and Troubleshooting PCs
(McGraw-Hill)
Internet Systems and Applications (EMC Paradigm)

Interactive or Animated Wallpaper or Theme on the ...

Does anybody knows if is possible to have an interactive or animated Wallpaper or Theme?
In my LG KU990 I could have a fish in the Home screen which you could just touch the screen and the fish would move to that point of the screen.
Also any ideas whether you could use an animated pictures as wallpaper like a gif file, etc.
Thanks in advance for your help.
Message Edited by asandino on 22-Jul-2009 10:37 AM
Message Edited by asandino on 22-Jul-2009 10:38 AM
N97 Black unlocked using the 3 Network (UK). Product Code 0586308. Firmware V20.0.019. Made In Finland.Custom version V20.019.235.10.

I did see some animated wallpapers, but I can't for the life of me remember where. They were mostly roses, which I wasn't into. However, that did make me search the web for more - I couldn't find any, just the one lot.
If you come across any, I'd be interested.

Gif Animations

First off, I'd like to say I've been making gif animations in Photoshop Elements since 2.0, and I've had no problem with 6.0 either--- when I was on Windows.
For whatever reason, when I open a .gif animated image, I get an error message that says:
"This is an animated GIF. You can only view one frame. Saving over this file will result in a loss of information."
EVERY single time I open a gif, and as soon as I hit okay, it opens to the single frame locked. As I said, I've never had this problem with Photoshop Elements 6.0 in Windows... Any suggestions/ help please?

Your post is unclear on some important points. When you say "when I was in Windows" does that mean you are talking about a mac now? What version of PSE are you talking about?
If you mean PSE 8 for mac, you would be better off downloading a program like the free Giffun from stone.com and using that for animated gifs. For one thing the frame rate has been broken in the mac version of PSE in both 6 and 8.

Loading .gif animations into Photoshop Elements 8 for Mac

For years I used Photoshop Elements 2 for Windows to make .gif animations with great success.
Then I switched to a Mac and bought Elements 8 for Mac. Now, I am finding out that I can not load any
of the animations I made using Elements 2 into 8. (And yet I can load animations I made using 8 into 2.)
In fact, I can not load any .gif animations into 8, other than if I make one and save it
as .psd. 8 allows me to make them, but not load them as .gifs.
My question: Is there an easy way to load .gif animations into PS Elements 8 so a
person can work on the individual frames? Am I going to have to convert any .gif animation I
want to import into 8 first into .psd? All I seem to get when I try to load a .gif is the message
"This is an animated gif. You can only view one frame." I have searched manuals and the
Net looking for a specific method of using PSE8 to load gif animations intact (not just one frame).
Is it possible? Thanks. (I also have noticed that Elements 8 will not allow me to change the frame
speed -- it is unchangeable at .2)

Dear Ms. Brundage -
I followed the directions detailed in your blog entitled "Moving a Catalog from Windows to Mac" as well as your description of the process on page 58 of your book "Photoshop Elements 9 - the missing manual."
I installed PE9 for Windows and converted my catalog. I then backed up that catalog to an external hard drive. I then connected the hard drive to my MAC on which I also installed Photoshop Elements 9 for MAC. I opened the Organizer and tried to restore that converted catalog. However, for each file in the converted catalog, a dialog box opened that said "Could not restore file: /Volumes/Name of External Hard Drive/Filename.JPG."
I then made a second backup of the converted catalog using Photoshop Elements 9 for Windows and then tried to restore that catalog again on the MAC using Photoshop Elements 9 for MAC, again to no avail.
Do you have any idea what the problem may be?
Thanks again.
Steve Haas
[email protected]
[email protected]
(770) 313-0038

Add static background image to all frames of gif animation

First, I'm not a fireworks regular. I use it when I have to to get something done (mostly web optimazations). I would use it more but, frankly in many cases the UI is counter intuitive to everything else adobe makes.
Here is my problem...
I need to add (not replace) a static background to ALL existing frames(states) in a fireworks gif animation (with alpha) , the end product gif will be an element in the Edge web animation...details
I have an animated seq of a rotating object that was created in 3ds max and rendered as a png seq with alpha.
I opened the SEQ "as animation" in fireworks. I set the frame rate. It plays fine. So far so good....
I imported an image that I want to be BEHIND the animated seq on ALL frames. I tried puting it on a sub layer behind, i tried puting it on it's own layer behind, but it ONLY shows on the first frame (state).
I tried using "share with all states" but it replaces the SEQ images already on the "states" instead of adding it behind them like in the arrangement of the layers.
So first, can this be done and if so how?
Second, why is this process so counter intuitive in fireworks? I mean if a layer is behind something then it should be a simple button click or check box etc to say "show on all frames (states)", you know like any other product adobe makes. Even "image ready" made more sense than this. My thought process was that since I needed to end up in fireworks to create and optimize the gif that i should be able to put it together there also but it's turning out to be a lot harder than it should. I guess I can just composite my elements in AE (which is a piece of cake compared to fireworks) and then render another SEQ that I import to fireworks to create the optimized gif. While I'm a fan of the "creative suite" concept, one of my biggest complaints about the "suite" is the lack of master oversite so the common functions, keyboard shortcuts, and fundimental UI concepts are consitant accross all the apps so it functions as a "suite" and not just a collection of seperate applications. I know that demanding that all applications follow certian rules would slow development, in the long run it would make it a lot easier for the end user to spend more time being "creative" and less time trying to figure out why something doesn't work like it does in all the other apps. Just my $.02
Thanks for any help and or explaination
Joel H

Thanks for the response.
You know I tried that exact thing the only difference being I didn't change the layer names. So not naming the layers would keep that from working ?? Also as you eluded to draging layers to position them in fireworks is a delicate operation. It always seems to take 2 or 3 times to get it to drop where you want it. I named the layers and it works as you said. Unfortunately I was really pressed for time so I had already given up on fireworks and just composited the SEQ with the BG layer in AE and kicked out another PNG SEQ and then open that "as animation" in Fireworks and then optimized and exported as a gif. So there are allways several ways to do things.
Thanks again,
Joel H

Using interactive .gif animations in Dreamweaver

Similar Messages

Maybe you are looking for