[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].

And that's all there was to it !!!

---------------------------------------------------------------------------------------------------------
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
---------------------------------------------------------------------------------------------------------

[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.

And that's all there was to it !!!

---------------------------------------------------------------------------------------------------------
"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
---------------------------------------------------------------------------------------------------------

[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.

And that's all there was to it !!!

---------------------------------------------------------------------------------------------------------
“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: 26 May 2012 - 01:41 AM

[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.

And that's all there was to it !!!

---------------------------------------------------------------------------------------------------------
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: Yesterday, 02:23 AM