Final Reflection

Final Reflection:

I have learnt a lot from this module which include:
1. Blog is a powerful learning platform which is an ideal tool for sharing our ideas and opinions.

2. The suggestions and recommendations on my blog from classmates I received were valuable.

3. We can share and exchange our information and knowledge effectively and interactively.

4. My IT skills were well-developed.

5. The course aroused my interest in visual representations as well as different kinds of technical tools.

6. The Lecturer was very helpful and patient. I appreciate his suggestions and opinions which definitely helped me a lot to explore my skills of creating learning object and Flash.

Design A Visual Display

Aim of Visual Display:

Introduces layers of Atmosphere

Links: http://iln.cite.hku.hk/com/1374/users/swryuen/task2.ppt

Please view the details at the bottom of my blog. Your comments are welcome.

Final Product Reflection

Group Project:

Title: Hong Kong Tourist Attractions
Top attractions (by YEUNG Kit-ping)
Parks (by Ronda)
Museums (by YEUNG Kit-ping)
Heritage Tour (by YEUNG Kit-ping)
Local Food (by Ronda)
Useful Links (by Ronda)

1. Top Attractions
8 top attractions: Lung Yeuk Heritage Trail, Ping Shan Heritage Trail, Ngong Ping 360, Big Buddha, Ocean Park, HK Disneyland, the Peak and Wong Tai Sin Temple.
Tools: hotspots

2. Museums
Great museums in Hong Kong.
Tools: hotspots

3. Heritage Tour
Remarkable heritage in Hong Kong mainly traditional chinese buildings: walled villages, ancestral hall and temples in the New Territories.
Tools: Photostory

4.PARKS
A photostory which is about 4 minutes, with background music and colourful descriptions for each photo.
Tools: Photostory

5.LOCAL FOOD
Small Hong Kong map with six major districts, the viewers can click the stars to check the details.
Tools: Hot spots

6.USEFUL LINKS
Hyperlinks to the appropriate sites.
Tools: Useful Links

Theories:

According to Tufte (2001), "Excellence in statistical graphics consists of complex ideas communicated with clarity, precision and efficiency."

Our learning object contains the following graphical displays features:

1. Serve a reasonably clear purpose: description, exploration, tabulation or decoration.

2. Reveal the information in details, from a broad overview to the fine structure.

Meanwhile, Tuufte (2001) states that graphical displays should show the data, present many numbers in a small space, make large data coherent, closely integrated with the statistical and verbal descriptions of data and avoid distorting.

On the other hand, our project follows the principles of Graphical Excellence, Graphical Entegrity and sources of integrity and sophistication. (Tufte, 2001)

1. Graphical Excellence:

-Well-designed presentation of information: Top attractions, museums, local food and parks photostory.

-Consists of ideas communicated with clarity, precision and efficiency: Two videos (Parks and Heritage Tour)

-Gives the tourists the greatest number of information in the shortest time in the small space: Tools include photostory, hotspot, useful links and interactive buttons.

2. Graphical Integrity:

-Clear, detailed and labeling were used to defeat graphical distortion and ambiguity.

-Write explanations on the graphic.

-Label important details in the data.

In conclusion, the graphical competence demands three different skills: the substantive, statistical and artistic. The expertise should participate in the design of data graphics and achieve the principles of statistical integrity and graphical sophistication.

Reference:

Tufte, E (2001). The visual display of quantitative information. Graphics Press LLC.

Theories:
Introduction to Mulimedia learning:
According to Mayer (2005), Multimedia is:

1. presenting both words (such as spoken text or printed text) and pictures (such as illustrations, photos, animation and video.

2. By pictures, the materials is presented in pictorial form, such as using static graphics, including illustions, graphs, diagrams, dynamic graphics and animation.

Our group project is in form of multimedia because pictures were presented as animation, words were presented as colourful text and pictures were presented as illustrations.

Meanwhile, multimedia refers to the presentation of words and pictures. Learning refers to the learner's construction of knowledge. Readers can build mental representations from words and pictures. Our project is the focus of Mayer's cognitive theory of multimedia learning.

Finally, our project involves multimedia instruction which is presenting words and pictures to promote learning in a multimedia environment.

On the other hand, our project has the following positive effects:

1. Response Strengthening: strengthening the connection between a stimulus and a response.

2. Information acquisition: Add information to the memory.

3. Knowledge construction: Building a coherent mental structure.

4. People can learn better with collaborative online learning activities and learn better from animation than from static diagrams.

5. Positive effects of combing texts and pictures:
Numerous studies have shown that students learn better from words and pictures than from words alone. (Mayer, R, 2005)

Coherence and contiguity: learn better if the words and pictures are semantically related to each other (the coherence condition).

Modality: learn better when pictures are presented with spoken text instead of written text.

Sequencing: it is better to present a picture before a corresponding text than after the text.

As result, our project increase the reading ability and prior knowledge of students.

Reference:
Mayer, R (2005). The Cambridge handbook of multimedia learning. New York, NY: Cambridge University Press.

Two FLASH movies Links:

http://iln.cite.hku.hk/com/1374/users/kpyeung/HK_attractions_ping_rev.swf (by Ping)

http://iln.cite.hku.hk/com/1374/users/swryuen/all2.swf (by Ronda)

Group Project: Reflection

Group Project Title: Hong Kong Tourist Attractions
Group members: Yuen Sze Wai Ronda and Yeung Kit Ping
Ronda's Part: Parks, Local Food, Useful links

Reflections:
In my group project, I take responsibility for three parts: Parks, Local Food and Useful Links.
1.PARKS: a photostory which is about 4 minutes, with background music and colourful descriptions for each photo.
2.LOCAL FOOD: small Hong Kong map with six major districts, the viewers can click the stars to check the details.
3.USEFUL LINKS: hyperlinks to the appropriate sites.

Advantages:
1. The Flash can motivate the students, visitors and readers.
2. It provides an effective platform for communication, collaboration, applications, and mobile learning.
3. It meets accessibility requirements with less hassle and more interactivity.
4. It provides e-learning for overseas and local tourists. The tools and services are used for rapid and robust e-learning development.
5. It allows educational agencies to be more efficient and effective by delivering digital experiences to students through videos, pictures, photos and web resources.
6. Readers can access, organize and save the useful links.

Limitations:
1. It was time consuming to make the colourful texts and images.
2. I could not embed the video with audio narration. The visitors probably would not be able to hear an audio narration.

Conclusion: A good experience for using the Flash. In fact, I learnt that it can improve efficiency in delivering superior digital interactions.
Link of my Flash:
http://iln.cite.hku.hk/com/1374/users/swryuen/all2.swf
Your comments are welcome.

Group Project: Useful Links

In my group project, there are seven useful links for the readers.
1. Hong Kong Outdoors:
Hong Kong Outdoors was founded by writer, photographer and wildlife enthusiast. The web site introduces the wild side of Hong Kong, covering activities from hiking to birding, and places from Fan Lau in the southwest to Tung Ping Chau in the far northeast of the territory.

2. Hong Kong Tourism Board:
This Website presents information about Hong Kong by data, photos, pictures, videos, audio and other materials. Example include: tourist attractions, food districts, transportation, shopping areas and heritage.

3. Explore Hong Kong Outlying Islands:
This website introduces major Hong Kong outlying islands, especially transport, shopping, events and sights.

4. Time Out: Hong Kong:
Hong Kong offers a huge range of attractions, both urban and rural. This website introduces the Victoria Harbour, local street markets, Buddhist temples, clubs and some of the best restaurants . The guide also include details about shopping, hotels, transport and nightlife.

5. Hong Kong Fun in 18 Districts:
This website provides information about 18 Districts in Hong Kong.

6. Hong Kong Travel Guide:
This website introduces specific topics of Hong Kong, such as activities for children, sports, food, shopping and Hong Kong travel tips.

7. Hong Kong Tour:
This website introduces Hong Kong by web photos, video clips, wallpapers, screensaver, poster, games and virtualtours.

Here is the flash I have made for my group project. Your comments are most welcome.

Group Project: Food Map

Hong Kong offers a variety of seafood, international restaurants, coffee shops, bars and side stalls. My food map aims to provide information about food districts and local food in Hong Kong. Food map lists all major districts in Hong Kong Island and New Territories. They include So Ho, Causeway Bay, Stanley, Lamma Island, Tsim Sha Tsui and Sai Kung. These places of interest introduces local food specialties and good examples to the tourists. Each example contains address and trasportation of the specific restaurant.

In my group project, I have used Flash 8 to create buttons, sound, hotspots and frames with colourful pictures. The Flash 8 buttons provides interative function to the readers. When the readers click the specific area, the description and food pictures will appear.

This food topic is very interesting and attractive. The cuisine in Hong Kong can be described as a fusion of eastern and western style cuisine. Hong Kong cuisine provide an unlimited variety in every class. Therefore, international expertise has given Hong Kong the reputable label of "Gourmet Paradise" and "World's Fair of Food".

Here is the flash I have made for my group project. Your comments are welcome.

Group Project: Park photostory

In my project, I used Photo Story 3 for windows to create a video. The park story aims to provide the information about the following parks:
1. Hong Kong Zoological and Botanical Gardens.
2. Hong Kong Park and
3. H.K. Wetland Park.

Photostory is a good method to present information about tourists attractions. The photostory includes features that enable us to create a slideshow with our digital pictures with music. We can edit our pictures, create our story with music, add narration, and share them with our classmates, family and friends.

My story includes motion, music, zoom effects and picture rotation. The special effects and transitions are also included. Each park contains 8 to 9 photos.

Benefits:
1. Readers can easily view the parks photos and videos with their Pocket PC and play them back in the Windows Media Player.
2.The tourists can increase their knowlege about parks.

Your comments are most welcome.

Note: If you find this Flash as below is too small, you may view it at the bottom of my blog.

Park photostory

Photo Story 3 for Windows is a free software which lets us to put digital images together with text, music and narration in the form of a slideshow or photo-movie. We can use photostory to give a description of specific area and make a record of a trip. The multimedia resource is useful to our daily life.

Set up Photostory:
1. Rotate imported pictures and size them to fit the screen.
2. Add text with different size, font and colours.
3. Record a narration for each slide and insert a sound file in story.
4. Edit pictures by Microsoft Powerpoint (File/Save As/Save as type/JPEG File Interchange Format) and import them into Photo Story 3.

Project Photostory: Your comments are welcome. Thank you.

Draft Prototype

Prototype of "Hong Kong tourists attractions":
Original source:
http://iln.cite.hku.hk/com/1374/users/swryuen/rondaflash0423mx2004.fla

Note: If you find this Flash as below is too small, you may view it at the bottom of my blog.

Your comments are welcome!

Number Flash

Subtraction Flash:
The Flash is suitable for the children who are in the the Ages of 6 and up.

The Flash aims to teach children for the subtraction skills through interactive software "Flash 8".

Your comments are welcome.
Original source:
http://iln.cite.hku.hk/com/1374/users/swryuen/rondanumbers.fla
Two-digit Subtraction Game for Primary School Students:
Please input two digit numbers to find the result!

Dress Animation

Dress Flash
Play sound in Flash MX: It is very easy to create music in Flash. First, create a new layer for the sound file, rename it as audio. Second, click on flash 8 menu : Enter "Import" - "Import to Library", find the sound file and enter"open". Third, open the library and drag the sound file to the audio layer which have been made.

Flash Actionscript: A Stop action is the most simple form of Actionscript. When it applied to our keyframe in Flash, the movie will stop completely on that frame.
An Example: on (release), tellTarget() and gotoAndStop().

Here is the original file: http://iln.cite.hku.hk/com/1374/users/swryuen/rondashirt.fla
Your comments are most welcome!

Ball Flash

Button and Ball flash:
Procedures for creating the basic button:
1. Create the shape for the button background.etc. triangle, circle or triangle.
2. Select it by clicking on the arrow tool and dragging around the rectangle. Hit Key F8 to convert it to symbol (button)and name the button.
3. Double click on the button to get into the button editing window.
4. Create keyframes for frames 1, 2 and 3.
5. Create a new layer and call it text. Put some text on that layer , eg. play, back, part 2, or about.
6. Change different colours in each button frame.
7. In scene 1, assign different actions in the buttons, such as play, stop. The actions can control the movie in the flash.

Ball Flash: Your comments are most welcome. Thank you.

Beautiful picture (By Flash)

Beautiful Picture: showing the images of houses, stars, road and moon.

Location of the original: http://iln.cite.hku.hk/com/1374/users/swryuen/rondahouse0423.fla

Your comments are welcome.

Purpose of this exercise: to gain a basic understanding of how to use the drawing tools.

Five tools include Pen tool, Oval tool, Rectangle tool and Pencil tool.

Lesson work

Lesson Work: Your comments are most welcome!

Please click the picture to access the work .

Please click A, B or C .

Reflection on this Flash:
Problem:
1.Text covered on the bottons.
2. Poor effect of buttons.

Improvement:
1. Buttons could be improved.
2. Text could not cover the button.
3. Background colour could be added.
4. Larger buttons.

Refelection on Reading:
According to Bederson & Shneiderman (2003), information visulization is a research aiming at supporting discovery and analysis of data through visual exporation. Nowadays, Interative techniques are capable of handling a million items effectively visible and manageable on screen. For example:

1. Hardware acceleration: achieve the speed required for interation and animation.

2. Non-standard visual attributes: synthetic overlap count to enhance visulization.

3. Animation and interaction: using time multiplexing techniques to analyze the data across several views.

4. Applied techniques to treemaps and scatter plots.

5. Other techniques: Image Library, drag and drop strategy for labelling photos, extensible zoomable user interface graphics toolkit in Java, a hierarchical multi window world wide web browser, photofinder web, and zoomable user interfaces.

Reference:
Bederson, B.B. & Shneiderman, B. (2003). The craft of information visulization: readings and reflections. San Francisco, CA: Morgan Kaufmann Publishers.

Group Work Storyboard

Reflection on Storyboard:

Definition of Storyboard:
Storyboard refers to a series of diagrams that show how a project will look when completed.

My Storyboard Features:
-A series of rough sketches that show the plot, action, characters, and setting of the Interactive Visual Representation.
-A series of pictures which support the action and content that will be contained in an audiovisual sequence.
-Gives the client a good idea of the concept for our group project.

Storyboard Title: Hong Kong Tourist Attractions

Storyboard Powerpoint Link.

http://iln.cite.hku.hk/com/1374/users/swryuen/storyboard.ppt

Objective of our project:

1. To provide information about the major Hong Kong tourist attractions
2. Details: top attractions, parks, museums, heritage tour, local food, transport and useful Internet resources.
3.To develop interactive graphics in the map of Hong Kong.
4. Use Macromedia Flash to develop animation and buttons.
5. Develop Photostory by "Photo story 3 for Windows”
6. Create music, graphics, photos, narrations & illustrations in the photostory.

Improvement:

-Provide more reference links about HK tourist like "Discover Hong kong" for users to further study the places in HK.

-Simplify the content.

Other Various examples:
1. Children Animation http://www.animateonline.org/films/downloads/animate_rabbit_storyboard08.jpg
2. Art Work
http://www.artshole.co.uk/arts/artists/Mark%20Hazell/storyboard%20illustration.jpg

3. Design Comics Templates
http://blogs.sun.com/MartinHardee/resource/BalletStoryboard.jpg

4. Movie
http://www.companje.nl/images/FutureVisionStoryboard.gif

Create a digital story

Topic: Animals

Target: Primary two Students

Aim: To Identify Animals Names

Digital story by "photo story 3 for Windows".
Links: http://iln.cite.hku.hk/com/1374/users/swryuen/Animalsversion2.wmv

Reflection on Digital Storytelling:

Advantages of Animals Digital Storytelling:
1. New way of expression supported by technology.
2. Increase students’creativity and collaboration.
3. Development of traditional literacies and digital fluency.

Animals Digital Storytelling Features:
-Provide information about Animals
-Background Music
-Introduces Animals Name

My Story Development Procedures:
1. Select Topic-Animals
2. Conduct Research (Reading Books)
3. Design Storyboard (Choose Animals)
4. Collect Materials (Collect Clipart and photos)
5. Develop Story (Add sound and assemble pictures)
6. Export Video

Educational Use of Digital Story:
We can use Digital Story in many ways. Teachers can introduce students to conduct research, synthesize information and gain expertise in the use of digital communication and authoring tools. According to University of Houston, Digital Story contains the following educational goals:

Educational Goals of Digital Storytelling:

Teachers:
1. Diverse learning styles'

2. Motivation for the students.
3. Gain more Creativity.
4. Promote e-learning.

Students:
1. Use the Internet to conduct research ( analyzing and synthesizing).
2. Develop communications skills.
3. Increase computer skills by a variety of multimedia including: text, still images, audio, video and web publishing.

Reference:

University of Houston's Educational Uses of Digital Storytelling: http://www.coe.uh.edu/digitalstorytelling/

Interactive map of Hong Kong

Interactive map of Hong Kong:

Aim: To learn more skills about creating Flash buttons.

Links:

http://iln.cite.hku.hk/com/1374/users/swryuen/rondamap0409.swf

http://iln.cite.hku.hk/com/1374/users/swryuen/rondamap.fla

Please click the red star to view the details of Hong Kong.

Sun Flash

Lesson 4 Flash.

Please click the following links to access my work.

http://iln.cite.hku.hk/com/1374/users/swryuen/rondasun22.swf
http://iln.cite.hku.hk/com/1374/users/swryuen/rondasun2.fla

Reflection on sun Flash:
Improvement:
1. Background could be improved.
2. Larger Buttons.
3. More Colourful.
4. Change of the contents.
5. Text could be added .

Group Work :Design Interactive Visual Representation

Design one interactive visual representation:

We decided to develop "Hong Kong Tourist Attractions" for the visual representation.

Link :

http://iln.cite.hku.hk/com/1374/users/swryuen/Assessment2.ppt

Reference:

• http://www.vectormap.com/tour/tour.htm Hong Kong Travel
• http://www.hktvl.com/ HKTVL
• http://www.hkta.org/login.html Hong Kong Tourism Board
• http://www.hong-kong-travel.org/ Information about HK
• http://hk.travel.yahoo.com/dest/asia/ Yahoo Travel
• http://www.travelchinaguide.com/cityguides/hongkong/gkong/

Hong Kong Travel Guide

Our Group Project Working Procedures:

1. Identify a Representation

Our Topic: Hong Kong Tourists Attractions

2. Collection Information

Collect information from websites, books, newspapers, journals and Main Library.

3. Learn the Content

Read the relevant books and useful links.

Hong Kong Tourism Board-http://www.discoverhongkong.com.hk/login.html

4. Storyboard

Create Storyboard by Powerpoint.

5. Evaluate Storyboard

Read comments of classmates and teacher.

6. Develop a prototype

Use Flash 8 to develop a prototype

7. Test a prototype

8. Develop Final Product

Reflection on lesson 3

Reflection on lesson 3:
According to the Powerpoint (Session three), “We can present a lot of information in a small screen space, communicate complex ideas through visual simplicity.”
In lesson three, Professor introduces many visualization examples.

Here are the interesting examples:
1. Interactive Pictures: http://interact10ways.com/usa/information_interactive.htm
In this website, we can view many colourful pictures interactively. When the readers click one picture, many related colourful pictures will appear. It is a good and interesting experience.

2. BBC News (Urban Growth): http://news.bbc.co.uk/2/shared/spl/hi/world/06/urbanisation/html/urbanisation.stm
This visual information is presented by a rectangular maps of the Earth with Flash. Readers can easily find the specific countries in the map.

3. Market Map: http://www.smartmoney.com/marketmap/
Very attractive and powerful Flash.

4. Intentional Information Search: http://www.grokker.com/
The searching engine was developed by Groxis, Inc. which was founded in 2001, by a team of experienced executives and distinguished directors. The website enables information management and communication in our life. This visualization maximized the value of information assets for enterprises, content publishers, libraries and research-intensive organizations.

Reflection on Learning object:
According to Dr Daniel, “ A learning object is best described as a representation designed to be reused in different educational contexts.” Learning objects are involved in educational activities, especially teachers and students. Professor introduced many examples of various learning objects in the lesson. Here are the good examples of learning object:

1. Native Australian Animals
2. Language Dictionary Food
3. Moon Phases
4. Impact of Air pollution

For more information, please go to

http://www.learnactivity.com/lo/

What I have learnt from lesson 3:
Major Points:
1. Information Visualization is a process of transforming data and information into a visual form allowing someone to explore.

2. We can present a lot of information in a small screen space, communicate complex ideas through visual simplicity…

3. Information visualization examples: Intentional Information Search.

4. A learning object is best described as a representation designed to be reused in different educational contexts.

"Learning objects might reside in digital repositories, ready to be located and utilized by those involved in educational activities ."

They address:
(a) key concepts from disciplines, in visual and often interactive ways not permitted with previous technologies, for sharing of socio-historical heritage of humanity
(b) information and data that can be useful in the context of developing disciplinary-specific thinking, culture of practice, spirit of inquiry, theoretical knowledge and information work
(c) presentation of small, instructional sequences and demonstrations delivering encapsulated descriptions of some aspects of subject matter which can support learning processes by providing “just-in-time” information
(d) simulations of key equipment, tools and processes from a discipline to enable development of deep understanding of artifacts used in a culture of practice. (Danchill, 2006)

More information visualization examples:


http://interact10ways.com/usa/information_interactive.htm



http://www.smartmoney.com/marketmap/



http://www.textarc.org/



They are very interesting and funny. Please visit these websites after work.

Reference: Learning Object:http://www.learnactivity.com/lo/

Reflection on Information Visualization:
According to Gershon, Stephen, Eick, & Card (1998), “Visualization is the process of transforming data, information, and knowledge into visual form making use of humans’natural visual capabilities.”

Advantages of information visualization:
It enable users to get information fast and reach decisions in a relatively short time. Moreover, Information visualization can facilitate the user interaction with information residing on the World Wide Web.

Examples: WebBook and Web Forager.
With the increasing use of visual media, people’s visual literacy will increase. Users will become more efficient dealing with visuals and thus will get more information.
Reference:
Gershon, N., Stephen G. Eick, S.G., & Card, S. (1998). Information visualization. Interactions, March, 9-15.