1 / 32

INE 1020 Introduction to Internet Engineering

INE 1020 Introduction to Internet Engineering. Tutorial 4 All about Lab 3. Prepared by Patrick Tsang 26/09/03. Overview. Lab 3 Information How to do image maps More on HTML Macromedia Flash tutorial. Lab 3. Deadline: 23:59:59 on 10th October Email submission including:

audi
Download Presentation

INE 1020 Introduction to Internet Engineering

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: • The URL of your webpage containing the image map • The URL of the page containing the frame-by-frame animation • The tweened animation executable as an attachment • 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 different 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.htm"> <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. More on HTML -- “Target” • Target & “A” Tag <a href=“page.htm” target=“______”>link</a> • “_blank” -- New browser window • “_parent” -- Parent frame • “_self” -- The frame itself • “_top” -- Top level frame • “[framename]” -- Specified frame

  11. Macromedia Flash • A Macromedia Product • Small file size, high quality animation • Produce interactive, animated movies • Interactive (web) applications • stunning graphics and multimedia effects • www.macromedia.com

  12. Timeline, where you arrange your movie Drawing area, where you display your movie

  13. Assign actions to each frame to control the flow

  14. Many actions to satisfy your need

  15. Symbol is like a character in a film, instances can be generated from a character

  16. Different types of symbol have their own capabilities

  17. Each instance can have their own actions

  18. play() and stop() control the start/stop

  19. By using goto() you can ask the movie to jump to a specific frame

  20. .fla is the source file You’ll need to export it to .swf for viewing

  21. How to do tweening?

  22. Create a symbol in the library, put an instance of it on a keyframe as a starting point

  23. Here we create a Graphic symbol

  24. Now in another timeslot, insert a keyframe to indicate the end of the tween

  25. In this ending frame, modify the instance a bit, like dragging it to another position

  26. Go back to the starting frame, select “Motion” tweening

  27. You should see an arrow from start to end, indicating the whole time interval of the tween

  28. Before you can view your work outside Flash, you need to publish it

  29. Depending on what you want, you can just generate a .swf, or together with a HTML file. You can also generate a .exe file

  30. You should be able to find them here

More Related