-
Buttons and Transitions and Animation
Hello World of Cows
I am using CS6
This is winding me up something cronic, i really hope someone can help me here:
I want to do 2 things quite specifically with my website:
1. i want a drop down menu at the top right that contains 3 buttons which is hidden until mouseover and then animates down in a nice easing way from the top of the screen, i really want the text to animate in too and nt just reveal.
2. i want when one of those buttons is pushed the whole page to animate and morph into the next page. (far more complicated and not attempted yet)
I have been trying to do this in Dreamweaver with buttons created in Fireworks and then animate the css of the div to pull down… no luck,
I have then been trying to put buttons inside buttons in fireworks to no avail also
I don’t want to use Flash as it means it won’t work on iphones etc, but have tried to do it in there.
I have also tried to use the Fireworks layers to do the animations in Edge which the animations work if they autoplay and the mouseover or mouseenter (jquery) just mean nothing happens. i haven’t tried to make buttons inside this animation yet as it seems pointless if the mouseover function doesn’t work…
The main problem i’m having here is i either get button functionality or animation not both.
Which program would be the better to do this in and where might i be going wrong with this.
I can post a Fireworks file if i have to but i have done so many things that most of them are deleted apart from the actual graphical content.
thanks in advance
Robbie
-
2 Replies
-
this is what Flash does, and does better than any other program or animation engine. i wish apple would find a way to play nice with it. instead, we are left with pale attempts to approach the elegance of Flash.
OK – diatribe over. we have to move on. after years of happily working with Flash, like others i too have to figure out how to do certain things with the means out there. HTML5 animations with SVG graphics is getting there, but its not fully there. javascript, and particularly javascript animating engines,like JQuery or others, can be used effectively to do some nice stuff.
use Dreamweaver or whatever HTML editor you want, but you will have to code a lot of it yourself – although there is a laot of code avaialable out there.
here is a real crude example of something i was working on to mimic a flash tutorial. it does most of what you want ( the nav buttons are an animated ‘drop down’ menu. the text inthe buttons animates in ( fades in) clicking on the buttons animates the ‘pages’ in and out.
once again- it is real crude, not pretty, not elegant. it is just to show the possibility of function, witout any ‘window dressing’ to get inthe way.
you can get the code directly from the page source.
basically div positions and CSS properties are manipulated and animted to create the effect. if you have specific questions relating to this page, i will do my best to answer them.
i hope this helps you out
-
Hey Robert, I have three resources for you that can be helpful to get the solution for this issue. They will also inspire you to implement something different for your next project.
1. tripwiremagazine.com/2012/07/jquery-animation-tutorials.html
2. coding.smashingmagazine.com/2012/05/31/50-jquery-function-demos-for-aspiring-web-developers/
3. tympanus.net/codrops/2011/01/06/animated-form-switching/Hope these help you…
Reply to this Discussion! Login or Sign Up