 Composer Animation Tutorial on Focus Initiation Using Color
This is a simple step out of b15ginz / Matt Ginsberg's really
awesome video tutorial on how to add the blue flash background
to a button that is hovered over. We are talking basic
animation techniques involving color changing during focus
initiation. Some detail is provided to help limit frustration.
To get a feel for this method, open up one of your theme's
.cp Composer files and unlock one of its buttons and click on
it in the Objects pane. In the Inspector pane, click on Theme
Button Animation. In both the Focus In and Focus Out boxes,
select 'Fade In'. Do the same thing for a neighboring button.
Save and use Theme Builder and Simulator to see what happens
as you move from one button to the next and back, etc. Nice.
Now go back to Composer and again highlite your first button.
In the Inspector's pane 'Launch Application', your button
will have two Images, Normal and Focus. Later in this tutorial,
you will add a third Intermediate Image of your choice.
More than three images are also possible.
Near the upper left, click on Edit. Your button's Normal image
will appear alone in a work area to the left. Study both the
Objects pane and the horizontal animation timing schedule along
the bottom of Composer. In this schedule, note that there are
four states: Initial, Focus In, Focus Out, and Activate each with
10 time steps. Composer opens up this schedule on the left most
one, Initial, which is revealed in white; hovering below its 1
evokes its 'Initial State' info-bubble. In the upper right
Objects Pane, notice that your Normal Image visibility (far left
column's wonky pair of spectacles or ladybug) is ON and your Focus
is OFF. In fact all 10 steps of this Initial State are the same.
(Both your Normal and Focus images can also have their own innate
analog transparencies/opacities.)
You may always exit this secondary edit state by right clicking
this work space and selecting 'End Editing.'
Next, click the 1 for the second state (Focus In) and observe that
your Normal and Focus Images' visibilities reverse. Follow along
with the last two states called Focus Out and Activate and note
their visibility changes. Hmmm.....!!!
OK, now gin up an Intermediate Image to go along with your
button's Normal and Focus Images. My Theme buttons are 70 x 54
pixels and I have chosen a photo of a swimming pool nuclear
reactor with its haunting blue Cerenkov radiation. I can
trivially change its color in PSE-7 to other basic colors. I use
the exact same size for this intermediate image. In the attached
examples, it is yellow in color for the entire third row of
buttons.
Again select a button and edit it as above, making certain that
it is unlocked in the Objects pane; the Normal state's button
appears alone. Following the b15ginz video tutorial, go to the
uppermost File in the Windows task bar and select Import (ctrl+M)
and navigate to your intermediate image and load it. It will
appear along with your Normal image, but offset to it. On the
right Objects pane, find your file's entry and drag it to the
bottom, below your Normal and Focus entries. Click on your
Normal entry and note its coordinates along the top of the
Composer workspace (eg. 180, 240), near the top left of center.
Click on your new intermediate image in the Objects pane, and,
unlocking it, enter these same coordinates into its boxes.
Your new intermediate image will disappear exactly behind your
Normal image.
Exit this edit session and export and save as usual; check with
Theme Builder and Simulator to make sure all is well. If so,
re-enter Composer and again enter the secondary edit session,
(upper left) with your Normal image appearing on the left
work space. In the Objects pane, you need to see three entries
Normal, Focus, and your new Intermediate. Unlock all three entries.
Along the bottom timing schedule, notice that the Initial State's
ten steps are highlighted in white. In the Objects pane on the
upper right, clear the visibility for Focus and Intermediate.
In the bottom horizontal timing schedule, click the second 1
so that the Focus In State with its ten steps becomes highlighted
in white. In the Objects pane, turn the Normal image visibility
OFF and the Focus and Intermediate visibility ON. Next, click
this state's 10th step and turn the normal and intermediate
image visibilities OFF and the focus image ON. Next, click the
third state's 1 so that the focus out state appears in white.
Make sure that the normal image visibility is ON and the other
two are OFF. Click the fourth 1 to the right (activate state)
and make sure that focus image has visibility ON and the other
two OFF.
Here is the truth table for these machinations:
INITIAL FOCUS IN FOCUS OUT ACTIVATE
NORMAL 1 0 1 0
FOCUS 0 1 0 1
IMAGE 0 (1 -->0 at 10) 0 0
Exit this edit session and follow the Yellow Brick Road!
Below are examples from my Custom Home Screen. The first three
screen shots simply show the effect of changing the wallpaper
from S2 initial, to colorful paint smears, to HAL 9000's eye.
In Theme Builder, I usually always leave checked Focused Object
remains in Focus. In all three examples, the intermediate images,
the subject of this tutorial, have decayed away leaving only
the focus in state. In the first shot with S2 initial, Y! Mail
is in focus and clicking will open my entire Yahoo mail box.
In the second and third shots, Drudge is in focus and will stay
in focus. These focus images have lots of transparency.
Now for the new intermediate image dynamics. In the fourth shot,
Accuweather Radar has been hovered over: its intermediate (yellow)
state is growing and the previously focused Drudge is decaying.
In the fifth shot, the intermediate Accuweather State is near
its peak and Drudge has returned to its Normal State. Finally,
the sixth screen shot shows Accuweather Radar in Focus. Wow !
At this time, from row one at the bottom to row six at the top,
my intermediate images are blue, green, yellow, red, violet, and
purple. Doctor Neutron
|
Thread Author
#
Linear Mode
