This tutorial uses the Audio Player Wordpress plugin from 1pixelout. Please download the .zip file from that site. You will need to unzip the files and use two of them:
* player.swf (this is the audio player)
* audio-player.js (this is the JavaScript)
These instructions concern using that player on non-Wordpress HTML pages.
You must have some Web space that you control (that is, server space) to which you will upload these files as well as your audio files.
If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.) If you do not see the MP3 player, then you don't have the Flash player installed. (More than 90 percent of all Internet users do have it.)
Tutorial
For this tutorial, let's imagine that your server space is at this URL: www.fakedomain.com/myname/
1. Create a new folder on your Web server and name it "audio"
2. Upload the two files for the audio player (player.swf and audio-player.js) to the audio folder.
3. Upload an MP3 file to the audio folder. For this tutorial, let's assume your file is named music.mp3. (NOTE: The MP3 file must be encoded at 44.1 kHz, or 22.05 kHz, or 11.025 kHZ; any other sampling rate will result in the "chipmunk effect," which you really would not like.)
Now that your three files are uploaded, they reside at these URLs:
* http://www.fakedomain.com/myname/audio/player.swf
* http://www.fakedomain.com/myname/audio/audio-player.js
* http://www.fakedomain.com/myname/audio/music.mp3
The next step is to place the HTML for this player on the Web page where you want it to appear. Change the URLs shown below to match your own URLs.
If You Use Blogger
To use this player with a blog hosted at Blogger, take out all the code above the
Readmore...
Audio player
Since Flash Player 6, Flash movies (.swf files) have had the capability to load MP3 files during runtime. You can also import other audio file formats into a Flash document (.fla file) during author-time. Sounds can be attached to keyframes or buttons, for background tracks or sound effects. A sound file’s bytes can be distributed evenly across a timeline, so that the SWF file can be progressively downloaded into the Flash Player, enabling a movie to start playing before the entire sound file has been downloaded.
Multimedia authoring program
If the heart of Flash is a vector-based drawing program, then the body of Flash is a multimedia- authoring program (or authoring environment). Flash documents (.fla files) can contain multi- ple media assets, including sound, still graphics, animation, and video. Moreover, Flash is a powerful tool for creating truly interactive content because it allows you to add (ActionScript) commands to dynamically control movie (.swf file) playback. Whether you are designing sim- ple menu systems or customized and intuitive experimental interfaces, Flash content can be authored to recognize and respond to user-input.
Animation sequencer
Most multimedia-authoring programs have a component for sequencing content as anima- tion, and Flash is no exception. But in Flash, the animation sequencer is the core of the appli- cation. The Timeline window controls the display of all content — static or animated — within your Flash project. Within the Timeline window, there are two areas that allow you to orga- nize content in visual space and in linear time.
Layers and layer folders allow you to keep track of content that has been placed into your Flash document. The visibility of each layer can be controlled independently to make it easier to isolate specific elements as you are authoring. Layers are viewed from front to back within each frame of the Timeline — items on upper layers overlay other items on lower layers. Any number of items can be placed on a single layer, but you have less control over the stacking
Readmore...
Flash is a hybrid application that is like no other application. On the immediate surface, it may seem (to some) to be a simple hybrid between a Web-oriented bitmap handler, and a vector-drawing program, such as Macromedia FreeHand or Adobe Illustrator. But while Flash is indeed such a hybrid, it’s also capable of much, much more. It’s also an interactive multimedia-authoring program and a sophisticated animation program suitable for creating a range of animations — from simple Web ornaments to broadcast-quality cartoons. As if that weren’t enough, it’s also the host of a powerful and adaptable scripting language.
ActionScript has evolved from a limited drag-and-drop method of enabling animation to a full- fledged object-oriented programming language very similar to JavaScript. Flash ActionScript can work in conjunction with XML (eXtensible Markup Language), HTML, and many other applications and parts of the Web. Flash content can be integrated with many server-side technologies including Flash Remoting MX and Flash Communication Server MX, and the Flash Player offers built-in support for dynamically loading images, MP3s, movies, and other data. Flash can work seamlessly with ColdFusion MX 6.1 and XML socket servers to deliver streamlined dynamic interactive experiences.
So, what’s this evolving hybrid we call Flash really capable of? That’s a question that remains to be answered by developers such as you. In fact, we’re hoping that you will master this application and show us a thing or two. That’s why we’ve written this book: to put the tool in your hands and get you started on the road to your own innovations.
Because Flash is a hybrid application capable of just about anything, a good place to start working with this powerhouse is to inquire: What are the components of this hybrid? And if they were separated out, how might their capabilities be described? Those are the questions that we answer in this chapter.
Bitmap handler
In truth, Flash has limited capabilities as an image-editing program. It is more accurate to describe this part of the Flash application as a bitmap handler. Bitmap images are composed of dots on a grid of individual pixels. The location (and color) of each dot must be stored in memory, which makes this a memory-intensive format and leads to larger file sizes. Another characteristic of bitmap images is that they cannot be scaled without compromising quality (clarity and sharpness). The adverse effects of scaling an image up are more pronounced than when scaling down. Because of these two drawbacks — file sizes and scaling limitations — bitmap images are not ideal for Web use. However, for photographic-quality images, bitmap formats are indispensable and often produce better image quality and lower file sizes than vector images of equivalent complexity.
Vector-based drawing program
The heart of the Flash application is a vector-based drawing program, with capabilities simi- lar to either Macromedia FreeHand or Adobe Illustrator. A vector-based drawing program doesn’t rely upon individual pixels to compose an image. Instead, it draws shapes by defining points that are described by coordinates. Lines that connect these points are called paths, and vectors at each point describe the curvature of the path. Because this scheme is mathe- matical, there are two distinct advantages: Vector content is significantly more compact, and it’s thoroughly scalable without image degradation. These advantages are especially signifi- cant for Web use.
Vector-based animator
The vector animation component of the Flash application is unlike any other program that preceded it. Although Flash is capable of handling bitmaps, its native file format is vector- based. So, unlike many other animation and media programs, Flash relies on the slim and trim vector format for transmission of your final work. Instead of storing megabytes of pixel infor- mation for each frame, Flash stores compact vector descriptions of each frame. Whereas a bitmap-based animation program (such as Apple’s QuickTime) struggles to display each bitmap in rapid succession, Flash quickly renders the vector descriptions as needed and with far less strain on either the bandwidth or the recipient’s machine. This is a huge advantage when transmitting animations and other graphic content over the Web.
Video compressor
Flash Player 6 and 7 include a built-in video engine — the Sorenson Spark codec — which means that the Flash Player plug-in can be considered one of the world’s smallest video
Readmore...
Flash has seen significant development over the years in both capability and design. Consistently proven with each new release is that developers continue to push the technol- ogy into new territory. In its current iteration, Flash MX 2004 is advancing the successes of its predecessor, Flash MX. The new version offers more tools to create the latest breed of Web experiences, dubbed Rich Internet Applications (RIAs), and Macromedia has added more authoring features to help the novice user learn the toolset.
We discuss the topic of RIAs in Chapter 2, “Exploring Web
However, Flash is no longer a single authoring product. Macromedia has made two versions of the tool available: Flash MX 2004 and Flash MX Professional 2004. Both editions share many core updates to Flash MX, including our following favorites:
Timeline Effects: A feature added specifically for new users, Timeline Effects enable you to quickly add motion and visual effects to your Flash artwork or text. Flash MX 2004 automatically creates all the tweens and symbols necessary for the chosen effect. You can change or edit effect settings at anytime while authoring your Flash movie. Learn more about Timeline Effects in Chapter 11, “Timeline Animation and Effects.”
Behaviors: Another feature added to help novice users, the Behaviors panel adds inter- activity to Flash buttons, components, and frames very easily. If you’ve used behaviors in Dreamweaver, you’ll find that using behaviors in Flash is very similar. Several exam- ples throughout this book use the new behaviors in Flash MX 2004.
Spell checker: You can now check the spelling of text within your Flash movie, includ- ing text in your ActionScript code.
Document tabs: If you’re using the Windows version of Flash MX 2004, you can quickly switch between multiple Flash documents .fla files) by clicking the document’s tab in the authoring environment.
Improved Actions panel: The Actions panel has an improved Script navigator, enabling you to edit the actions of any keyframe or instance in your Flash document. You can also pin multiple scripts in the Script pane, so you can quickly switch from one script to another. The Actions panel is discussed throughout Parts V and VII of this book.
Find and Replace: A highly requested feature, Find and Replace does exactly what it says: locates and updates elements in your Flash document. Everything from text to font types to colors to imported graphics and sounds can be searched with this tool.
Better graphics support for imported files: Macromedia dubs this “high-fidelity import,” which now enables you to import Adobe PDF and Adobe Illustrator 10 files with better conversion to Flash-equivalent vector graphics.
Video Import wizard: Continuing with Flash MX’s video encoding abilities, you have greater control over compression options and in/out points during the video import process. You can find more information about this feature in Chapter 17, “Embedding Video.”
Flash Player detection: Flash MX 2004 can create fully built HTML and Flash movie detection files for your Flash content. In previous versions, such automation was only available in Dreamweaver. Now, you can setup this detection process directly in the Flash MX 2004 authoring environment.
Readmore...
Congratulations on using the video importing and editing features of Flash. In a few minutes, you were able to accomplish the following tasks:
• Embed a video
• Select editing options
• Specify encoding settings
• Change the hue and gamma in a video
• Crop a video
• Import audio with video
• Save a profile
• Change the span of frames in a layer
• View video properties
• Change publish settings
To learn more about using video in Flash, see “Working with Video” in Using Flash Help. For information about publishing movies with embedded video, see “Setting publish options for the Flash SWF file format” in Using Flash Help.
Readmore...
Embedded and linked video files appear in the Library panel, where you can view video properties.
1 In the Library panel (Window > Library), double-click the Trio_Experience video file that you imported.
The Embedded Video Properties window appears. Using this window, you can accomplish the following tasks:
¦ Update an imported video edited in an external application.
¦ Export the embedded video as a Macromedia Flash Video (FLV) file, which retains the compression settings specified when you imported the video.
2 When you’ve finished viewing video properties, click OK and save your file.
Readmore...
Change the span of frames in a layer
1 In the Timeline, scrub the playhead (drag it back and forth across the Timeline) to view different sections of the video.
2 The background, which is only in Frame 1, disappears when the playhead moves to subsequent frames. To extend the background frames, right-click (Windows) or Control-click (Macintosh) Frame 1 of the Background layer and select Copy Frames from the context menu.
3 In the Timeline, go to the last keyframe of the Video layer. Identify the corresponding frame number in the Background layer. Right-click (Windows) or Control-click (Macintosh) the corresponding frame number in the Background layer, and select Paste Frames. For example, if the Video layer extends to Frame 300, you’d copy the keyframe in Frame 300 of the Background layer.
The Background layer extends the length of the Video layer.
4 After saving the document, select Control > Test Movie to test how the video appears in Flash Player.
Readmore...
Because you selected Import, rather than Import to Library, the video appears on the Stage. The first frames of the video are white, so you will see the blue bounding box only where the video appears.
• Drag the bounding box to the video guide, to the left of the text.
Readmore...
The Video Import wizard allows you to name your advanced settings profile and provide a description.
1 To name this profile of advanced settings, type Trio Advanced Settings.
2 In the Description text box, type Trio Motors Client Settings. Then click Next. Encoding settings appear again.
3 Verify that Trio Compression Settings appears in the Compression Profile pop-up menu, and Trio Advanced Settings appears in the Advanced Settings pop-up menu, (or select those options, if necessary) and click Finish.
The Importing dialog box appears.
4 When another dialog box appears that asks if it’s OK to add frames to the Timeline, click Yes. Flash adds enough frames to the Timeline to accommodate the video.
5 Save your file.
Readmore...
You can separate the audio track from the video and create a separate audio library item. However, in this particular video clip, the sound is integral to the video, so you will not separate the audio.
• In the Audio Track pop-up menu, verify that Integrated is selected. Then click Next.
Readmore...
Import a video clip as a video object
You have the option of importing a video clip as a video object in the current Timeline, a movie clip, or a graphic symbol. Each choice has advantages and limitations; see “About advanced settings” in the Video Import wizard section of Using Flash Help. You’ll transfer the video clip as a video object in the current Timeline, which is the default setting. This option places the video object in the current Timeline and expands the Timeline to accommodate the frames necessary to play the video.
• In the Import pop-up menu, verify that Current Timeline is selected.
Readmore...
You can scale the video so that its size on the Stage is a percentage of its original size; the Scale setting adjusts the dimensions of the video proportionally. You can also crop the video to create a nonstandard size and change the aspect ratio. You’ll crop the top and bottom of the video to give it a wide-screen look.
1 Enter 10 in the top Crop text box either by typing directly in it or by using the slider. If you type the value, press Enter or Return to see the change.
In the Preview window, a line appears that marks where the video will be cropped.
2 Enter 10 in the bottom Crop text box either by typing directly in it or by using the slider. If you type the value, press Enter or Return to see the change.
Readmore...
Change the hue and gamma in the video
You will now change color settings and effects in the video.
1 In the Advanced Settings pop-up menu, select Create New Profile.
The Video Import wizard now displays options to change color settings and the size of the video. You’ll change the hue to add more of a bluish purple tint.
2 In the Preview window, move the playhead to view any frame in the video clip where the video isn’t totally white.
3 Hue measures the color value as it maps to a location on a standard color wheel. To change the hue, do one of the following:
¦ Enter +20 in the Hue text box, then press Enter or Return.
¦ Move the Hue slider until +20 appears in the hue text box.
4 Verify that a 1 appears in the Gamma text box, and that Brightness and Contrast are set to +0.
Gamma measures the overall brightness level. Higher values specify that dark images remain dark while light images become lighter.
Readmore...
The compression profile settings allow you to select predefined encoding settings, or apply values for bandwidth or quality control. You’ll specify bandwidth values, in kilobits to approximate the download speed. You’ll then save your settings as a compression profile.
1 In the Compression Profile pop-up menu, select Create New Profile.
2 Select Bandwidth, then either move the bandwidth slider to 128 or enter 128 in the bandwidth text box.
By selecting bandwidth over quality, you have finer control over streaming applications. The bandwidth slider defines the bandwidth in kilobits that the imported video is allowed to take per second. It affects the quality of the video at high motion but allows for fixed bandwidth encoding and therefore better streaming behavior.
3 Click Next. In the Name text box, enter Trio Compression Settings. In the Description text box, enter 128 Kbs bandwidth. Then click Next to return to the first Encoding panel.
Readmore...
When you import video, you can embed the video so that it’s included in your document file. You can also link to the video so that it remains an external file, yet the video file still appears in the Library panel. You’ll embed the video to use many of the Video Import wizard features. Embedded video becomes a library object and part of your document.
1 Select File > Open. Browse to the location where you saved the videoImport download and double-click video_import_start.fla
2 Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.
3 Select Window > Panel Sets > Training Layout to modify your workspace for taking lessons.
4 In the Timeline, select the Video layer.
5 Select File > Import > Import to Stage. To open the video file, browse to the location where you saved the videoImport download and double-click Trio_Experience.mov.
MOV is the extension for the QuickTime video format. The Video Import wizard opens.
6 In the Video Import wizard, verify that Embed Video in Macromedia Flash Document is selected, and click Next.
Select editing options
After you choose to embed the video, you have the option of editing the video or importing it without editing. For this lesson, you’ll edit the video.
1 In the Video Import wizard, select Edit the Video First, and click Next.
A preview window and editing controls appear in the Video Import wizard. 2 Video editing controls include the following:
■ A seek bar with an In marker, Out marker, and playhead
Out marker
Playhead In marker
¦ Playback control buttons
¦ In and Out marker buttons
¦ Buttons that let you create and update video clips
¦ A clip list
3 Click Preview Clip to watch the video.
Note: The video includes an audio track.
4 The video ends by fading to white. To edit out the white video at the end of the clip, move the Out marker, on the right side of the seek bar, slightly to the left, to the approximate point where the video fades to white (around 00:00:25:067).
5 Click the Create Clip button to add the edited video to the list of clips.
If you were adding many clips to the list, you could select Combine List of Clips into a Single Library Item After Import to create one clip that contains all listed clips. Since you’re working with one clip only, you don’t need to select that option.
6 Click Preview Clip again to view the edited clip, then click Next.
Readmore...
Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 include a Video Import wizard with editing features. The wizard offers control over how your video appears in your published file. In this lesson, you’ll use video importing and editing features to accomplish the following tasks:
• Embed a video
• Select editing options
• Specify encoding settings
• Change the hue and gamma in a video
• Crop a video
• Import audio with video
• Save a profile
• Change the span of frames in a layer
• View video properties
• Change publish settings
To take this lesson, you must have QuickTime 4 or a later version installed.
The file decompression process creates a folder named videoImport on your system. The folder contains three files: video_import_start.fla, video_import_finished.fla, and Trio_Experience.mov
Readmore...
