1. 1 INE 1020 Introduction to Internet Engineering Tutorial 4 All about Lab 3 Prepared by Patrick Tsang 26/09/03

2. 2 Overview  Lab 3 Information  How to do image maps  More on HTML  Macromedia Flash tutorial

3. 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. 4 Lab 3  Entitle your email with “ [INE 1810][Lab 3][ ] ”  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. 5 Image Map  You have an image on a page  What does this HTML code mean?  What if: Clicking on different region brings you to different pages  You ’ ll need “ Image Map ”

6. 6 Image Map

7. 7 Click on one of the planets to watch it closer: <img src="/images/planets.gif" width="145" height="126" usemap="#planetmap"> … Note: We use both an id and a name attribute in the map tag because some versions of Netscape don't understand the id attribute.

8. 8 Image Map

9. 9 More on HTML -- “ Target ”  Target & Frame

10. 10

11. 11 More on HTML -- “ Target ”  Target & “ A ” Tag link 1.“ _blank ” -- New browser window 2.“ _parent ” -- Parent frame 3.“ _self ” -- The frame itself 4.“ _top ” -- Top level frame 5.“ [framename] ” -- Specified frame

12. 12 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

13. 13

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

15. 15 Assign actions to each frame to control the flow

16. 16 Many actions to satisfy your need

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

18. 18 Different types of symbol have their own capabilities

19. 19 Each instance can have their own actions

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

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

22. 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. 23 How to do tweening?

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

25. 25 Here we create a Graphic symbol

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

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

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

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

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

31. 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. 32 You should be able to find them here