HTML, XHTML, CSS, Adobe Dreamweaver CS3, JavaScript, FTP, Domain Registraion, Hosting, SEO

This course combining the acquisition of essential theory with the hands-on web design skills to actually make it effective in application.

The course is practically focused and is taught by a combination of experienced business practitioners and professional web designers familiar with the real-life commercial challenges you will face working within this fast-moving sector. So after finishing this course you can start working in real life as a professional.

The theory and practical element of the course covers the W3C usability and accessibility standards, Search Engine and Print friendly format as well as unique characteristics of the web environment and web design. The hands-on element includes training in everything from simple web page design to sophisticated Flash based graphics by using latest technology.

• Microsoft Certified and Industry experieced Tutor Led Classes
• 10 Lesson (3 hours each) - 5 weeks and
• 8 Weeks for Projects
• Unlimited Practive Exam and Tutor consultation
• Guaranteed Practical Experience
• Optional Books
• Max 10 Student per class

Web Design Course Conent

Adobe Photoshop CS3 + Adobe Flash CS3

If you consider your self creative or you are looking to make a career in creative filed this is the right course for you. In this course you will learn everything from basic concept of design to some of the advance technique to produce professional result to be a creative professional.

This course will teach you to design website, Logo, Banner, Leaflets, letterhead, advertisement, Photo editing, photo retouching and special effects with photographs. You will also learn to create animation for website, banner, advertisement, and creating entire website using flash with audio and video.

• Microsoft Certified and Industry experienced Tutor Led Classes
• 10 Lesson (3 hours each) - 5 weeks and
• 8 weeks for Project
• Unlimited Practice Exam and Tutor consultation
• Guaranteed Practical Experience
• Optional Books
• Max 10 Student per class

Graphic Design (Photoshop & Flash) Course Content

In the first two articles in this series, I traced the rise of the Flash video as a streaming media format, and demystified much of the hype around Flash video. In this installment, let’s get down to business and actually put a video on a site. You won’t need to learn how to do Flash animations—or learn anything else about Flash—in order to put videos online. You can jump right into preparing videos with Flash just by reading this article and some of the other resources I’ll recommend at the end. I’ll deal with the entire process, from someone handing you a video to a user actually viewing the Flash video in a browser, and you’ll do it without needing to know any code. Though the process is dead simple, the entire workflow can be both technical and, especially if you are new to Flash video, a little intimidating.

Two-pass VBR encoding is what makes for a higher quality video than the constant bit-rate encoding offered by the Flash Video Encoder. In very simple terms, two-pass VBR trots through the video twice. The first time it runs through the video, it analyzes the changes in motion and so on. In the second pass, it does the actual compression.

The tools you need to get going are not as extensive as you may think. They are:

• QuickTime Pro: Pay the extra cash for this because it allows you to save videos in a variety of formats, and is a very basic editing tool for such things as removing those few seconds of black screen at the start of the video. The current version of the application is Version 7 (Mac and PC) and you can download it at www.apple.com.
• Windows Media Player: This is the standard for the PC. The current version is Version 11. The key word here is “Player.” That is about all you can do with this software: Play the video on a PC or a variety of Windows-based devices, ranging from cell phones to the recently released Zune device. I’m recommending QuickTime Pro and Windows Media Player simply because it’s best to test your video in both, if possible.
• Flash Professional 8: You can’t get into the Flash video game without this cross-platform application.
• Flash 8 Video Encoder: This stand alone application is how the Flash video is created. When you install Flash Professional 8, the Encoder is also installed.

That is the bare-bones package. The players allow you to preview the video, the encoder allows you to create the video, and Flash Professional 8 lets you create the video application.

If you are serious about encoding Flash video, then consider picking up a copy of either of these two commercial Flash video encoding solutions:

• FlixPro: The current version, Flix 8.5, is available through ON2 Technologies. These are the same people who produce the ON2VP6 codec introduced in Flash 8 that has, in many respects, ignited the video explosion on the web.
• Sorenson Squeeze: The current version, Squeeze 4.5, is a full video compression suite offering both FLV and Digital Video compression. The interesting aspect of this application is that it offers the ON2VP6 codec along with its Squeeze codec as an FLV creation option.

If you are at all serious about creating Flash video, either one of these two tools is indispensable because they offer something not available through the Flash Video Encoder: two-pass variable bit-rate encoding.

Two-pass VBR encoding is what makes for a higher quality video than the constant bit-rate encoding offered by the Flash Video Encoder. In very simple terms, two-pass VBR trots through the video twice. The first time it runs through the video, it analyzes the changes in motion and so on. In the second pass, it does the actual compression. Constant bit-rate encoding, CBR, does the analysis and encoding at the same time. The result is a lower-quality video than that resulting from the two-pass. To actually see what I am talking about, head over to Flash Video FAQ and do a side-by-side comparison of the results of encoding through the Flash Video Encoder, FlixPro, and Sorenson Squeeze 4.3.

Image 1: FlashVideoFAQ lets you do side-by-side comparisons of the Encoders.

To take a deeper look at these two products, Elliot Mebane has recently published an excellent overview of them—and their strengths and weaknesses—at the Adobe Developer Center.

Step one: Preflight the video

With the tools in hand, someone hands you a video and it is now time to actually prepare the FLV file. The first thing you want to do is to ensure that you have the highest quality video in your possession. Open the video in the QuickTime Player or the Windows Media Player and see if Lossless Compression—uncompressed AVI for example—has been applied to the video. You can retrieve this information by selecting File > Properties in the Windows Media Player or Window > Show Movie Info in the QuickTime Player. If it isn’t lossless, then seriously consider returning the file, as I suggested in part two of this series, and request a version that is not lossy.

Image 2: The QuickTime Info window lets you see what you are working with.

Image 3: The Windows Media Player Properties dialog box.

The next step in the process is to actually watch the entire video—twice. The first time through, just enjoy the show and get it out of your system. The second time you watch the video, watch for movement, artifacts (little blocks or banding in areas of solid color which are indicators of lossy compression) and listen to the audio. What you find will help you determine your encoding strategy. This is one of the most important steps in the process. Scott Fegette at Adobe and I co-authored an article that walks you through this process. You can see it either at Community MX or at the Adobe Design Center.

Finally, if you insist on shooting your own video, you might want to read this rather informative piece, also by Scott Fegette. There are plenty of practical tips that will help you navigate the video minefield.

Step two: Encoding the video

This next step in the process is what separates you from the YouTube neophytes. As I pointed out in part two of this series, it is not Flash video that sucks on YouTube, it is how the FLV was encoded that makes it such a bad experience.

The Flash 8 Video Encoder is actually composed of two discrete areas: the encoding queue and the encoding settings. One really interesting aspect of the queue is that each video in the queue can have its own custom settings. The implication here, of course, is that the queue can be used for batch processing purposes.

Image 4: The FLV Encoder’s render queue can be used for batch processing of FLV files.

The Encoder window is where the actual encoding settings are applied. You access it by clicking the Settings button in the queue window. The biggest mistake you can make is to blithely assume that the list of presets in the Profile pop down is all you need to know. They are, to be gentle, not exactly correct.

The default setting is “Flash 8—Medium Quality (400kbps)”. Select this and you would assume that this will encode a video for broadband playback, but you’d be wrong. An FLV is composed of two tracks—video and audio. The data rate is the sum of both data rates. If you click the Advanced Settings button in the Encoding window, you will see the video data rate is, indeed, 400kbps. Look down to the bottom of the page and you will notice the audio data rate is 96kbps (stereo). The data rate, therefore, is not 400 but 496kbps. This rate is great if you have an internal intranet or a T1 one line but will not play smoothly using either cable or DSL access. The best advice I can give you regarding this window is to avoid the presets and do it yourself.

Image 5: Use the default values only as a last resort.

To do it yourself you need to know the Flash Player version being targeted and how the user will be accessing the video. For example, if you are adding a video to an intranet, and your company’s IT department is absolutely draconian about allowing people to install software on the company’s computers, the odds are virtually one hundred percent that the people affected by this policy do not have Flash Player 8 or 9 installed. In this case you will have to use the Sorenson codec. Though I may playfully be taking a swipe at the IT department, if your intention is to reach the broadest possible market, then Flash Player 7 and the Sorenson codec are your only options. However, at this point, Adobe says that ninety-three percent of the market has at least Flash Player 7, and seventy-nine percent or so already have Flash Player 8.

If your video contains an alpha channel (transparency such as the weather reporter in front of a green screen) or uses the FLVPlayback component, Filters, or Blend effects contained in Flash Professional 8, then your only choice is the ON2VP6 codec, which only works in Flash Player 8 and 9.

Knowing how users will be accessing the video is, in many respects, even more important than the player version you will choose. Imagine having dial-up access and the video is sized and encoded using the encoder’s default. Not only will it take forever for the file to download and play, but the playback will be, to be gentle, horrendous. The reason is the data rate. You will be overwhelming the player, attempting to push a watermelon through a worm.

Here are some rough guides for data rate and size for broadband and dial-up:

Dial-up: 120×90 and a total data rate of less than 100kps.
Broadband: 320×240 or 240×180 and a total data rate of less than 350kbps.

These are rough numbers. If you are looking for a more complete set of guidelines, William Caulfield has published a rather extensive article on best practices in encoding, which reviews encoding video for a variety of delivery situations.

Other factors that can affect the experience are frame rate, the physical size of the video, and the audio data rate. As you get going you will determine the settings that work best for you. Until then, these settings tend to work in a variety of situations:

Size: 320×240
Frame rate: 15 frames per second
Audio date rate: 64kbps (mono)

Size: 640×480 (full screen) - See more about full screen video here.
Frame rate: 5 frames per second
Audio date rate : 48kbps (mono)

Another good benchmark for frame rate is to set it to half of the frame rate used to encode the video in the first place. In North America we use the NTSC standard, which is 29.97 frames per second. This is always rounded up to 30 frames per second when it comes to digital video meaning the FLV frame rate can be 15 frames per second. In Europe the standard is PAL which is 25 frames per second. In this case the frame rate can be either 12 or 15 frames per second.

The audio data rate is another area where many of the decisions you will make will be subjective, not objective. If clarity of sound is a major objective, then selecting one of the Stereo Data Rate presets is the way to go. Just be aware that the higher the value, the more weight you will be adding to the final file size. Select mono if the clarity of sound is not a huge issue and the user couldn’t care less if a high-quality sound track blasts out of his stereo speakers. A great candidate for mono sound is a voice-over or narration.

The final consideration is placement of keyframes. In a digital video, there are two types of frames. Keyframes have all of the information in the frame retained. Difference (or delta) frames only contain, in very simplistic terms, the visual data that changes between the frames. As you may have surmised, the size of a delta frame is considerably smaller than a keyframe. Spreading out the keyframes—for example one keyframe every 300 frames—is how FLV files finish up being so small. Though you can manually set the spacing of the keyframes in the Encoder, this is one of those instances that, if you don’t have a lot of encoding experience, you may want to let the software do the work, so select Automatic in the keyframe placement pop down menu.

Image 6: Disgruntled Dan is ready to be encoded.

Once you have put your settings in place, click the OK button to return to the Render queue. When you return, click the Start Queue button and you will see the progress of your encoding. The end result of the process will be an FLV file which will be placed in the same location as the source file being encoded. It is at this point where a lot of people new to this process are a bit astounded. The file size for the final video has plummeted. For example, the QuickTime version of the video being used in this section weighs in at 38.2 MB, while the FLV created using the encoding settings has a final size of 8.6 MB. What you are seeing is a combination of how a lossy codec, frame rate, video data rate, audio data rate, and final physical size affect the process.

Image 7: The video is being encoded.

Before we leave the encoder, a common request for video is how to make it accessible. The best way of doing that it to add closed captions to the video. This is a rather extensive discussion which is out of the scope of this piece, but one aspect of the Encoder—cue points—is critical when adding captions. Though you can add the cue points using the Encoder, I am a bit leery of hard wiring anything into an FLV. If you are wrong on the timing of a cue point you are facing the task of re-encoding a video because once a cue point is embedded, it isn’t able to be removed. This explains why many Flash video creators tend to add these things using ActionScript, or use third party tools for closed captions. If you are looking to add closed captions to a small video, I have written a how-to. If you are looking for an industrial-strength, third party solution, one of the best out there is a product called Captionate.

Playing the video

Having created the FLV, the time has arrived to head to Flash and prepare it for web playback. In the interests of keeping this article focused, I won’t be getting into using ActionScript to play a video or using the Flash Media Server to play the video. These aren’t essential for putting a video online. Instead, I will walk you through the use (and abuse) of the FLVPlayback component found in the Flash Professional 8 Component library.

When you open Flash, the first thing you want to do is to immediately save the new .fla file (FLA) to the directory containing the FLV and which will be uploaded to your web server. Do this now and you will avoid a ton of grief later on, as you will see.

When the new document is open and saved, open the Components panel by selecting Window > Components. Open the FLVPlayback – Player 8 component and drag it from the panel to the stage. This component is your entry into the world of Flash video. It is dead simple to use but there are a couple of gotcha’s that will bite you if you aren’t aware of them. The first thing you need to know about this component is that it isn’t a movie clip. Like all Flash components, this one has its own methods and properties. Unlike most Flash components, this one is really, really easy to use and requires zero knowledge of ActionScript.

With the Component on the stage, select and click the Parameters tab in the Property Inspector, or select Window > Component Inspector. The list of parameters can, at first glance seem to be a bit bewildering. In actual fact, they are pretty concise. Let’s review them:

• Autoplay: The default value for this is True. What this means is the video starts to play once enough data is sitting in the browser cache to play the video. If you are going to have a set of controls attached to this component, change the setting to False. This way, the user controls when to play the video.
• autoRewind: The default is True. Don’t assume this parameter is what makes a video loop. All it does is to scoot the video back to the first frame when the video has finished playing.
• autoSize: Leave this at False. Changing the value to True means the video gets bigger or smaller depending on the size of the browser window.
• bufferTime: The default value is 0.1 seconds, meaning a tenth of a second of the video data is always in the buffer. I have found values between 0.1 and 0.5 seconds work best. Also keep in mind, the amount of time being buffered is also being added to the load time. If you set a buffer of 1 second then the user will have to wait for the video to load and then wait another second for the buffer to fill. If you don’t need to change this value, then feel free to ignore it.
• contentPath: This is the path to the FLV file. This is also where most of the grief around Flash video originates. The path can be either absolute or relative. We understand that, but there are two absolute paths that could be used here. If you click the Browse button and locate the FLV, the absolute path might just be “C:\Documents and Settings\username\Desktop\DigitalWeb3\DisgruntledDan.flv”. If that is the path it will be embedded into the SWF when you publish the project and the Player will look to that path to find the FLV. Not a good situation. This is why I asked you to save the Flash file to the same directory as the FLV. In this case the link will be relative—DisgruntledDan.flv—and the video will always be found because the SWF and the FLV are in the same directory.
• cuePoints: Any cue points added when the FLV was created will appear, or you can click on the parameter value to open the Cue Points dialog box and add them.
• isLive: Change the value to True only if a web cam is streaming a feed through the component.
• maintainAspectRatio: Always leave this at True.
• skin: Click on this and you get to choose one of over thirty control styles. The styles with “External” in the name will sit under the video. The styles with “Over” in the name will appear over the video. These skins can be customized and branded, but the process for this is well out of the scope of this piece.
• skinAutoHide: The default is False, meaning the skin or controls are always visible. Set the value to True and the user will have to roll the mouse over the video to make the controls visible. I am not a huge fan of setting the autoHide parameter to True. The reason is, depending upon the video used, there may just be an image in the first frame of the video. If the autoPlay parameter is set to False and the autoHide to True the user has no way of learning if the content is an image on the page or a video. Bottom line: One or the other, but never both.
• totalTime: This is the duration of the video. Add a value here and the time the video plays is set to that value. Leave it 0 and the Component knows it has to play the entire video.
• volume: The default value of one hundred is full volume. Be careful with this because some of the controls you may choose in the skin parameter don’t contain a volume control.

Note:
In the image below, I use the Component Inspector to set the parameters. This is because the window containing the Parameters in the Property Inspector can’t be expanded. I wanted you to be able see them all in one place.

Image 8: The parameters are set and the video is almost ready for upload.

Targeting Flash Player 6 or 7

There will be occasions where the target player is Flash Player 6 or Flash Player 7. In these cases you can’t use the FLVPlayback component. You need to use the MediaPlayback component found in the Media Player – 6 – 7 area of the Components panel. Using this one is almost as easy as using the FLVPlayback component. Once you drag the component to the stage, select it, open the Component Inspector and click the parameters tab in the Component Inspector. As you can see in Image 9, the major differences, apart from the classic Halo style used by Flash components are that you have to enter the length of the video and a frame rate, and also determine the location of the controls. One major gotcha with this component is that it will not play a video encoded using the ON2VP6 codec.

Image 9: Use the Media Playback component if Flash Player 7 or Flash Player 6 are your targets.

With the parameters set, you might want to press ctrl+enter (PC) or cmd+return (Mac) to test the movie. If you don’t see a video playing, check the path to the FLV, and be sure the FLA and the FLV are in the same directory.

Assuming all is working as it should, the next step in the process is to trim off the excess weight by setting the Flash stage to the same size as the FLV. Be careful here because another gotcha will rear its ugly head.

If you select Modify > Document and select the Contents button in the Match area of the Modify Document dialog box, you will see that the dimensions of the contents are 320×240. If you click OK, the Flash stage will shrink to the size of the video, but the controls will be left hanging off of the edge of the stage. If you do this, the controls will not be visible when you place the SWF into the HTML document. This is more an issue with the External controls (rather than the Over controls) you chose in the parameters. If you are using an External control, add another forty or forty-five pixels to the height of the stage.

Image 10: Selecting contents without adding some extra height to the stage will result in the loss of the controller on your web site.

Publishing the SWF

Having removed the unwanted space from the stage, the time has arrived to publish the video and get it up on your web site. When you select File > Publish Settings you have the choice of publishing just the SWF or the SWF and the HTML (in the Formats area of the Publish Settings dialog box). Being a hard core Dreamweaver 8 user, I rarely publish the HTML and, if you prefer to do it by hand, then you too can deselect the HTML option. All the HTML option does is create an HTML page with the necessary Object/Embed tags, and not much else.

Again, be aware of a gotcha that catches the uninitiated. If you look at the path to the SWF, you may just see another absolute path pointing to a location on your hard drive. This is a really bad idea. If you see the path, click the Browse button and navigate to the directory containing the FLA file and the FLV file. When you return to the Formats area, click the Use Default Names button and this will strip off the path to the directory.

If you are targeting the Flash Player 7 or the Flash Player 6, click the Flash tab in the Publish Settings, and select the player in the version pop down. Just keep in mind that if you are using the FLVPlayback component and select either the Flash Player 7 or the FlashPlayer 6 you will see an alert box suggesting this might not be such a good idea.

Return to the Formats area and click the Publish button. A small dialog box will appear showing you the publish progress. When it disappears, click the OK button to return to Flash. Save the FLA and quit Flash.

Image 11: Publishing the SWF.

If you open the directory where you saved the SWF you will see the following files:

• The FLV
• The FLA
• The SWF
• Another SWF named after the skin you selected.

Whatever you do, don’t move the SWF and the controls to different directories. Do this and the video will be broken. Always keep them in the same folder. In fact, if you can, keep the HTML, the FLV, the SWF and the controls SWFin the same folder. Do this and you are guaranteed the video will always play.

Image 12: Keep the Controller and the Flash SWF in the same directory.

Once the SWF is placed on the web page, it can be treated no differently than any other content on the page. For example, you can use CSS to run text around the video, or place the video in its own location on the page.

<!–You can even, as we have done here, place the video at the end of an article. –>

Conclusion

This article completes the series on “The Rise of Flash Video.” If you have been following the series, I traced how Flash video muscled out the big boys to become a standard in very short order, and dealt with many of the quality and security concerns raised around the use of Flash video.

This installment walked you through the Flash video process, starting from being handed a digital video to uploading the video and using it in a web page. As you may have surmised, though the process is fairly uncomplicated, there are plenty of opportunities to make mistakes. One of the most common, when it comes to using the FLVPlayback component, is not using a relative path to the FLV. Another is placing the video SWF in one directory and the controls SWF in another.

I also covered creating the FLV using the Flash 8 Video Encoder that ships with Flash professional 8 and, again, pointed out areas where making mistakes or assumption around data rate can result in a poor experience for the user.

Obviously, there is a lot more that you can do with Flash video, especially if you are familiar with ActionScript. You can, for example, create some rather interesting effects by applying Blend Modes and Filters to the video. You can create playlists that allow one to choose among a number of videos, have a sequence of videos play, and even have one video transition into the next one when it finishes playing. Still, the process starts with mastering the basics and expanding your knowledge from that point outwards.

As I am fond of saying, “The amount of fun you can have with Flash video should be illegal.”

I’ll see you in jail!

This will happen to you: Your client calls and informs you that she is seeing a lot of video on the web these days and, that she just happens to have a few she would like to put up on her site as well. There was a time when this request would have struck fear into the hearts of most web developers, but today’s web is a different place; the ubiquity of the Flash player in the marketplace has made this task possible. As I pointed out in the first part of this series, Flash didn’t become the default format of YouTube and MySpace without reason. It’s a dead simple way to deploy video to a website.

The basic rule of thumb for preparing videos for Flash is this: Start with as much detail as you can get.

But simple isn’t everything. We’ve all seen videos that stop and start, take forever to play, or look pixelated. There’s a lot of crappy video out there, so it should be clear that merely waving Flash at the video problem like a magic wand isn’t enough. To be successful with Flash video, you need to understand both the technology and the user who will be viewing it.

For example, there are still many users, primarily in rural areas, who use dial-up to access the web. The dial-up user is in for a really long day if you’ve prepared your video specifically for his urban counterpart who is awash in bandwidth. This is indicative of a developer who fell in love with the technology at the expense of the user.

In this article, I move from a general overview to a more “techie” focus to explains what you need to know so you can prepare and deploy Flash video that will work well for all users.

QuickTime isn’t dead

The Flash video process starts with a source video—preferably a video in the QuickTime (.mov) format. There are two reasons behind this. The first involves the “GIGO Principle”: Garbage In, Garbage Out. We shouldn’t accept substandard artwork, audio, or other content, so it makes sense to apply those same quality standards to our video. The second reason is a matter of standards. The current industry standard is the QuickTime format, so it makes sense to request video in that format from your clients.

Speaking of standards, there is a widespread misconception that you can capture content directly from your digital video camera or a DVD, encode it as FLV(Flash video), and toss it onto your web site. Unfortunately, it’s not that straightforward. DV and MPEG4 streams don’t split the video into separate audio and video tracks, they interleave them together into one track, instead. In this scenario, the Flash Video Encoder won’t find an audio track, and the end result is video with no sound. There are solutions to this issue, but they are inevitably complex and expensive. If someone flips you a DV cassette or a DVD as your source video, your best response is probably a polite, “No thank you.”

QuickTime is generally the preferred video source file format, but accepting just any QuickTime video would also be a mistake. Each of these videos comprises separate video and audio tracks, and each track contains a massive amount of information. In order to keep these files manageable, the video is compressed using a codec.

Broadly, there are two types of codecs out there: lossy and lossless. As the name implies, the lossy codecs shrink the video file dramatically by dropping detail, like creating a JPEG image from a RAW photo. For our purposes, Spark, Squeeze, and ON2VP6 are the most important of the lossy codecs, because they the ones used to create the FLV file used in Flash. The result is a very small file size.

Lossless codecs lose very little information, if any, and the resulting files are quite large. When it comes to Flash video, large is a good thing before conversion, and a really bad thing at run time.

The basic rule of thumb for preparing videos for Flash is this: Start with as much detail as you can get. Make sure your original video is encoded with a lossless codec before you begin to convert it to FLV for Flash distribution. If you receive a video that isn’t losslessly compressed, seriously consider returning it and asking the client for a cleaner copy. This may sound a little harsh, but if you prepare an FLV from a video compressed with a lossy codec, quality goes out the window. Compressing an already-degraded video into FLV is like opening a JPEG in Photoshop, and saving it over itself with the quality slider pulled down to ten percent or so; recognizable at best, a jumbled mess of pixels at worst. In a nutshell, the crystal clear videos you see from movie and record companies likely all started life with lossless encoding. The pixelated messes of Flash video you sometimes see on the web had the life squeezed out of them lossily before they even hit the FLV converter.

Why Flash video stinks

Some folks take issue with Flash video, and they do have a point. There is a lot out there that makes watching Flash video a painful experience. They talk about pixelated and jerky video, and point to poorly re-compressed YouTube content as evidence that Flash video sucks. These shrill claims are misguided, but many people hear them and blindly agree that Flash video stinks.

These naysayers, however, rarely point to the New York Times, the Washington Post (shown below), or Vodafone. These sites make exceptional use of Flash, so the real question should be this this: If it can be this good, why isn’t everybody doing it?

Get clear on this: It isn’t the technology. It is the person that encoded the video in the first place who made the mistake. The thing that sets these notable Flash video providers apart from the teen-aged head-banger on YouTube, GoogleVideo, or MySpace is incredibly simple: These video providers care about quality, intimately understand the technology, and, most important of all, they keep an eye on the pipe (the data pipe, that is).

The FLV technology, when you get right down to fundamentals, is no different from its QuickTime and Windows Media web brethren. The sole purpose of those formats is to move audio and video data from one place to another. That data is contained in a stream, and all three formats will ask me how fast the current in that stream is flowing. That is the data rate for the stream.

The best way of wrapping your mind around the concept of data rate is to think of a dam in a river. A lake upstream drains into a river, and the town that lies downstream, frustrated with constantly being flooded, decides to control the river. The dam is built, the floods stop, and the residents discover they have a second lake behind the dam.

Now let’s apply that analogy to a video stream. The lake is the server, and the river to the dam is the data stream into the video buffer. The second lake behind the dam is the video buffer, and the dam is the Flash Player. When you set the data rate for an FLV, you are the one who controls the flow of water out of the dam. If you increase the flow of water from the dam, the people in the town are in for a really bad day. Video that stops and starts is simply the audio and video data in the stream overwhelming the Flash Player. In this case, the Flash Player will buffer some of the data and release it. Buffer. Release. Start. Stop. It creates poor-quality video, and it’s not the fault of the Flash Player. The player is doing its job and, to be equally fair, I have seen this with QuickTime and Windows Media streams.

Still, Adobe hasn’t helped the cause with its Flash Video Encoder. The default data stream value for Flash Player 8 is 400 kbps. The average person looking at that will think, “Gee that sounds reasonable,” and proceed to encode the video at that rate. What they discover is their video plays poorly.

The problem with that number is it only represents the data stream for the video track. The audio default is usually 96 kbps, meaning the total data stream is just under 500 kbps—which is marvelous if you have a T1 line. Those of us with broadband or dial-up connections will get video that stops and starts. Unfortunately, there is no magic number, but if you are preparing video for a site, try keeping the total of the audio and the video data rates to about 350 kbps, and your frame rate to about 15 fps if you are encoding a video recorded at 30 fps (NTSC), or 12 fps if you are using the PAL standard of 25 fps.

It isn’t only the YouTube Lonely Hearts that don’t get this. I recently spoke at a conference, and during a panel discussion, one of the attendees made it clear that he didn’t think highly of Flash video. He works for a Fortune 500 company, and he claimed that his experience with Flash was so bad, he was seriously thinking of getting out of the game. When pressed by the panel as to what he was doing, he said, in a nutshell, “We create these things at 30 frames per second and a data rate of 1,000 kbps. The size is 480 by 320, and we have had nothing but problems.” At that data rate, frame rate and size, the experience his employees are having is no different from that of trying to push a watermelon through a worm.

Now that you have a broad idea of how to create a good Flash video, let’s deal with the next big issue. How do you stop fourteen-year-old boys wearing baggy pants and backwards baseball caps from swiping your stuff?

Dealing with DRM

Digital Rights Management (DRM) is a complex legal issue. It is a huge field, and I want to focus on what I see a key aspect of the debate. What has held content providers back is a well-justified fear that publishing a video means you lose control of it. But that’s not quite true. Again, it is not the technology, it is the user that causes the loss of control. When it comes to Flash, there are two ways of putting it out there: a progressive download, or a stream.

If anybody caught Mark Cuban’s contention that anyone who would buy YouTube “is a moron,” you may have been wondering what he was getting at. YouTube uses a progressive download to the browser cache. The player will wait for enough of the video data to arrive so it can safely play the FLV. This means the FLV is sitting on the user’s machine and being fed into the Flash Player from the browser cache. If you are really smart, you can pull the FLV from the cache and the video is no longer under the creator’s control. If you are streaming video of a corporate picnic or your kid doing face plants in a mud puddle, this probably isn’t much of an issue. If you are a corporation that has invested some serious bucks into your project, it may be a huge issue. Cuban’s point was that no one would bother suing YouTube, which really didn’t have a lot of cash, if you could sue its deep-pocketed buyer—which turned out to be Google—for copyright violations. Only time will tell who was correct. (And if you are interested in how this might pan out, read Does YouTube Make Google a Big Target For Copyright Suits? from the Wall Street Journal for additional analysis.)

The streaming solution for Flash video just happens to be the Flash Media Server 2 from Adobe. Its sole purpose is to move data, not files, from here to there—meaning that nothing other than data hits the user’s machine. The FLV file stays on the server. The other big advantage is that the video starts playing when the first bit hits the Flash Player. There is no delay, and suddenly the files that would otherwise have been released into wild stay put and are secure.

The other really neat thing about the Media Server is that it does bandwidth detection. This is accomplished through the use of an ActionScript file, and if the video is being streamed to Uncle Zotique in Prairie Dog, Alberta, who only has a 56k dial-up modem, the script will detect this and feed him the FLV designed for his particular connection. If I want to watch the same video, it will shoot me the high speed version appropriate for broadband.

The Flash Media Server is an expensive proposition. Still there are a few avenues open to you if cost is a consideration. You could, if you are not planning to be a heavy user, set up an account with an ISP such as Influxsis in L.A. or NI Solutions in Toronto, who run Flash Media Servers. The next level of expense is to have an account with a Flash video streaming service such as Vital Stream or Akamai. These accounts are ideal if you have a lot of video that needs to be securely streamed. Finally, if you are a fan of open source, you may want to take a look at Red 5. Though it is still in beta, it has been getting a lot of attention in the Flash community, and a release version will most likely be completed within the next six months.

If you are looking to get into the video broadcast game and plan to use the Internet, you also might want to take a look at Brightcove. This site, which bills itself as Internet TV, is not an idea in search of funding or a buyer. Founded by Jeremy Allaire, the same guy who brought us ColdFusion, this site is getting a lot of attention from some major content providers as they look for ways of securely putting television shows, movies, and other content on line.

Now that you have an idea of the pros and cons of Flash video, and you know how to secure your files, it may be a good time to ask if we should stop this futile debate and look at Flash video in a totally different way.

Forget about FLV

I was at the MX North Conference in Toronto a couple of years back, and had the pleasure of listening to the keynote delivered by Jeremy Allaire. At that point in his career, his company had just been purchased by Macromedia, and Jeremy was doing the conference circuit, talking up ColdFusion and Macromedia technologies.

The one aspect of his talk that caught my attention was his claim that the Flash Player was really a Trojan horse. As Jeremy explained it, practically every computer connected to the Internet had a major media player installed on the machine, and the users were just now turning it on. I liked the Trojan horse analogy because Macromedia had sort of gotten things going in 2002 by quietly slipping a video codec into the Flash Communication Server as part of its read/write capabilities. As John Dowdell recently wrote in his blog, “It definitely felt like a stealth movement the first few years, but then the floodgates opened.” Those floodgates were opened, in part, by people turning on the Flash Player and discovering it could play video.

Now that we have moved out of the novelty phase of web video, maybe we should stop looking at it as video and instead, as I pointed out in Part 1, of this series, look at it as content.

This is an important shift in perception. When you really think about it, YouTube, GoogleVideo, the New York Times and BrightCove don’t see the files as video. They see video as content to feed their sites. This content is shot using everything from cell-phone video cameras to full-bore studio rigs.

The fascinating thing about this is that video technology is available to everyone, and it is being used in ways I don’t think any of us could have foreseen. For example, here in Toronto, the local news station City TV encourages its viewers to send in video of news events. Recently, a house blew up in a neighborhood, and that night’s broadcast featured footage of the aftermath shot by local residents using their cell phones and DV recorders. This footage was also streamed from City TV’s web site. The production values were squarely in the realm of amateur, but I don’t recall anybody screaming at City TV about the poor video quality.

On a more specific level, Adobe and Apple have provided Flash developers and designers with a set of video tools that are about to change our perception of what is Flash, and what is video in a Flash movie.

I recently had the pleasure of doing a session at FITC Hollywood named “After Effects for Flash Designers”. The main point of the talk was Flash designers need to take a deep breath and not over-think it when considering how to incorporate After Effects content into their Flash designs. I demonstrated a number of techniques that showed how After Effects content can interact with Flash content on the Flash stage. One piece, featuring exploding text, audio, and a number of other effects caught the audience completely by surprise when I offered them a challenge: “Watch this piece, and you tell me what is Flash content and what is video content.”. I played the piece twice and not one of the hundred or so people in the audience could pick it out. When I opened the .fla file and showed them the Flash content, there was silence followed by a simultaneously whispered, “No way!”

Finally, debates about which format is best can stop. They are mostly irrelevant, because web consumers are going to watch just as much quality content as they will watch garbage. They are simply demanding it be available anywhere at any time and on any machine and, at this moment in time, the Flash Player is really the only technology that fits the bill. Can we assume from this, then, that the Adobe Flash Player product team is populated by soothsayers? Probably not. Macromedia and Adobe did get lucky, though that Flash video’s rise came at the same moment that online video content became cheap enough to give away.

The Rise of Flash Video, Part 1

In 2003, I was in Seattle getting ready to do a presentation on Flash Video at Digital Design World when Jim Heid, the Conference Organizer, saw the title slide of the presentation and mentioned that I might be facing a rather tough crowd. I looked out over the audience, sized them up and told Jim I had his back covered. He said he wasn’t too sure about that and pointed at the title on my screen: “QuickTime is dead.” Looking out into the darkened room, I watched about 200 people in the audience open their Powerbooks; hundreds of bright white Apple logos staring back at me. It was indeed going to be a tough crowd.

QuickTime, Windows Media, and Real essentially lost the market when they got blind-sided by the growth of the web, fast internet connections, and, in many respects, the “Standards Movement.”

Nobody really expected the stranglehold that Apple, Microsoft and Real had on the web streaming market in 2003 to be broken. Yet by Spring 2005, just 18 months after that presentation, that is exactly what had happened. Those three web video delivery technologies practically vanished, replaced almost entirely by Flash Video. This is not to say QuickTime and Windows Media are dead technologies. They aren’t by a long shot, but when it comes to putting video on the web, the Flash Player has rapidly become the only game in town.

In this article, I am going trace the rise of Flash Video, where we are with the technology and where, from my vantage point, I see us heading. In the second part of this series, I will survey the video creation process, discussing both the tools used to prepare the video file and how video in Flash is undergoing a profound and exciting change with huge implications for the web community. To start the process you have to understand how Apple, Microsoft, and Real “lost” the market.

How Video Players “got dead”

QuickTime, Windows Media, and Real essentially lost the market when they got blind-sided by the growth of the web, fast internet connections, and, in many respects, the “Standards Movement.” At the same time that practically everyone had gotten an internet connection and the cost of bandwidth to the consumer was plummeting, the web standards movement led by Jeff Zeldman, Molly Holzschlag and Eric Meyer started taking hold and web designers and developers began to look at the web page as a space they controlled. Content went where they said content should be and that was the end of that discussion.

The upshot was that consumers, with more bandwidth than ever before, were unwilling to wait for video to download before it played, and that the guys that designed the sites realized they controlled the web space. Their attitude was that if a video was to be content in a page with text running around it, there was no way they were going to let Apple’s QuickTime plugin tell their viewers to “upgrade to pro,” or let Microsoft’s video player move the video off the page into another area of the screen. This was a profound shift in perception for the design community. Up to that point, video was a “cool” technology and cool won out over control every time. When developers and designers started looking at video not as “video” but as “content,” we started our move toward the Flash Player and Flash Video.

This move in perception from “video” to “content” is still occurring and you can still see examples of the “bad old days.” For example, if you are viewing this article through Firefox (Mac or PC) or Safari, click this link: http://video.msn.com/. The odds are almost 100% you will see this screen:

Here’s the clincher: I am willing to bet that most if not all of you have the latest version of Windows Media Player installed on your machine. The average person will look at that and think, “Whoa, I need to upgrade.” They will do that, but get promptly returned to the page above anyway. Sometimes you get lucky and don’t see that page, instead seeing the word “Loading.” The thing is, the video isn’t actually loading. The browser isn’t seeing a darn thing and I have encountered users who will sit, looking at that word, for over 10 minutes before they just give up in disgust. Those of you who use Internet Explorer probably haven’t encountered this frustration.

Another favorite of mine is hitting a site and being told I don’t have the codec. The browser is really nice and asks me if I would like to locate it. I click OK and am told, essentially, “Your codec is here. You are a smart fellow, go find it.” Safari will tell me a plugin is not supported. Windows Media will tell me that the “specified octet stream is not recognized” and, more often than not, when there is a video I really want to watch, I can, as long as I am prepared, as shown below, to sit through a bazillion ads.

I didn’t think the situation could get any worse… but then it did. I am unafraid to admit that this summer I got hooked on Rockstar Supernova. If you hit that site, you will discover it is a Flash site. This really got me pumped until I clicked on one of the three video links. A pop up opens and I am looking at:

It wasn’t until I scrolled to the bottom of the Flash page that I caught the “disclaimer” regarding the need for Windows Media on my machine. Being a “tech weenie” I closed out Firefox, opened IE and headed back to the site. I click on my video link and am treated to a video that plays for a couple of seconds, stops for a while, plays a couple of more seconds of the video, stops for a while and … I think you know where this is going.

I use these examples not to point an accusatory finger at the designers, the companies, or even the technologies. I use them because they are prime examples of what makes the experience of watching web video such a profoundly negative experience. We are awash in a world of video thanks to TV. We bring our TV mindset to this technology on the web and, when we want to watch a video, we expect “play” to mean “play.”

Further, we expect “play” to mean “play on whatever device we are using to watch the video.” Web video is being delivered to desktop computers with an Ethernet cable stuck into the back of the box. Web video is being delivered to portable computers in coffee shops and parks outside Macy’s in New York that are connected to a wireless network. Web video is being wirelessly delivered to my PDA. Web video is being delivered to my Nokia cell phone. These are heady times for us and I suspect this is just the start. If you had told me five years ago that video would sweep the web and that the Flash Player would be the delivery platform, I would have thought you were more “Pollyannish” than pragmatic.

A short history of Flash Video

The rise of Flash video from relative obscurity to a web standard is a fascinating tale. There is no one date we can point to and say, “This is when it happened.” Some would point to Flash MX and the inclusion of the Sorenson Spark codec. Others will claim it was Flash Professional MX 2004 that really got things started, and a valid case can be made for the current iteration of Flash (Flash Professional and the improved FLV Playback component which seems to be so ubiquitous in today’s video experience. For me, Flash Video became “real” in 2000.

I was in New York attending the inaugural meeting of the New York Macromedia User Group and the evening’s speaker was Hillman Curtis. This was just before Hillman became famous and the room was filled with Director guys who were there to listen to Hillman talk about motion graphics in Flash. During the course of his presentation Hillman played some video in Flash. To say he got my attention would be an understatement. Up until that point video in Flash was a pipe dream. Many of us hanging around the forums would have long discussions regarding the “theoretical” use of video in Flash. Here I was, a few stories up in New York City and theory had become reality.

How Hillman did it was to apply an old video technique to a new technology. He simply exported the video out of QuickTime as a series of frames—the technique is called “rotoscoping”—and placed those images, sequentially, on the Flash timeline. Needless to say, the word got out; suddenly a lot of rotoscoped video started appearing in Flash. I’m not claiming it was Hillman who invented the technique and kicked off the video revolution; he simply was the first person I had encountered who was able to get video working in Flash.

The next big event in the Flash Video timeline was the release of Flash MX and the adoption of the FLV format as the video standard in Flash. When you installed Flash MX, a built-in encoder was included that used the Sorenson Spark codec to convert a variety of video formats into the FLV format. What caught everyone’s attention was how small these FLV files were compared to the original. In a book I wrote regarding the MX Studio, I cited the example of a 5.4MB video file being compressed down to around 40K.

At the same time that Spark was on the street, Sorenson Media, which had developed the Sorenson codec—regarded as the standard for streaming video at the time—also developed a stand-alone FLV encoder called “Squeeze.” This product offered even more power and flexibility than Spark and many Flash video developers started regarding Spark as being nothing more than “Squeeze Lite” and shifted to Squeeze to create their videos for Flash.

In these early days, we rapidly discovered there was a huge problem with Flash Video. It still had to be embedded on the Flash timeline and the result was a rather massive SWF file. The odd thing was this: users were quite content to wait for the SWF to load simply because video was such a novelty. The other issue was that video longer that 2 minutes in length experienced, to be gentle, image and playback degradation.

The next iteration of Flash, Flash Professional MX 2004, solved those issues. Instead of embedding video into the Flash timeline, developers and designers could stream video from a web server. Those new to video could use Drag and Drop video behaviors to get into the game, and, most important of all, the FLV format became an output format for all of the major video editing applications, including QuickTime. While all of this was going on, another company, ON2 Technologies, had developed an amazing codec, TrueMotion VP6, that could be used for broadcast purposes. Unknown to the Flash developer community, Macromedia was also paying attention to them and had started talking to them about a Flash version of the codec.

While all of this was going on, Flash Video was seriously catching on thanks to the rapid adoption rate of the Flash Player 7. The rate was the fastest in Flash history and Macromedia would tell anybody that would listen that well over 3 million Flash Players were installed each day. Microsoft, Apple and Real also found themselves caught in the perfect storm. Bandwidth became cheap, users were demanding an easy install, and these same users regarded platform as irrelevant—video content should play equally as well on both the Mac and the PC platforms.

Netscape had lost the browser war and RealPlayer was a part of the Netscape browser. Once Netscape went south, Real’s potential—at the time it was the best streaming video solution out there—followed Netscape. The sad part of the decline of Real is the fact it supported the SMIL language which allowed it to do more than just video. Real never developed good tools for SMIL authoring and they are still trying to play catch up. Windows Media Player was OS-dependent and that cut out a lot of Mac users (there is a Mac version, but it never really caught on). The fact that Microsoft had 90% of the OS market but only a 70% market share in the streaming media arena tended to indicate their clients were not exactly happy campers. QuickTime, thanks to the adoption of the technology by a variety of media companies became a de facto standard for broadcast-quality streaming, but it failed to catch on with the general public. Today, Adobe can claim that the Flash Player is on 97.3% of all of the internet-enabled computers in use today. Microsoft’s Windows Media Player is on 83% of computers, QuickTime is on about 66%, and Real is hovering at 56%.

The deal with the users was “sealed” last year when Flash Professional 8 hit the market. The ON2VP6 codec provided superior video quality and the use of Alpha channel video. The FLVPlayback component reduced the inclusion of video in a Flash video into a web page to a series of mouse clicks, and Adobe bought Macromedia shortly there after. If you were to ask anyone from Adobe why they bought Macromedia, the answer was succinct: “Flash.”

Flash Video takes over

In 2004 Flash Video was still a bit of a novelty. Two years later it is a standard. It is the video format of choice for two of the most popular sites on the web: YouTube and MySpace. Those two sites are classic examples of that old business adage of “Being at the right place at the right time with the right product.” As the web evolved from a static, page-based format to what the pundits are calling “Social Networking,” the market is realizing that video is a more powerful communications medium than words and images. YouTube and MySpace have also become outlets for video captures from cell phones, digitized videotape recordings, and web cams. The market has caught onto the fact that if you can digitize a video, you can broadcast it. The odd thing about this is that video is the least interactive media format out there.

Many of the major media companies, the Washington Post and the New York Times among them, are recognizing that web video is a great value-added and economical feature that supplements their print efforts. They can get into the “broadcast game” without the major-league expense of creating a TV network.

When the Tsunami devastated the East Indies, the New York Times was able to broadcast audio, video, and photographic records of the disaster in both the paper and the Multimedia section of the site within hours of its occurrence. In fact, video has become so important to the New York Times that there is an entire multimedia section of their web site and the front page of their web site contains a Flash video broadcast that changes on a regular basis. Obviously, it is no longer “all the news that is fit to print.” It is all the news that is fit to print “and broadcast.” Even so, the broadcasters aren’t missing a beat.

At a recent Online Marketing Conference, Ross Levinsohn, president of Fox Interactive Media, talked about Fox’s recent promos for “The Simpsons,” and the start of the show’s 18th season. In the three days that the Simpsons clip was available on Fox, it kicked out 1.4 million streams. What’s more, 80 percent of MySpace users watched five minutes of the clip, he added, while 50 percent of visitors who streamed the clip from Fox.com saw the entire video. Those are numbers that will pull advertising executives out of their chairs and get them running for their interactive divisions.

News organizations and broadcasters aren’t the only ones that are getting in on the web video game. Retailers are adopting this technology… big time. Vodaphone is one of the best retail examples I have come across where video is treated as content.

A few years back, in answer to questions about where they thought their technologies might be heading, Vodafone created their Future Vision site. In this series, Vodafone makes extensive use of Flash video. The thing that really caught my attention was the fact that the video was content. Through a clever use of masking and other techniques video appeared in watches, rolled up pieces of plastic, and futuristic screens—the video was used in context. There were no controls and, in many instances, you were made to feel you were peeking over someone’s shoulder as they engaged in a video conference, found directions to a club in London, or interacted with their parents in Italy.

Where is all of this leading?

Business is now realizing that video is a powerful marketing tool. One of the most common questions I am getting today is: “The boss wants to take the stuff from our corporate DVD and put it on our web site. How do I do that?” Two years ago, that sort of thing was in the realm of sheer wishful thinking. The advertising industry is now crazy about this technology because they can now measure its impact using real numbers; 80% of MySpace users and 1.4 million streams over 3 days for an 8-minute clip of the Simpsons makes a rather powerful business case for media buyers.

From my perspective, I find the shift from “video as video” to “video as content,” especially on the Flash stage, to be rather fascinating. Experimenting with After Effects, I have come to the conclusion that the boundaries are blurring between what we’d call “Flash content” and “Video content” in a Flash movie clip. I have been bending video around objects, putting the FLV in a movie clip and applying Alpha transparency and the Blend modes to the movie clip. The upshot is what I call a “meta movie clip.” That is content in a Flash movie clip that is a hybrid of Flash and video content. Even simple things like using a video with an Alpha Transparency and embedding it in an HTML page is no longer in the realm of advanced web video tricks. It will become more and more commonplace when designers and developers discover it really isn’t that hard to do.

Timelines use dynamic HTML also known as DHTML to change the position of an AP DIV or the source of an image over time, or to call behavior actions automatically after the page has loaded. You cannot have animation in Dreamweaver without using the Timeline, unless you import an animated GIF or Flash animation. Since it uses DHTML it does not require the use of plug‐ins, Active X controls, or Java Applets.
Timeline Features
A timeline is composed of a series of frames. A frame I one cell or one point of time in a timeline. The more frames you use on the timeline the longer the animation lasts. You can have multiple animations on a Web page, but I wouldn’t suggest that since it might tax someone’s operating system resources.
Animation moves through the timeline frames with the use of keyframes. Keyframes hold information, images, just about anything you plan on moving through time.

Timeline Panel

The Timeline is accessed through the Modify > Timeline menu. There are several choices once utilized. The best way to talk about the Timeline is to use a visual representation of it as below. It is similar to the Flash Timeline.
There are a few important items to identify on the timeline
•
The numbered rows are individual timeline rows; you can have several items all living in the timeline, each on its own row.
•
The single row at the top with a “B” on the row marker is where you install behaviors, such as timeline controls that start and stop a timeline from action.
•
The numbers across horizontally counting by 5 are the Frame numbers; each individual white frame is a cell that can hold something.
•
The red line and Frame highlighter is the Playback head; you can “scrub” the Timeline by dragging it left to right and then see what is happening in the document by time.
•
By default, Dreamweaver uses 15 frames per second, seen above in a grayed out box; you can make the time line advance slower or faster by changing the FPS in the box.
•
The two checkboxes, Autoplay and Loop are used to start the animation at the loading of the Web page, and also Loop the animation continuously if desired.
•
Rewind, Back and Play/Forward buttons work as you expect, by advancing or returning the Playback head.
Dreamweaver CS3: Animation Behaviors with the Timeline

Placing Objects on the Timeline

An item to be placed on the Timeline must be inside of an AP DIV. It’s the DIV container that is placed on the timeline to receive a behavior. There are several ways to get placement on the timeline; I personally like to drag the DIV marker from the Design view of the page directly to the Timeline. You may also right‐click on a DIV marker to place it on the timeline.

Nonlinear Animation

A common style of animation is called nonlinear, it usually involves moving an object from one point of the screen to another part, this can involve buttons that can start and stop the animation. It is possible to record the path of an object, such as the project showing a motor home traveling across a map, a butterfly touching parts of a flower, or a bi‐plane moving across the page. The possibilities are as endless as your imagination. Just don’t put too many on one page!
Linear, or StraightLine, Path Animation
This type of animation utilizes the timeline not for time passing as much as object placing. Place an AP DIV on the timeline, and use the Visibility and Hidden features available for DIVs and you can create a Slideshow of photos, drawings, or whatever you can imagine, perhaps several DIVs containing text to be seen by clicking a button. Notice the image to the right that was taken from a slideshow presentation, this Timeline advances by clicking a button on the page to see the next image. The “B” or behavior row holds a behavior every two frames. The behavior stops the slideshow from advancing until the user clicks a

Using Behaviors with the Timeline and Button Objects
Behaviors can be added to the Timeline to start and stop, show and hide elements on the Timeline. These behaviors might be added to the BODY tag of the Web page so it starts when the page is loaded or only when the object behavior is called by the user, usually by pressing a button.
The image shown on the right became available once I clicked on a button in the document, by choosing the Timeline selection I was given the following options to choose from; Go To Timeline Frame; Play Timeline; and Stop Timeline. it for
Since you are using AP DIVs to create the Timeline events, instead of outside programs such as Flash, you are using elements that can be accessible to all. Consider the size and placement of buttons that will be used to navigate the timeline, or how the timeline is used on the page. The best approach is to develop your idea and then test accessibility. Did it pass the test, if not; can you make it pass by altering the project in some way? Can you create an alternative page to link to so you can be accessible?

Examples of Timelines in Action
Non‐Linear Record Timeline Behavior ‐ Tour
Non‐Linear Record Timeline Behavior ‐ Butterfly
Non‐Linear Record Timeline Behavior – Flying
Linear Timeline Behavior ‐ Slideshow

MAXELL RELEASE WORLD’S FIRST USB AND eSATA COMBO DRIVE
Maxell ensures more storage and increased transfer rate with the launch
of the New portable 32GB Solid State Drive

London, UK, (Oct 2008), Maxell Europe Limited, the technology brand leader is delighted to launch their revolutionary portable Solid State Drive (SSD), the world’s first dual storage device that combines rapid eSATA technology and robust USB connections. SSD has been developed to replace existing Hard Disk Drive’s (HDD) that are commonly used in today’s PCs and notebooks. More and more notebooks are being produced with built in SSDs over HDD, the new Mac Air is a prime example, this looks set to be the way the market is moving. Maxell now offer a portable solution for your SSD needs.

integrated eSATA as well as an indestructible model is what distinguishes this exclusive technology

While many of us are familiar with USB as an external data transfer and storage device, the eSATA technology is fast becoming the new phenomenon for almost everyone.

eSATA, meaning External Serial Advanced Technology Attachment is being regarded as the next generation of internal bus interfaces for hard drives giving greater read/write speeds compared to USB connection and USB Flash Drives, and is a new technology that is steadily being introduced on many new PCs and Laptops.

One of the fundamental advantages of eSATA is its exceptional download speed — it is capable of transferring speed around three times faster than USB 2.0 (refer to chart below).

As an advanced technological leader, Maxell has ingeniously utilised both eSATA and USB to create a unique storage device that works instantly, rapidly and reliably.  The limitations of HDD are becoming increasingly frustrating for us all and Maxell’s portable SSD is set to be the solution.

So what are the actual weaknesses of HDD and what makes SSD so special?  Current drawbacks with HDD include its high power consumption, inadequate data retention, considerable production of noise and heat and, crucially, extreme vulnerability to damage.  SSD conquers every one of these concerns.  It is power free, lightweight, works quickly but quietly, it will not overheat and, most importantly, its comprehensive shock resistance and extensive data retention makes the SSD the most efficient and reliable way of storing and protecting information

SSD is the revolutionary means of storing data, essential for those who have ever experienced the stress and frustration of a slow, damaged or broken USB, or for those who are merely dedicated admirers of state-of-the-art technology.  You can throw it in your bag, move from office to office, classroom to classroom, country to country, without even the slightest worry.  If you are looking for the most reliable, rapid and robust portable storage device, this SDD is unquestionably for you!

Don’t forget to look out for the new 64GB SSD, available to buy soon!

Note to Editors:

• Samples available on request

• Maxell Solid State Drive 32 GB SRP= €120  (64 GB available to buy late-January 2009).

• Available to buy now

Stockists:

• UK: Play.com

• Other European stockists available

In Photoshop you can achieve an excellent red eye reduction by doing the following few easy steps.

Here is our starting image. This girl has beautiful brown eyes. However the flash of the camera made her look like a bunny.

Make a Channel mixer adjustment layer and set the Red channel to Red 0%, Green 50%, Blue 50%. Don’t get scared you’ll get a completely off color image.

Now select the mask of the adjustment layer and fill it with black by pressing Alt-Backspace. Now we have our bunny back. As the last step select the paint brush and paint on the mask with white to reveal the effect of the adjustment layer. Select the paint brush the size of the red spot in the eye.

The final result is very natural and convincing.

The image used in the project is a section of a larger image from iStockphoto.com (image number 05009631). A 12-megapixel DSLR with a professional grade lens at point blank range and a generous amount of in-camera sharpening is a very cruel combination for showing every minor imperfection in the skin’s surface (check out the nose). The technique in this tutorial can be used at full throttle to render the skin suitable for use in a skin care advertisement, or toned down a little to return the skin to something approaching normal (rather than how the camera lens captured it).

Step 1
Start the process of smoothing the skin by duplicating your background layer using the keyboard shortcut Ctrl + J (PC) or Command + J (Mac) and then go to Filter > Blur > Surface Blur. This filter, unlike the Gaussian Blur filter has a ‘Threshold’ slider that, if used correctly, will leave edges crisp and sharp whilst blurring the surfaces inside the edges. This will ensure there are no nasty haloes around the edges of your subject as a result of the blurring process.

Step 2
It is important to get the balance right between the Radius and the Threshold slider settings for each and every image (there is no one ‘perfect recipe’ that suits every image). To get a feel for what these two sliders do, set them both to a value between 20 and 25. Now move the Radius slider lower until you detect the surface tone becoming ‘mottled’ or ‘blotchy’ and then move it higher again until the surface appears very smooth. Finding the minimum radius that renders the surface smooth is your goal here.

Step 3
Now drag the Threshold slider higher until you see haloes appear around the edges of your subject. Back the slider off to a point where all of the haloes disappear. If you continue to move the slider lower, after the haloes have disappeared, you will start to re-introduce the finer detail that was removed the by the Radius slider. Try to make the surface as smooth as possible at this stage as we will reintroduce the texture of the skin in a later step.

Step 4
Select OK to apply the Surface Blur filter and then hold down the Alt key (PC) or Option key (Mac) and click on the Add layer mask icon at the base of the Layers palette. This will add a layer mask filled with black that conceals the surface blur on Layer 1. Select white as the foreground color in the Tools palette and then choose a soft-edged brush and set the opacity to 60-80% in the Options bar. Paint to reveal the blur in the areas of the skin only. You do not need to be too critical about accuracy as areas of fine detail such as the eyelashes and the contours of the face have already been preserved on the Surface Blur layer. You will, however need to avoid painting over areas such as the lips to ensure fine detail is not lost in these areas. Paint a second time to reveal additional softening where needed.

Step 5
In this step we will eliminate minor imperfections in the skin that the surface blur filter could not smooth over. With the top layer selected hold down the Ctrl + Alt + Shift keys (PC) or Command + Option + Shift keys (Mac) and press the letter E to stamp the visible elements of the project to a new layer. Go to Filter > Noise > Dust & Scratches and set the Threshold slider to 0. Raise the Radius slider just enough to remove any large skin imperfections. Don’t worry about the lack of texture at this point in time.

Step 6
Raise the Threshold slider to reintroduce surface texture but stop just short of the point where the larger skin imperfections start to reappear. Select OK to apply the filter and then hold down the Alt/Option key and click on the ‘Add layer mask’ icon at the base of the Layers palette to conceal the effects of this layer.

Step 7
Select the Brush tool and white as the foreground color in the Tools palette and set the Opacity to 100% in the Options bar. Zoom in to 200% and paint to remove any imperfections. Hold down the Spacebar and click and drag to move the image in the image window so that you can navigate around the surface of the skin to look for additional imperfections. The skin should now be rendered smooth but with realistic surface texture and free from all minor imperfections.

The skin should now be rendered smooth but with realistic surface texture and free from all minor imperfections.

To start with, we create a new document and add text to the canvas using a font and color of your choice. TIP: use a relatively bold-looking font for best results:

The next thing we want to do is goto the Layer menu, and choose Type > Convert to Shape. At this point, we will no longer be able to edit our text, so make sure it is as you want it.

You should now notice that our text has an untidy, slight border around it. This is the vector mask. To edit this, choose the Pen Selection tool:

Now make a selection around the whole word using this tool:

Now we have the whole word selected, we want to choose the following option in the toolbar for the Pen Selection tool: Exclude Overlapping Areas:

Now click on an blank area to deselect the whole word, and with the Pen Selection tool still active, simply drag and position each letter where you want it. Notice that the overlapping areas are cancelled out:

And if you wish to rotate or transform each letter, you can choose the Edit > Transform Path > Rotate (etc.) to modify further:

Finally, you can add a Layer Style to your new creation to make it look even better:

]]> http://www.londoncomputercollege.com/computer_tutorial/text-effects-in-photoshop/feed/