View
217
Download
0
Category
Tags:
Preview:
Citation preview
1
INE 1020 Introduction to Internet Engineering
Tutorial 4 All about Lab 3
Prepared by Patrick Tsang 26/09/03
2
Overview
Lab 3 Information How to do image maps More on HTML Macromedia Flash tutorial
3
Lab 3
Deadline: 23:59:59 on 10th October Email submission including:
1. The URL of your webpage containing the image map
2. The URL of the page containing the frame-by-frame animation
3. The tweened animation executable as an attachment
4. Answers to the questions
4
Lab 3
Entitle your email with “[INE 1810][Lab 3][<8-digit student id>]”
Work that can not be accessed: Zero mark
You are allowed to submit TWICE only, third and onwards submission will be ignored
Grading – refer to lab menu
5
Image Map
You have an image on a page What does this HTML code mean?
<a href=“page.htm”><img src=“image.gif”></a>
What if: Clicking on different region brings you to diff
erent pages You’ll need “Image Map”
6
Image Map
7
Image Map<html><body><p>Click on one of the planets to watch it closer:</p><img src="/images/planets.gif" width="145" height="126" usemap="#planetmap">
<map id="planetmap" name="planetmap">……</map>
<p><b>Note:</b> We use both an <b>id</b> and a <b>name</b> attribute in the map tag because some versions of Netscape don't understand the id attribute.</p>
</body></html>
8
Image Map<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun“ href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury“ href="mercur.ht
m"><area shape="circle" coords="124,58,8" alt="Venus"href="venus.htm">
</map>
9
More on HTML -- “Target” Target & Frame
<html>
<frameset cols="120,*"><frame src="tryhtml_contents.htm"><frame src="tryhtml_frame_a.htm" name="showframe"></frameset>
</html>
10
11
More on HTML -- “Target”
Target & “A” Tag<a href=“page.htm” target=“______”>link</a>
1. “_blank” -- New browser window2. “_parent” -- Parent frame3. “_self” -- The frame itself4. “_top” -- Top level frame5. “[framename]” -- Specified frame
12
Macromedia Flash
A Macromedia Product Small file size, high quality animation Produce interactive, animated movies Interactive (web) applications stunning graphics and multimedia effect
s www.macromedia.com
13
14
Timeline, where you arrange your movie
Timeline, where you arrange your movie
Drawing area, where you display your movie
Drawing area, where you display your movie
15
Assign actions to each frame to control the flow
Assign actions to each frame to control the flow
16
Many actions to satisfy your need
Many actions to satisfy your need
17
Symbol is like a character in a film, instances can be generated from a character
Symbol is like a character in a film, instances can be generated from a character
18
Different types of symbol have their own capabilities
Different types of symbol have their own capabilities
19
Each instance can have their own actions
Each instance can have their own actions
20
play() and stop() control the start/stop
play() and stop() control the start/stop
21
By using goto() you can ask the movie to jump to a specific frame
By using goto() you can ask the movie to jump to a specific frame
22
.fla is the source file
You’ll need to export it to .swf for viewing
.fla is the source file
You’ll need to export it to .swf for viewing
23
How to do tweening?How to do tweening?
24
Create a symbol in the library, put an instance of it on a keyframe as a starting point
Create a symbol in the library, put an instance of it on a keyframe as a starting point
25
Here we create a Graphic symbol
Here we create a Graphic symbol
26
Now in another timeslot, insert a keyframe to indicate the end of the tween
Now in another timeslot, insert a keyframe to indicate the end of the tween
27
In this ending frame, modify the instance a bit, like dragging it to another position
In this ending frame, modify the instance a bit, like dragging it to another position
28
Go back to the starting frame, select “Motion” tweening
Go back to the starting frame, select “Motion” tweening
29
You should see an arrow from start to end, indicating the whole time interval of the tween
You should see an arrow from start to end, indicating the whole time interval of the tween
30
Before you can view your work outside Flash, you need to publish it
Before you can view your work outside Flash, you need to publish it
31
Depending on what you want,
you can just generate a .swf, or together with a HTML file.
You can also generate a .exe file
Depending on what you want,
you can just generate a .swf, or together with a HTML file.
You can also generate a .exe file
32
You should be able to find them here
You should be able to find them here
Recommended