Johnny Vision

Self Promotion Piece – portfolio web site. 2000–2007

About:
A personal portfolio website with a television theme developed in 2000.

Site Construction:
The site has a modular design using Macromedia (Adobe) Flash 5 to create individual SWF’s in sections. The site consisted of a two-window frame set (content & navigation) with a pre-loader splash page.

The frame set was used for seamless integration of HTML and SWF elements loading directly into the frames. Flash was used as a shell to provide interactivity along with JavaScript to launch gallery sections as separate sites along with browser window control.

The graphical assets were created in Adobe Illustrator. The screens (pages) were composed as storyboard illustrations then exported to Flash and reassembled using a combination of HTML and SWF file assets for site construction.

Flash was also used to create the animations for the splash page, gallery page transmission tower, the TV studio film leader countdown and the interactive menus. Graphical masks were used to achieve some of the video effects.

The HTML was hand-coded using BBEdit with Macromedia (Adobe) Dreamweaver used for rapid prototyping and site management.

My Role:
Created all aspects of site design/construction including graphics, site structure, and content.


Note regarding animations/movies on this page:
Site design, graphics, site structure, etc. for the Johnny Vision site were created in 2000. The animations presented here are animated GIFs created from the original Adobe Flash source files (FLA) in 2017 where possible. However, in some cases, this was not possible since fonts used were no longer present on current system and/or with changes in Adobe Flash versions, the source files did not convert predictably to newer versions due to slight changes in ActionScript operators syntax.

In these cases, the Adobe Flash player was used to play the original SWF files since the Adobe Flash plug-in was no longer installed on the current system. Then, a video screen capture was used to record transition animation or user interactivity functions of the website. The resulting screen capture video was then processed in Adobe Media Encoder to re-reformat and reduce file size. To reduce the size of the video files even further, the files were imported into Adobe Photoshop using "video frames to layers" then exported as color-optimized animated GIFs in the sizes needed. This resulted in a 50-75% reduction in file size from the source video files.

On a final note about the site's design: while in 2017 a site would not be designed this way due to maintenance issues, Apple's move towards HTML5 open standards and Adobe's announcement that Adobe Flash will reach "end-of-life" in 2020 along with numerous other considerations. In 2000, Adobe Flash was the easiest way to achieve the interactivity and desired visual affect at the time.