In this Post, I'm presenting a little animated GIF
mini-mini-mini "film" I made based on bphlpt's avatar,
http://i1196.photobu...OOED401KB-1.gif
This is a frame-by-frame animation: 100 unique frames, 0.10 sec display time per frame, 255 colors, 200x200px, 401 KB.
I tried different settings in my animator to see if I could reduce the KB file size without sacrificing image quality, and there were only 2 "acceptable contenders" which I'll present in my next Post, so that they don't compete visually with the animation presented in this Post.
I am the one who made bphlpt's present MSFN avatar, so I had all the Photoshop goodies I needed to get started.
In this Post, I'm going to present just a relatively brief -- (by my standards, lol) -- description of the steps I used to make the animation. I prepared a *totally complete* documentation for bphlpt, 53 MB (uncompressed), 27 MB (as a .zip file), with all the folders and files.
The most important aspect, the circling of the binary sphere, was done first and all other aspects were "piggy-backed" on top of this circling.
I made an aliased oval, 59x61px, and aligned the exact bottom-center of this oval relative to the center of the binary sphere as it is shown in bphlpt's avatar. Then I placed "position pixels" around the outside perimeter of this aliased oval with a spacing of 1px between pixels. It took 87 position pixels to complete the circling and return back to the starting point.
Then I made copies of the binary sphere and aligned a copy -- (horizontal and vertical centers) -- on top of each position pixel.
After the alignments, I deleted the position pixels, leaving all 87 binary spheres in place, characterizing the circular motion.
A test GIF for this circular motion showed that a 0.10 sec display time per frame worked great, which was good, since text effects, such as letter pulsations and "typing text", look good at this display time.
As will be discussed later, I wanted to use a 25-frame animated GIF "halo" around the binary sphere as it moves, so I knew from the outset that there would be 100 frames in the animation, with the binary sphere being motionless from frames 87-100.
But first, I put an animated highlight on the binary sphere that gets brighter, then dimmer, then brighter, etc. I wanted it to be subtle, so I thought a 10-frame animation would work well. (The 10 frames in the highlight animation would be compatible with the 100-frame main animation total with regard to looping.)
A little experimentation showed that a highlight 10-frame sequence of Photoshop brightness=0,5,10,15,20,25,20,15,10,5 worked well, giving a result that was rather subtle.
In fact, if one weren't informed that the highlight was getting brighter, then dimmer, then brighter, etc., one wouldn't even notice it in the above animation.
That's OK, IMO, because a brighter highlight would be out of place.
In incorporating the highlights into the circular motion of the binary sphere, brightness versions 5,10,15,20,25 were made and copies of these versions were aligned relative to the appropriate binary sphere positions.
After the alignments, the binary spheres were deleted, leaving the binary-sphere positions with highlights.
The 25-frame animated GIF that I wanted to make a binary-sphere "halo" from is shown here -- as "yellow flames halo" -- after resizing (so that it wouldn't overshadow the sphere),
http://i1196.photobu...rsOOED170KB.gif
The display time per frame is 0.10 sec, and the GIF looks good, so I knew it would fit in well with the 0.10 sec per frame display time of the main animation.
But it is clear that the yellow and orange are out of place in the color scheme of bphlpt's avatar.
This was corrected after a yellow flames halo was first made around the binary sphere, by using the following steps: the appropriate halo squares shown above were aligned -- (vertical and horizontal centers) -- under the appropriate positioned binary spheres and then the black backgrounds of the halo squares were removed using the Magic Wand Tool (Tolerance:32, Anti-aliased setting).
The colors of the yellow flames halos were changed in 2 steps: 1) the layers were desaturated; 2) a Color Balance was applied according to [Blue(+100)] for the Midtones and [Blue(+100), Green(+50)] for the Highlights.
I really like the blue halo around the moving binary sphere. It looks like "vapor" to me.
I moved the mushroom back and forth on The Old Man's beard during frames 87-100, when the binary sphere was stationary at its bottom-most position. That is a total of 14 frames.
After a little experimentation, I found a scenario that works out well: the mushroom moves in increments of 3px up and 3px over to the left per frame on the way to the Old Man's nose, and then those exact movements are reversed on the way back to the starting point, which is the position shown in bphlpt's MSFN avatar.
Denote this starting point by position0.
Only 3 other unique positions of the mushroom are required to completely characterize the mushroom's motion on The Old Man's beard. Denote these positions by position1, position2, and position3.
So, the following "associations" are made: frame87, position0; frame88, position1; frame89, position2; frame90,position3; frame91, position2; frame92, position1; frame93, position0; frame94, position1; frame95, position 2; frame96, position3; frame97, position2; frame98, position1; frame99, position0; and frame100, position0.
This position sequence allows for the mushroom to move forward and back 2 different times.
The reason the mushroom moves quickly, of course, is that it is moving in large pixel increments per frame. With the 3px up (or down) and 3px over to the left (or right) motion described above, the Pythagorean Theorem gives the diagonal distance in pixels that the mushroom moves per frame as (3
2 + 3
2)
1/2 = 4.24.
I think that this rapid mushroom motion is in good contrast to the slower motion of the binary sphere.
It was just luck -- (i.e., God's reward to me for working so hard on this animation......lol) -- that the 14 frames (i.e., frames 87 through 100) allow the mushroom to move forward and back on the beard twice, before the binary sphere starts moving again.
The simplest way to finish this discussion is to list what occurs in each frame and the rationale behind it.
I knew that I wanted <coding/>since time<began/> to "disappear" via opacity changes -- (as I've done in earlier Posts) -- in the 9-frame opacity sequence of 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, and 10%. After that 10% frame, only the background would be seen where that lettering had been.
I knew that I wanted <coding/>since time<began/> to then appear as if it were "typed in", one character at a time, after "X" frames showing only the background.
This "typing" would require 26 frames since this text has 26 characters.
I tried "X"=20 frames -- (and the "math" dictated that <The Old Man/><coding/>since time<began/> would remain at 100% opacity for 45 frames) -- and a test GIF showed that this worked well.
I centered these 45 frames around frame 93 so that the disappearance and typing of <coding/>since time<began/> would not compete for attention with the mushroom moving back and forth on The Old Man's beard. (Recall that the mushroom moves in frames 88-99.)
So, the frame scenario is as follows:
frames 71-15 (i.e., frames 71-100 and frames 1-15): 45 frames of 100% opacity <The Old Man/><coding/>since time<began/> centered around frame 93. (For these frames, I made the letter color the same as that of the outline around "bphlpt".)
frames 16-24: 9 frames for <coding/>since time<began/> to disappear in an opacity sequence of 90%,...,10%.
frames 25-44: 20 frames with just <The Old Man/>.
frames 45-70: 26 frames in which <coding/>since time<began/> appears (i.e., is "typed in") one character at a time.
As a final touch, I "pulsed" the letters in <The Old Man/> during frames 29-40. This centers the pulsing in the 20 frames during which <coding/>since time<began/> is not present.
--------------------------------------------------------------------------------------------------------
The secret to film (or an animated GIF) is that it's an illusion.
George Lucas
The italicized parenthetical was added by me.
--------------------------------------------------------------------------------------------------------
This post has been edited by larryb123456: 08 September 2012 - 02:04 PM
larryb123456, on 16 September 2012 - 09:32 PM, said:
Frontpage
Forums
Tutorials
Members
Calendar
Subscription
Donate
Links
Contact 
Help
Back to top