When we talk about success in a learning course project, we realize that good design and planning are the main factors in the success of the project. However, creating such projects in Flash means you need to be even more concerned about planning and design, because it is the nature of Flash to support many platforms. You can publish your project to work in more that one environment, such as web and desktop, at the same time.
Planning for the project involves several important issues including project schedule, the involved team, content structure, reviewing, testing, and media specifications. These will be our topics in this article. However, we will be concerned with graphic design and content display.
We can divide media specification into two parts:
1- Planning your work in Flash, and file management
2- Interface graphic design, navigation, and content display
1 - Planning your work in Flash, and file management
Flash projects have the advantage of working on multiple platforms, such as desktop, web, or mobile devices. However, this means you need to take possible multiple platform support into account in your planning. Another consideration is whether you should build the project in one file, or separate it into several *.swf files. Each approach has its advantages and disadvantages.
One file project several advantages including:
a- It is simpler for small projects, and for the novice developer, who has trouble managing a multiple file project.
b- It avoids complex coding and problems due to losing target.
Its disadvantages include:
a- It results in big files, which could be run only on the desktop and but needs a well-configured computer to run the project without problems.
b- Complex timelines make it hard to edit, especially with other developers working on the same project
c- It makes editing and updating the project a difficult process as you have to open a large file to make a small change to, say, a sound or lesson content. Hence, you will need to re-publish the whole project, which is a waste of time and a less professional process.
Note that even in a single-file project, you should arrange your file into scenes or movie clips.
Experience has shown that separating the project into several SWF files is the best way to manage Flash projects.
It is a more professional method and several advantages including:
a- It is easy to deploy in multiple platforms, because it results in smaller file sizes that you can use on both the desktop and the web.
b- It is easy to edit and update, as you only need to edit the individual sound file or lesson content file without opening a single large file. Further, you will only need to publish the edited part not the entire project file.
c- It is a better-organized and professional way to arrange a project's file.
d- It has simpler timelines, as the timeline is distributed across all the project files.
e- It does not need an overly powerful computer configuration, as the processor only needs to deal with separate smaller files, and loads them only when needed.
The disadvantages of this method are few, but include:
1- It requires better coding skills in order to manage the code through all the project files.
2- You need to ensure that all the project files are in their correct paths to avoid navigation problems.
With multiple files, it is a good idea to use shared libraries for sharing the most used items in your project. In this way, you reduce the size of files and avoid redundancy. In addition, this enables you to edit the shared interfaces elements, themes and objects by editing the shared library file.
After deciding how you will structure your project, start on the program design and decide which screen will come first. Start with an animated intro to give a short brief about the course. This can vary from a short course logo animation to a long animation. When using a long animation, consider a "Skip Intro" button, as forcing your audience to watch the intro every time they enter the course is very frustrating. For the Multilanguage courses, give the audience the choice to choose their language by putting a language selection screen before they enter the main menu for the course. If the course requires a login with identity, provide a login screen after the language screen to ensure it will be in the appropriate language. Follow this with the main screen, which provides a menu for each part of your course. See figure (1-1).
Figure (1-1)
The screen structure of the course
2- Interface graphic design, navigation, and content display
Next, you should consider the media and graphic specification. This is what the audience sees, and includes the content of the course. Planning for this includes:
1- Themes and interface design
2- Navigation, function and other interface contents
3- Text design, writing specification and the content area
4- Video and audio
5- Animation and special effects
You should design there to provide a simple, easy to navigate and non-distractive course, that delivers the contents to the audience in the best possible way.
2.1 - Themes and interface design
Themes and interface design are the first way to grasp the attention of the audience and introduce the course to them. These should be relevant to the course content and environment. You should consider information about your audience including age, nationality, interests. This information is very important when choosing the course theme and the interface design. For instance, if you are designing a course for schoolchildren, you should not use dark colors or grays, as this is not attractive for the students. Instead, use attractive but not distractive colors that appeal to the children's eyes. See figure (2-1-1).
Figure (2-1-1)
Screen from a course for school children
Similarly, for a business course, which will be provided to employees, avoid complex interface elements. It is also a good idea to use color themes that are the same as used by the company. See figure (2-1-2)
Figure (2-1-1)
Screen from a course for a business company
Generally, there are some issues you should consider when designing the interface:
a- The colors of the theme should be comfortable for the eyes, non-distractive, and help the audience concentrate on the content.
b- The theme should represent the course or the general themes of the company that will present the course.
c- The themes should not offend the culture, religion or nationality of the audience.
d- Consider the navigation buttons and the static items like logos and main titles.
Ensure the interface is small and not overly heavy, so it plays well on different computer configurations. It is a good idea to use a mixture of bitmaps and vector graphics to produce a professional interface. Vector graphics are useful in areas that may be scaled or animated; otherwise, bitmaps are good in static areas, as they are smaller and require less computer processing.
2.2 - Navigation, function and other interface contents
Navigation, function and content are vital parts of the interface, as they enable your audience to use the course content. However, we will divide them into two parts; interface content, and navigation and function.
a- Interface content
The interface design should be simple and clear, so the viewer can recognize all the content from their first look at the screen. However, it is important to keep the interface content consistent through the application. For instance, changing the place of the navigation buttons will disturb users, as they will have to search for the buttons on every screen they enter. See figure (2-2-1) It is a good idea to keep the interface content in a separate SWF file and load the course content into it; this keeps most of the interface content unchanged throughout the course.
Figure (2-1-1)
interface content should be consistent through the menus
b- Navigation and function buttons
As said before, these are how your user will interact with the course. As a part of the interface, the navigation buttons and functions should be simple and clear. You should consider the placement of the buttons, and any animation used, as part of the interface design.
Adding animation to the buttons attracts the user's eye to them. Use the animation to help indicate the function of the button, but do not use heavy animation, as the user will not want to see the animation of the button every time he enters a link. In addition, adding voice to explain the function of a button is a good idea, as long as it does not interrupt any use of voice in the content itself.
2.3 - Text design, writing specification and the content area
Reserve a suitable place to view the content, and keep in mind that this is what is most important for your user. Following are some tips to consider when choosing the text and the content area specifications.
a - The text font and size should be clear, readable, use a common font for most audiences. The font size should suit the audience. For example, use a big font size in kids' courses, as the content in each page should be minimal. On the other hand, if you are providing a company employee course, you need to present a lot of information, so keep the font size normal and readable and use the ordinary fonts as 12-14 point in Times New Roman font. The text color should contrast well with the background color. Very dark text colors suit most content types.
b -The content area should occupy the largest part of the interface, as it will include the text, video and any other demonstrative materials. The background color of the content area should contrast with the displayed text color. Animation in the content is not always a good idea especially when loading the content dynamically. If you have to do animation in showing the content, do it in a smart way. For example, keep the animation in the static parts and use simple animation techniques such as masking, typewriter effect or fading in and out. Flash and other macromedia products provide great technology for dynamic data loading ("Rich Internet Applications"). Using this technology enables you to load the course content dynamically from database files. Other media such as video and audio may also be loaded externally from files like FLV for video and MP3 for audio. This great feature makes editing and updating your course content a very easy and safe process.
2.4 - Video and audio
Video and audio provides you great attractive demonstrative materials that cannot be affordable in other linear educational materials.
Macromedia provides you with three different methods of incorporating video into your course. You should choose the most effective method according to your needs and how will you deliver the course. Video files either can be external files or embedded directly within the course file itself. Flash MX 2004 comes with a very helpful media component to use to control your external movie file with no coding experience. Following is a brief overview of the three video techniques that flash provides to deliver video to your audience, both online and offline.
a- Embed video file into flash timeline
It is an old method, available since earlier versions of Flash. In this method, you import the video file directly into the timeline and compress it using Sorenson spark codec. Below are some of the advantages and disadvantages of this method:
Advantages:
1- It is easy to use, as it does not need any coding skills. You just import the video the same way you import an image.
2- It saves the video file inside the project files. This avoids losing the video file or links to it.
Disadvantages:
1- It results in a bigger file size, as the video file will be included in the file.
2- It is hard to edit and update, as you need to open the main file every time you want to edit the video and republish it again.
3- It does not enable you to present big video files, as it is limited in the size of the total flash file. This causes problems in showing videos longer than 120 seconds.
4- It forces you to use low quality videos to keep your total file size small as possible.
5- It affects the performance of the total file badly as it increases the file sizes enormously.
6- It is not applicable to online course
b- Progressive video download
With this method, you load video file externally using the flash component we mentioned previously. The video file is saved in a server that uses Flash server technology, and is downloaded progressively when the Flash Player requests it. This means that the flash player plays one downloaded package of video information (first and) while it waits for the next package. However, the user has to see part of the animation and then wait for the next part to download. Below are the advantages and disadvantages of this method:
Advantages:
1- It results a smaller file size for the SWF itself, as the FLV video file is separate, and is located on the server or the local machine.
2- It is easy to edit and update, as you do not need to open the main flash file to update or edit, and you do not need to republish it.
3- The SWF file download time is much faster, as it does not download the video files unless the flash player requests it.
4- More secure for the video files, as it does not download on the local machine. You SWF will download the video directly into the player as requested.
Disadvantages:
1- This Method needs knowledge of coding to control the video file's connection with the server.
2- The user has to wait until after the delivery of the next package to the client side player.
c- Streaming video download
This way is similar to the progressive method, but the difference is the appropriate parts of the video file download when the flash player requests specific frames. For example, when the user moves the play head to a specific point then the player requests these exact frames from the FLV file. This method is suitable for course that requires chat sessions between the users as it delivers the exact frames of video information to all users at the exact time regardless of the connection speed or the computer configuration.
Audio lets the audience's ears and eyes work together to more effectively absorb the information in the content. That is, content using a combination of audio and video delivers the information much faster. The sound should be clear using a normal language and voice. For example, do not use funny voices in demonstrating the content, as this disturbs the audience. Avoid using many layers for sound; merge all similar sounds in one sound track, otherwise sound troubles may result from many sound layers. Do not overlap sounds, as this disturbs and frustrates the audience. Stop the first sound, or fade it out, then begin the next one. The audio quality has a noticeable effect on the published file, so choose the suitable quality that is not too high to increase the file size, nor too low to reduce the sound quality.
2.5 - Special effects
Special effects, including cartoon animation or 3D objects, are a good way to demonstrate and explain the content, as long as you use these with consideration of their effect on your audience. For instance, do not use funny cartoons for professional audiences, as this may frustrates them and makes your program appear less professional. The content specialist should plan how you should mix these effects and other media, such as video and audio, with the original content.
Conclusion
In conclusion, you have to be careful when designing e-learning courses, as delivering the content in a perfect way is your main goal. The following are general tips to consider when designing an e-learning course:
Delivering the content is your main objective. Focus on it and do not change your aim to anything else when designing the course.
Attract the audience with good graphic interface, animation, sound and other tools, but do not disturb him by over use.
Use graphic, interface, video, sound, and other elements to show the course content. Do not use the course content simply to showcase those elements.
