Throughout school I studied kinetic imagery or electronic animation. Ever since then, animation and video content are now a standard expectation in the user experience on the internet.
Besides creating custom pre-recorded animations and footage for the web, I’ve also been tasked with live video streaming in the workplace. By using animation and video production experience, while continuing to learn new technologies as they emerge, I feel as if this is another tool in my skill set that meets users’ expectations when viewing sites I have built or contributed to.
Custom Video Integrations
Organization’s Webinar & Training Intro
The below is a short video commissioned by the House Clerk and my supervisor. The goal of this intro was to act as a brief bumper before recordings were presented, showing several departments’ contributions to the overall organization as well as the Capitol Building. While the intro would be seen many times if all pre-recorded titles were watched, the duration needed to be short, as well as catchy. This would allow longevity for the content in not having it get stale quickly. I think the theme song selected by the Clerk kept viewers awake during times when content may have been long without this same excitement.
Technologies Used
- Adobe Illustrator™: Created the vector masks that make the Capitol “emerge” from the collage of the image grid
- Adobe After Effects™: Created motion tweens, opacity changes, and other animation aspects for the kinetic presentaion
- Adobe Photoshop™: Used color and tone correction to make all custom photography at the appropriate resolution for video use
- Adobe MediaManager™: Condensed and sized videos to approriate resolutions for use in different presentations for internal venues
Virual Tour Narratives
I worked in a large team effort to produce a large “Virtual Tours at the Virginia State Capitol” project. While the interface was map driven and is now a bit legacy, (Adobe Flash™ Application), the supplemental videos are still relevant today for posterity and for the newly restored Virginia Capitol Building. If you visit the tours application interiors section highlighted in the image above, you’ll see how the in-context storytelling was done from room to room, with supplemental videos to give an additional first-hand experience when investigating the historic building. A broken out sample below illustrates the narrative nature in which these videos were created. The resident historian at that time, Mr. James Wootton, recorded all of the voice overs from scripts realated to interiors of the Capitol. Later all narratives were married strategically to imagery shown creating a smooth timeline of these historic timelines.
Technologies Used
- Adobe Premiere™: Imported raw HD footage into the application and used it to create various sequences, superimposition, and other animation effects to illustrate stories for the viewer
- Adobe Photoshop™: Scaled all custom photography at the appropriate resolution for video use (archival maps, photography and documentation courtesy of the Library of Congress and the Library of Virginia’s Special Collections Department)
- Adobe MediaManager™: Sized videos to approriate ratios to be integrated within the application interface
Live Streaming Video Integrations
Transparency in Government: House Chamber Video Streaming
In recent years at the Virginia General Assembly, both the House of Delegates and Senate of Virginia have upgraded the user experiences for video provided for daily floor sessions. The widely available video streams make the legislative process on the legislature’s chamber floors very transparent and educate the public-at-large about what’s happening with legislation in a given legislative session. We partnered with a vendor for a vast solution to the streaming, tagging, and indexing of video content. House, Senate and DLAS, creators of the Legislative Information System (LIS), worked together to provide interactive streaming content to the public.
Streams of daily floor sessions can be seen at Noon most days during the Virginia legislative sessions and are available for both the House and Senate venues. Relative legislative content is adjacent to live video, allowing the public to see what’s being discussed and/or passed in one of the bodies and how it will impact them (See content to the right of the video player in galleries). Research has been done, and it seems as if the Commonwealth of Virginia was the first to offer this user experience on mobile devices.
This comprehensive solution is quite a mashup of many technologies. We operate automated recordings and streams in the cloud with a proprietary PHP & ASP set of applications. Legislative alerts and supplementary bill content are provided by web services and AJAX from on-site proprietary applications, like the Virginia Legislative Information System. All streams are based on an HTML5, flowplayer, and mp4 stream type & codec that allows users of desktop configs and mobile users to see the content seamlessly without additional software needed in the browser.
Internally, our users are delivered the live streams through an additional appliance that knows a range of the internal IP addresses within the campus. This keeps bandwidth load on the campus network low. Externally, users from outside state agencies along with the public-at-large are delivered a stream from an external CDN. Using this routing, we are able to take this user experience to many viewers on more devices and machines.
Another large byproduct of the House video stream is that a gracious team of video taggers, our Indexing & Enrolling Department, who are very familiar with the legislative process, indexes or “mark” legislative motions in real time. They are watching the feed on a faster internal Cable network as well as captioners who are connected via telephone, capturing all actions for those who are hearing impaired and want to search through archives at a later date by a particular term or piece of legislation. Ex.: Searching “Gilbert” returns a result of all of the times that this Delegate spoke in a given session. Internal staff are also able to quickly locate and edit certain portions of recorded sessions by accessing the indexing tags produced by that team.
Technologies Used and Challenges
- Used PHP, javaScript, and CSS to manipulate propreitary video templates and views from the vendor to not only theme them, but have certain data retrieval occur to display alerts for upcoming events via AJAX
- Acted as a liasion to both Senate of Virginia, and DLAS to make legislative content available to video players, without bringing a heavy load on the network for the presentation of this information
- Led staff group responsible for tagging and indexing video content daily, providing accurate agendas from software data that they could have as an outline for legislative items that would be needed to tag from
- Was also a partner and liaison with the vendor in troubleshooting various errors in vendors’ products; Troubleshooting stream delivery with GoToMeetings with engineers for certain browsers that the player and products did not always work well with: Continually maintaining a cross-browser experience throughout desktop and mobile browsers is quite a challenge for a such a large viewership
Virginia General Assembly Building Remodel: 4k Streaming and Timelapse Photography
In the summer of 2017, the General Assembly Building was vacated and scheduled for demolition. The goal of the project was to document the process of the renovation of the building and preservation of the 1912 facade. To do this, a set of very high-technology webcams were set up in strategic places around the footprint of the renovation site. Contracting with an exclusive vendor allowed us to custom “sweep” a designated range of camera angles every five minutes or so. As you can see, these were compiled into various timelapse videos that show the building’s construction in real time.
Soon there will be an “eye in the sky” view from the tallest building in Richmond, Virgina, Richmond City Hall.
Technologies Used and Challenges
- Used HTML, javaScript, and the Bootstrap framework with custom CSS to consistently brand this unique, responsive page for delivery on a variety of screens
- Challenges involved were: running the cameras off of one 4G LTE signal in which the large imagery was hard to upload to the cloud along with live, streaming video of the project
- While additional state buildings not owned by the assembly had to be used to have the camearas mounted, no network integration was required as the cameras were all 4G/wireless as well as weatherproof.
- Was a liaison with the vendor in planning placements, preparing quotes and judging which technologies to implement with storage and data consumption in mind, as well as cost
- Since the bandwidth is an issue in capturing concurrent high-resolution photography and live streaming video, radio transmitters soon will be used to transmit signal to a local area network (LAN) point so that the north view of the building’s reconstruction from Broad street in Richmond can be shown in real time alongside of timelapses in the interface shown.