:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Teaching the Grid and Hierarchy
Objective
Teach someone the modular grid and hierarchy. You will be using Flash to animate a selection of solutions from project one. The animations shows the audience how to use the grid and how to create something visually clear (clear hierarchy.) and interesting.
Definition:
A typographic hierarchy expresses the organization of content, emphasizing some elements and subordinating others. A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to pick and choose among its offerings. Each level of the hierarchy should be signaled by one or more cues, applied consistently across a body of text. A cue can type size, style, color, horizontal or vertical alignments, placement, leading, or tracking. Infinite variations are possible.
Definition:
A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. These modules govern the placement and cropping of pictures as well as text. In the 1950s and 1960s, Swiss graphic designers including Gerstner, Ruder, and Müller-Brockmann devised modular grid systems.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Elements you must use
-- Define modular grid (both visually: show us the lines and verbally)
-- Define hierarchy. (use given definition)
-- Animate Set 2 or any 3 layouts (you can stay in a set or mix and match)
-- Begin or end the animation Your Name, Elements of Typography 2011, professor Herstowski (consider how that animates on the screen)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
We will be using flash and learning how to...
-- motion tween
-- shape tween
-- scenes
-- sound
-- pause and play
Animation Considerations
Consider transitions how do the elements of a layout come on and off the screen? Timing should not be overly consistent (same speed would be like a monotone lecture).
A consistent (yet sometimes unexpected use of transitions will hold your motion together as a cohesive whole. Be careful that it doesn't drag on. Use timing, pacing wisely. Where can things move faster, slower.
Length of animation: There is no set time for this animation it can be as long or short as you think is right. Does have to include all the information listed above in Elements you must use.
How do rules (the grid) build on and go off the screen?
Move onto one by one? All at once? Different Speeds? Fade on and off?
How do elements move onto the screen or transform into something else?
Fade, Slide, Scale, Grow, Shrink?
How does type move on of the screen?
Fade, Slide, Scale
We should be able to read the composition. It shouldn't move so fast we can't read it.
You may use sound.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tutorial. Thursday. 21
get the flash file off the server
open Flash
choose action script 3.0
12 frames per second
stage size 576 x 576 px
-- tools (overview)
-- timeline
-- stage
-- inspectors
-- layers everything should be on its own layer (you will have lots of layers)
symbols: in flash an element must be a symbol to animate it.
1) symbols, transparency = alpha (fades on or off the screen)
a) Draw a rectangle
Modify> Convert to Symbol
we are going to create a motion tween but nothing will move it will only fade onto the stage.
12 frames = 1 second
go out to frame 15 and hit F5
(on a laptop you are going to have to go up to Insert > Timeline > f5)
select the rectangle
go up to Insert > Motion Tween
you will see the bar turns blue that means there is a motion tween
make sure the rectangle is selected, and that you are on frame one and change the alpha to 0 (color effect)
alpha is how you effect Transparency
with the rectangle still selected go to frame 15 and change the alpha to 40
save your file onto your files (yourname_test_01)
space bar will play the motion
or
command + return will create a swf file
b) using type. on a new layer: type in the word "Currently" and repeat changing the alpha (fades on or off the screen)
b) using type. convert to symbol. use a filter
c) using a rule. make a rule fade on or off the screen.
duplicate a rule, filter blur
save
2) symbols, motion tween
make type move onto the screen.
make several rules move onto the screen
animate the rule coming onto the stage
covert to symbol
create motion tween
nudge it on the last frame
move it off frame in the fist frame
save
hit apple return or Control > test movie
that will make a swf file
3) shape tweens
line to rectangle
box to fill stage
save
4) scenes
make new scene
try to make something move
make something fade in or out
make something rotate
save.
and it loops so lets now stop the movie
make a new layer
label it actions
drag it to be the first layer / top layer
on the last frame of your timeline add a keyframe
go to Window > Actions
Timeline control > stop ()
HOMEWORK (this is going to take you at least 4 hours, to do it well and prepare you for the week ahead it should take you longer)
I added links in the upper left if you wanted to check out some more flash examples.
Need more tutorials: check out lynda.com
Flash studies, using flash "sketch" explore different transitions and timing. Practice timing if you want something to move slow make move slow, want something to move fast make it fast. The more you practice timing the easier the next steps will be. Remember to use layers. Only one element can transform on a layer. Save often. And export your study(ies) as swf files for process.
*things we didn't cover in class that would be helpful...
try the transform tool.
use MOTION Tween you could transform a bar into a taller bar or square or ...
For TYPE. Type in a word. Covert it to a symbol then you can move it, scale it and or change its alpha or color...
Using flash create 4 different ways the grid come onto the screen and off
Using flash create 4 different ways the a word can onto the screen and off
Create 4 different ways to transform a word (scale: grow, shrink, track, blur)
Create 4 different ways to transform a shape (rule into a rectangle...)
After you have done your flash studies create 2 different storyboards showing and explaining how your "tutorial" will come on and off the screen. A storyboard is a clear plan so that when you start building your animation in flash you have a guide. Make the decisions on paper first. Work out transitions, note timing (fast, slow)..
how the definition(s), a composition, the grid
Remember you are teaching us how to use the grid and the rules of hierarchy. Storyboard should show...
how
the definition(s) comes on and off the screen
how is the grid revealed/built onto the screen.
how a composition is "built on the stage"/come onto the screen
how a composition transforms into the next one.
how does your title screen come onto the screen
How can one transition/change into the next one with out wiping the screen clean each time? You may determine the order of events, when to show the grid, the definition, compositions, title frame.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
THE FINAL ANIMATION MUST INCLUDE...
-- Begin or end the animation Name, Elements of Typography 2011, prof. Herstowski
-- The modular grid (both visually: show us the lines and verbally)
-- The definition of hierarchy.
-- Animation of set 2 - "The Set" (3 layouts, start with the b/w and 2 variations)
or
-- Animation of any 3 layouts (you can stay in a set or mix and match)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tuesday
Discuss storyboard
Start building in Flash
HOMEWORK
at least one composition animated.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thursday
flash questions, problems
HOMEWORK
add to your composition at least 3 composition animated and the definitions and credit screen. use scenes.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tuesday
class crit.
HOMEWORK
Finish.
Animation due Oct 6
please bring your FLASH file .fla to class so we can add interactivity to your final before you hand it in.
THE FINAL ANIMATION MUST INCLUDE...
-- Begin or end the animation Name, Elements of Typography 2011, prof. Herstowski
-- The modular grid (both visually: show us the lines and verbally)
-- The definition of hierarchy.
-- Animation of set 2 - "The Set" (3 layouts, start with the b/w and 2 variations)
or
-- Animation of any 3 layouts (you can stay in a set or mix and match)
Due: .swf file on the server and posted to your behance page
HOMEWORK
read: project three
Becoming an expert on a font. Bring out your font printed out LARGE on 11 x 17 (all capital letters, all lowercase, numbers, punctuation.) Will take at least 3 pages 11 x 17 or 6 pages at 8.5 x 11. You need the characters large so you can study them. DON't FORGET THESE on THRUSDAY (maybe print them before you leave for Fall Break?)
Post onto your blog...
Using your font please identify the following information...
_ Sans Serif or Serif
_ Classification
_ Name of the Designer (short bio off website is fine)
_ Date it was designed
Bring Letter Fountain (the red book) to class on Thursday Oct 13th.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Want to stop your movie?
1) make a new layer
2) add a key frame (f6) on the last frame
3) go to window Actions
4) paste this into the window
stop();
Have looping repeating sounds?
1) make a new layer
2) add a key frame (f6) on the last frame
3) go to window Actions
4) paste this into the window
stop();
SoundMixer.stopAll();
Want your movie to play again?
you need to make a button
1) type in "play again"
2) covert to symbol (f8)
3) double click symbol so you see an up down over hit
4) to the over add a key frame, change its color
5)
to the down add a key frame, change its color
7)
to the down add a key frame, make a box over the word
8) test button (will change state but won't do anything until we add an action)
adding actions
9) using code snippets, Timeline Navigation, double click
stop();
button_1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene);
function fl_ClickToGoToScene(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "Scene 1");
}
*** change Scene 1 to the scene you want this button to go to and play.
|