Build powerful Web applications via the Yahoo! Developer Network

by Tony Patton | Jul 31, 2006 4:52:00 PM

Takeaway: Tony Patton discusses a new resource he recently stumbled upon: the Yahoo! Developer Network. It offers lots of API's for utilizing Yahoo! features, as well as plenty of generic Web development resources.

The community aspect of the Internet has changed the way we work. Developers can quickly get answers to their questions by way of a Google search, or learn new techniques and technologies via countless Web sites, blogs, and so forth. One site I recently discovered is the Yahoo! Developer Network. While it offers lots of API's for utilizing Yahoo! features, it also includes plenty of generic Web development resources.

What is it?

An initial perusal of the site can be a bit overwhelming, but it offers a variety of cool stuff for Web developers. Yahoo! describes the purpose of the site as helping software developers integrate Web sites and applications with Yahoo! using standard technologies such as XML and RSS.

YUI Library

The Yahoo! Developer Network offers tools and sample code for working with Yahoo! applications like Yahoo! Finance, Maps, and Messenger, as well as Flickr and HotJobs. The tools include RSS feeds and API's for utilizing application services, but I want to concentrate on the Yahoo! User Interface (YUI) Library.

Yahoo! describes the YUI Library as a set of utilities and controls, written in JavaScript, for building richly interactive Web applications using techniques such as DOM scripting, DHTML, and AJAX. It provides a set of components for adding specific functionality to a Web application. The components are available as open source via a BSD license.

The components are available in one download, which is comprised of one compressed file. You can extract it to install the library; it includes documentation, sample code, and the source code for each component. Let's take a closer look at one of the components to get a feel for what is available.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

Calendar

Providing a calendar is a common requirement for Web applications. The calendar component provides a powerful solution to such requirements. It is very flexible, allowing it to be configured to meet just about any scenario. The following resources of the YUI Library are necessary to use the calendar:

• The Yahoo global object is available in the yahoo.js file in the build/yahoo directory of your YUI Library installation. It provides a single global namespace within which all YUI Library code resides. It must be included on every page that utilizes the YUI Library, and it must appear before any of the other YUI components.
• The Event utility (event.js file) includes code to handle events. It is located in the build/event directory of your YUI Library installation.
• The DOM Collection (dom.js file) provides code for working with the HTML DOM. It is located in the build/dom directory. It comprises a family of convenient methods that simplify common DOM-scripting tasks, including element positioning and CSS-style management, while normalizing for cross-browser inconsistencies.
• The actual calendar code is found in the calendar.js file in the build/calendar directory.
• The calendar.css style sheet provides visual formatting of the calendar control. It can be found in the build/calendar/assets directory.

All of these files should be included in your Web page to use the calendar control. With them included, an HTML element is created to contain the calendar. For example, the following div element is used:

Next, the calendar control is created. It accepts a minimum of two parameters. The first parameter is the id of the new element that will be created by the calendar control to hold its DOM. The second parameter is the id of the element that will contain the calendar control (our div element). The next example takes advantage of the optional third parameter that specifies a start month/year for the rendered calendar. A fourth optional parameter can be used to specify a selected date on the calendar control.

Finally, the render method of the calendar object is called to render it on the page. Listing A creates a calendar beginning with January 2007.

This is a basic example, but there are plenty of options for working with the calendar contents as well as formatting its display. Listing B extends the previous code to customize the display characteristics of the calendar including the weekdays, months, and so forth.

Using the Calendar control is better if you can work with the values within it. You can use the following line to display the date selected by the user (mouse click) via the Calendar control's getSelectedDates() method in the previous examples.

what's selected?

These examples provide a preview of the basic functionality of the Calendar control. You should refer to the documentation to dig deeper into what it offers.

Design patterns

Another interesting area of the Yahoo! Developer Network is design patterns. While design patterns have been utilized by application developers for years, they are not as common with Web developers. Design patterns provide solutions to common problems and keep developers from reinventing the wheel every time they are faced with common scenarios. The library site includes numerous Web development patterns with sample code that often utilizes YUI Library components.

New tools at your disposal

The Web is overloaded with sample code and related resources to help with your Web development projects, but some resources are better than others. I found a great resource when I stumbled upon the Yahoo! Developer Network. It provides plenty of helpful information for taking advantage of Yahoo!-related resources in Web applications, as well as a great set of Web components, sample code, and much more.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

How do I… Install and configure Windows Server 2008 core?

• Date: December 3rd, 2007
• Author: Steven Warren

With the imminent launch of Microsoft Windows Server 2008 coming on February 27, 2008, I want to show you a feature I am fond of in this new operating system. With Windows Server 2008, you have the option of performing a Windows Server Core installation, which provides you with the minimum set of tools to run Windows.

You are provided with a kernel and a command line to manage the server. It is slim and bare bones and allows you to configure Windows concisely. This type of installation is perfect for a datacenter. I am really excited about this feature.

This blog post is also available as a TechRepublic gallery and TechRepublic download.

Installation

When you first run through the installation of Windows Server 2008, you have two options for installation. They are:

• Windows Server 2008 Enterprise (Full Installation)
• Windows Server 2008 Enterprise (Server Core Installation)

The following eight screen shots (Figures A-H) walk you through the installation of Windows Server Core which took approximately ten minutes to install.

Figure A

Figure B

Figure C

Figure D

Figure E

Figure F

Figure G

Figure H

After the installation, the main window for your new installation appears and you are ready to login as shown in Figure I. The initial login is Administrator and blank password (Figure J). You are required to change the password and set an Administrator password on initial login.

Figure I

Figure J

Now that you are logged in (Figure K), you are ready to configure the date, time, and time zone. In the command line type the following: controltimedate.cpl and set the options accordingly (Figure L).

Figure K

Figure L

If you need to configure and change the keyboard layout and settings, type the following in the command window: control intl.cpl (Figure M).

Figure M

Let’s move on and change the server name. The default name is a bunch of random letters and numbers and I would like to change the name to a local standard. You can view the current hostname by typing the following:

c:windowssystem32hostname

Now let’s use the name ssw-svr15. We will perform this option in the command line (Figure O) by typing the following:

c:windowssystem32netdom renamecomputer %computername% /NewName:ssw-svr15

Figure N

After choosing to proceed, the task completes successfully. You now need to reboot the server using the shutdown command. For the proper syntax, type:

shutdown /?

After reviewing the syntax, (Figure N) I will type the following: shutdown /r (switch for shutting down and restarting the computer) /t 10 (wait 10 seconds to shutdown and restart) /c “Changed Server Name” (add comment of max 512 characters). They total syntax will look as follows:

shutdown /r  /T 10 /C "Changed Server Name"

Figure O

Let’s now configure our networking so we can join this server to a domain. In order to see what interface you have to configure, (Figure P) type

netsh interface ipv4 show interface

Figure P

The Local Area Connection that we are going to configure has an index value of two. Let’s proceed and configure TCP/IP for this connection. (Figure Q) Type the following command to set the TCP/IP information:

netsh interface ipv4 set address name="2" source=static address=192.168.1.199 mask=255.255.255.0 gateway=192.168.1.1

Figure Q

Follow the same example to configure DNS (Figure R):

netsh interface ipv4 add dnsserver name="2" address=192.168.1.1 index=1

Figure R

If you type ipconfig /all, you will see the newly added information (Figure S).

Figure S

Let’s join it to a domain! In order to perform this function, we will take advantage of the netdom.exe. (Figure T) The syntax is as follows:

netdom join ssw-svr15 /domain:watchtower /userd:Administrator /passwordD:Password01

Note: Do not forget to reboot the server using the following command:

shutdown /r  /T 10 /C "Added to domain"

Figure T

As a final step, we should not forget to activate the server (Figure U) by typing the following:

slmgr.vbs -ato

Figure U

This doesn’t even scratch the surface of what you can do with a Windows Server Core installation but it begins to show you how powerful command line is with a small Windows kernel. With the popularity of virtualization and server consolidation, having the ability to virtualize a server core installation and attach a single role will become very popular with the datacenter. My next test will be to try to install Virtual Server on my server core installation. Wish me luck!

Send e-mail with your Cisco router

• Date: March 13th, 2008
• Author: David Davis

Did you know your Cisco router could send you an e-mail? Until recently, I would have said that it wasn’t possible, but today, I’ll show you how to do it. And we won’t stop there: I’ll tell you where to find some other scripts that you can use on your Cisco router. Let’s see how the Cisco IOS Tool Command Language (TCL) can make your Cisco administration easier.

A while ago, I wrote an article introducing TCL — “Get to know Cisco’s Tool Command Language (TCL)” — and I told you how you can create your own scripts using TCL. To run TCL, your router needs to be running Cisco IOS 12.3(2)T or later.

While TCL offers many uses for your Cisco router, it needs to be able to communicate with the Cisco IOS. Traditionally, when an event happens on a Cisco router, it sends that event to a management station on your network for some subsequent action. However, with Cisco’s introduction of the Embedded Event Manager (EEM), Cisco routers now have more intelligence and can take actions on their own.

Cisco originally released EEM 1.0 in IOS versions 12.0(26)S and 12.3(4)T. Today, with IOS versions 12.4(2)T, 12.2(31)SB3, 12.2(33)SRB, we’re up to EEM version 2.2, and we’ve gained many features along the way. To learn more, check out Cisco’s Embedded Event Manager Overview.

I suspect that TCL and EEM sound only moderately interesting to most of you because, like any scripting language, it can be difficult to envision what you can do with it. To help you understand the power of EEM, Cisco has created the Embedded Event Manager (EEM) Scripting Community.

Thanks to this site, you can not only download many useful scripts, but you can also submit your own to share with other Cisco users. Kudos to Cisco for this excellent resource!

Send e-mail with your router

To better understand the uses of TCL and EEM, let’s look at an example. Here’s a simple demonstration of how a router can send an e-mail that contains the output of the show version command.

First, I went to the EEM Scripting Community and downloaded the Send Email script. I unzipped the script and ended up with a simple text file called Sendmail.tcl.

Next, I stated my TFTP server on my PC, and I used TFTP on the router to transfer the modified script from my PC to the router’s flash. Figure A shows you what it looked like.

Figure A

Next, I ran the following command while in Global Configuration Mode:

Router(config)# event manager directory user policy flash:

Then, according to the instructions included in the script’s comments, I set the following environmental variables on the router to fit my particular configuration (still in Global Configuration Mode), as shown in Figure B:

Router(config)#

event manager environment _email_server 10.10.10.10

Router(config)#

event manager environment _email_from router-123@cisco.com

Router(config)#

event manager environment _email_to noc@cisco.com

Figure B

Next, I registered the script using the following command:

Router(config)# event manager policy sendmail.tcl

Finally, I ran the script using the event manager run sendmail.tcl command. If all goes well, there’s no output. Figure C shows the e-mail message.

Figure C

You can also modify this script to run on triggered events. For example, there’s a script called showtech that you can use to e-mail the output from the show tech-support command directly to Cisco or to yourself. For more information, check out Cisco’s video tutorials on using TCL/EEM router scripts.

More uses for TCL and EEM

While this article has focused on using TCL and EEM to send an e-mail with your router, I want to stress that there are so many more practical uses for TCL and EEM with the Cisco IOS. For example, one of the most useful things you can do with TCL and EEM is use a set of diagnostic scripts dubbed IOS Service Diagnostics. Such scripts are available for OSPF, BGP, and QoS.

With these scripts running on your router, when abnormal events occur (such as losing an OSPF Neighbor), your router can automatically attempt to diagnose the issue, perhaps take action to solve it, or, if nothing else, notify you of the issue along with all of the relevant information needed to resolve it. In other words, the scripts can provide for a shorter Mean Time To Repair (MTTR) — which equates to cost savings. In addition, the scripts can increase network uptime, quickly identify root causes, and automatically collect network troubleshooting data.

Here are some of the other interesting scripts available:

• Memory Health
• Power and Temperature Health
• Composite Device Health — Interface Errors
• HSRP State Change
• L3 Path Failure Detection — EIGRP Neighbor Change
• VPN Failure Detection
• WAN Load Alarm

Conclusion

According to Cisco’s IOS Service Diagnostic Web site, Cisco plans on introducing a management interface to help administrators manage these types of scripts on Cisco routers. I look forward to trying that out as soon as it’s available. In the meantime, we have a lot of powerful scripts available to test and learn about. In fact, you could even write your own!

What do you want your router to troubleshoot or notify you about today? Add your ideas in this article’s discussion.

Want to learn more about router and switch management? Automatically sign up for our free Cisco Routers and Switches newsletter, delivered each Friday!

Reset lost Windows passwords with Offline Registry Editor

• Date: March 14th, 2008
• Author: Erik Eckel

Misplaced passwords can render Windows systems useless. Minus a valid username and password, Windows boxes, and the data they contain, are essentially off limits.

The situation arises frequently. Users leave. Past consultants fail to document deployments. IT professionals quit.

Without documentation, accessing critical Windows systems and data becomes problematic. Despite numerous aspersions from the open source community, Microsoft’s NTFS file system delivers decent performance and security.

However, a free open source program often makes quick work of cracking Windows passwords. The Offline NT Password & Registry Editor presents a potential option for obtaining access to locked-out Windows NT-based systems. Here’s how you can use it to recover lost passwords on your Windows systems.

The Offline NT Password & Registry Editor

Offline NT Password & Registry Editor is a free Linux-based utility, which as the name suggests, works offline. The code creates its own boot environment. Once you burn the ISO image to a CD-ROM, you’ll have a tool at your disposal for resetting Windows NT, 2000, XP and Vista account passwords. You wont even have to know any of the current account user names or passwords on the system to make it work.

Instead, the utility detects user accounts and enables resetting the password to a value you decide. The application will even reset locked or disabled user accounts.

When you first boot the utility, you’ll see the screen shown in Figure A.

Figure A

The Offline NT Password & Registry Editor presents this menu upon booting.

Recognize The Dangers

As the name suggests, the utility edits the Windows registry. Further, the application edits the registry in a completely unsupported and warranty- and Microsoft-support voiding way.

In other words, the password-cracking software is used at your own risk. The Offline NT Password & Registry Editor could easily render a system unbootable. The unauthorized program could also destroy existing data resident on a Windows system.

This is especially true if the Encrypting File System (EFS) has been used to protect sensitive data. In fact, if you use it to change the password on an account that’s used EFS to protect files, it’s unlikely those files can ever be recovered.

But, left to no other option, you may find the software is just what’s needed to break into a system for which passwords have been lost or misplaced.

Driver Issues

Using the Offline NT Password & Registry Editor requires that you place the CD in the system in question and reboot it. Once the utility starts, its initial boot screen will appear. Users should pay particular attention to the warning that appears stating, “This software comes with absolutely no warranties! The author can not be held responsible for any damage caused by the (mis) use of this software.” Again, the utility should only be used as a last resort.

But faced with using options of last resort is often where computer professionals find themselves. When such situations arise, and all other means of accessing the data (including removing the hard disk from the existing system and attempting to recover its data from another system) prove fruitless, the offline editor may well work.

In my experience, the most common issue I encounter is the lack of driver support for SATA controllers. The Offline NT Password & Registry Editor is frequently updated with bug fixes, and driver support is among the regular improvements the utility receives. That said, you may encounter situations where drivers need to be manually loaded as you can see in Figure B.

Figure B

The Offline NT Password & Registry Editor attempts to auto-load drivers based on information it discovers while booting.

When the program fails to locate active Windows installations, you can attempt to manually load disk drivers by entering m at the provided command prompt. Upon selecting M, you’ll be presented with an extensive menu of potential drivers, as shown in Figure C.

Figure C

You can select the drivers you need.

The password-resetting software doesn’t always recognize installed hard disks, as can be seen here. In this case, the utility doesn’t possess the necessary drivers to connect to a RAID installation. It’s for that reason that the software reports disk partitions don’t contain valid partition tables in this image.

Resetting Passwords

Once driver issues are resolved (in many cases the program’s auto-detection works without any trouble), you can connect to the system’s registry and make the necessary edits. With the proper drivers, the offline editor displays installed disks and resident disk partitions. You need to select the specific Windows installation you wish to edit by entering its partition number at the provided command prompt as shown in Figure D.

Figure D

Select the partition with Windows on it.

The offline editor breaks into several steps the process of resetting Windows passwords. Step One involves specifying the Windows installation and partition.

With the disk and partition selected, the utility then prompts users to specify the registry directory path to edit. The default is WINDOWS\system32\config. In most cases this default entry is correct. You need only press the [Enter] key to specify the default value.

Next users are prompted to enter the task they wish to perform, as shown in Figure E. The offline editor provides three options: Password reset, RecoveryConsole parameters, and Quit. To reset passwords, enter 1 at the command prompt.

Figure E

Administrators should enter 1, for password reset, when prompted.

Upon selecting the password reset option, you’ll then be prompted to specify the action to perform. The options are:

• Edit user data and passwords
• Syskey status & change
• RecoveryConsole settings
• Registry editor
• Quit

To reset passwords, select 1 – Edit user data and passwords.

The utility will then display user information and password status. Specify the user account for which you wish to reset the password by typing the user account name and pressing Enter.

Once you specify the user the utility requests that you supply a new password as seen in Figure F. In my experience, supplying a blank password usually works best. The utility’s publisher also recommends blanking the password.To supply a blank password, type an asterisk (*) and press [Enter].

Figure F

The password-cracking utility prompts administrators to specify the user account and provide a new password.

Upon specifying the new password (or blanking it out), the program prompts you to confirm you wish to make the change. Type a [Y] and press [Enter] to confirm you wish to complete the edit.

At this point it’s tempting to reboot the system and attempt to log in to the user account with the new (or blanked out) password. However, one last step remains. You must instruct the Offline NT Password & Registry Editor to actually write the edits to the Windows system registry.

The process becomes less than intuitive here. To complete the process, you must enter the quit command. Typing an exclamation point [!] and pressing [Enter] quits the program. Previously in the process, [Q] is used to quit the process, so make note of the difference here.

After you do so, the utility will present a Main Interactive Menu. Several choices are presented:

• Edit user data and passwords
• Syskey status & change
• RecoveryConsole settings
• Registry editor
• Quit

To complete the password reset operation, enter [Q] to quit.

The program then prompts you to complete step four, which involves writing the edits to the Windows registry. To complete the password reset registry edit, type [Y] and press [Enter]. The program will write the change to Windows SAM file and display an Edit Complete confirmation. At this point you can reboot the Windows system and, if the utility worked as designed, log into the user account using the password (or blanked password) you specified as part of step three.

Linux to the rescue

As you can see, if you don’t have an administrator password for your system, all is not lost. The Offline NT Password & Registry Editor possesses the ability to penetrate locked out systems and restore access to user accounts and data. However, the utility can just as easily destroy a Windows system’s data. For that reason, the tool should only be used as a last resort (and only on systems for which you possess complete ownership and/or administrative authority).

Three habits of highly ineffective employees

• Date: March 17th, 2008
• Author: Toni Bowers

OK, this one may hurt.

Think you have what it takes to dig a career hole for yourself and then stay there? If not, here are three tips that are sure to get you the kind of attention nobody really wants.

Miss deadlines: If each person in a company operated in an independent vacuum, a missed deadline might not be such a big deal. But, as you well know, almost every action of every employee has some kind of effect, either direct or indirect, on the performance of another employee. Let’s say Person A has four days to complete his part of a project; Person B has four days; and Person C has three days to complete the parts of the project that have to happen after yours is complete.

Since you’re not that hung up on specifics like deadlines, you take another day to get your portion of the project done. Person B has now missed an opening window of time for getting his portion launched so he, in turn, borrows another day. Now poor old Person C finds himself at the end of the project, and his deadline is one day away. As in DEADLINE. Not Ailing Gray Area. Person C probably has to work late and miss his daughter’s soccer game where, consequently, she scores the winning goal. And it’s all your fault.

Complain too much: OK, look, most people like to complain. They do it more often out of frustration if they feel like it’s not feasible for them to take any real action — but that’s not letting you off the hook. Like it or not, your job is to make things happen for the company you work for. If you can find fault with everything that entails (everything legal, that is), your input will lose its value. Constant complainers have no credibility.

Of course, you complain because you think you know better than those who make the decisions. Maybe you do and maybe you don’t. Either way, you don’t want to get a reputation as the person who will point out all the bad aspects and have to be dragged kicking and screaming into every new endeavor. It’s exhausting for everyone you work with.

Be the company doormat: This is the Complainer’s polar opposite, but it’s just as toxic. Are you the guy who helps everyone? The one everyone knows they can dump work on because you’re so nice? And if everyone likes you, they respect you, right? Wrong. Your manager probably interprets this helping tendency as an inability on your part to set boundaries. The ability to set boundaries is something you need to have if you want to move up in the company.

Although your intentions are good, your desire to help everyone may result in your workload being too much to handle, which could make you a deadline-misser (see my first point), and you don’t want that.

Three habits of highly effective employees

• Date: March 18th, 2008
• Author: Toni Bowers

Flexibility: Do you know an employee who, every time he is told about a new goal or task, wastes a good hour grumbling about how it won’t work? Can you imagine how frustrating that is for a manager who is trying to guide strategy for his department or company?

One lesson I’ve learned having worked for a couple of successful start-ups in my lifetime is that you have to take chances to grow; this requires you to put aside any trivial misgivings you may have and just try to make things happen. If that new initiative does fail, you want to be known as the employee who tried to make things work. There’s no glory in being known as the employee who knew it wouldn’t work from the beginning.

Self-motivation: Many employees measure their success in a company by the ratings or words in their yearly review. If their review indicates they need to take on more projects or increase their workload, self-motivated employees don’t need to be told — they just do it because some internal gauge tells them to step in when something needs to be done. You’ll seldom hear a self-motivated employee say, “That’s not part of my job description.”

Initiative: I admit that it’s difficult to exercise initiative in some environments. There are bosses who want to control every aspect of work. This creates a workforce that is so scared of repercussions that employees learn to be comfortable “in the box.” But those employees will never be rewarded for doing just what they’re told.

One of the greatest compliments I ever received was from a manager of a different group in my company for whom I’d volunteered to do a project. He gave me the basic instructions and told me his vision of the end product. When I produced the product without having to hound him at every interval for answers to problems I figured out on my own, he said I was a “closer,” meaning that I was the type of person who could see a project through to its end.

Let’s say someone asks you to put together a model car. You’re given the raw materials and are shown a picture of what the car should look like in the end. If you have to call that person every step of the way to verify an action, you’re kind of negating the value for him. He’s not saving time if he has to babysit you. Make yourself valuable by developing your own instincts and following through on them.

How Do I… Create a custom Web user interface for my Flash video?

• Date: September 17th, 2007
• Author: John Lee

Adobe Flash’s video technology is all over the Web and is an example of how Internet video has finally arrived after overcoming many technological hurdles during the past decade. (Have you ever been to YouTube.com? You may have heard of it.) The latest version of Flash, CS3, makes it extremely easy to build a custom video player to show off your Flash Video (.FLV) files.

If you have never used Flash before, don’t be intimidated. Building a custom FLV player is largely a matter of dragging and dropping Flash’s Component objects into a document and scripting only a line or two of very simple ActionScript code. In fact, don’t be surprised if you find yourself jumping head first into ActionScript authoring after you see how easy it is.

If you don’t own a copy of Flash CS3, you can download a fully functioning 30-day trial. Also, you’ll be using a royalty-free FLV file to complete the exercise.

Let’s start by opening Flash CS3 and creating a new file. From the File menu, select the New… option. In the dialog box that appears, select the Type: Flash File ActionScript 3.0. This is important; Flash’s video components are more limited if your Flash File is an ActionScript 2.0 type.

This blog post is also available as a TechRepublic download.

Your layout should look like Figure A.

Figure A

The default layout of the Flash CS3 workspace

At the top of the screen, you will see the Layers palette. It is widely considered a good idea among Flash developers that you should keep the objects in your Flash file on a layer that is separate from an empty layer that will hold your ActionScript code. This makes it easier for another developer to look at your file and know where to look to modify the code. It also prevents you (or someone else, for that matter) from accidentally deleting ActionScript code if you need to throw away a layer that contains objects you wish to delete.

At the bottom of the Layers palette, click the New Layer button. Then, rename the top layer “ActionScript” and rename the bottom layer “Objects.” On the ActionScript layer, click the dot under the padlock icon. This will lock the ActionScript layer and prevent you from placing objects on it, as in Figure B. This is also a good time to save your file. Be certain to save it in the same directory as the sample_movie.flv file you downloaded earlier.

Figure B

Arranging and locking layers

Time to build your video player. Select the “objects” layer to make it the active layer, then go up to the Window menu at the top of the screen and select the Components option. The Components palette will appear, as in Figure C. Click the cross to expand the Video Component tree, if you need to.

Figure C

The Components Palette

From the Components palette, click and drag the FLVPlayback component to the stage. A large black box with some controls should now sit on the stage (Figure D).

Figure D

The FLVPlayback component

Flash was kind enough to provide you with a set of controls, but hey… we’re building our own custom video player, here! Let’s get rid of those things. Click on the video component on the stage to select it and then go down to the Properties palette at the bottom of the screen and click on the Parameters tab. In the dialog box that appears, double-click the Skin option to bring up the Skin selector dialog box. From the Skin pull-down menu, select None and click OK to remove the generic controls on our FLVPlayback component (Figure E).

Figure E

Removing the default video controls from the FLVPlayback component

Next, your video component needs an instance name, which will allow ActionScript to call it. With the Video still selected on the stage, click on the Properties tab and in the field labeled , click and type the name “myvideo” (without the quotation marks) and press the Enter key. (Figure F)

Figure F

Giving the FLVPlayback component an instance name

Now we need to tell the FLVPlayback component which FLV file to play. With the video still selected, click on the Parameters tab again and scroll down to the property labeled “source.” Double-click in the empty field to bring up the dialog box that will let you point the FLVPlayback component to the FLV file you downloaded earlier. Be sure to select the Match Source FLV Dimensions check box. Click OK (Figure G). When you return to the stage, you will find that the FLVPlayback component has resized itself to match the size of the sample movie.

Figure G

Setting the Parameters of the FLV component

Now let’s look at the Components palette again. All of the objects under the Video section are components that can be used to control the FLV on the stage. We can use any or all of these to make our custom player, but for now, just click and drag the PlayPauseButton, SeekBar, and VolumeBar components to the stage, directly under the video (Figure H).

Figure H

Dragging the buttons from the Components panel to the stage

Let’s modify these controls a little more. First, select the SeekBar component. Then right-click on the SeekBar and from the pop-up menu that appears, select the Free Transform option. Then hold down the Alt key, click on the right-hand center anchor, and stretch the SeekBar over to the right to make it take up the length of the video up to the VolumeBar (Figure I).

Figure I

Enlarging the SeekBar

Nice, but we can still modify it a bit more. Click on the PausePlayButton to select it and in the Properties panel, go to the Color pull-down menu and select the Tint option. From the color selection menu, choose a nice blue and keep the effect at 50 percent. (Figure J) You could also repeat this step for the VolumeBar and SeekBar and customize their colors as well.

Figure J

Giving the Play/Pause button a different color

Your button components now need instance names — just like the FLVPlayback component — so that ActionScript can call them and link them to the FLV movie. Click on the PlayPauseButton to select it and in the Properties panel, give it an instance name of “playpause.” (Don’t include the quotes.) Repeat this process, giving the instance names of “seekvideo” to the SeekBar component and “volslide” to the VolumeBar component (Figure K).

Figure K

Giving instance names to all of the video control components

Here’s the part where you get write some ActionScript. Go to the top of the screen and in the Layers palette, select the ActionScript layer. Then, go to the Window menu and select the Actions option. A large pane will appear. This is where you will write your ActionScript code (Figure L).

Figure L

The ActionScript layer selected and the open ActionScript Window

Recall that we gave the FLVPlayback component an instance name of myvideo. We’re going to refer to that in our ActionScript code, as well as referring to the instance names of each one of the three control components.

Click in the right-hand (blank) side of the Actions window and type the following three lines of code. Note: Lettercase is important here — type the code exactly as you see it below, or the Control buttons will not work!

myvideo.playPauseButton = playpause;

myvideo.seekBar = seekvideo;

myvideo.volumeBar = volslide;

Your ActionScript code should display in your Actions panel, as shown in Figure M.

Figure M

The completed ActionScript code

Save the file and test your handiwork by going up to the Control menu and selecting the Test Movie option. When the video loads, be sure to play with all of the controls to make sure that they work. (Figure N)

Figure N

Testing the Flash movie

This is a very simple demonstration of the variety and ease of customization that Flash CS3 and ActionScript 3.0 give you over Flash Video content. Experiment with the other video control components — their placement, colors, and sizes — and go wild!

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

How do I… Convert an MPEG video file into Flash video?

• Date: September 27th, 2007
• Author: John Lee

In a previous How do I… blog entry, I showed how easy it is to create your own custom Flash Video player using Adobe Flash’s new video components and a few lines of ActionScript. The example I wrote featured a sample Flash video file (FLV) from a royalty-free stock video site. This time, I will show you how to convert your own MPEG, AVI, or QuickTime files into the FLV format.

Converting an MPEG, AVI, or QuickTime video is a simple process that involves using Adobe’s Flash Video Encoder, a separate program that installs on your hard drive in conjunction with the installation of Flash CS3 itself. If you already have Flash CS3 on your computer, you can open the Flash Video Encoder from the Start Menu.

If you don’t own a copy of Flash CS3, you can download a fully functioning 30-day trial from Adobe. If you don’t have multiple MPEG, AVI, or QuickTime files of your own to use in this exercise, you can download a couple of low-resolution stock QuickTime files from FreeStockFootage.com and save them to your hard drive.

Oddly, Flash CS3 does not provide a stand-alone FLV viewer for watching FLV files from your hard drive. But you can download a free FLV player if you need one.

This blog post is also available as a TechRepublic gallery and TechRepublic download.

Converting files

Begin by opening the Flash Video Encoder if you haven’t already. You should see a screen resembling Figure A.

Figure A

The Flash Video Encoder

Click on the Add… button in the upper-right corner. This will open a dialog box that you will use to locate one of the MPEG, AVI, or QuickTime files on your hard drive that you will be converting to FLV format.

After you have added a source video file, it will be listed at the top of the Encoder’s Queue, with a default setting of Medium Quality. (Figure B)

Figure B

The first source video added to the Queue

The Flash Video Encoder is set up for batch processing of videos, so if you had a large number of videos you wanted to convert to FLV format, you would simply add them to the Queue by clicking the Add… button and listing an unlimited number of source videos so that the Encoder could process them all automatically in the order you listed them.

Let’s add a second video to the Queue now. Click the Add… button again and locate another source video you wish to convert to FLV format. When you are finished, the Queue should resemble Figure C.

Figure C

The second source video added to the Queue

Many people convert their source videos to FLV format for posting on video-sharing sites such as YouTube. However, most of these sites will automatically downgrade the quality of the video to help conserve their bandwidth. If you want to ensure a high-quality FLV file makes it online intact through one of these video-sharing services, you will need to change the default Quality Settings before you convert your source video.

For the sake of comparison, let’s just change the settings for the second video in the Queue. Select the second video in the Queue window and then click on the Settings button on the right side. A dialog box will appear that shows the first frame of the video with several settings tabs underneath. Click on the Encoding Profiles tab and from the drop-down list, choose the option named Flash 8 — High Quality 700 kbps. (Figure D)

Figure D

Setting the second Source video to a High Quality setting

Next, click on the Video tab and from the “Quality” pull-down menu on the right, select the option labeled “High” (Figure E). These settings should work fine. Click the “OK” button to close the Settings dialog box.

Figure E

Adjusting the video quality of the second source video

Now you’re ready to process the Queue and convert your source videos to FLV format. Click the Start Queue button on the right and let the Encoder get to work. As the Encoder converts the videos, you will see a preview play in the bottom-right of the screen. (Figure F)

Figure F

Processing the Queue

When the conversion is complete, the videos in the Queue will be marked with a green check mark (Figure G), and the FLV version of your source videos will be in the same directory as their source videos.

Figure G

Both source videos have been converted to FLV format

Now, open the stand-alone FLV player you downloaded earlier and preview your new FLV movie. (Figure H) These FLV files can be used in the creation of your Flash content, or they can be uploaded to any video-sharing site that accepts videos in FLV format.

Figure H

Viewing the new FLV files through the stand-alone FLV player

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.