Solved

Animated Graphics

Posted on 2014-03-07
8
189 Views
Last Modified: 2014-03-24
Hi, are GIFs the only form of animated graphics that modern browsers support.

I want to add a brief tutorial section to my website and i would like to use animated graphics instead of video clips to portray a few small steps - similar to this website - http://www.designsprint.net

If anyone has any advice or resources, it would be greatly appreciated, thanks...
0
Comment
Question by:oo7ml
8 Comments
 
LVL 13

Assisted Solution

by:Andy M
Andy M earned 100 total points
Comment Utility
I believe you can also do animations using Java, and Flash is alos capable of doing animations (though you need a copy of Flash to create them). Obviously these will require additional plugins installing on the computers that access the site to work.

If it's a 2-frame animation you could also use image rollovers. I'm not sure if you can do more with animations in HTML5/CSS3 - haven't kept up-to-date on that.

GIF is probably the easiest and most widely supported method without needing additional plugins to be installed.
0
 
LVL 24

Assisted Solution

by:mankowitz
mankowitz earned 100 total points
Comment Utility
There are a couple of options

0. As you mentioned, there are animated gifs, youtube links, and other forms of video.

1. Do not discount having a series of still images and using some kind of slideshow format. That allows the user to go back and forth at their own speed.

2. You could use GFY (gif format yoker) which also has soundless video but enables some controls. See http://gfycat.com/about
0
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 100 total points
Comment Utility
Just as a side note: the APNG allows for much better quality animations, but it's only supported in Firefox: http://people.mozilla.org/~dolske/apng/demo.html

Dan
0
 

Author Comment

by:oo7ml
Comment Utility
Thanks all... sorry i should have pointed out that i don't want to use video (for many reasons).

I just want to use graphics (that are animated)... looks like GIF is probably my best bet
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 58

Assisted Solution

by:Gary
Gary earned 100 total points
Comment Utility
You can use HTML5 and CSS3 animations to cycle through images and animate objects.
Won't work in IE8 or lower and it's not something you are going to learn in an hour.
You can see some examples here
http://davidwalsh.name/canvas-demos
0
 

Author Comment

by:oo7ml
Comment Utility
Does anyone know how the iphone is done on the 'Say goodbye to' section on this site - https://www.robinhood.com
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Mix of images and CSS animations.
0
 
LVL 23

Accepted Solution

by:
tailoreddigital earned 100 total points
Comment Utility
You could use a third party application like,

http://www.snapfiles.com/get/unfreez.html

It's very easy to create your images in Photoshop then compile them into an animated GIF with this simple  utility.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Problem to echo 6 51
Summernote and form validation 10 38
Where is the title coming from 6 48
Add code to body in wordpress site 8 35
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now