My first little example. I decided that I might need a grid background in my application. This is strictly for looks and doesn’t have any real functionality. However, I did set it up so that it might be used behind a chart. The number of lines, size of the grid, and spacing of the lines can be adjusted. Also, the grid can be longer than wider, wider than longer, or a perfect square.
View Source
I needed a method of visually viewing the background timers for the application. The Application will have multiple timers. One that loads data every 15 minutes and one that changes the grid page every minute. There might be more timers. I wanted to make it so that the user could see that the timers were working and were either close or far from being refreshed. I used the Degrafa circle and elliptical calls to create the timer. Also a little help from the clock example.
I finished doing a little freebie side work on a site called The 9-12 Project Show. Well, I wasn’t actually doing work on the site, I was making an alternative site because of a suggestion by Jacob. The site is a page for posting radio and video interviews for 9/12 Candidates; another site I help out with. The site is pretty basic, but the key is the media player used to play back the shows. The original site used the Whimpy Website Audio and Video player. I’m sure it’s a very capable player, but I didn’t like it. At first glance, it didn’t seem like the player could handle playing both video and audio tracks on the same playlist. Being able to play different formats is important because some shows are just radio interviews (call-in), while others are filmed. After doing a quick search, I found LongTail Video and their JW Player. I had never heard of this company before and they probably haven’t been around for very long. However, I did like the initial looks of their player. It supports multiple file types and multiple xml based playlists. It didn’t take me long to realize that this would be the right tool for the job.
After I made a mock-up site using a free template that I hacked down to being useful, I added the player. The owner of The 9-12 Project Show told me that she didn’t want people to have the ability to embed the video on other sites, so that she could possibly get a revenue stream to recoup some of her volunteer efforts. Also, the shows had to stay prominent (or live) for 48 hours. Because of these issues, I had to try and figure out a way to load the video based off of a url parameter. Then we could send the URL to the person interviewed and they could link directly to The 9-12 Project Show and see their video come up in the “live” show.
After messing around with a few scripts that would load the video by number, I started from scratch and found some newer scripts that I modified; here’s what I did and the results.
First thing was to download the normal version of the JW Player. You have to uncheck the “Include Viral Plugin” box, so that you don’t get the embed or link options inside of the player.
Next you need the latest version of swfobject. This is the script used to load Flash objects.
Offers two optimized Flash Player embed methods; a markup based approach and a method that relies on JavaScript
Finally, you need a playlist for the player. JW Player can use multiple types, but I ended up going with XSPF : XML Shareable Playlist Format. Using the chart and the option “meta” tag, you are able to add all the information you need to get the video information displayed.
I placed all of this JavaScript in the header. The great thing about how this works is, you don’t have to place any JavaScript in the body of the HTML. The script searches for div id’s and inserts the needed code at that point in the page.
<script type="text/javascript" src="swfobject/swfobject.js"></script>
Since I need to use links to set the show to play, I need to scrap out the URL parameters. I found this code that easily does the work. It will be called later to get the index of show in the playlist.
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
The first part of this function makes the link to the playlist random by adding a random number value to the end. The reason for this is to make sure that the latest playlist is loaded and not cached in the browser. There are other options for dynamically passing in the playlist file name, but I am only using one playlist. You can add parameters to customize the look and behavior of the player.
The “mediaspace” name is what the JavaScript will look for in the HTML code to insert the player. You can change this to what ever name you would like, just as long as you have the matching div id in the HTML code.
I downloaded one of the free skins available from the LongTail site. The modieus skin had properties very close to the look of the site, therefor it fits in nicely with the overall look. I set the playlist value to show at the bottom of the player.
When the player has been loaded, then the playerReady function inserts the player into the HTML page and then calls the functions to load the player and print out the playlist data.
var player = null;
var playlist = null;
function createPlayer() {
var xxx = encodeURIComponent('media/playlist.xml?t=' + Math.round(1000 * Math.random()));
var flashvars = {
file:xxx,
autostart:"false",
skin:"mediaplayer/modieus/modieus.swf",
playlist:"bottom"
}
var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}
var attributes = {
id:"player1",
name:"player1"
}
swfobject.embedSWF("mediaplayer/player.swf", "mediaspace", "450", "400", "9.0.115", false, flashvars, params, attributes);
}
function playerReady(thePlayer) {
player = document.getElementById(thePlayer.id);
addListeners();
// Get title from url
var videoitem = gup('video');
var itemNumber = findPlayListItem(videoitem.replace(/\+/g, ' '));
// Play play list item based on title selection
loadNplay(itemNumber);
printPlaylistData(itemNumber);
}
Before I can get the playlist data or even play the show in the player, I need to know which index the show is in the playlist. Since I wanted to make it easy for someone to link to show and easy for adding more shows to the playlist, I needed to use something else besides the index. I decided to use the shows title value. The title would be passed through the URL like this : ?video=this+is+my+show+title . This function takes the title, which would have the “+” values replaced and find the matching title and index and return that number.
function findPlayListItem(fileTitle) {
var outItemId = 0;
playlist = player.getPlaylist();
if(playlist) {
var thisTitle = '';
for(var listItem in playlist) {
thisTitle = playlist[listItem].title;
if(thisTitle == fileTitle) {
outItemId = listItem;
}
}
}
return outItemId;
}
To make everything seem more dynamic than it is, I need to change the text around the player when a show was loaded. To do this, the JavaScript loads the playlist from the player and puts the values into an Object Array. From there, I determine if the selected value (idx) matches with the playlist and then get the data for that playlist item. The original script was for printing out the entire playlist, but I only need the data for one. The data is put into variables that are assigned to div’s on the HTML page. The innerHTML is replaced with the formatted data.
In the xml playlist, I added a custom tag for a long description of the show.
<meta rel="longdescription"></meta>
I can then call that custom value along with the other data values from the playlist.
playlist[listItem]['longdescription']
In this case, having the long description allows for more information to be shown above the player, while the in player playlist shows a short description (annotation) of the show.
function printPlaylistData(idx) {
var linkValue = document.getElementById("candidateLink");
var videoTitle = document.getElementById("candidate");
var nowPlayingText = document.getElementById("nowplaying");
var longDescText = document.getElementById("longdescription");
playlist = player.getPlaylist();
currentItem = player.index;
if (playlist) {
var txt = '';
for(var listItem in playlist) {
if(listItem == idx){
var reverseTitle = playlist[listItem]['title'];
linkValue.innerHTML = '<p class="links"><a href="' + playlist[listItem]['link'] + '" title="' + playlist[listItem]['link'] + '" target="_blank">' + playlist[listItem]['link'] + '</a></p>';
videoTitle.innerHTML = '<p class="credit">' + playlist[listItem]['title'] + '</p>';
nowPlayingText.innerHTML = '<h2><a href="/?video=' +reverseTitle.replace(/ /g, '+') + '">now playing... ' + playlist[listItem]['title'] + '</a></h2>';
longDescText.innerHTML = '<p>' + playlist[listItem]['longdescription'] + '</p>';
}
}
} else {
setTimeout("printPlaylistData()",100);
}
}
The player allows for listeners, which is basically script waiting for an action to happen and then kicking off other scripts. Since I also needed text to change if the user changed the current show, I needed a listener to pay attention to the ITEM and then reprint the playlist data based on the selection.
The first function adds the listener to the ITEM actions and the second function is the listener action.
function addListeners() {
if (player) {
player.addControllerListener("ITEM", "itemListener");
} else {
setTimeout("addListeners()",100);
}
}
function itemListener(obj) {
if (obj.index != currentItem) {
previousItem = currentItem;
currentItem = obj.index;
printPlaylistData(currentItem);
}
}
The simplest part of the code is loading the file into the player. Since the playlist has all the information, it is just a matter of telling the player which ITEM to start with. And since the other functions determined which index we need from the playlist, it is just a matter of passing in that value.
function loadNplay(idx)
{
player.sendEvent('ITEM', idx);
};
As I mentioned earlier, the beauty of this code is that you only have to add the JavaScript to the header information. Well, there is the one call to the JavaScript to get everything started, but that’s it.
<body onload="createPlayer();">
The rest of the code is just adding the div tags to the HTML at the places you want things to display.
<div class="post"> <div class="title"> <div id="nowplaying">This gets replaced by the show title with a link back to the show</div> </div> <!--// Current/Selected Candidate Information //--> <div class="entry"> <div id="longdescription">This is where the description appears.</div> <div class="meta"> <div id="candidate">This gets replaced by the show title</div> <div id="candidateLink">This gets replaced by the link</div> </div> <!--// Video Player //--> <div id="mediaspace"> <a href="http://www.macromedia.com/go/getflashplayer">Get flash</a> to see this player. </div> </div> </div>
I made an update to my Flex Egg Timer example. The Egg Timer uses Degrafa libraries to create the images. They released beta version 3.1 back in December, which was after I started working on a project that used the Egg Timer. Well, when I created an updated version of the project using the new version of Degrafa, I was getting some very odd looking pie pieces. I was using an EllipticalArc to draw both the white timer and the red background. It gave the effect that the red background was the timer and the white part was the background. The initial arc position was set to 90 (90 degrees) or 12 o’clock on the timer. Then I had to draw the rest of the arc, which would be 360 degrees from that point. Well, the new version of Degrafa didn’t like the 360 degrees from 90, so I figured out that I need to just draw it 359 degrees from 90. It makes the clock start with one tick, but that’s not a big deal, the timer still works since it goes off of a millisecond timer.
The call to the timer still uses 360 degrees divided by the time amount. Apparently it is only the starting angle and arc that causes the issue.
EggTimerOne.setArc(360 - (event.target.currentCount * (360 / oneMinute)));
As the title of the post suggest, I also changed the example to use scaling. Flex and Flash use [w:Vector Graphics] for images. This allows the applications to easily scale due to user screen size. Since I have just started using Flex, I haven’t been working with the scaling like I should be. During the update for the application at work, I changed how things were sized by scaling based on a default size. By grabbing the screen size, I figured out the scale times value for the width and height and then scale the application parts accordingly.
In the Egg Timer example, I am scaling the different timers by a certain number to change the size, instead of altering the height and width. With this method, I can create the component at a certain size and then scale it for it’s needs. The one minute Egg Timer is put into the Application Tool bar and scaled according to the ration used in another application.
scaleX="1.65" scaleY="1.62"
As I continue to make new components, examples and applications, I will make sure I use this scaling option more often.
Well, if you entered Dean Logic through the main site, then you saw my new addition of Dean T.V.
Last night I installed Flash MX 2004 Pro (that’s a mouth full). With the latest version of Flash, you get a few neat features, one of them is publishing streaming video. How is it done you ask? Well, you import your saved movie to a blank flash document. You then export the file as a FLV file. Then, you can use a template for streaming video to display the video. It’s that easy.
Well, not being one to let things be, I decided that the template wasn’t enough. I added a menubar that can read XML to create the menu items. Then after a few hours of banging my head on the PC screen I figured out how to get information from that menu bar. With those two things in place, I can dynamically create a list of movies and pass information like; movie title, description, and file name to the Flash movie. This alows me to change the movie list dynamically.
The next step is to make the movie a little more independent from the XML file. Before in flash I could easily pass a variable from the web page to flash. With ActionScript 2.0, it doesn’t seem to be as straight forward. So, as soon as I figure that out, I’ll be able to post different channels of Dean T.V. on different parts of my web site. Of course, I’ll have to actually start making more videos.