[Pro] Rotating graphics

Freeway
1

My first post so please forgive me.

Id like to replicate a “duck shoot” gallery as a main menu. I can create a horizontal version (ducks move across screen, on click rollover etc), but deep down Id love to be able to create a spinning duck shoot.
Example of style.
http://www.istockphoto.com/stock-illustration-12988143-duck-shooting-gallery.php?st=7715799
I am certainly not a power user by any stretch and can seem to find any actions that would work. Im assuming this may not be possible in Freeway but can’t hurt to ask.
Many thanks in advance

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Jason,
You are getting into the realms of interactive animation with this and may be better off looking at applications like Flash[1] or Easy Web Animator[2] which will create SWFs for you or Hype[3] or MotionComposer[4] which will generate the animations in HTML and JavaScript.

Having said that WebKit browsers (Safari, Chrome etc)[5] now have access to CSS transformations so you can animate things with a few simple lines of code. Alas this won’t help in browsers that don’t support transitions as the items will remain quite static.

For example in the following example the ducks layer is animated on an infinite loop;
http://users.softpress.com/tim/ducks/

At the moment that layer contains just a single image but it could contain anything you like; navigation, rollovers, anything really. Just be careful if you expect users to be able to interact with the items as they whizz past! :slight_smile:

Here’s the CSS that is doing the animation:

<style type="text/css">

 @-webkit-keyframes ducks {
  from {
    -webkit-transform: rotate(360deg);
  }
  to { 
    -webkit-transform: rotate(0deg);
  }
}
#ducks
{
    -webkit-animation-name: ducks;
    -webkit-animation-duration: 20s; 

		-webkit-animation-iteration-count:infinite;	 
		-webkit-animation-delay:0s;
-webkit-animation-timing-function: linear;
    }
</style>

Simply paste this in your page at Page > HTML Markup… > Before End Head and your layer with the name of ‘ducks’ will get animated in supported browsers. You may also be able to rotate layers like this using a JavaScript framework and a few lines of code but I’ve yet to find an example.
Regards,
Tim.

links:
[1] http://www.adobe.com/products/flash.html
[2] http://www.softpress.com/products/companion/easy-web-animator/
[3] Tumult Hype
[4] http://www.aquafadas.com/en/motioncomposer/
[5] List of web browsers - Wikipedia

On 8 Nov 2011, at 05:19, Jason wrote:

My first post so please forgive me.

Id like to replicate a “duck shoot” gallery as a main menu. I can create a horizontal version (ducks move across screen, on click rollover etc), but deep down Id love to be able to create a spinning duck shoot.
Example of style.
Duck Shooting Gallery Stock Illustration - Download Image Now - Traveling Carnival, Leisure Games, Target Shooting - iStock
I am certainly not a power user by any stretch and can seem to find any actions that would work. Im assuming this may not be possible in Freeway but can’t hurt to ask.
Many thanks in advance

Tim Plumb
Creative Director
Softpress Systems

Follow us on Twitter: http://www.softpress.com/tny/064
Join us on Facebook: Redirecting...
Looking for a webhost? We love these guys: Softpress » Web Hosting Partners

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Many thanks, I kept it simple it works smoothly, will post a link when its up and running.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options