Every now and then I will find a website or content example that lives up to my belief that the web has so much more potential than the majority of the content available today. I am constantly looking for that amazing “lean forward” experience that draws you in and makes you want to reach out to the other people interacting with the content to see if their experience even remotely matches your own. Good news, I have found it and it is called “CIRCLE OF EIGHT”. It is a multi-episode supernatural thriller that combines social media, gaming and a great plot line. The quality of this production is fantastic. Could this be a block buster series that finds all or most of its potential on the web? I think that it could be but only time will tell.
A Mystery Unfurls
October 27, 2009
Leave a Comment » | 
Flash Streaming Video, Flash Video, RIA, Video | 
Permalink
Posted by nhippe
Online Searchable Video
October 15, 2009Overview:
Imagine finding the perfect training video but it is an hour long and you need to find the specific part of the video that covers your specific interest. Or possibly you are an advertiser and you would like to have content aware advertising in some specific online videos. You would like to have your advertising show up on a page when a specific word is mentioned in a video or maybe when a video is searched for a specific word, does that sound familiar it should as it is the google model for advertising and now it can apply to video.
The solution that I will cover in this article will allow you to transcribe the spoken word in videos into text and allow a user to search that text to find relevant areas of the video. The example that we will cover is only the beginning. I could imagine an entire searchable library of video or possibly even a web search engine that easily finds and displays video starting at the location where the search engine found a word that was spoken in the video. Before we jump in it might be helpful to see an example.
Requirements:
In order to create the transcription you will need either Premiere® Pro CS4 or Adobe® Soundbooth® CS4. My opinion is that if you are going to do any serious video editing you should consider Adobe® Creative Suite® 4 Production Premium as it contains everything you will need to edit, composite and publish high quality video projects.
Getting Started:
I should start by telling you what I am not going to cover. I am not going to cover how to get started with Premiere Pro, Soundbooth and the Flash Media Server. There are a number of great resources for each of these products. What I am going to cover is the specific functionality in each of these products that relate to creating searchable video. Lets start with Adobe Premiere Pro.
Once your project is created and the video and sound edited to your satisfaction it is time to transcribe the video. This is a very straight forward step. Simply open or expand the Metadata panel and you should see a button at the bottom of the panel called Transcribe. If you do not see the panel you can open it from the Window menu. The following panel allows you to transcribe as well as edit an existing transcription.
Premiere Metadata Panel
When you click the Transcribe button you will see the following dialog that allows you to choose the language, quality and whether to identify speakers.
Premiere Transcription Settings
The language choice is pretty straight forward. As for the quality I see no reason to ever choose anything other than high. When you choose identify speakers you will notice in the exported xml something like the following <Name>Speaker 1</Name>. I can see this being an interesting addition to an application but for this example I did not take advantage of this feature.
This process can take some time to complete. Keep in mind that an accurate transcription relies on two very important criteria. First and foremost a good quality sound track is critically important. If you have background noise or a muffled speaker you will not get a very accurate transcription. Second is the dictionary that is used to recognize words. In order to give you some context, imagine attending a lecture where the speaker spoke in a language that you did not understand. A custom library is a library with specific word definitions that allow Premiere to more accurately identify and transcribe the spoken word. This is an area that you will see expanded on in future versions of the Production Premium Creative Suite.
When the transcription process is complete the xml that represents that transcription is stored as XMP Metadata as part of the video file. It is possible to access and use XMP Metadata that is stored in a swf, flv and f4v via Actionscript but this should be carefully considered. If you create a long format video that contains a great deal of speech to be transcribed that finished transcription can represent a fairly large increase in file size. As an example the following represents two files encoded with the same settings and length the larger file has metadata and the smaller does not.
file size with and with out metadata
Storing and accessing the transcription metadata stored in the final video file can also cause problems for streamed video from the Flash Media Server because of the way that text is stored in the video file. I found the best way to use this transcription to create online searchable video was to export the xml file so that it did not remain part of the video file. This may be addressed in the future but for now if your video is longer than say 15 minutes and you plan to stream that video it would be best to export the xml that represents transcription to an xml file that is stored outside the video file.
I would suggest that you exclude the metadata for the final video that will be displayed online. In order to exclude metadata during export from Premiere Pro CS4 click the panel menu button 
on the right hand side of the options panel in the export dialog box. In the popup deselect Include Source XMP Metadata.
Exclude Metadata
One more slight wrinkle in the process is that you cannot export the transcription as xml from Premiere. The only way to export the transcription is from Soundbooth.
Editing The Transcription:
Anyone familiar with speech to text knows that it is not possible to get one hundred percent accuracy. With that said it is possible to get a high degree of accuracy given the criteria mentioned earlier in this article. There are a number of tools that can help you clean up the transcription in both Soundbooth and Premiere. Once the transcription process is complete and you see the text in Metadata panel you should see the play, loop and transcribe buttons. You should also see a search field at the to of the Metadata panel in both Soundbooth and Premiere. The search field allows you to search for words that are in the transcription. This functionality can prove very useful when you find a word that was not transcribed properly and may show up in multiple locations through out the transcription. Once you find a word that needs to be corrected simply double click the word and you will be able to edit that word. Depending on how the word was recognized during the transcription process you may that you need additional functionality. If you right click on a word in the Metadata panel you will see the additional features.
Editing Transcription
Exporting The XML:
As I mentioned previously you cannot export the XML file required for this example from Premiere that must be done in Soundbooth. Soundbooth has many fantastic features including volume correction and my favorite visual audio healing. You might wonder why I am mentioning Soundbooth features under the Exporting The XML heading; to refresh your memory it is because you cannot export the XML transcription from Premiere. If you have any last minute touch-ups for your audio track it might be a good idea to leave them to just before you export the transcription as xml. Then it is a simple matter to right click the audio track in Premiere and select Edit in Adobe Soundbooth and then Render and Replace.
Round Trip Editing From Premiere to Soundbooth
From Soundbooth you will be able to clean up your audio, if required, and export the transcription as xml. The changes that you make in Soundbooth will show up in Premiere as soon as you save thanks to Dynamic Link. Once you are in Soundbooth you should see that the transcription has come over with the audio track. To export the xml file simply go to the File menu and then down to Export then select Speech Transcription.
Soundbooth Transcription Export
Once the xml file is exported it is time to finish encoding your video into either an FLV or an F4V. If you have made changes to the audio in Soundbooth save and return to Premiere to finish encoding your video. When considering the functionality required to create searchable video streaming vs progressive is an important consideration. Progressive video is video that is accessed by using the http protocol. Streaming video is accessed by using RTMP. For searchable video there are a couple of key differences that should help you choose the right technology. First navigation with in the video is key to the idea of searchable video. With progressive you would have to download all of the video from the start of the video to the place a user is navigating to in the video. If the video is fairly long this can be very frustrating for a user. You can imagine doing a search and finding the word you are looking for close to the end of say a forty minute video and having to wait for that amount of video to download before being able to jump to that portion of the video. Streaming on the other hand simply starts sending the video from the part of the video requested. Streaming makes searchable video usable for even long format video. Another key feature of the Flash Media Server that assists in making searchable video a reality is something called enhanced seek. The following is a definition from the online documentation:
“Enhanced seeking is a Boolean flag in the Application.xml file. By default, this flag is set to false. When a play occurs, the server seeks to the closest video keyframe possible and starts from that keyframe. For example, if you want to play at time 15, and there are keyframes only at time 11 and time 17, seeking will start from time 17 instead of time 15. This is an approximate seeking method that works well with compressed streams.
If the flag is set to true, some compression is invoked on the server. Using the previous example, if the flag is set to true, the server creates a keyframe–based on the preexisting keyframe at time 11–for each keyframe from 11 through 15. Even though a keyframe does not exist at the seek time, the server generates a keyframe, which involves some processing time on the server.“
The preceding should be fairly easy to understand how searchable video would benefit from this functionality but to make sure I will put this functionality in the context of this example. Imagine doing a number of searches on a long video. If the keyframes were not placed on every frame what you would notice is that some percentage of searches would take you past the point where the word was spoken in the video leaving you to wonder if the word was found at all.
The Final Step:
At this point you should have a video encoded as either an FLV or an F4V and an xml file that represents the transcription from the video file. In the second paragraph of this article there is a link to an example, the sample provided with this article has very close to the same functionality as that example. You can download the sample with the link provided at the bottom this article. Once you have downloaded those files and unpacked you should have the following files:
searchableVideo.html
searchableVideo.swf
searchableVideoPrefs.xml
You should also have a skins folder. All of the files and the skins folder should be in the same directory on a web server or in the webroot in the Flash Media Server installation directory. The following is the typical path for the webroot folder when installed on Windows XP.
C:\Program Files\Adobe\Flash Media Server 3.5\webroot
This is of course required so that you can access the content from a web browser. The searchableVideo.html file is the html wrapper that hosts the swf. This is not required you can use your own html page to host the searchableVideo.swf. It is easy to add the searchableVideo.swf to your own html page from within Dreamweaver. Just add these files and the skins folder to your Dreamweaver site files and create a new page or open an existing page and simply drag the swf file (searchableVideo.swf) onto that page. Dreamweaver will create the object and embed code for you. Keep in mind that the searchableVideoPrefs.xml file needs to be in the same directory as the searchableVideo.swf on the web server. Organizing files for access over the web is much easier now with the Flash Media Server 3.5 because it has an embedded web server. You can simply drop the html and swf files that you would like someone to access using a web browser in to the webroot folder in the installation folder of the Flash Media Server. Once you have the files setup it is time to edit the searchableVideoPrefs.xml which allows you to specify the location of the transcription xml file and video. In addition you can also make changes to some of the player functionality and appearance from this same searchableVideoPrefs.xml file.
I would suggest that you open the searchableVideoPrefs.xml file in either Dreamweaver or an xml editor do not use a word processor. Once the file is open you should see the <sourceURI> tag. It is important that you do not edit any of the tags only the content between them. For instance make sure that when you are editing the <sourceURI> which represents the location of the video you do not change either <sourceURI> or </sourceURI> in anyway only the text between those tags. This is true for any tags in this file. If you wanted to play a video on a server with a dns name of foo.com and the video was in a Flash Media Server application called lectureVideos and the name of the video was chem101.flv the <sourceURI> tag should look like the following:
<sourceURI>rtmp://foo.com/lectureVideo/chem101.flv</sourceURI>
This may seem complex but it is really fairly simple. When you install the Flash Media Server on windows it has two pre-installed applications vod and live. These applications are represented as folders in the following location C:\Program Files\Adobe\Flash Media Server 3.5\applications. The name of the application is the name of the folder in that location. In the example that we mentioned you would have a folder called lectureVideo in the application directory mentioned above (e.g. C:\Program Files\Adobe\Flash Media Server 3.5\applications\lectureVideo). In side of that folder you will have a folder called streams and inside of that you will have a folder called _defInst_ and inside of that folder you will have your video file. So the entire path to your video file on the Flash Media Server would be C:\Program Files\Adobe\Flash Media Server 3.5\applications\lectureVideo\streams\_defInst_\chem101.flv. Remember that if you are using an f4v file that you must prefix the file name with mp4:. For instance if the previous example was an f4v not an flv the sourceURI tag would be the following:
<sourceURI>rtmp://foo.com/lectureVideo/mp4:chem101.f4v</sourceURI>
As I mentioned previously there are many resources for learning about the different tools and servers used in this example.
Now you should have the hang of editing the searchableVideoPrefs.xml file. Next we are going to edit the location of the transcription xml file that was generated in Premiere and exported from Soundbooth. The same precaution holds true for editing this tag, do not change the tags in anyway only the contents. This location can either be relative to the swf or a complete http uri. For instance both of the following are correct:
<transcriptLocation>assets/RedWorkflow.xml
</transcriptLocation>
and
<transcriptLocation>http://foo.com/searchableVideo/assets/RedWorkflow.xml
</transcriptLocation>
In the first example it would mean that the RedWorkflow.xml (i.e. transcription xml file) would be in an assets folder which would be in the same folder as the searchableVideo.swf and searchableVideoPrefs.xml files. In the second example the RedWorkflow.xml file could be stored on the same or a different server and access by using the http protocol.
Lets take a look at how the finished example should look and label some of the areas of the example so that it is easier to follow along.
Seachable Video Player
In the following image I have highlighted and labeled the important areas of the player so that it will be easier to understand my references:
Example with color overlay
The Text Cloud section represents the highest occurring words in the transcription. This allows the viewer to get an idea of the kind of content in the video. The viewer can click on any of the keywords in the Text Cloud in order to display those results in the Found Items section. The Relevant Text section is displayed when a viewer clicks an item in the Found Items section, it displays the text surrounding the found text. The Video Display shows the video as well as markers representing the found text. A viewer can rollover the marker to display the surrounding text as well as seek to that portion of the video. The Search Field allows a user to enter and search on one or more words and the Found Items section displays the result. It is also possible to sort the columns in the Found Items section by clicking the column headings.
There are a number of other settings in the searchableVideoPrefs.xml that you can use to change the functionality and appearance of the searchable video player. First minwordLength, use this to set the minimum word length for the text cloud at the bottom of the example. A setting of 5 will mean that no words shorter than 5 letters will show up in the word cloud. Next there is videoInitStartSeconds which determines the initial start time of the video when the player is first launched. There are a few other settings that will affect the appearance of the player and they are as follows:
globalTextColor : sets the color for ALL text on screen
swfBackgroundColor : sets the background color of the player
foundTextHighLightColor : changes the color of the text in the relevant text display
textBackGroundColor changes the background color for the text cloud and the relevant text area
Well that should get you started. If you have problems, interests or comments please leave them on this site so that I can respond. There are many possible additions and changes that I can think of for this example. I am eagerly waiting to see and hear how people have used this example so please leave me a comment.
Leave a Comment » | 
Adobe Flash, Flash Streaming Video, Flash Video, Searchable Video, Video | 
Permalink
Posted by nhippe
Flash for the iPhone is For Real!
October 7, 2009It seems that Flash for the iPhone and or iPod has been the longest running rumor I have had the pain of experiencing. The good news is that pain is soon to be over. To start you will need an upcoming release of the Flash authoring tool (CS5) to build, test, compile and distribute your application. Next you will need to use AS3 and finally you will need permission will need a certificate from Apple. Now it is important to keep in mind that this is not the same as creating a Flash mobile application for a device that has the Flash runtime. What this is doing is encapsulating the runtime with in the application that you are creating. There will be some native functionality that you will not be able to use in your application and there will be some native functionality that you will get access to simply by publishing for the iPhone. With that said it is early. There are many details that will not emerge for some time and I am sure that some current detail will change as we approach the release date. Stay tuned! You can find more information on the Adobe website.
Leave a Comment » | 
Flash Lite | 
Permalink
Posted by nhippe
Using the Flash Media Server Sample Video Play
July 23, 2009For years the only way to play Streaming Video in Flash was to create your own video player in the Flash or Flex authoring software. It was and is still not difficult if you were familiar with either of these applications as there are components for both environments that make it a fairly trivial task. With that said there are many people that are not familiar and do not have the time to get familiar with either of those applications but would still like to stream Flash video. Good news, there is a fully functional player that is installed with Flash Media Server 3.5 that is easy to configure and includes multi-bitrate support.
Inside the installation directory for the Flash Media Server you will find a “samples” directory and in that directory you will find a directory called “videoPlayer”. When you installed the Flash Media Server 3.5 you had an option to install Apache. You can confirm that your Flash Media Server installation is working simply by opening a browser on the same PC that has the Flash Media Server installation and browsing to http://localhost. When the page loads you should see the following image.
start screen
If the preceding page does not load it is most likely do to a conflict with another http server installed on the same PC. De install or turn off the other http server and browse to localhost, that should fix the problem. You may need to restart the PC for the changes to take effect. Once you know that the Flash Media Server installation is working correctly copy the “videoPlayer” directory to the webroot of the Flash Media Server installation directory which should resemble something like the following:
C:\Program Files\Adobe\Flash Media Server 3.5\webroot
Open the “videoplayer.html” file in a browser, scroll to the bottom of the page and select and copy the object and embed code in the white text box. Create a new blank html page and paste the object and embed code between the body tags of the new blank html page. The html with the object and embed tag (in blue) should look like the following:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<object width=’640′ height=’377′ id=’videoPlayer’ name=’videoPlayer’ type=’application/x-shockwave-flash’ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′ >
<param name=’movie’ value=’swfs/videoPlayer.swf’ />
<param name=’quality’ value=’high’ />
<param name=’bgcolor’ value=’#000000′ />
<param name=’allowfullscreen’ value=’true’ />
<param name=’flashvars’ value= ‘&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=rtmp:/vod/mp4:sample1_700kbps.f4v&DS_Status=true&streamType=vod&autoStart=true’/>
<embed src=’swfs/videoPlayer.swf’ width=’640′ height=’377′ id=’videoPlayer’ quality=’high’ bgcolor=’#000000′ name=’videoPlayer’ allowfullscreen=’true’ pluginspage=’http://www.adobe.com/go/getflashplayer’ flashvars=’&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=rtmp:/vod/mp4:sample1_700kbps.f4v&DS_Status=true&streamType=vod&autoStart=true’ type=’application/x-shockwave-flash’> </embed>
</object>
</body>
</html>
Save the new html page in the same directory as the “videoplayer.html”.
C:\Program Files\Adobe\Flash Media Server 3.5\webroot\videoPlayer
Now we are going to edit the parameters that will allow you to use this player to play your own videos. The simplest way to play your own video using this player is to simply change the “serverURL” to reflect the location of the video you would like to stream. For instance the following example:
serverURL=rtmp://localhost/vod/mp4:sample1_700kbps.f4v
is referencing a video with the name “sample1_700kbps.f4v” in the following directory:
C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media
When you stream MP4 or F4V files you need to add the prefix “mp4:” to the front of the file name. That is not the case with VP6. Do not forget that there are two “serverURL” parameters that you will need to change in the object and embed code (i.e. one for the object and one for the embed) so that the intended video plays in all browsers. Change the “serverURL” parameter to reflect the video that you would like to play. Just copy the video that you would like to play to the following directory:
C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media
The name of the video that I am going to use for this example is “Redworkflow.f4v”. With that in mind the edited “serverURL” parameter should look like the following:
serverURL=rtmp://localhost/vod/mp4:Redworkflow.f4v
Since I am running everything off of the same PC I am using “localhost” for the server address. In a real environment you would substitute either the real server ip address or the dns name of the server for “localhost”. There is one additional change that you are going to want to make to the object and embed code and that is to change “dsControl” parameter from “manual” to “auto”. This setting allows the switching between streams to happen automatically.
When you run the html page in the browser the video should play. This example is simple and straight forward but will not provide for the best experience. Choosing a single video to stream ignores the fact that the internet and most networks will not provide a constant amount of bandwidth to most users. In other words you may start out playing video with out a problem only to find it skipping frames because someone on your network decided to download a large file at the same time that you were watching the video. The solution to this problem is “Dynamic Streaming“. Dyanamic Streaming adjusts to serve different quality streams based on the current capability of the viewer. The player that we have been using for this example supports “Dynamic Streaming” through the use of a smil file. You will notice that there is a file with the name “dynamicStream.smil” in the following directory.
C:\Program Files\Adobe\Flash Media Server 3.5\webroot\videoPlayer
That is the same directory where you saved the html page with the edited object and embed tag. Open the “dynamicStream.smil” in a text editor and you should see the following:
<smil>
<head>
<meta base=”rtmp://localhost/vod/” />
</head>
<body>
<switch>
<video src=”mp4:sample1_150kbps.f4v” system-bitrate=”150000″/>
<video src=”mp4:sample1_500kbps.f4v” system-bitrate=”500000″/>
<video src=”mp4:sample1_700kbps.f4v” system-bitrate=”700000″/>
<video src=”mp4:sample1_1000kbps.f4v” system-bitrate=”1000000″/>
<video src=”mp4:sample1_1500kbps.f4v” system-bitrate=”1500000″/>
</switch>
</body>
</smil>
In the preceding there are five files and bandwidth triggers (e.g. bitrate=”xxxxxx”). For this example I am going to use only three to keep things simple. The files that I am going to use were encoded with the Adobe Media Encoder that is included with Creative Suite 4. They were encoded using On2 VP6 using a constant bitrate. The names of the files are:
Redworkflow_300kbps.flv
Redworkflow_400kbps.flv
Redworkflow_500kbps.flv
Since these files are not F4V or MP4 files I will not need the “mp4:” prefix. The following is the edited version of the “dynamicStream.smil” file.
<smil>
<head>
<meta base=”rtmp://localhost/vod/” />
</head>
<body>
<switch>
<video src=”Redworkflow_300kbps.flv” system-bitrate=”300000″/>
<video src=”Redworkflow_400kbps.flv” system-bitrate=”400000″/>
<video src=”Redworkflow_500kbps.flv” system-bitrate=”500000″/>
</switch>
</body>
</smil>
You might have noticed that bitrate is in bits not kilobits. In other words 300000 is 300kbps (kilobits per second). Notice that I changed the bitrate attribute to reflect the data rate that the video file was encoded to using the “Adobe Media Encoder“.
The following is an example of what your finished project could look like using the sample Flash video player included with the installation of the Flash Media Server.
Example Using Sample Video Player
Well that should get you started. Drop me a line if you have success or problems.
<object width=’640′ height=’377′ id=’videoPlayer’ name=’videoPlayer’ type=’application/x-shockwave-flash’ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′ ><param name=’movie’ value=’swfs/videoPlayer.swf’ /> <param name=’quality’ value=’high’ /> <param name=’bgcolor’ value=’#000000′ /> <param name=’allowfullscreen’ value=’true’ /> <param name=’flashvars’ value= ‘&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=&DS_Status=true&streamType=&autoStart=true’/><embed src=’swfs/videoPlayer.swf’ width=’640′ height=’377′ id=’videoPlayer’ quality=’high’ bgcolor=’#000000′ name=’videoPlayer’ allowfullscreen=’true’ pluginspage=’http://www.adobe.com/go/getflashplayer’ flashvars=’&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=&DS_Status=true&streamType=&autoStart=true’ type=’application/x-shockwave-flash’> </embed></object>
2 Comments | Adobe Flash, Flash Streaming Video, Flash Video, Video | Permalink
Posted by nhippe
Searchable Video Example Help
March 17, 2009When the application starts it reads and optimizes the transcription for searching. This process, depending on the length of the content and the PC that is being used, can take some time.
If you are running this example on your own server there are a few considerations.
1) The directory structure is important. The preferences file, assets and skins folders need to be in the same folder as the html and swf files.
2) You can change the location of the media and xml files in the preferences file along certain appearance settings.
The content of the skins folder are skins that can be used to change some of the functionality and appearance of the FLVPlayback component.
2 Comments | Adobe Flash, Flash Streaming Video, Flash Video, Searchable Video | Tagged: metadata, Searchable Video, xmp | Permalink
Posted by nhippe
Change is a Constant
November 15, 2008I will no longer be in the mobile and devices organization for Adobe after the first of the year. I will be taking a product specialist position focusing on: Flash Media Server, Flash Media Encoding Server and Flash Media Rights Management Server. This will also include working with the Flash Authoring and Flex Builder IDE. I guess it might be time to change the name of my blog? At any rate you will see articles that include information about Adobe mobile solution but the focus will change.
Stay Tuned!
2 Comments | General | Tagged: update | Permalink
Posted by nhippe
Updated Stock Tracker Example
August 28, 2008I recently updated a Flash project (Stock Tracker) and thought I would post it for your review. It is a rather simple stock tracking application that takes advantage of one of my favorite Flash capabilities SharedObject. SharedObject gives you the ability to store text based data on a device. There are a number of things to keep in mind when you use SharedObjects for one the device ultimately may decide to purge the data at which point you will need to have a contingency plan to deal with that issue. I use SharedObjects to store the stock symbols that are entered by the user as well as the last stock information downloaded to the device. This gives the user the ability to see the last stock information even if they lost their connection to the network. I will provide a link to download the swf (e.g. compiled application) at the end of this short article. I provide this application as is with no warranty or support. It is also not something that I want anyone to resell. With that said I hope that you find it interesting. For the most part it is a single screen application. In other words you enter the stock symbols on the same screen that you display the stock information. There are other screens for instance when you first run the application it will ask you to enter an update interval. This should be a one time setup that determines how often the application will attempt to fetch stock data from the network. There is a menu item that allows you to change that interval if you desire. It should go with out saying that setting a lower interval will increase your data bill if you do not have an unlimited plan. The following is the primary screen that will allow you to enter a stock symbol and review stock data.
Screen Shot of Stock Tracker
The Menu softkey gives you access to a little help (very little), changing the update interval, quitting the application and an about screen. Other than that what you see above represents the entire application. You will notice when you enter stock symbols and successfully retrieve information about those stocks an arrow will appear behind the stock information. The arrow simply represents the overall change in all of the stocks entered. In other words if the change is positive the arrow is green and pointing up. If the change is negative well I think you can figure it out. Just a quick note on installation, there is none. I have not rolled this into a sis file as yet. You will need to use Nokia PC Suite to move it to the device. Because there is a security sandbox you will need to place the swf file on the devices storage not the memory card and you will need to place it in a directory called Trusted (“c:\Data\Others\Trusted”). Of course you will also need the FlashLite runtime, you can find the developer edition on Adobe Labs. I have only tested this on an N95. If there are enough requests to support a different screen size I will do my best to make that happen.
I hope you find it interesting, I would appreciate any comments and suggestions.
When you get to the login page use the guest login and just enter your first and last name. If you see a password field click the guest radio button.
1 Comment | Flash Lite | Permalink
Posted by nhippe
Adobe Presenter 7 and Mobile Learning
June 12, 2008Considerations:
After writing a couple of articles I realized that some people do not know that there are both open and closed cellphones. Open devices allow you to create and load applications on the device where closed devices do not. Open devices, for the most part, include Symbian, Windows Mobile and sometimes Linux. Some examples of open devices include the Nokia N95, N73, E62 and Palm Treo 700w (Windows Mobile).
The reason that I am making a point of explaining open versus closed is that you will need the Flash Lite player installed on a device in order to player converted Adobe Presenter content. Adobe makes developer versions of the Flash Lite player available for download on the developer network site. For the time being the only Flash Lite 3 player available is for Symbian (e.g. N95, N73, etc…). I would assume that there will be a Windows Mobile version later this year but if you want to get started today and do not have an open handset buy a Nokia device with the Symbian OS. Because Flash Lite requires a decent amount of performance and memory I would buy an N95 or an N73 or equivalent.
The Nokia N95 8GB has Flash Lite 3 integrated into the browser. Before you get too happy I tested Presenter content on this device using the browser with Flash Lite 3 in a number of different scenarios including accessing the content on a Connect server, using an html wrapper for the viewer-lite.swf on a standard web server and using an html wrapper for the view.swf on a standard web server and none of the scenarios loaded the content. There seems to be a problem playing Adobe Presenter content using http, I would assume that at least in part the problem is a security sandbox issue as there is no way to set the security settings for the converted Adobe Presenter content. In addition to the previous issue there is a strange bug that affects the ability to play video on the N95 8GB, when you play a slide that has embedded video the screen rotates to landscape. This is not a problem if you are already in landscape mode. I would assume that Nokia will have a fix for the video problem soon but for now I would stick with content loaded onto an Nokia N95. I will use the term device and Nokia N95 (non-8GB model) interchangeably in this article.
The object of this article is to show how you can create content using Adobe Presenter 7 that will run on an open handset running Flash Lite 3. If you are not familiar with Adobe Presenter check out the following example . If you are still looking for additional Adobe Presenter information you will find a number of PDFs that go into some detail on the resource site for Adobe Presenter and Adobe Connect.
Authoring:
It should go with out saying that we need to use every available pixel of these small screens for content. With that said it should also be obvious that some content will simply not work on some devices based on the resolution of the device, input device requirements(mouse) as well as memory and processor requirements.
There is an unwritten rule that you should not use more that five or six bullets on a slide when creating a PowerPoint presentation. I would say that when creating a presentation for a small screen that it should be more like three or four bullets at most. Using a larger font will go a long way to improving readability of text. In addition the issue of readability is abrogated to some degree by adding audio to the presentation using the Adobe Presenter plug-in. In the following the image on the right is a screen capture of the original slide from a PC and the image on the left is a screen capture from a Nokia N95, with a 320 by 240 resolution, running the converted content.
As you can see the fidelity of the conversion is very good. The image is scaled and placed correctly as is the text content. The image should also help make the point that it is a good idea to use a slightly larger font if you are thinking of using the converted content on a device with a small screen.
The original image that was added to the presentation was approximately 4004KB. The size of the slide with out the image was approximately 1KB. When I added the image and published the presentation the slide with the image was 231KB. This is still fairly large for some devices, you may want to optimize your images before adding them to PowerPoint and converting them with Adobe Presenter.
There are several problems that may or may not be obvious with the preceding content image. First the content requires a mouse to start, stop and pause the content not to mention use the sidebar functionality (thumbs, notes, search), most cellphones do not have a mouse. Second too much screen real estate is used by the sidebar. Third the images of the headphones and microphone are too big for small screens. The good news is that Presenter 7 addresses most of the issues for us either during the publish process or at runtime. When you publish the PowerPoint content using Presenter 7 there are two swf files, used as viewers, created in the publish folder the viewer.swf and viewer-lite.swf. The viewer.swf is the file that is used to play the content on PCs while the viewer-lite.swf is the file used to play the content on non-PC devices with a minimum client requirement of Flash Lite 3. The view-lite.swf solves some of the previously mentioned issues by removing the mouse requirement and not loading the sidebar.
Audio:
Audio works the way that you would expect it to in Adobe Presenter content. The Presenter plugin for PowerPoint gives you the ability to record and edit audio for each slide in the presentation. When the viewer-lite.swf and the data folder are moved to the device you will hear the recorded audio for the given slide.
Video:
Video is a favorite media type for learning content authors. Adobe Presenter allows a content author to import and set preferences for video. When importing video you have the option to place the video on the slide or the sidebar. In order to use video in content converted by Adobe Presenter on a device the video needs to be placed on the slide not the sidebar as the sidebar will not be loaded by the viewer-lite.swf. As a test I imported a Quicktime video that was fairly small (200 x 160 pixels) and set the placement to slide and the datarate to 400kbps. The video played well with no visible dropped frames and decent quality audio on a Nokia N95.
Themes and Custom Animations:
Adobe Presenter gives the content author the ability to create and reuse themes as well as the ability to retain custom animations created in the PowerPoint presentation. Since a different viewer is used to play converted content on a device(viewer-lite.swf) than on a PC (viewer.swf) and that viewer does not support themes, they are not retained.
Custom animations are created in PowerPoint and retained after conversion by Adobe Presenter. I tested several custom animations including Fade, Dissolve In, Fly In, Checkerboard and Spin and all worked as expected on the device.
Imported Flash Content:
Using Adobe Presenter a content author has the ability to import Flash content and place it on a slide or the sidebar. As mentioned previously the Flash content will need to be placed on the slide not the sidebar. Most Flash content imported using the Adobe Presenter plugin for Powerpoint is retained but will have limited use on devices based on the limited input options available on devices. For instance the lack of a mouse means that you use the navigation keys on the device to advance the converted PowerPoint slides. Which means that the content author cannot use those keys to interact with imported Flash content. It would be helpful if Adobe Presenter had a method for remapping the keys used for slide navigation to adjust for the input requirements of the imported Flash content. Since content converted by Adobe Presenter uses different keys to advance slide content on the device based on the orientation of the content it is impossible to use the devices navigation keys for Flash content as it would move the slides forward or back. If you could remap the keys you could have converted content always use the same navigation keys to advance the slides. For instance when you start the presenter content in portrait mode the right navigation button on your 4-way rocker is used to advance the slide content. When you switch to landscape it is the down navigation button on your 4-way rocker that advances slide content. This will limit the amount of interactivity that you can expect on a mobile device as the author of the Flash content would have to take into account whether the slide content was in portrait or landscape mode. One solution would be to use screenResolutionX and screenResolutionY from the Capabilities class in your Flash content to figure out if the content is being run in portrait or landscape and adjusting input keys accordingly.
Fonts can also be a source of confusion when targeting a device. I recently found that the use of device fonts, fonts that rely on the host to have the type face, do not work in Flash content imported using Presenter. If you use a font such as Arial or Times New Roman the outlines are embedded with the content and work well. If you have dynamic text you will need to embed the characters you intend to use (e.g. Lowercase, Uppercase, Numerals, etc…).
Quizzes:
Adobe Presenter allows the content author to create or import a quiz that will be published with the other content from the presentation. Unfortunately the quiz functionality from the Presenter plugin for PowerPoint is not supported when using viewer-lite.swf as the viewer on a device. A nice feature for a future release would be to enable quizzes with out reporting so that learners could at least test their knowledge of a subject. Of course it would be great to get reporting as well but this would be a good first step.
Move Content to Device:
Another important consideration is how will the content author get the content onto the device. Since, as previously mentioned, it is not possible to access Presenter content from a device using a browser (http) the content, for now, will need to be manually loaded onto the device. I am hoping that someone proves me wrong on this point as it would greatly increase the usefulness of this content if it could be accessed across the Internet. The good news is that you will find it is a simple process to load content onto the device using Nokia’s PC Suite.
From the following image of the Adobe Presenter publish directory you will notice that there are six files and one directory. You will only need to move the viewer-lite.swf and the data directory to the device in order to play the content. You can leave behind all the other files as they will not be used on the device to play Presenter content.
Summary:
The ability to play content from Adobe Presenter on a mobile device is a welcome ability that portends the beginning of a trend that I have been talking about for some time, mobile learning. With that said there are a few features that I would like to see added to the product in future releases.
Feature Requests:
- Configurable key mapping inside Adobe Presenter
- Ability to access content over the Internet via http
- Ability to use quizzes and store results locally to submit when connected
- Client-side API to enable the manipulation of Presenter content from other Flash content using Actionscript (e.g. fullscreen)
- Ability to set security settings
5 Comments | Flash Lite, Mobile Learning Content | Tagged: Adobe Presenter, Flash Learning, Flash Mobile, Flashlite, mobile education, mobile learning | Permalink
Posted by nhippe
Flash Lite 3 and Flash Media Server Video
April 22, 2008Examples Used in this article:
simpleStreamingExample.fla
bwcheckExample.fla
In this article I am going to cover two scenarios for streaming Flash video from the Flash Media Server to Flash Lite 3. The first is the simplest possible example the second will use script based bandwidth detection to determine the bandwidth available to the device and then stream the appropriate video based on that information.
Flash Lite 3 as has support for streaming content from Flash Media Server. I am sure that most of you already know that it cannot be the same support that is in the desktop Flash player and you would be right. There are several exceptions, for example you can stream content to a device with the FashLite 3.0 player but not from a device with the FlashLite 3 player to the Flash Media Server. I hope that one day soon we will be able to stream video from a cellphone to a Flash Media Server and broadcast to the world but for now we will have to settle for consuming that content on our FlashLite 3 enabled devices. The approach for creating a Flash Lite 3 application that receives streaming content from a Flash Media Server is very similar to creating that content and targeting the desktop player. I should also say that for now you cannot create FlashLite applications using Flex, I hope that changes soon but today the Flex component foot print is too large for devices. I will use Flash CS3 and Device Central for the examples in this article.
The example we are about to create should be familiar to you if you have created an application that took advantage of the Adobe Flash Media Server in the past. We will use NetConnection and NetStream to create the connection and video.attachVideo() and NetStream.play() to attach and play the stream. Two notable exceptions to functionality as compared to the desktop Flash player are the lack of support for Remote SharedObjects and one-way streaming as I mentioned earlier. We are going to focus on video in this article, I will cover data in a separate article in the near future.
In order to test this example you will need to have Flash Media Interactive server 3 installed. If you do not already have it installed you can use the developer version which provides a connection limited development server. It is fully functional but will only allow a limited number of connections.
You can download this example (simpleStreamingExample.fla) and other examples from my Connect meeting room. When you download this example you will need to substitute your FMS servers name or ip address for the following yourserver.com in the actionscript of the simpleStreamingExample.fla file. If you have the FMS server installed locally that would be localhost or 127.0.0.1. In addition you will need to substitute the name of a video file that you created and placed in the _definst_ directory under your FMS applications folder for the following melissaInterview in the actionscript of the simpleStreamingExample.fla file. You could also use one of the flv files on my Connect meeting room in the zip file called videos_for_streaming_example.zip.
The first part of the process will be to choose a target device. In other words what device or devices are we going to target with this application? Launch Device Central and sort the list by the version of FlashLite then choose 3.0. You should see a few devices in the list, if you don’t make sure to download the newest device profile update #5. For this example I am going to use a generic Flash Lite 3 (240 x 320) profile because there is a problem with the new Nokia N95 8GB profile and DoCoMo removed support for video from the 905i series. The issue with the Nokia N95 8GB profile is a known issue and should be fixed shortly and DoCoMo will add video support to the 906i series. Before you wonder why I asked you to download the update, I just wanted to see if I could get you to do it. Just kidding there will be other updates and I want you to get in the habit so that you always have the latest intel on devices that support Flash. Now that you have a new blank Flash file open in Flash CS3 we will move on to the next major step which is to create the video object that we will use to attach our streaming video. Open the Flash library from the Windows menu in Flash CS3 or you can use the short cut keys (cntrl & L). From the Display panel menu options of the library panel select “New Video…”.
Give the video object a name (“vid”) and drag it to the stage. Once it is on the stage you will need to give it an instance name. Simply click on the video object that you moved to the stage then look at the property inspector at the bottom of the stage.
The instance name is “vid_video”. We will use this name in the Actionscript to attach the video stream to this object. Now its time for a little Actionscript. This is a very simple example and in order to keep it simple I am going to place my Actionscript on the first frame of a layer that I named “AS”.
I am using an “if(inited” code block as the starting point of my application. Inside of this “if” statement I am setting up a connection to my Flash Media server using the “connect” method of the NetConnection Class.
if (inited == null) {
inited = true;
nc = new NetConnection();
nc.connect(“rtmp://localhost/simpleVideo/”);
playvid();
}
function playvid(){
ns = new NetStream(nc);
vid_video.attachVideo(ns);
ns.play(“melissaInterview”);
}
The parameter in “nc.connect(“rtmp://localhost/simpleVideo/”)” points to the application on the FMS server. “RTMP” is the protocol used to carry the content. There are several types of RTMP but Flash Lite 3 only supports basic RTMP no tunneling or encryption.
|
Protocol |
Description |
|---|---|
| RTMP | Real-Time Messaging Protocol |
| RTMPT | Real-Time Messaging Protocol tunneled over HTTP |
| RTMPE | 128-bit encrypted Real-Time Messaging Protocol |
| RTMPTE | 128-bit encrypted Real-Time Messaging Protocol tunnelled over HTTP |
| RTMPS | Real-Time Messaging Protocol over SSL |
The default port for FMS is 1935, that can be changed if you use the default you do not have to include the port in the server reference. Finally the application name (i.e. simpleVideo), simply means that there is a folder in the applications folder inside the installation folder of the Flash Media Server called simpleVideo.
C:\Program Files\Adobe\Flash Media Server 3\applications\simpleVideo
Using a reference to the connection created in the previous step we create a one way channel inside the connection using NetStream.
ns = new NetStream(nc);
Using the reference from the previous step we attach the stream to the video object on stage.
vid_video.attachVideo(ns);
Finally we start to play the video. Notice that we leave off the “.flv” file extension.
ns.play(“melissaInterview”);
Pretty simple huh?
Now lets add a little control to this example. I would assume that most people viewing video might want to pause and play that video. I am going to create a function called “pausePlayVid()” and inside of that function I am going to add the pause method of the Netstream class.
function pausePlayVid(){
ns.pause();
}
To keep it simple I am going to use a component that I created to map navigation keys to function names. In other words I would assume that your device has left,right,up and down navigation keys, this component allows you to pick one of those navigation keys, in this case I will use the right navigation key, and map that to the function we just added to the example called “pausePlayVid”. This is a simple component that you can download with the samples for this article. Now when I test this example in Device Central and the video starts to play if we hit the right navigation key it will pause and if we hit it again it will play.
There is one more thing we should consider if we want this to work on mobile phones, bandwidth! I am sure you have noticed that you can have a conversation with someone on your cellphone and simply turn around and loose the connection? If you haven’t then you must live in cell tower heaven. For all the rest of us we should consider a way to stream different content based on available bandwidth. There is nothing we can do for a lost connection although that would be a neat trick. At this point I was planning to show how we could use the native bandwidth detection of FMS 3(Flash Media Server) to automatically select the best streaming content for the current bandwidth of the FlashLite enabled device but unfortunately there is a problem that will not allow this functionality to be used with Flash Lite 3.x.
I am still looking into the cause of this but all is not lost. Even though we cannot use the native bandwidth detection we can use an approach developed back in the days of Flash Communication Server (i.e. predecessor to FMS) and described by Stefan Richter on Adobe’s Developer Connection.
This is a very good article that covers in detail the approach for bandwidth detection that will work with FlashLite 3 content. In this article you will also find tutorial files and the server side script that performs the bandwidth detection. The approach involves a call from the client to a server side script. The server side script calls a method on the client to determine the devices bandwidth and sends the value back to the device. At this point the device can use this information to choose the most appropriate content. You will need to download the server side script (bwcheck.asc) and place it in a folder called “bwcheck” under the applications directory of the Flash Media Server 3 installation directory.
For all those not familiar with the Flash Media Server, the “.asc” extension denotes this as a server side script.
Now lets take a look at an example (bwcheckExample.fla) that uses bandwidth detection to determine the appropriate video to play on the device. You can download this example and other examples from my Connect meeting room. When you download this example you will need to substitute your FMS servers name or ip address for the following yourserver.com in the actionscript of the bwcheckExample file. The video files for this example are in the videos_for_streaming_example.zip archive. Unzip the video files and place them in the _definst_ directory inside the streams folder of the Flash Media Server as the following screen capture illustrates.
There is a brief description of the approach in the help files for Flash Media Server. Even though the description mentions “native bandwidth detection” the actionscript will work for script based detection as well with one exception. You will need to set the following to false in the “Application.xml” file on your Flash Media Server.
<BandwidthDetection enabled=”true”>
In the following example we will use two connections to the server. The first is a connection to get the available bandwidth and the second is to connect and play the appropriate stream. Just to be clear I had to create the different video files (“.flv”) manually. There are server solutions to realtime transcoding but they are either too expensive or outside the scope of this article to explain, that maybe a topic for a future article. It is also worth noting that in this example we only check the bandwidth once, it would be a good idea to check the bandwidth again in the event of an error or possibly poor video play back performance. That might also be the topic of a future article as well. As I have already covered the basics I will only cover the bandwidth detection in this example. The following example starts the same way the previous example started with a new NetConnection(). When the connection is made and accepted by the server side script (“bwcheck.asc“) the process of detecting the bandwidth begins. The server calls the method “onBWCheck” and sends packets of data in order to determine the clients bandwidth. When the process is complete the server sends the results to “onBWDone”.
We create the connection that will be used to check the bandwidth of the client.
nc = new NetConnection();
On the server the following code in the bwcheck.asc file on the FMS server accepts the connection and kicks off the detection process by calling the function calculateClientBw inside the same file.
application.onConnect = function(p_client, p_autoSenseBW){
this.acceptConnection(p_client);
if (p_autoSenseBW)
this.calculateClientBw(p_client);
The following is method on the client is called by the server to assist in determining the bandwidth of the client.
nc.onBWCheck = function() {
return ++counter;
};
When the process is complete the server calls the client with the following and passes in the bandwidth, deltaDown, deltaTime and latency.
p_client.call(“onBWDone”);
On the client the following method retrieves the bandwidth, deltaDown, deltaTime and latency and then calls the function on the client that will determine the appropriate video file to use.
nc.onBWDone = function(p_bw, deltaDown, deltaTime, latency) {
initVideo(p_bw);
};
The following function uses the bandwidth information passed to it to set a variable called useVideo to the appropriate video file. For simplicity I named the video files for the bandwidth they will use (e.g. 200kbps). In addition I am also changing the amount of video that will be buffered before playing each video.
function playVideo(param_detected_bw:Number) {
var detected_bw:Number = param_detected_bw;
if (detected_bw>200) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 256kbps_Stream”;
useVideo = “200kbps”;
bufferlength = 4;
} else if (detected_bw<200 && detected_bw>=160) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 150kbps_Stream”;
useVideo = “150kbps”;
bufferlength = 7;
} else if (detected_bw<160 && detected_bw>=120) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 100kbps_Stream”;
useVideo = “100kbps”;
bufferlength = 9;
} else if (detected_bw<120 && detected_bw>=85) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 75kbps_Stream”;
useVideo = “75kbps”;
bufferlength = 10;
} else if (detected_bw<85 && detected_bw>=65) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 50kbps_Stream”;
useVideo = “50kbps”;
bufferlength = 12;
} else {
bdwdth_txt.text = “bandwidth too low. Sorry”
};
Well thats it. I hope that helps get you started creating streaming Flash video content for Flash Lite 3.x. The following articles will help you round out your understanding of Flash video support in Flash Lite 3.
Flash Lite 3 video capabilities
How to play FLV video from YouTube using Flash Lite 3
I hope you found this article useful.
5 Comments | Flash Lite Video | Permalink
Posted by nhippe
Stock Data Application Symbian 3rd Edition
January 27, 2008Well I tried to get the stock quote application signed so that I could create an installer for Nokia phones but I finally had to give up. I do not think the process is ready for prime time. At any rate I posted the swf files for four resolutions (i.e. 176×208, 240×320, 240×240, 320X240). I wish that I could make this a little easier but in order to install this application you will need to create a folder called “Trusted” at the following location on your Symbian device “c:\Data\Others\Trusted” this is only required on 3rd edition Symbian devices. You can use the Nokia PC Suite to create the “Trusted” folder previously mentioned as well as to move the Flash swf file appropriate for your device into that folder. If you have not installed the Nokia PC Suite you can find it at the following url:
http://www.nokiausa.com/A4735050
This application should work where ever a Flash Lite player (version 2.x) is present. In other words if you have a Windows Mobile device with one of the previously mentioned resolutions it should work.
You will find the swf files at the following location:
http://mmse.acrobat.com/mobilenation/
Simply logon as a guest with your first and last name. The Connect meeting room will load and you will see the following:
Download the Flash swf file appropriate for the resolution of your device. In order words if you have an N73 or an N95 you would download “stockQuote_240×320.swf” and place it in the “Trusted” folder mentioned earlier. You must have the Flash Lite 2.x player installed on the device.
If you have a 1st or 2nd edition you can download the sis file and the install should work with out issue. I have not tested this n windows mobile but if you have a palm device with a resolution of 240×240 you will find a swf file that works for that resolution as well.
If have a few planned updates to this application, stay tuned.
Leave a Comment » | Flash Lite, Flash Lite Examples | Tagged: Adobe Flash, stock tracker, symbian, windows mobile | Permalink
Posted by nhippe
