[larryb123456]

---------------------------------------------------------------------------------------------------------
Tripredacus (and CoffeeFiend, too, if you feel like making any comments)
In your Post # 299, you mentioned that doing without a background animation would reduce the file size.
For the 571 KB, 160-frame animation shown below, eliminating a 4-frame, 17 KB (i.e., the file size when played by itself) background animation reduced the file size down to 288 KB.
If you have any comments about the "GIF mathematics" involved in this great file-size reduction -- (i.e., reduced by about half) -- I'd sure like to hear them, for I was very surprised at the magnitude of the reduction.

That is, if you add sub animation "A" (with file size "A" when played by itself) to another main animation "B" (with file size "B" when played by itself), what will the combined file size be ? -- roughly speaking, of course. Knowing the "mathematics" will let me know in advance whether or not I want to add "A" to "B".

Maybe(?) the "math" is something like this: the main animation in question here has 160 frames, so the 4-frame, 17 KB background animation loops 40 times when the main animation plays once. 40x(17 KB)=680 KB. The additive effect of the background animation to the 288 KB GIF is not this big -- [it actually is (571-288)=283 KB] -- but when looked at like this, maybe(?), the effect can be predicted to be "significant".
Thanks
---------------------------------------------------------------------------------------------------------

The 2 GIFs shown below are frame-by-frame animations: 160 frames, 0.08 sec display time per frame, 1px per frame vertical-scrolling rate for the figures, 255 colors, 350x19px. The letter "pulsations" stay in place for 2 frames, so the actual display time for each pulsation is 2x(0.08)=0.16 sec.

The image immediately below uses a single frame -- hereafter referred to as SF -- for the background of all the frames in the animation. Of course, SF is the typical userbar background having an ellipse layer and scanlines (in this case, white and diagonal with a 5px horizontal spacing) over a JPEG background. This GIF animation has a file size of 288 KB, http://postimage.org/image/toadbls41/



I wanted to "jazz up" the above image by using an actual animated GIF for the background, so I made a simple 4-frame one based on SF according to the frame sequence [SF(br=-15),SF,SF(br=+15),SF], where SF(br=X) represents SF being given a Photoshop Brightness Adjustment of X. Of course, the 4-frame sequence will loop indefinitely. The resulting background animation goes in repeating cycles of dark to light and back to dark again (it should be clear that this animation "averages out" to be SF). I experimented with different - and + brightness values -- (specifically, -10,+10 and -20,+20) -- to get a background animation that wouldn't "overwhelm", or compete with, the drummers, but at the same time would be easily visible. The -15 and +15 worked fine, IMO, as can be seen in the result below, http://postimage.org/image/k0x7r38k3/



This animation has a "whopping" file size of 571 KB. The 4-frame background animated GIF I made had a rather small file size of 17 KB (when played by itself), yet when it was "added" to the 288 KB first-shown image above, it resulted in the 571KB whopper.

Now, I'll give some details concerning the construction of the above animations.

This is the first time that I have scrolled an animated GIF.
Previously, I had only scrolled static images (i.e., JPEGs), but the basic procedure is essentially the same.

There are many, many web sites that offer GIF animations for free to be used in any way by the downloader.
I liked the drummer GIF because of its high energy, http://postimage.org/image/8zwc1t4cn/



I opened this GIF in my animator, which analyzed it as: 5 frames, 0.10 sec display time per frame, 95x100px, 13 KB.

I knew that I was going to use a smaller display time per frame in my animation, because 0.10 sec makes the images vertically scroll at too slow a rate. The 0.08 sec display time per frame that I used makes the drummer bang on the drum faster, which was good (IMO).

I saved each frame, opened them in Photoshop, removed the white backgrounds (Magic Wand was perfect), and drew a red horizontal line on each frame -- (the same number of pixels down from the top) -- to let me know when to stop the vertical scrolling.
The scrolling of the 5-frame GIF was similar to that of static-image JPEGs. I aligned and stacked the drummer frames on top of each other on the left and right sides of the userbar. I linked the 5 frames on the left side (and on the right side) so that they would move as a *unit* when I scrolled them 1px per frame. To make the PS layer (for the images) at a particular vertical position, I copied the appropriate drummer frames on the left and right sides of the userbar, and linked and merged them.

The images below show the simple steps used to make this animation.

The image immediately below shows how I made frame 1 of the animation (shown without the background layer, of course), http://postimage.org/image/x5rtls2f1/



The 5 drummer GIF frames are shown stacked (and linked) on top of each other for each side of the userbar. For frame 1 of the animation, I used *only* frame 1 of the drummer GIF, which is shown on top of the drummer stack. The red horizontal line for the left-side drummer is covered up by the border. This image also shows that I made the left and right side drummers to be mirror images of each other, to increase visual interest. Of course, the left-side linked drummers move up (1px per frame) and the right-side linked drummers move down (1px per frame) until they traverse the height of the userbar, and then, after a "pause", they reverse direction in the vertical scrolling.
"Be happy!! Bang on the drum all day!!" has 30 characters, and since each pulsation stays in place for 2 frames, this text occupies 60 frames, or 120 frames when repeated twice in 1 loop of the animation. (160 total frames)-(120 frames with pulsations)=(40 frames without pulsations). So, it's clear that the 2 text pulsations should be separated by 20 frames without pulsations. I started the pulsations on the "B" in "Be" when the drum head on the left side of the userbar was in view, and the rest of the pulsations were determined by the above "calculations". That is why the "D" in "Day" is pulsed in frame 1 of the animation.

The single frame (SF) background was used to make the first animation (288 KB) shown in this Post,

http://postimage.org/image/g5p8as00j/



The 4-frame animated GIF background, [SF(br=-15),SF,SF(br=+15),SF], 17 KB, was used to make the second animation (571 KB), shown in this Post,

http://postimage.org/image/4zqbw30gj/



As a final comment, I made the background animation to be 4 frames so that it would be mostly out of sync with the 5 frame drummer animation, to increase visual interest. Of course, (160 total frames)/(number of frames in a sub animation) has to be an integer (i.e., number of loops of the sub animation). Making 8 duplicate frames at both transition points in the main animation to bring the total number of frames to 160 satisfied the "integer requirement" [i.e., (160/5)=32 and (160/4)=40].



---------------------------------------------------------------------------------------------------------
I don't want to work
I want to bang on the drum all day
I don't want to play
I just want to bang on the drum all day
Todd Rundgren
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:57 PM

[larryb123456]

In my Post # 795 on the "What Are You Listening To?" Topic, I remarked about an insect pest problem in James Brown's undies. Thank goodness his drawers had only been infiltrated by ants. Had the pests been wasps or killer bees, James probably would have been singing falsetto after 1972, the year of the "problem". Of course, "Good God!", and his other grunts, just wouldn't sound right in the Frankie Valli mode.

So, to commemorate Brown's ant problem and the retention of his masculinity, I made a userbar with a lyric from the song, "I got ants in my pants and I need to dance!", http://postimage.org/image/a7upma3c7/



This is a frame-by-frame animation: 112 unique frames, 0.25 sec display time per frame, 255 colors, 350x19px, 216 KB. The vertical scroll rate for the figures is 1px per frame. Each letter pulsation stays in place for 1 frame, so the display time for each pulsation is 0.25 sec.

The 0.25 sec display time per frame is comparatively large, but it was necessary so that the dancing images could be more easily "visually consolidated and integrated" behind the userbar border. Smaller display times that I normally use (i.e., 0.06-0.09 sec) would make the dancers' motions look like a "hodge-podge" of random, hyper-kinetic convulsions. Pulsing letters 1 frame at a time worked well with the 0.25 sec display time per frame. So, IMO, a good overall balance was achieved.

The original GIF animation, obtained from a freebie website, is shown here, http://postimage.org/image/68orv61e9/



My animator analyzed it to be: 14 frames, 0.20 sec display time per frame, 72x72px, 14 KB.
By comparing this image with the one immediately above, one can easily see that it is moving faster (i.e., 0.20 vs. 0.25 sec display time per frame).
The frames were on a white background, which I first had to remove (Magic Wand plus a little touchup), leaving the images on a transparent background.
I drew red, *registered*, horizontal lines on each frame as an indicator of when to start and stop the vertical scrolling with respect to the horizontal legs of the userbar border (this aspect will be made more clear in the JPEG images below).
The 14 individual frames are shown below, http://postimage.org/image/797k4927b/



It's clear from this JPEG that the dancing stickman animation is not very continuous from frame to frame. As a matter of fact, by looking at the first-presented animation in this Post, one can hardly tell that any vertical scrolling took place at all. The 14 frame images above were used on the right side of the userbar since most of the images are looking left. For the images on the left side, I mirrored horizontally the right-side images, and changed the frame sequence to be frame 7,8,9,10,11,12,13,14,1,2,3,4,5,6 where the numbers refer to the frame numbers on the right side. Doing this added to the visual interest, as can be seen from the first-presented animation in this Post.

The image below, http://postimage.org/image/pgiui2ycb/ summarizes the construction of the animation.



The top figure shows all 14 frames of the dancing stickmen stacked in order on top of each other for the left and right sides of the userbar. The 14 frames on the left are linked with each other and the 14 frames on the right are linked with each other. Each set of frames will scroll vertically as a *unit*.
Here, I have put the frames on top of the border so that the red horizontal lines on the frames can be seen.
It's clear that the left-side image will move up (at 1px per frame) until the lower red line is on top of the bottom horizontal line of the border, and then, after a pause, the scrolling will reverse direction. Similarly, the right-side image will move down (at 1px per frame) until the upper red line is on top of the upper horizontal line of the border, and then, after a pause, the scrolling will reverse direction. For a given vertical position in the scrolling, all one needs to do is copy the appropriate frame from the left side of the userbar and the appropriate frame from the right side, and then link and merge these 2 frames.

The dancing stick figure animation has 14 frames, so the total number of frames in the main animation needs to be an integer-multiple of 14. Having 6 duplicate frames define the pauses at the 2 transition points (i.e., the points at which the scrolling gets ready to reverse direction) brings the total number of frames to 112. This satisfies the integer requirement since (112/14)=8, which is the number of loops of the dancing stick figures for 1 loop of the main animation.

The second image down from the top shows frame # 1, where 2 of the horizontal red lines are covered up (i.e., lined up) by the border.

Backgrounds A and B were used to make the 2-frame GIF animation background for the first-presented animation in this Post. Background B was made by moving the scanline layer in Background A to the left by 3px. This 2-frame GIF animation background is shown at http://postimage.org/image/l126742wb/



As shown, it has a 0.25 sec display time per frame, 255 colors, 2 frames, 7.6 KB.



---------------------------------------------------------------------------------------------------------
"The one thing that can solve most of our problems is dancing."
"Hair is the first thing. And teeth the second. Hair and teeth. A man got those two things he's got it all."
“I taught them everything they know, but not everything I know.”
James Brown
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:57 PM

[larryb123456]

The animated GIF presented in this Post was made a few weeks ago and it is in the "Brands" category, http://postimage.org/image/sqcubozk5/



This is a frame-by-frame animation: 132 frames (119 unique), 0.06 sec display time per frame, 255 colors, 1px per frame vertical scrolling rate, 350x20px, 292 KB. Each letter "pulsation" stays in place for 2 frames, so the actual display time for each pulsation is 2x(0.06)=0.12 sec.

I saw the baby JPEG on some generic website, and it was so "cute" that I had the urge to make a userbar from it. It seemed to be about babies *and* diapers, and after checking out different diaper-maker's logos, I settled on "Huggies" because of the beautiful purple background on one of their products. I made this userbar 20px tall, instead of the usual 19px, so that I could make the logo as big as possible.

This is a very simple animation, as can be seen from the construction detail for frame 1, http://postimage.org/image/i8ddkpxth/



For this animation, I followed a little different approach by putting the ellipse and scanlines layers *on* the scrolled background and moving this background under the border, rather than putting these 2 layers -- (plus a background, of course) -- *in* the userbar and scrolling the babies relative to them. This approach can easily be seen from the above JPEG (the ellipse layer occupies the lighter "semi-oval" area at the top).

The scrolled background, 173x75px, was made by linking and merging the following 4 layers (from top to bottom in the Photoshop layers "stack"): the babies; the ellipse layer; the "lattice-type" scanlines; and the background purple linear gradient fade (lighter on the left and right sides, darker in the middle).
By the way, it was a very tedious, labor-intensive endeavor to remove the background around the babies -- Eraser and Line Tool (for touch-up).

It should be clear that the background shown in frame 1 above moves up (at 1px per frame) until its bottom edge lines up with the top edge of the lower horizontal leg of the userbar border, and then, after a "pause", the background moves down (at 1 px per frame) until the position shown in frame 1 is reached again. Of course, this vertical traversing of the userbar background loops indefinitely in the animation.

I pulsed white letters outlined in red -- (which looked beautiful on the purple background, IMO) -- and, since these letters were extremely visible on the purple background, I was able to use a relatively small display time of 0.12 sec for each pulsation.



---------------------------------------------------------------------------------------------------------
“Politicians are like diapers. They both need changing regularly and for the same reason.”
Anonymous

"One of the most important things to remember about infant care is: don't change diapers in midstream."
Don Marquis

"Laughter is like changing a baby's diaper. It doesn't permanently solve any problems, but it makes things more acceptable for a while."
Anonymous

"A baby usually wakes up in the wee-wee hours of the morning."
Anonymous
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:56 PM

[larryb123456]

The animated GIF presented in this Post is for the MSFN members -- (and visitors to the site) -- who are SPACED OUT !, either constantly, frequently, or infrequently, http://postimage.org/image/fmkll1a6f/



This is a frame-by-frame animation: 48 unique frames, 0.30 sec display time per frame, 255 colors, 350x20px, 234 KB. The vertical scrolling rate for the abstract background is 1px per frame. The letter "pulsations" stay in place for 1 frame, so the display time for each pulsation is 0.30 sec. The "spacy-looking" font is Ninja Naruto, obtained from dafont.com.

To me, this animation is in the same "category" as the Voodoo animation presented in Post # 293. That is, both animations explore "optical vibrancy".

I'll present a few details of the construction of this animation.

All the essential steps are shown in the JPEG below, http://postimage.org/image/s7s0eazlx/



The top 2 images show the 2 versions of text used (with the "lattice-type" scanlines and border also shown). The text alternates from frame to frame, with Text 1 being applied to the odd-numbered frames and Text 2 being applied to the even-numbered frames.

I first did the letter layout in black and generated the red and blue versions via Photoshop's Clipping Paths. Applying red and blue strokes (i.e., outlines) completed the 2 text versions.

The next image shows the position of the background (350x40px) for frame 1. Of course, as discussed many times before, the background will scroll up and down in the usual manner. It should be clear that if the animation frames were made as usual, the only visual interest would be in the pulsating letters, because the scrolling background would be somewhat boring.
To make the background more interesting, I did 2 things:
1) I made the set of odd-numbered frames (those using Text 1) in the usual manner.
2) For the even-numbered frames (those using Text 2) I first made TIFFs of just the background (and border) at the associated vertical positions in the scrolling. Then I flipped each frame both horizontally and vertically. Adding Text 2 on top of each of these background frames gave me the complete set of even-numbered frames.

The bottom 2 images in the above JPEG show a random odd-numbered frame and the following even-numbered frame.
It is easy to see the horizontal and vertical background flipping in frame 10 as compared to frame 9.



---------------------------------------------------------------------------------------------------------
I ran into an obviously spaced out person the other day who asked a question that I had never pondered before:
"How do homeless people always seem to get the shopping cart that has all four good wheels?"
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:56 PM

[larryb123456]

In Post # 187, Tripredacus mentioned that the picture in the background of his MSFN signature is from a frame of the music video "Slavocracy" by Samael, a Swiss metal band.

I wanted to make an animated userbar for this video, and since I don't yet know how to make actual *video userbars* (by using the timeline animation feature of my Photoshop CS3 Extended), I wondered if a *stop-motion technique* -- (using screenshot captures of a few frames of "Slavocracy") -- would yield good results.

The result, which I am pleased with, is shown below, http://postimage.org/image/tht6jrd6z/



This is a frame-by-frame animation: 80 unique frames, 0.12 sec display time per frame, 255 colors, 350x19px, 126 KB.
Each "pulsation" in the appearance and disappearance of Samael and Slavocracy stays in place for 1 frame, so the display time for each pulsation is 0.12 sec.
The vertical scrolling rate for Vorphalack, the lead singer of the band, is 1px per frame, but I duplicated each image in his 5-frame "sub animation" for 2 successive vertical positions, so the effective display time for each Vorphalack image is 2x(0.12)=0.24 sec.

I'll now present more details for the construction of this animated GIF.

Regarding the Vorphalack "sub animation":
I got the frames for Vorphalack from screenshot captures of the YouTube video at the 3:04 - 3:05 time mark. (His image around this time was on a black background, providing good contrast with the white highlights on his head and hands.)
First off, I knew that I'd have to choose images that had his head and hands at about the same horizontal position to give "dramatic coupled motion" in the small 17px tall interior of the userbar.
The images I chose for the sub animation are shown below -- (frames 1, 2, and 3 are from t=3:04 in the video, and frames 4 and 5 are from t=3:05, where t represents time) -- http://postimage.org/image/tkvko0r6t/



I originally tried just frames 1, 3, 4, and 5 in the sub animation with the result -- (using a display time per frame of 0.24 sec) -- shown below, http://postimage.org/image/6pbljegrr/



To "smooth out" this animation, I duplicated frame 1, called it frame 2, and then used frames 1, 2, 3, 4, and 5 in the sub animation with the result -- (also using a display time per frame of 0.24 sec) -- shown below, http://postimage.org/image/9asqshi9l/



To me, the above animation doesn't look too bad, and it is more or less as "energized" as Vorphalack is in the YouTube video.
Most importantly, I know, based on past experience, that the vertical scrolling through the userbar background makes "motion irregularities" less apparent. This fact can be seen by comparing the above animation with the first-presented animation in this Post.
If my objective had been to make a good animation the size of the above two, it should be clear that I would have to add 3 or so new frames to achieve visual smoothing in the larger, more completely visible, size.
The large display time of 0.24 sec per frame -- (required to make Vorphalack not appear in super-frenetic motion) -- would make the vertical scrolling, at 1px per frame, go at a super-slow, unacceptable, pace. So, as mentioned above, I duplicated each image in his 5-frame "sub animation" for 2 successive vertical positions, so the *effective* display time for each Vorphalack image, 0.24 sec, could be achieved with an acceptable overall display time per frame of 0.12 sec.
I put the white Vorphalack name on a black horizontal rectangle so that when his image is scrolled up vertically it would not appear to be be cut off. Also, it should be clear that the right side of the userbar, underneath the scrolling image and name rectangle, is filled in with black.
All aspects of vertically scrolling a sub animation have been completely covered in earlier Posts.

Regarding the appearance and disappearance of Samael and Slavocracy:
The setup is shown in the JPEG below, http://postimage.org/image/eb05w4rbr/



It's clear that the left side shows the disappearance of Samael and the appearance of Slavocracy, and the right side shows the disappearance of Slavocracy and the appearance of Samael. The incremental steps were made by dividing Samael vertically, letter by letter, half-way in between each letter pair. Each numbered horizontal represents a "pulse" which stays in place for 1 frame (i.e., 0.12 sec) before moving on to the next numbered horizontal. All of this occurs too quickly to be seen in step-by-step detail in the animation (i.e., the small display time per frame makes the pulsations look continuous, which is a good thing, IMO).

As a final thought, each of the 2 red on black "fire" panels are 4-frame sub animations. The 5-frame Vorphalack sub animation is essentially converted to a 10-frame sub animation by the image doubling discussed above. With 80 total frames, the fire loops 20 times and the "doubled Vorphalack" loops 8 times, so the necessary "integer requirements" are satisfied.



---------------------------------------------------------------------------------------------------------
"I wish that I could take you by the hand.
Lead you through blurry views and
give you access to your own self."
a lyric from "Slavocracy" by Samael
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:55 PM

[Tripredacus]

larryb123456, on 29 May 2012 - 06:25 PM, said:

I wanted to make an animated userbar for this video, and since I don't yet know how to make actual *video userbars* (by using the timeline animation feature of my Photoshop CS3 Extended), I wondered if a *stop-motion technique* -- (using screenshot captures of a few frames of "Slavocracy") -- would yield good results.

I have stayed away from using straight video in GIFs, mainly because of the size and quality. Another problem you may encounter is most converters end up adding duplicate frames every other one. For a video file like that you need a couple of different tools. One to get the video from Youtube in FLV format. Then another to extract portions of the FLV to some other format. You could probably directly edit the FLV, but if you grab an HQ version, you're talking about a large file size that is going to take up a bit of RAM directly editing it.

[larryb123456]

Hello, Tripredacus:

A friend on another Art forum I'm on makes *video* userbars exclusively.
She uses Quicktime 7.2 software to import the videos into Photoshop CS4 Extended, which has the required timeline animation feature. The videos need to be in .MOV format with Quicktime codecs. She uses a website that converts YouTube videos online to .MOV format and then she downloads them afterwards.

Of course, the userbars are small (at 350x19px or 350x20px) and the video part of the userbar doesn't occupy the whole space.
Both of these factors contribute to keeping the file size low.

Here is a video userbar she made, using 5 - 6 seconds of the Primus YouTube video "Shake Hands with Beef",

http://postimage.org/image/kaknklmjv/



Specs: 156 frames, 0.03 sec display time per frame, 350x19px, 192 KB (a very, very small file size for what the userbar shows, IMO).

By looking at this beautiful animation, you can see why I want to learn how to make video userbars.

I've been told that once you know the relatively simple timeline animation techniques, making video userbars is really simple, *much, much simpler* than using the tedious, labor-intensive frame-by-frame animation technique I've been using.
But I enjoy the tedium -- (being a glutton for punishment) -- and the analysis involved in getting everything to coordinate properly. I also like the challenge of coming up with new things to try (as in the scrolling of sub animations -- which I've been doing recently -- and in the stop-motion technique I used in my last Post for Samael's "Slavocracy").

But it won't be too much longer that I'll feel that I've more-or-less mastered the frame-by-frames, and then I'll devote myself to the video animations.

[Tripredacus]

I also only use the frame-by-frame technique. Here are my two most "recent" examples.

From a commercial about three people doing a tango. Some forced meme appeared on TFW2005 concerning Megatron dancing, and all sorts of users were coming up with images about that theme. My submission because the "thread win" as I added Dark of the Moon Megatron into the awkward 3 person tango animation.


Another was from KLOV where a user had found a mysterious hangar, which became an inside joke there. That user later had his cat die and he had posted a picture of his "cat" haunting his house. I ended up combining the hangar joke into his cat haunting joke with this image:

[larryb123456]

Nice work, Tripredacus:

I analyzed both GIFs in my animator.

The second animation has a whopping file size of 1.8 MB, and it is so smooth, it looks like a video animation.
You did a great job with the smoothing with just 32 frames and a 0.10 sec display time per frame.

I like that one better than the first one, because with the cat leaving the picture *completely* and then reappearing, there is a sense of image continuity.

The first animation does not have this sense of continuity.
The animation starts, proceeds up to a certain point, stops, and then abruptly starts over at the beginning.
This continuity gap is very apparent to me.
Of course, as you know, this discontinuity problem might have been solved by adding the frames you had already made, in a symmetrical-reverse order about the stopping point, taking you back to the first frame, where the animation would start over.
To try to explain, let the frames leading up to the stopping-point frame, P, be denoted by f(1), f(2), ...., f(P-2), f(P-1), f(P).
I'd then add frames -- (which you already had made) -- f(P+1)=f(P-1), f(P+2)=f(P-2), ..., etc., continuing to the last frame, which is equal to f(2).
This complete set of frames would loop indefinitely, of course.
This is the technique I use when I vertically scroll images, and there is not a continuity gap.

I knew for sure that the above approach would remove the continuity gap, but I couldn't really visualize how the resulting animation would look.

Being something of an "experimentalist", I wanted to investigate further.

The animation has 37 frames with a display time of 0.10 sec per frame.
I opened the GIF in my animator, saved each frame in a folder, copied each frame, and renamed each copied frame according to the symmetrical-reverse formula to generate a new 72-frame GIF with frames f(1), f(2), ..., f(35), f(36), f(37), f(38)=f(36), f(39)=f(35), ..., f(70)=f(4), f(71)=f(3), and f(72)=f(2).

The resulting animation, which doesn't have the above-discussed continuity gap, is shown below, http://postimage.org/image/icz7un7x1/



The only thing that's maybe a little bothersome, to me, in this GIF, is the portion where they dance backwards for a little while (a direct result of the symmetrical-reverse), but that fits in with the quirky nature of the dancing, I guess.

BTW, where did you get the Tango frames from, and what "Tools" did you use to capture them?
Where did the "grainy" look come from? The colors/image are really deteriorated. (It's "artsy", and I like it.)
I remember this commercial from TV.
A very funny one, indeed.
If I remember correctly, it was for Geico.
Adding a Transformer "helmet" to the tall gentleman was a FANTASTIC TOUCH !!!

Many Thanks, Tripredacus, for sharing your images and giving me a little something to play with.

Remember what the poets say: "Symmetrical-reverse is not a curse !!!" (lol)

[larryb123456]

The animated GIF I'm presenting in this Post concerns the sport of running, http://postimage.org/image/74g2f5iqn/



This is a frame-by-frame animation: 60 unique frames, 0.11 sec display time per frame, 255 colors, 350x19px, 150 KB.
Each letter "pulsation" stays in place for 1 frame, so the display time for each pulsation is 0.11 sec.
In this animated GIF, a 6-frame runners "sub animation" is scrolled vertically at a rate of 1px per frame.
The background "moving scanlines" are the result of a 2-frame sub animation.

I made the image to be very straightforward, following Leonardo da Vinci's dictum, "Simplicity is the ultimate form of sophistication."

The only resource used in this project was the 6-frame animated GIF for a single runner -- (76x47px, 0.03 sec display time per frame, 1.54 KB) -- shown below, http://postimage.org/image/dnhlid00l/



I'll next present *completely* the steps I used to make this animation, starting with http://postimage.org/image/4n9opsuy9/



This image shows the manipulations of the resource GIF, which is totally pixelated (i.e., with all aliased, "stair-steppy" edges) and on a white background.
I opened it in my animator, saved each frame (as a TIFF) in a folder, and then opened, dragged, and aligned each frame into a new 76x47px Photoshop file.
It was a simple matter to remove all the pixels around the runner, frame by frame -- [with the Magic Wand (anti-aliased box unchecked and tolerance=0) and Eraser] -- to get just the runner on a transparent background for each frame as shown (i.e., the white indicates the transparent background).
With all the runners aligned and visible in the PS layers "stack", I could see where the top, bottom, left, and right "outer limits" of the overall image were, so I drew a 1px red border just on the outside of these limits, for each frame, for registration purposes. This is shown in the top image in the above JPEG. I then cropped this .psd file on the outside of the red border to get a 34x39px file.

The making of the 6-frame vertically scrolled runners sub animation is shown next, http://postimage.org/image/a3bv047af/



The userbar border with the right end panel reading "I am a runner" (in pixel, bitmap letters) is also shown.
I resized the .psd file containing the 6 frames from the resource GIF to get the "pleasing" spacing of the runners shown in the picture for Frame # 1.

In the resizing, I used bicubic resampling, which put a nice anti-aliased edge around the runners, as can be seen from the picture. The rather rapid motion of the runners in the finished animation would also tend to smooth out the edges even more.

The borders are 39x44px on the outside.
I made the other frames -- (i.e., Frame # 2 through Frame # 6) -- in the 6-frame scrolled sub animation as shown in the picture.
The numbers inside the borders refer to the frame numbers of Frame # 1. As can be seen from this JPEG, each Frame is different. A close examination of this picture reveals that the frame sequence of Frame # 1 is maintained for both the rows and columns of this "runner matrix".

Of course I erased the borders around each runner before scrolling the sub animation. (First I drew in another red registration marker for each of the 6 Frames.) I added 3px to the top of the border shown in the above image -- (so that it wouldn't look like the runners were bumping their heads on the top of the userbar) -- and I subtracted 1px from the bottom -- (so that the runners would look more "grounded" and not look like they were flying).

I have covered the scrolling of sub animations before, but I'll discuss how it applies for this runner animation.
The scrolling of a sub animation is basically the same as the scrolling of a static image (for example, a JPEG), with the main difference being that all the frames in the sub animation need to be linked and scrolled as a *unit*. Then, at a particular vertical position, the appropriate frame in the scrolling unit is copied and becomes the image in the overall animation for that position.
The next picture should make the procedure clear, http://postimage.org/image/93r2kuaa5/



The top image shows the scrolling unit -- (which in this case consists of Frames # 1 through # 6 in the runners sub animation, aligned and stacked) -- at the position of the first frame in the overall animation. The red registration marker is also shown. The appropriate Frame at this position is Frame # 1, which is copied (i.e., isolated from the scrolling unit) and becomes the image for the first frame in the overall animation. This is shown in the next picture down. This procedure is repeated for each vertical position as the scrolling unit moves up -- (until the lower horizontal red registration marker aligns with the lower horizontal leg of the black userbar border) -- and then down.

The animation is completed with the addition of the background, in itself a 2-frame sub animation. The background is a typical userbar background with an ellipse layer over white diagonal scanlines, which have a 5px horizontal spacing. The lower background was made from the upper background by moving the scanlines to the left by 3px. As the backgrounds alternate from frame to frame, the illusion of motion is produced.

I added pauses (i.e., duplicate frames) at the transition points (i.e., the positions where the image gets ready to reverse direction in the vertical scrolling) to bring the total number of frames to 60, so that the scrolled 6-frame sub animation would have an integer number of loops [i.e., (60/6)=10] for 1 loop of the main animation. Of course, the 2-frame background sub animation also satisfies the integer requirement (i.e., 30 loops for 1 loop of the main animation).



---------------------------------------------------------------------------------------------------------
Looking at my runner matrix reminded me of the famous multiple-camera stop-motion photographs by Eadweard Muybridge, a British photographer. (He used this approach to investigate many activities, in addition to running.) Here is an animated runner GIF based on his photographs. My animator analyzed it as: 11 frames with a 0.12 sec display time per frame.
---------------------------------------------------------------------------------------------------------
"Life is short... running makes it seem longer."
Baron Hansen

“Every morning in Africa, a gazelle wakes up. It knows it must outrun the fastest lion or it will be killed. Every morning in Africa, a lion wakes up. It knows it must run faster than the slowest gazelle, or it will starve. It doesn't matter whether you're the lion or a gazelle, when the sun comes up, you'd better be running.”
Christopher McDougall

"The trouble with jogging is that by the time you realize you're not in shape for it, it's too far to walk back."
Franklin P. Jones
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:54 PM

[Tripredacus]

larryb123456, on 01 June 2012 - 03:20 PM, said:

BTW, where did you get the Tango frames from, and what "Tools" did you use to capture them?
Where did the "grainy" look come from? The colors/image are really deteriorated. (It's "artsy", and I like it.)

The commercial is/was on Youtube. I use a Youtube download which gives me an FLV. I can't remember what program I used to grab that section of frames. The grainyness is caused by converting it to multiple formats, as well as resizing the image from its regular size to the smaller one.

As far as the cat image goes, I did not create that particular animation. I had taken an existing animated GIF and added the hangar image to each frame.

[larryb123456]

Thanks for responding, Tripredacus.
I appreciate it.

[larryb123456]

Here is a cartoon-like animated userbar I made (appropriate for the "Brands" category once I added the Armani logo) http://postimage.org/image/j65wb3ejh/



This is a frame-by-frame animation: 96 unique frames, 0.14 sec display time per frame, 255 colors, 350x19px, 264 KB.
Here, an 8-frame sub animation is scrolled vertically -- (at a rate of 1 pixel per frame) -- on the left and right sides of the userbar.
Each letter "pulsation" for "designer eyeglasses" stays in place for 1 frame, so the display time for each pulsation is 0.14 sec.

Giorgio Armani is a famous, very successful Italian designer and businessman who makes eyeglasses, in addition to many other products. So, I added his logo name to the center panel of the userbar to harmonize with the scrolled images on the left and right sides. I pulsed the "designer eyeglasses" letters in green, white, and red, which are the colors on the Italian flag.

My original resource GIF for the "big-glasses lady" was 84x79px and on a transparent background. I cropped it at the top and bottom -- (in order to focus more on the glasses) -- to get the 84x64px animation shown below, http://postimage.org/image/dzqkhzesx/



The 1px wide red horizontal lines at the top and bottom are for image registration. This cropped animation has 8 frames and a 0.10 sec display time per frame, as does the original resource GIF. (I knew that I'd have to increase the display time in the final animation, because the 0.10 sec is just too small, as can easily be seen from looking at the animation.)

The scrolling unit for the right side of the userbar and the 8 frames are shown below (the white represents the transparent background for the images), http://postimage.org/image/eymn676sl/



The concept of a scrolling unit was thoroughly explained in my Post # 310. I put this scrolling unit on the right side of the userbar because the lady's head was then leaning in toward the userbar's interior. I made the scrolling unit for the left side of the userbar by flipping horizontally the right-side scrolling unit and changing the frame sequence to be 6, 7, 8, 1, 2, 3, 4, 5 where the numbers refer to the frames in the right-side scrolling unit. I did this to increase visual interest. Examination of the left and right side frame sequences shows that for a given position in the vertical scrolling, the image on the left side of the userbar is always different from that on the right side.

The next JPEG shows the general setup, and specifically the positioning of the left and right side scrolling units for frame 1 of the overall animation (in the top picture), http://postimage.org/image/puefxjw53/



Usually, I move the scrolling units *over* the userbar border (as shown in the top picture), so that I can clearly see the red registration markers, and then I come back and put the border on top of all the frames (i.e., Photoshop layers) as shown in the next picture down, which shows the images for frame 1 of the overall animation.

The left-side scrolling unit will move up (at 1px per frame) until the lower red registration marker aligns with the lower horizontal leg of the border, and then the unit will move down. Similarly, the right-side scrolling unit will move down (at 1px per frame) until the upper red registration marker aligns with the upper horizontal leg of the border, and then the unit will move up. This movement, as described, will result in an animation having 90 frames. But the total number of frames in an animation needs to be an integer multiple of the number of frames in a sub animation (i.e., 8 in this case). This integer, of course, is the number of loops of the sub animation for 1 loop of the main animation. By having the scrolling units remain at each of the 2 transition points (i.e., the positions at which the vertical scrolling stops before reversing direction) for 3 more frames, the total number of frames is increased to 96 and the integer requirement is thereby satisfied [i.e., (96/8)=12]. In pictorial terms, the transition points occur when the red registration markers align with the horizontal legs of the border.

The background used in this animation is, in itself, a 2-frame sub animation, where the frames are shown at the bottom of the above picture. The lower background was made from the upper by moving the scanlines 3px to the left. When these 2 backgrounds alternate frame after frame, the illusion of motion is created.



---------------------------------------------------------------------------------------------------------
“If the eye does not want to see, neither light nor glasses will help.”
a German proverb

I love things that age well - things that don't date, that stand the test of time and that become living examples of the absolute best.
Giorgio Armani

The essence of style is a simple way of saying something complex.
Giorgio Armani

“My grandmother is over eighty and still doesn't need glasses. Drinks right out of the bottle.”
Henny Youngman
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:53 PM

[larryb123456]

The animation shown here follows directly from my Post # 310, which concerns a runner userbar:

http://postimage.org/image/ggpiaghtj/



This 6-frame animation -- (which has a 0.11 sec display time per frame) -- is based on the 6 frames shown (horizontally) in the fourth image down from the top in Post # 310.
In that Post, these 6 frames were scrolled vertically as a sub animation -- (also with a 0.11 sec display time per frame) -- in making the 350x19px userbar. The runner motions were rather hard to "visually consolidate and integrate" as a whole as they moved up and down *behind* the userbar border.

So, my motivation in making this Post was to show all the details of the motions completely and clearly in a larger animation.

Please refer to the image at the bottom of Post # 310.
I made the black border around the runners in the above animated GIF by using the left-side red vertical and extending the top and bottom red horizontals to meet a vertical line segment lining up with the left side of the black "I am a runner" panel.

I made the 2-frame background sub animation shown in the above animated GIF by following the procedures outlined in Post # 310.

I then added the Kevin Nelson quotation at the bottom of the animation. Nelson is a writer who covers many different activities, in addition to running.



---------------------------------------------------------------------------------------------------------
Here are some quotations by Steve Prefontaine, a great middle and long-distance runner (and Olympian) who died tragically in 1975 in a freak automobile accident at the age of 24. (His MBG convertible swerved into a rock wall and flipped, overturning on top of him, trapping him underneath, and killing him by crushing his chest.)
“To give anything less than your best is to sacrifice the gift.”
“A man can fail many times, but he isn't a failure until he begins to blame somebody else.”
“You cannot propel yourself forward by patting yourself on the back.”
“If you fail to prepare, prepare to fail.”
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:53 PM

[larryb123456]

The following animated userbar is for MSFN members -- (and visitors to the site) -- who are "in over their heads", either constantly, frequently, or infrequently, http://postimage.org/image/b93q75hud/



This is a frame-by-frame animation: 100 unique frames, 0.10 sec display time per frame, 255 colors, 350x19px, 179 KB. Each letter "pulsation" stays in place for 1 frame, so the display time for each pulsation is 0.10 sec before the pulsation moves on to the next letter. For the left and right sides of the userbar, I vertically scrolled 20-frame "sub animations" for the cartoon figures, as will be discussed more fully below.

Initial considerations:

The original 10-frame resource GIF had a transparent background, and I modified it, first by enlarging it by 10% (to fill up the userbar background better), and then by cropping it a little at the top and bottom and adding red horizontal registration markers, as shown in the 3 animations below, which are identical except for the display time per frame. (I made these animations to have a white background.)

The original resource GIF had a 0.33 sec display time per frame as shown below -- (but the motion looked a little slow to me), http://postimage.org/image/h5o4lm2uv/



For this animation, I wanted to use a 0.10 sec display time per frame, because that gives good scrolling and allows for energetic letter pulsing. But the resource GIF moves way too fast -- (to be seen clearly behind the userbar border) -- at that display time, as shown below, http://postimage.org/image/esn89gqwf/



I like the motion at a 0.20 sec display time per frame, which is shown below, http://postimage.org/image/987o5udu5/



Left and right side scrolling units for the userbar:

The concept of a scrolling unit for a scrolled sub animation has been discussed before. But, to summarize again: a scrolling unit consists of all the frames in a sub animation aligned and linked. For a given position in the scrolling, the appropriate frame is copied (i.e., isolated from the scrolling unit) and becomes the image in the main animation for that position.

The 10 frames in the left side scrolling unit are shown below. These frames -- (80x63px including the red registration markers) -- are identical to the 10 frames of the 3 modified GIF animations shown above.

http://postimage.org/image/mj49759ub/



I made the 10 frames in the right side scrolling unit by flipping horizontally the left side scrolling unit and then assigning a frame sequence of 6, 7, 8, 9, 10, 1, 2, 3, 4, 5. I did this to increase visual interest. Close examination of the frames reveals that the images on the left and right sides of the userbar are always different for any given position in the scrolling. This difference results in the head on the left side head popping up while the head on the right side submerges and vice versa. To me, this "whack a mole" look is what makes this userbar successful.

Construction of the animation:

The construction of the animation is detailed below, http://postimage.org/image/vhp9ndle3/



I have discussed transition points before.
To summarize: a transition point is the position at which a scrolling unit (or a static image, such as a JPEG) stops before reversing the direction of motion.
For this case, there are 2 transition points and they occur when the red registration markers align with the userbar's horizontal legs, as shown above.
I started the animation with frame 1 at transition point 1. The left side scrolling unit moves up -- (at 1px per frame) -- and the right side scrolling unit moves down -- (at 1px per frame) -- until transition point 2 is reached. Then the motion reverses, with the scrolling units going back to transition point 1 as the animation proceeds. As described, this direct scrolling unit motion results in an animation with 88 frames (i.e., determined by the scrolling unit size and the 17px tall userbar interior).

As I mentioned above, I wanted to use a 0.10 sec display time per frame for the overall animation, but the 10-frame resource GIF moved way too fast at this display time.
I solved that "problem" by using the appropriate frames from the scrolling units for two successive horizontal positions in the vertical scrolling, thereby essentially scrolling a 20-frame sub animation for the left and right sides of the userbar.
For a 0.10 sec display time per frame for the overall animation, each image from the original left and right side scrolling units is shown for 0.20 sec, which is the desired result. To see the success of this approach, compare the figure motion in the first animation -- (i.e., the userbar with a 0.10 sec display time per frame) -- with that of the fourth animation -- (i.e., the modified resource GIF with a 0.20 sec display time per frame) -- shown in this Post. These motions are identical.

There is a final adjustment to make in the total number of frames in the animation.
As mentioned, the "doubling up" of the scrolling unit frames resulted in 20-frame sub animations.
The total number of frames in the overall animation has to be an integer multiple of 20. (This integer is the number of loops of a sub animation for 1 loop of the main animation.)
By keeping the overall animation "in place" for 6 additional frames at each of the transition points 1 and 2, we arrive at 100 total frames [i.e., (88+6+6)=100], and the integer requirement is satisfied.

The background of the overall animation is, in itself, a 2-frame sub animation made from "A" and "B", shown in the above picture. The diagonal scanlines have a horizontal spacing of 3px, and "B" was made from "A" by moving these scanlines to the left by 2px. As "A" and "B" alternate from frame to frame, the illusion of motion is created.
The only thing required to complete the animation is the green border overlay and the purple letter pulsations.

---------------------------------------------------------------------------------------------------------
"And that's all there was to it !!!"
larryb123456
---------------------------------------------------------------------------------------------------------

[larryb123456]

In this Post, I'm presenting an animated userbar with an image of the European Union flag,

http://postimage.org/image/4pj4xgj9r/



This is a frame-by-frame animation: 130 unique frames, 0.13 sec display time per frame, 255 colors, 350x19px, 311 KB. The European Union flag, which is a 5-frame sub animation, scrolls vertically at a rate of 1px per frame. The letter "pulsations" stay in place for 1 frame before moving on to the next letter, so the display time for each pulsation is 0.13 sec.

I made the flag to be big horizontally to fill up the space better in the userbar. As a result, the height was large too.
(The size of the flag scrolling unit is 146x103px).
If I'd scrolled the flag up *and* down -- (a motion I normally use) -- the animation would have had well over 200 frames, with a tremendous amount of work to complete it. So, I just scrolled the flag up and out of the picture, completing one loop. As the animation starts on the next loop, the flag "reappears" at the bottom of the userbar and works its way up. A nice feature of this approach is the revealing of the pulsed "European Union !" commentary underneath the flag.

The background of the main animation is, in itself, a 2-frame sub animation which uses "lattice-type" scanlines in each frame. Frame 2 was made from Frame 1 by moving the scanline pattern to the left by 3px. As these frames alternate one after the other in the main animation, the illusion of motion is created.

Using the same "lower quality" animator settings which produced the very interesting background in the "Tool" animation -- (shown at the very bottom of my Post # 298) -- gives the following result, http://postimage.org/image/smbcouvkn/



I really like the way the original background has been "uniformly abstracted".

This post has been edited by larryb123456: 25 August 2012 - 12:52 PM

[larryb123456]

Here's one for the Chrysler automobile fans (and lightning freaks), http://postimage.org/image/f9gdzu5u3/



This is a frame-by-frame animation: 132 total frames (112 unique), 0.10 sec display time per frame, 255 colors, 350x20px, 263 KB. Each letter "pulsation" stays in place for 2 frames before moving on to the next letter, so the actual display time for each pulsation is 2x(0.10 sec)=0.20 sec. 10-frame sub animations are scrolled vertically -- (at a rate of 1 pixel per frame) -- on the left and right sides of the userbar.

The original resource GIF, 96x96px, had 10 frames with a 0.10 sec display time per frame. I modified it by first reducing the size proportionally to 87x87px and then by cropping 6px from the top and bottom -- (to focus more on the Pentastar logo) -- to arrive at an 87x75px image. I then added 3px wide gray horizontal borders at the top and bottom to arrive at the 87x81px images shown in the above animation. These borders are necessary to differentiate the scrolled sections from the black backgrounds on each end of the userbar.
The modified resource GIF -- (also with a 0.10 sec display time per frame) -- is shown below, http://postimage.org/image/v3zvn61ub/



The 10 frames in the right side sub animation are shown below, http://postimage.org/image/qm2693taj/



I made the left side sub animation by flipping horizontally the right side sub animation and assigning a frame number sequence of 6, 7, 8, 9, 10, 1, 2, 3, 4, 5. I did this to increase visual interest, by making the left and right side lightning flashes different for each horizontal position. But, really, these subtle differences are hardly noticeable because of the rather fast scrolling rate and the fact that a large part of the lightning image is hidden behind the userbar's 18px tall interior.

I really liked the 0.10 sec display time per frame for the original and modified animated GIFs, for 2 reasons: the lightning flashes are very "energetic" at this rate; and 0.10 sec is a great display time per frame for vertical scrolling.
So, the 0.10 sec was "set in stone".
But letter pulsation test GIF animations for "Chrysler", "owner", and "driver" showed that 0.10 sec was too small a number, giving much too rapid pulsations. However, 0.20 sec was ideal, so I knew from the outset that I'd have to keep each letter "in place" for 2 successive frames to give an effective display time of 2x(0.10 sec)=0.20 sec for each pulsation.

As a final mention, I kept the diagonal scanlines in the Chrysler panel stationary -- (rather than moving them from frame to frame as I've done in other Posts) -- because there was already enough going on in the animation (IMO).



---------------------------------------------------------------------------------------------------------
"Genius unrefined resembles a flash of lightning, but wisdom is like the sun."
Franz Grillparzer (1791-1872), Austrian writer and poet

“Whenever there is a hard job to be done I assign it to a lazy man; he is sure to find an easy way of doing it.”
Walter Chrysler, founder of the Chrysler Corporation
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:51 PM

[larryb123456]

I made two versions of this userbar, which expresses the "thank you" sentiment.
I made each userbar thinking that it might be a nice email attachment to send to a good friend.

http://postimage.org/image/fhi4sazkj/



http://postimage.org/image/cl83n5hp7/



These are frame-by-frame animations, each having the same specs (except for the file size): 88 unique frames, 0.14 sec display time per frame, 255 colors, 350x19px. 8-frame sub animations are scrolled vertically -- (at a rate of 1 pixel per frame) -- on the left and right sides of the userbars. Each letter "pulsation" stays in place for 1 frame before moving on to the next letter, so the display time for each pulsation is 0.14 sec.

As I've mentioned before, there are many, many websites that offer free animated GIFs.
My resource GIF for this project came from 123gifs.eu.

I liked this GIF because each feature was animated: the blinking eyes, the typed letters, the mouth, and the arms and hands. My animator analyzed this GIF as: 8 frames, 0.15 sec display time per frame, 90x60px, 7.5 KB. The 8 frames are shown below, http://postimage.org/image/72p1jr25n/



I was fortunately able to use this GIF at true width -- (I cropped 2px from the bottom) -- in constructing my userbars, because had I been forced to shrink it to accommodate the lettering in the middle of the userbars, some "blurriness" would have been introduced.

To make my animations, I simply painted over the letters in "Thanks", from frame to frame, and replaced them with "Danke" and "Merci", the well-known German and French versions of "Thanks". Because "Danke" and "Merci" have 1 less letter than "Thanks", they are visible for 3 frames out of 8 instead of 2 out of 8 (as shown in the above picture for "Thanks"). This fact results in "Danke" and "Merci" being a little more visible behind the userbar border as the typing images scroll up and down.

I made the right side scrolling unit in exactly the same manner as the left (except for replacing "Thanks" by "Merci", of course) and then assigning a frame sequence of 4, 5, 6, 7, 8, 1, 2, 3 where the numbers refer to the frame numbers on the left side. This "frame-sequence staggering" action results in the left and right side images never being at the same point in the letter typing for a given horizontal position in the scrolling, as can be seen by examining the above picture.

I made a GIF which shows this frame-sequence staggering for the left and right side scrolling units, http://postimage.org/image/c0vloy153/
(Had I not staggered the frames, the images on the left and right sides of the userbars would have always been at the same point in the typing.)



If the typing images had scrolled up and down without any pauses, an 82-frame animation would have resulted. But, the total number of frames has to be an integer multiple of 8, the number of frames in the sub animation. (This integer is the number of loops of the sub animation for 1 loop of the main animation.) So I kept the scrolling units in place for 3 additional frames at each of the 2 transition points to bring the total number of frames to 88 [i.e., (82+3+3)=88], thereby satisfying the integer requirement. Recall that a transition point in the vertical scrolling is a point at which a scrolling unit stops before reversing direction in the scrolling.

The backgrounds are, in themselves, 2-frame animated GIFs. Each background uses diagonal scanlines with a 3px horizontal spacing. For each userbar, the second background frame was made from the first by shifting the scanline pattern 2px horizontally to the left. The illusion of motion is thereby created as the backgrounds alternate from frame to frame in the animation.



---------------------------------------------------------------------------------------------------------
God gave you a gift of 86,400 seconds today. Have you used one to say "thank you?"
William A. Ward
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:51 PM

[larryb123456]

Here is an animated GIF I made for those of you who are romantically inclined. I thought it might be a nice email attachment to send to a loved one far away, http://postimage.org/image/tq4xv9k9p/



This is a frame-by-frame animation: 77 unique frames, 0.15 sec display time per frame, 255 colors, 350x19px, 253KB. 11-frame sub animations are scrolled vertically -- (at a rate of 1 pixel per frame) -- on each end of the userbar.

My resource GIF (i.e., starting point) came from 123gifs.eu, a great, free, animated GIF website.
I liked this animation because of the pretty colors and the "explosive dynamics". The text "I love you ... and miss you" in my animation above seemed to fit in with the hearts and tears in the resource GIF. Of course, my objective was to add to the resource GIF to come up with something even better or, at least, give it an added dimension.

My animator analyzed the resource GIF as: 11 frames, 0.10 sec display time per frame, 103x78px.

The 11 frames are shown below, http://postimage.org/image/x6r3kbp01/



It's clear that the frames needed to be reduced in size to be compatible with the userbar dimensions. I reduced the GIF, non-proportionately, to 90x50px (i.e., elongated it lengthwise) to meet my needs: the length worked out great for the userbar ends and the text, and the relatively small height gave an animation with relatively few frames. Also, I increased the display time per frame from 0.10 sec, that of the resource GIF, to 0.15 sec so that the hearts and tears could be seen better behind the userbar border as they scrolled up and down.

The 90x50px frames based on the resource GIF are on the left side of the userbar, since the tears (i.e., tear ducts) are next to the nose. These frames comprise the left side scrolling unit. (Recall that a scrolling unit consists of the frames of a sub animation linked so that they move as a unit. For a particular vertical position in the scrolling, the appropriate frame of the scrolling unit is copied and becomes the image in the main animation for that vertical position.) The 11 frames of the right side scrolling unit were made by flipping horizontally the left side scrolling unit and assigning the frame sequence 7, 8, 9, 10, 11, 1, 2, 3, 4, 5, 6, where the numbers refer to the frame numbers of the left side scrolling unit. This "frame staggering" insures that the images on the left and right sides of the userbar will always be different for any given vertical position in the scrolling, thereby increasing visual interest. This fact can be "deduced" by closely examining the frames in the above picture. But to make the fact more clear, I made an animation showing -- visually -- the effect of this frame staggering, http://postimage.org/image/dqh6l2qqt/



For this animation, the left and right side scrolling units were moved up and down together, so I had 22 (i.e., 11+11) Photoshop layers linked. As it turned out (i.e., determined by the scrolling unit height and the 17px interior height of the userbar), the animation would have had 66 frames with no pauses in the vertical motion. (A pause occurs when a scrolling unit stays in place at a vertical position for 2 or more frames.) The 66 total frames is a totally acceptable number with regard to the 11-frame sub animation (i.e., there would be 6 loops of the sub animation for 1 loop of the main animation). However, if there aren't a few pauses at the 2 transition points, an "abrupt-herky-jerky-ping-pong" motion occurs. (Recall that a transition point is the position at which the scrolling units stop before reversing direction in the vertical scrolling.) So, I kept the scrolling units in place (i.e., at the same vertical position) for 6 additional frames at one transition point and 5 additional frames at the other transition point, bringing the total number of frames to 77 [i.e., (66+6+5)=77], a number compatible with the 11-frame sub animation. The 2 transition points can be clearly seen in the first-presented animation in this Post, as the scrolling units go up and down indefinitely.

In many of my other Posts, I moved the background scanlines via a 2-frame sub animation. In this case, I couldn't do it because 77 is not an integer multiple of 2. Of course, I could have made a 7-frame background sub animation, but it would have made the image unnecessarily complex and it would have increased the file size appreciably.

I made "I love you ..." and "and miss you" disappear via opacity changes, as I've done in a number of earlier Posts. For each expression, I assigned 1 frame each for 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, and 10% opacity, followed by 6 frames of only the ellipse-scanlines-(pink background) in the middle of the userbar.

The appearance of "I love you ..." and "and miss you" is straightforward, at 1 character per frame, and each completed expression stays visible for a total of 14 frames. For completeness in this Post, I'm showing how I made "I love you ..." appear -- (of course, it's the same approach for "and miss you") -- http://postimage.org/image/cwve10vp5/



The entire phrase was first completed -- (I used the Outer Bevel style in the Bevel and Emboss effect) -- and then cropped, character by character, as shown. I added the text -- layer by layer -- on top of the left and right side images and the middle ellipse-scanlines-(pink background) and finished everything off by adding the border overlay, shown at the bottom of the above picture.

The central, text portion of the 77 frames are accounted for as follows:
10 frames for the appearance of "I love you .."
14 frames of "I love you ..."
9 frames for "I love you ..." to undergo the 90% to 10% opacity change
6 frames of just the ellipse-scanlines-(pink background)
9 frames for the appearance of "and miss yo"
14 frames of "and miss you"
9 frames for "and miss you" to undergo the 90% to 10% opacity change
6 frames of just the ellipse-scanlines-(pink background)

The above breakdown shows another reason why I wanted 77 total frames instead of 66. That is, the additional 11 frames allowed me to do more with the text.



---------------------------------------------------------------------------------------------------------
“Being deeply loved by someone gives you strength, while loving someone deeply gives you courage.”
Lao Tzu

“Love is that condition in which the happiness of another person is essential to your own.”
Robert A. Heinlein, Stranger in a Strange Land

“Love is an irresistible desire to be irresistibly desired.”
Robert Frost
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:50 PM

[larryb123456]

This animated GIF userbar is for MSFN members and visitors to the site who have billions of dollars -- (or even paltry millions) -- invested in Swiss bank accounts, http://postimage.org/image/4ie0imqgx/



This is a frame-by-frame animation: 138 unique frames, 0.09 sec display time per frame, 255 colors, 350x19px, 209 KB. A 5-frame animated GIF Swiss flag is scrolled vertically at a rate of 1 pixel per frame. Each "pulsation" on the letters in the word "Peace" stays in place for 3 frames before moving on to the next letter, so the display time for each of these pulsations is 3x(0.09sec)=0.27sec. For the sake of simplicity (i.e., image "purity"), I didn't use an ellipse layer in this userbar, and the background is a solid blue color, rather than a textured blue, which I would have normally employed.

This userbar is very similar to the European Union flag userbar shown in my Post # 316, but it has an added dimension in that 2 different lines of text are incorporated (i.e.,"I am proud ..." and "Swiss motto: ...").
In addition, I didn't use opacity changes to make each of these phrases disappear and appear, as I normally do. Each phrase is displayed for a certain number of frames, then the letters are pulsed, and then, at the end of the pulsing, the phrase simply and abruptly disappears for a while before the other phrase abruptly appears. Of course, this appearance/disappearance pattern is repeated indefinitely as the animation loops over and over.
All this may be clearly seen by watching the animation.

To be more precise, the 138 frames are accounted for as follows (my frame 1 occurs when the flag first enters the userbar interior in its upward motion):
27 frames to pulse "I am proud to be from Switzerland"
8 frames showing just the background where this lettering was
21 frames displaying non-pulsed "Swiss motto: ..."
30 frames to pulse "Swiss motto: one for all, all for one"
8 frames showing just the background where this lettering was
44 frames displaying non-pulsed "I am proud..." This is a rather large number of frames because it had to accommodate the 15 frames to pulse "Peace" and, after "Peace" was pulsed and it disappeared, I kept "I am proud..." displayed for an additional 12 frames to provide a pause before the flag started its vertical scrolling again and "I am proud..." became pulsed again.
I like the fact that "I am proud to be from Switzerland" is displayed for so many frames, because that is the main message in the userbar.

As a final note, the background of this animation is, in itself, a 2-frame animated GIF, as I've used in earlier Posts. Frame 1 has diagonal white scanlines with a 3px horizontal spacing. Frame 2 was made by moving Frame 1's scanlines to the left by 2px. As these 2 background Frames alternate from frame to frame in the main animation, the illusion of motion is created.



---------------------------------------------------------------------------------------------------------
"Switzerland" spelled backwards is "dnalreztiwS" and *NOT* "dnallerztiwS" !
larryb123456
---------------------------------------------------------------------------------------------------------

This post has been edited by larryb123456: 25 August 2012 - 12:50 PM