Original Design

In 2007, we created a video player application in Flash that allows users to login and view four featured videos on trading topics. The entire application was in a self-contained Flash component. This included all the various application states such as the sign up form, login form, forgot password form, video details, and the video player itself. The content was managed via XML.

Flash Issues

There are some problems with the all-Flash approach. Maintenance becomes more difficult. Interface or design changes require republishing the original Flash file. Of greater concern is that the user loses some control over the experience. Being that Flash is a black box within the browser, it does not react by default to browser controls such as the forward and back buttons or the text size controls.

The Redesign

Redesigning the application using HTML allowed us to create a product that is easier to maintain in the future, and gives control back to the end user. With the exception of the video player itself, the page uses HTML and JavaScript. The end result is more in line with the company branding and experience. The new design gives us a framework to use on other video products as well.

Trend TV HTML Redesign

Original Flash Interface

Visit the site.

http://www.artemislp.com/

Unless you need or want to keep all videos on your own domain, I would recommend using available platforms such as YouTube or Vimeo in order to take advantage of the additional exposure your videos will receive on these sites. Another option is Brightcove.

In any case, here are the release notes for the FLVPlayer. Any further changes will be documented here.

Release Notes

Version 1.1 July, 19, 2010

• Added poster frame functionality.
• Added a close button to error messages.
• Changed some comments in the source code.
• Changed some previously unspecified methods to private.
• Modified the right-click menu.

Version 1.0.1 August 7, 2009

• Fixed an issue with thecaptiondisplay, autostart, and showerrors variables.
• Changed the volumelevel variable to accept whole values of 0–100, and account for negative values, and values over 100.
• Added an adjustment to correct a UI display issue with some versions of Firefox.

Version 1.0 August 4, 2009

• First release version.

Pre-release January, 2009

I started development by revisiting an earlier video project from 2007. The objective was to build in closed-captioning capabilities and further explore Flash video. The earlier project used the NetStream class. I changed the player to use the FLVPlayback component in order to take advantage of the built-in captioning and playback methods.

One solution is as follows. Add a div element with an ID of “grid.” By specifying absolute positioning for the grid div, you can overlay it on top of your page while you are working on the design. This will allow you to align elements to the grid while keeping the design intact. Comment out the CSS to hide the grid.

Here’s the code and a demonstration:

Apply grid Remove grid

Download the grid PNG

There are 12 grid columns, each 60 pixels wide, with a 20 pixel gutter between the columns. With 20 pixel outer borders, the page dimension is 980 pixels. Using borders of 10 pixels, the page dimension is 960 pixels. The horizontal guidelines appear every 24 pixels.

This should be compatible with Photoshop CS3 and up. If you find it useful, let me know.

Download the Photoshop file

http://www.brookepea.com/

The previous site used a three column format with a height that was almost the same for all text pages. While it looked nice, it was not very accommodating to new types of content. The new layout also uses a multi-column approach, but with a flexible page height and more adaptable format.

The width of the pages has been expanded to allow for larger portfolio samples without relying on any JavaScript generated windows or overlays.

Most importantly, I needed to refresh the content to address my clients better. The home page is more useful with additional text, a limited number of project samples, and regularly updated posts. Testimonials have been added next to some project samples, and in the About section.

As with design, sometimes what is not there is equally as important when working with your website content. Breathing room around visual elements in a design is necessary. Resist the temptation to cram your site full of everything. Be kind to your readers by keeping it concise.

On that note…

http://www.amacher-associates.net

The new website features a flexible width, and redesigned interface. The navigation has been reorganized. The new “Pulse” feature gives site visitors an immediate assessment of the current market conditions.

The size of the existing site necessitated wireframes for each interface view before moving on to the design phase. From the start of the process, multiple advertising units were worked into the page designs for each section.

The resulting design helped to dramatically reduce the server load, and helped drive 90,000 unique visitors on its first day of launch.

http://www.ino.com

The underlying structure and content is largely the same. I have reversed the color scheme from light text on a dark background to dark text on a light background. This brightens the design overall, and increases legibility.

I have also changed the domain name from greeninteractive.com to my full name. As I am currently a company of one, operating under my own name seems to make the most sense for now.

The download includes HTML and CSS files, ExpressionEngine templates, a SQL file to be used on a new installation, and Photoshop files. If you are planning to use the SQL file, please only do so on a brand new website, otherwise you run the risk of losing any existing data. Make a back up of any database files before you start. See the included readme in the “EE” folder for instructions on setting up the website in ExpressionEngine.

EE Compatibility: 1.6.x
Tested: IE 6–8, Firefox, Safari

You may use this theme for personal and commercial projects. You may not redistribute the theme in any form. This theme is provided as is. You assume all risk associated with its installation and use. Back up your data!

Download the files

A custom FLV player with closed captioning and keyboard controls.

Available flashvars

• videosrc: String, location of your FLV file
• captionsrc: String, location of your closed captioning XML file
• captiondisplay: String, 0 or 1, whether to display the captions initially, default 0 (false)
• autostart: String, 0 or 1, whether to play the video when the page loads, default 0 (false)
• showerrors: String, 0 or 1, gives basic error feedback, default 0 (false)
• volumelevel: Number, 0–100, initial level of audio volume, default 80 (80%)
• posterframesrc: String, location of an image to show at the beginning of the video

Additional details

Set the width of the OBJECT element to the width or your FLV file. Set the height of the OBJECT element to the height of your FLV file plus 22 pixels to to allow for the control bar.

Make sure the allowFullScreen PARAM is set to true to allow full screen playback.

Videosrc accepts both FLV files on your domain as well as FLV files located on a different domain without triggering a Flash Player security violation. Currently only the FLV file format is accepted.

Captionsrc accepts a Timed Text XML file. The XML file must be located on the same domain as the FLVPlayer, or a cross-domain policy file is required. If you have a Mac, MovCaptioner is a useful tool for creating captions and exporting as XML.

In most instances, you should probably leave autostart at its default value of 0 (false).

Showerrors generates very basic feedback for common errors such as missing video source or a caption security error. No feedback is shown when this is set to 0 (false).

Set the volume level of the audio with the volumelevel flashvar. It should be a number ranging from 0 to 100. The default value is 80 (80%).

Posterframesrc accepts a PNG, JPEG, or GIF file. The image will be displayed at the start of the video before the video plays. If autostart is set to 1, the image will be ignored. The image should be the same dimensions as your video.

Using Flashvars

Flashvars are very easy to use. They allow you to pass certain values to the Flash Player in order to tell it what to do. Depending on how you are placing your SWF on your HTML page, there are two primary ways to set the necessary flashvars—via JavaScript and directly in the OBJECT element.

AC_RunActiveContent

If you are publishing content directly from Flash, and using JavaScript detection, you will be working with the AC_RunActiveContent JavaScript detection. If you are using Dreamweaver CS3 or earlier, you will also be using this method. You will need to add the flashvars to the script in the head of your document:

Each flashvar is specified as follows:

Each name/value pair is separated from other name/value pairs by an ampersand.

SWFObject, Static Method

If you are using the SWFObject static method, or Dreamweaver CS4, you will be adding the flashvars directly to the OBJECT element as follows:

Note that there are two OBJECT elements on the page. You will need to add the flashvar PARAM to both OBJECT elements.

For more information on SWFObject, refer to its documentation.

Keyboard accessibility

The FLVPlayer has keyboard control built in as well. You must tab in to the player, or give it focus by clicking on it with the mouse to use the keyboard controls. If you are using screen reader software, the screen reader controls may override the keyboard functionality of the player.

• The spacebar will toggle between playing and paused states.
• The left and right arrow keys will seek back and forward through the FLV.
• The up and down arrow keys will increase and decrease the audio volume.

Usage

By using the FLVPlayer, you agree to the following:

• You may use the FLVPlayer in personal and commercial projects.
• You will not redistribute the FLVPlayer.

Download the FLVPlayer

Release notes

All “Cafe Townsend” content is copyright Adobe Systems Inc.

I helped the college move from a table-based design to a modern CSS-driven approach. From the onset, the site had to be built so that the college staff could easily maintain and add to it.

I created a series of templates for the different types of pages, as well as a series of reusable style definitions. I also wrote an extensive style guide outlining all CSS definitions and their usage.

Bruno Trindade helped by implementing custom ASP.net elements.

I also used this as an opportunity to see how ExpressionEngine handles images. The built in photo gallery module did not meet my needs, so instead I used custom fields for the project images.

At the moment, this theme is not available for download, but I do plan to release it in the future. You can preview the site here:


http://architecture.douglasgreen.com/