User Interface


For the jukebox (Figure I-2.1), we settled on a split UI that consists of a top and bottom section. Without a split, users might get confused as to the relationship of the different UI elements. By using a split UI, the functionally related parts of the jukebox are sectioned together. The top part consists of the current song information and the controls for playback and volume settings; these elements all pertain to the current song playing. The bottom part consists of the user's current playlist and related elements. To search for songs, a user can click the Get Music button, and a search pane that contains the search field and results will slide up. With the search pane sliding up, this helps us save space by hiding the pane when it is not needed. We considered making all three sections; the song info, playlist and search pane, visible at once but decided it wasn't worth the extra space needed since the search pane is not always needed.

Figure I-2.1. UI of the jukebox.

graphics/01fig01.gif

For the colors and general style, we kept the look of Morning Records by sticking with the same colors, hard edges, and sharp corners. At the top of the jukebox, we've placed the Morning Records banner for branding. As we go through and spec out the UI elements we'll try and use Flash MX components where possible and create ones from scratch if necessary. Components were introduced with Flash MX and provide a useful and efficient method of adding common UI elements, such as a ScrollBar or CheckBox, to a Flash movie. Components are useful for developers because it frees them from having to create the same UI elements over and over again. On the flip side, components also benefit end-users since they make the functionality of UI elements consistent from application to application resulting in increased usability for Flash applications as a whole. Because of this, my team places components first in our list of UI options.

Ticker

The first UI element in the jukebox is the Ticker (Figure I-2.2). The ticker will be used to continuously scroll the artist name and title of the currently playing song. Since a Ticker component can be found on the Macromedia Flash Exchange under "Flash UI Components Set 2", we're thinking about using this component. Like other components, the Ticker comes with a variety of methods that allow us to control properties such as the speed and direction of the scrolling text. As flexible as this component is, we're not sure if we are going to use it until further testing. There are many methods that won't be used and the Ticker component might be overkill for what we want which is simply continuously scrolling text. Creating continuously scrolling text shouldn't be too involved so we might create a ticker from scratch. Even if the Ticker component is not used it's good to know of it's availability since it could prove useful for other applications, such as displaying real-time information for news headlines or sales figures in a sales application, where we could capitalize on the complete functionality of the component.

Figure I-2.2. Sample Ticker used to scroll current song information.

graphics/01fig02.gif

Since Generator objects are no longer supported in Flash MX, this component is a welcome addition as a replacement for the Generator Ticker. Generator also came with other objects, such as the Stock Chart, MP3, and JPEG. The Stock Chart object allowed a user to easily create a graph based on a data source and have control over properties such as the XY label and color of the graph. The MP3 and JPEG objects allowed a user to dynamically upload MP3s and JPEGs. Although this sounds fairly simple to do, without Generator, a user would have to create a SWF for each MP3 or JPG. Generator essentially created a loadable format, SWF, for the Flash Player. With Flash MX, graphs can be created using the Charting components, also on the Flash Exchange, and MP3s and JPEGs can now be loaded directly into the Flash 6 Player. With these new components and features available with Flash MX, developers no longer have to rely on Generator. This results in two benefits: (1) processing is moved to the client and (2) developers no longer have to purchase Generator.

Buttons

The next UI element consists of the various buttons used throughout the jukebox. The face of the buttons will be either an icon or text. The buttons that use icons will be the controls for song playback (Figure I-2.3): Previous, Next, Play and Stop. The buttons that use text will be used for jukebox functionality (Figure I-2.4): Get Music, which will open the search pane; Close, which will close the search pane; Search, which will search for songs; Add, which will add a song to the playlist; and Remove, which will remove a song from the playlist.

Figure I-2.3. Buttons for playback.

graphics/01fig03.gif

Figure I-2.4. Buttons for jukebox functionality.

graphics/01fig04.gif

Buttons in Flash are very easy to create so this should be a fairly straightforward process. Since buttons are comprised of three visible states and we would like the buttons have a consistent look, each button would reuse the same symbol for each state. An option to creating buttons would be to use the new PushButton and IconButton components. The PushButton component is used to create a button with a text field. The IconButton is used to create a button with a text field and an icon. These two components are buttons that come with a variety of methods such as setEnable(), which can be used to turn a button on or off, and setLabel(), which can be used to set the label of a button. Once dragged into the movie from the Components panel, the PushButton and IconButton components come with a set of symbols that make up the various states of the buttons. All PushButtons and IconButtons use the same symbols, respectively, so changing the state for either component across the entire movie can be modified through the Library.

Regular buttons are very easy to create but the functionality is limited. Regular buttons don't come with methods to get or set properties such as getEnabled() or setSize(). A benefit of the PushButton and IconButton components is that all of the functionality is already built into the component so once a developer adds a component to a movie, the methods are readily available. One drawback to using the PushButton and IconButton components is the size in kilobytes. Both components add a few kilobytes to the movie depending on which other components are already in a movie. For example, using the bandwidth profiler, a movie consisting of only the PushButton component weighs 5699 bytes. Another movie consisting of only the ScrollBar component weighs 6541 bytes. However, a movie containing only the PushButton and ScrollBar component is not the sum of the two sizes rather it weighs 9635 bytes. This is because Flash MX components share symbols with each other. As an example, all of the components that are shipped with Flash MX extend FUIComponentClass. named FUIComponent in the Library, which is the base class for the components. So if a movie already contains the ScrollBar component and a developer adds the PushButton component, then both components will use the same FUIComponentClass. Fortunately, since most users of the jukebox will be willing to download songs that are a few megabytes, the wait for a few kilobytes to download will be negligible.

NOTE The bandwidth profiler is used to view downloading performance graphically by displaying the data sent for each frame depending on a specified modem speed. The bandwidth profiler is helpful in determining potential bottlenecks in a movie but unfortunately does not use the compressed movie in the graph section on the right side of the profiler. Compression is a new feature in Flash MX that is most effective when a movie contains large amounts of text or ActionScript. The bandwidth profiler does, however, report the correct total size in kilobytes and bytes on the left side of the profiler where additional information about a movie is also reported.

Lists

There are two UI elements of the jukebox that will contain lists (Figure I-2.5): (1) the playlist and (2) the search results.

Figure I-2.5. ListBoxes for the playlist (left) and search results.

graphics/01fig05.gif

While both look the same the functionality of the two will differ. The playlist will display the songs for the user to play and the search results will display the search results and be used to add songs to the playlist. To create a list there are multiple options. One option would be to create a MovieClip that can be used for each item in the list. Since users have to select an item before doing something with it, whether it's to play a song or add a song to the playlist, the functionality to do so would have to be created. Additionally, the ability to scroll the list is necessary since users might add songs that exceed the visible area. For the scrolling, we could use the ScrollPane component, which can scroll a MovieClip. In this case, a MovieClip would be created that holds the list items which are themselves MovieClips. An option to creating a list would be to use the ListBox component. The ListBox component is similar to an HTML select menu and comes with more than 30 methods. Similar to other components, the ListBox component allows a user to modify the component at runtime. For the jukebox, this means a user would be able to add a song to one of the lists or remove a song. The ListBox component also comes with built in scrolling so we wouldn't have to worry about scrolling a list of songs. Since creating a list from scratch would be a cumbersome process, we'll most likely be using the ListBox component for the two lists.

Song Times

Below the ticker are two times. The top time is the total elapsed time of the current song, and below that is the total time of the current song (Figure I-2.6).

Figure I-2.6. Song times for the current song playing the top is the total elapsed time, and the bottom is the total time.

graphics/01fig06.gif

To add a song to the jukebox, we have a few options. The first option would be to import a song into the timeline of a separate movie and then load the SWF into the jukebox to play the song. With the song on the timeline, we'll be able to control the song in the same manner as controlling the timeline. The main drawback to this is a SWF has to be created for each song. Another option would be to import the song into the jukebox then attach the song from the Library. There are two drawbacks to this. First, the file size of the jukebox would be the size of all of the available songs and second, one would have to import all of the songs into the jukebox. The most efficient option would be to use the new Flash MX feature that allows one to load MP3s directly into a movie. To get both of the times with this option, we'll use the Sound object and two properties to calculate the two times, Sound.position and Sound.duration. The Sound object allows one to control sounds in a movie. To load a song we'll use Sound.loadSound() that will allow us to load an MP3 directly from the file system.

JPEG

To the right of the song times is an image of the album of the currently playing song (Figure I-2.7).

Figure I-2.7. JPEG loaded dynamically.

graphics/01fig07.gif

Adding a JPEG to the jukebox is similar to adding an MP3. One option would be to import a JPEG into the timeline of a separate movie and then load the SWF into the jukebox to display the JPEG. The main drawback to this is a SWF has to be created for each JPEG. A better and more efficient option would be to take advantage of a new feature in Flash MX that allows one to load JPEGs directly into a movie. Loading a JPEG is accomplished in the same manner as loading a SWF, MovieClip.loadMovie().

Sound Controls

Since we're creating a jukebox, we'll need sound controls. Most jukeboxes for the computer come with a volume and pan (left/right balance) control so we'll want to add one of each to our jukebox (Figure I-2.8).

Figure I-2.8. Sound controls for volume and pan.

graphics/01fig08.gif

To control sounds in Flash, one must use the Sound object and it's methods. For the jukebox, we can use two methods, setVolume() and setPan(), to set the volume and pan, respectively. For the UI, we decided to use sliders to control the two settings. We considered using numerals only or dials but found that most users are accustomed to these types of controls.



Reality Macromedia ColdFusion MX. Macromedia Flash MX Integration
Reality Macromedia ColdFusion MX: Macromedia Flash MX Integration
ISBN: 0321125150
EAN: 2147483647
Year: 2002
Pages: 114

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net