 |
Lesson
Plan |
Details
|
Title
|
Typography
on the Web
Flash 4 Intro
DHTML Intro |
|
Time Allotment
|
4 hrs
|
Reading / References
|
Objectives (Typography)
- Review typography.
- Typography on computers.
- Typography on the Web.
- Embedding Fonts
Objectives (Flash)
- Become familiar with the basic tools of Flash
- Generate some simple animation sequences
- Embed Flash document into a Web page
Objectives (DHTML)
- Intro to DHTML
- Look at some examples
Coursework / Lab Work
Exercise (Fonts)
- Download the Microsoft
Web Embedding Fonts Tool (WEFT) from Microsoft.
- Install the tool.
- Go to the WebMonkey site for information/tutorials
on fonts and using the tool.
- Try creating a document using the tool.
Exercises (Flash)
- Using the WebMonkey Introductory tutorial as a guide, try creating a
sample Flash movie. Start by creating a movie that has your name appear on
the left hand side of the screen and have it move to the right spinning and
getting larger as it moves across the screen. Create multiple layers. Insert
colored objects (i.e. triangle, rectangle, circles) in each of the layers.
Have the objects synchronize with different keyframes and set the tweening
between the keyframes to motion.
- Experiment with some of the samples included with the installation of
Flash. (Also off TallTech FTP) ftp://ftp.talltech.com/student/shared/Flash4/samples
- Try some of the practice exercises that come with the installation of
Flash. (Also off TallTech FTP) ftp://ftp.talltech.com/student/shared/Flash4/lessons
Exercises (DHTML)
- Complete the tutorial on the DOM: http://www.webcoder.com/howto/15/index.html.
You will not only get a chance to revisit the DOM, but you will see how
DHTML can be used to make the web more dynamic.
- Follow through some of the lessons outlined in Dynamic HTML Developer Zone
http://www.projectcool.com/developer/dynamic/
- Go to http://www.talltech.com/student/shared/dhtml/zoomtext.htm
and observe the result. Do a View, Source and save the code to your floppy.
Try adapting the script for your own use using your own URL and page text.
- Try the following code:
<HTML>
<HEAD>
<TITLE>Crossbrowser DHTML -Browsercheck</TITLE>
</HEAD>
<script language="javascript">
<!--
//if explorer (4.x)
if (document.all) {
layerRef='document.all'
styleRef='.style.'
}
//else if netscape (4.x)
else if (document.layers) {
layerRef='document.layers'
styleRef='.'
}
else{
location.href="not4x.html"
}
function show(){
eval(layerRef+'["divTest"]'+styleRef+'visibility="visible"')
}
function hide(){
eval(layerRef+'["divTest"]'+styleRef+'visibility="hidden"')
}
//-->
</script>
<BODY>
<a href="javascript:hide('divText')">hide1</a>
<a href="javascript:show('divText')">show1</a>
<div id="divTest" style="position:absolute;
left:100; width:190; height:400; top:200">
This is the text that hides and
shows
</div>
</BODY>
</HTML>
Assuming that your browser is 4.x, you
will be able to show and hide the block of text titled "This is the text
that hides and shows"
- Try loading the following examples (from the Dynamic HTML black
book). View the source! Also try them with both browsers...
http://www.talltech.com/student/shared/dhtml/BUBBLE.HTM
http://www.talltech.com/student/shared/dhtml/BUBBLE2.HTM
http://www.talltech.com/student/shared/dhtml/BUB_FONT.HTM
http://www.talltech.com/student/shared/dhtml/BUB_JSS.HTM
http://www.talltech.com/student/shared/dhtml/BUB_NS~1.HTM
http://www.talltech.com/student/shared/dhtml/BUB_OBJ.HTM
http://www.talltech.com/student/shared/dhtml/BUB_VB.HTM
http://www.talltech.com/student/shared/dhtml/FADE.HTM
http://www.talltech.com/student/shared/dhtml/LAME1.HTM
Demo (Fonts)
- File size/quality: Bitmapped vs. vector graphics, sounds, etc.
- Parts of the screen:
- Toolbar palette - helps you create and edit images
- Stage - where you draw your graphics and preview your movie
- Timeline - acts as the storyboard which represents elements in your
stage at different time intervals
- Inspector palettes - properties of objects
- Library - where you can store and refer to objects you create or
import
- Set general attributes: Modify, Movie
- Drawing tools: pencil, line, oval, box
- Rename the layer to something more relevant. (double click the layer name)
- Keyframes - frames where you define changes in the animation. Insert,
Keyframe
- Converting your objects to symbols. Insert, Convert to Symbol
- Making the object move - using keyframes.
- Using the tweening tool to smooth the animation. (Properties between
keyframes)
- Creating additional layers
- Making an object move on a non-linear path. Insert, Motion Guide
- Using rotation
- Using scale
- Importing sound
- Adding sound to an animation sequence.