View Full Version: Animated Transparent Scan Bar

Khubsurat Graphics > ImageReady Tutorials > Animated Transparent Scan Bar



Title: Animated Transparent Scan Bar


Zythyr - December 1, 2004 01:37 AM (GMT)
We are going to be making an animated transparent scan bar like tihs one

user posted image

Part 1

1. First of all you will have to go to the Transparent Scan Bar tutorial and make the transparent scan bar.

2. In Photshop, open up the file for the Transparent Scan Bar. Move the transparent scan bar to all the way to the top.

user posted image

3. In your Tools Window, click on this button.

user posted image

4. Now, you will be in ImageReady. Now in your Animation Window click on Dublicate Frame button.

user posted image

5. Now click on your transparent scan bar layer and then using your keyboard's Down arrow, move the transparent scan bar all the way down.

6. Now in the Animation Window click on Tween. And have these settings.

user posted image user posted image

7. Now in your Animation Window go to the first frame and then click Dublicate Frame. Now click on frame #2 and then using your mouse drag it all the way down, an it is going to be the last frame.

user posted image

8. Now while the last frame is selected, repeat step #6.

Final Product

user posted image


Meister - December 2, 2004 02:10 PM (GMT)
Cool.

Here is how i made mine...

user posted image

FlareWing - December 28, 2004 11:58 PM (GMT)
I made one...

user posted image

Pure-Pimp - February 8, 2005 02:01 AM (GMT)
Very nice :)

.TrAnce - April 20, 2005 06:06 AM (GMT)
good tut :biggrin:

Big Money - May 31, 2005 10:27 PM (GMT)
One Question... How do you save the animation as a .gif?

:P Oh, Never mind, I figured it out.

Goku - June 1, 2005 01:28 AM (GMT)
nice tutorial commander i may use it

draxxus - June 16, 2005 02:53 PM (GMT)
I dont get the part where u make the bar move! when i press down , every frame does the same thing, its my first time using image ready. 0_o :cry:

Stream angellight - July 23, 2005 06:25 AM (GMT)
nice tut

mr. fire - August 8, 2005 09:28 PM (GMT)
where is the animation window?

Zythyr - August 9, 2005 12:16 AM (GMT)
QUOTE (mr. fire @ Aug 8 2005, 04:28 PM)
where is the animation window?

In ImageReady go to Windows>>>Animation.

apostle - August 9, 2005 05:27 AM (GMT)
i just joined this place today and i have found everyone of your tuts very helpful and benificial keep um coming!
user posted image

Zythyr - August 9, 2005 05:35 AM (GMT)
QUOTE (apostle @ Aug 9 2005, 12:27 AM)
i just joined this place today and i have found everyone of your tuts very helpful and benificial keep um coming!
user posted image

Thank you very much

elementis0 - August 22, 2005 11:00 PM (GMT)
that was nice but mine only goes one direction it doesnt go back and fourth :(

elementis0 - August 22, 2005 11:14 PM (GMT)
This is what i came up with i think i messed up somewhere because it doesnt move back.

user posted image

..::Kill3rLlama::.. - August 24, 2005 08:56 PM (GMT)
How do i save it as an animated gif? it only lets me save it as a pdf =( and i got its html somehow i need help making it my sig

html-------->
<html>
<head>
<title>Red Solar Flare</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Red Solar Flare.psd) -->
<img src="images/Red-Solar-Flare.gif" width="350" height="150" alt="">
<!-- End ImageReady Slices -->
</body>
</html> :cry:

Volcanic Ash - August 25, 2005 10:29 AM (GMT)
wow awsome tut, i knew how to do this before but still its awsome ;)
heres some that iv done in the past ---

user posted image
user posted image
user posted image


Zythyr - September 6, 2005 08:46 PM (GMT)
Good job guys, keep up th good work.

-DarK- - September 8, 2005 02:55 PM (GMT)
how do u save the it. i m done till where it tell's to do step 6 again but then how do u save it. u can only save as PSD and then when i saved it like tat it did nothing bar dont move (can please add in tut) rest was soo gud tut to follow through. BTW i m new 2 this stuff so yh soori abt noobness.

ReDKinG - September 20, 2005 04:38 AM (GMT)
yeah i need help too. with saving it. I finished the animation and in ImageReady you can only save it as psd. So i switched to photoshop. Then i try and save it as a gif. when i do it discards the animation. how can i save it so it keeps it?

ranorad - September 25, 2005 07:16 PM (GMT)
user posted image

mr.S - October 8, 2005 02:21 PM (GMT)
Amm i know this is old but i need help saving it.

i can only save it as a psd

not a png or gif .....

help? :confused:

chort27 - January 8, 2006 01:04 PM (GMT)
coooll tuuutttooorrriiiaaall.... SICK AWESOME!!

DJ_VIRUS - January 17, 2006 02:19 PM (GMT)
save as .gif :

File / Save optimized as ::wink::



emm i need some help at step #6, i can't see posted image of settings...

fit01 - January 17, 2006 11:16 PM (GMT)
i did dat turetal like a year ago lol and got well stuck

{MoW}Hollywood - March 30, 2006 11:21 PM (GMT)
Great tut.... 1st try and I nailed it... cred to you cause i am a n00b and had no problem!

taxfree - January 21, 2007 01:36 PM (GMT)
here's a practice run I'll make a better sig for it when come up with a good image.

user posted image




Hosted for free by InvisionFree