divergent media

Phosphor

Phosphor is a new way to bring animation and video to the web. Starting with the video track of a standard QuickTime file, Phosphor creates cross platform, web-standards compliant assets which can be played on desktop and mobile devices without plugins or even video decoding capabilities. As long as a browser supports Javascript and the ability to show images, it can display Phosphor content.


Interactivity

Interactive mode creates sequences that can be played in any direction and “scrubbed” back and forth. This is a great way to present 3d models, show products, or create easy interactivity on your site. In addition to mouse interaction, Phosphor interactive compositions support touch interaction on smartphones and tablets. Try it yourself - drag the toy at the left.


Extensibility

Playback of Phosphor compositions in the browser is controlled by an open, extensible, javascript framework. It can be used to easily trigger other javascript events, or completely modified to create custom behaviors. For full details on extensibility, visit the Phosphor Documentation. Developers interested in working with the framework can explore the GitHub project.


Gallery



Phosphor is $9.99 and is available now in the Mac App Store.

In our day to day support, we get a lot of common questions about Phosphor. We've listed some of the more common ones here. If you have a question about Phosphor, there's a good chance you'll find your answer here or in the extensive user manual. If not, please contact us directly, and we'll be happy to help.

Frequently Asked Questions

Can I make Phosphor "responsive"?
There are a variety of ways to make a Phosphor composition scale responsively depending on the size of the browser window. In general, you should use CSS transforms to scale the Phosphor canvas. Below is some sample code, demonstrating one option for implementing this functionality.
function respondCanvas() {
	var containerWidth = $("#phosphorbanner").width();
	var containerHeight = $("#phosphorbanner").height();
	var canasWidth = $("#anim_target_phosphorbanner").width();
	var canasHeight = $("#anim_target_phosphorbanner").height();

	f = containerWidth/canasWidth;
	f = containerHeight/canasHeight<f?containerHeight/canasHeight:f;

	$('#anim_target_phosphorbanner').css({
		"-webkit-transform" : "scale("+f+")",
		"-webkit-transform-origin" : "0 0",
		"-ms-transform" : "scale("+f+")",
		"-ms-transform-origin" : "0 0",
		"-moz-transform" : "scale("+f+")",
		"-moz-transform-origin" : "0 0",
		"transform" : "scale("+f+")",
		"transform-origin" : "0 0"
	});
}

$(document).ready(function(){
	$(window).resize(respondCanvas);
	respondCanvas();
});

   
Do Phosphor compositions work in Internet Explorer?
Older versions of Internet Explorer don't support the canvas tag. While some users have used the excanvas JavaScript extension to implement this functionality, performance may suffer. Modern versions of Internet Explorer should have no problem running Phosphor compositions. Be sure your page doesn't render in "compatibility" mode, which disables the canvas tag in Internet Explorer 10. You can force the modern mode with <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.