Archive for October 18, 2007

VoD – How to Create a Streaming Video File

Let’s start with the basics – how to create a streaming video file that you can then place on your website.

There are two methods:

  1. Using a conversion utility programme
  2. Exporting streaming files from video editing software.

A conversion utility, like RealNetworks RealProducer, is a stand-alone programme that converts an existing digital video file into the streaming format of your choice. This involves simply opening the file and saving it in its new format.

Using video editing software is often the easiest method to create streaming video files. Adobe Premiere 6 will be used in this example, and the instructions are specific to this programme but can be used as a general guide.

  1. Open your digital video clip in Adobe Premiere 6.
  2. Select the File menu, then select ‘Export Clip’.
  3. Choose your export format. ‘Save For Web’ is a good default option.
  4. Choose which format of streaming video file you want. This depends on which software you will be using with your website.
  5. Now, upload your new streaming video file to your website!

This tutorial is courtesy of Media College.

Advertisements

Development of Television Online

After emailing an expert in the television online field, who shall remain anonymous for privacy reasons, I discovered that TV producers are trying to capture the new multi-tasking audience, in particular, the teenage generation. “Most teenagers don’t watch TV in a traditional way. They will have the TV on in the background whilst using their laptops to chat with friends on facebook or MSN Messenger”. But video on demand would not be good news for everyone as “when they are able to offer a reliable video-on demand service, it could be the end for bricks-and-mortar video rental shops”.

This information made me wonder if VoD was really going to take over from watching TV and Film in traditional ways. With a new report from Forrester Research saying on-demand sales will skyrocket over the next five years and will soon replace pre-packaged viewing (television schedules and DVDs) in the US, it seems likely that the UK will follow this trend with some immediacy. As this looks like the future of television in the UK I decided to conduct my own research into the applications used to create and view streaming video content online. Below is a brief list of some of the applications that I discovered.

  • Streaming media technologies

Adobe Flash
Microsoft Windows Media
QuickTime
ReelTime.com
RealNetworks
RealPlayer
SHOUTcast
Winamp
Philips Media Manager
Unreal Media Server

  • Stream and transport protocols

HTTP
MMS
RTMP
RTP
RTCP
RTSP
RealNetworks RDT
UDP

  • Streaming media content websites

(Users can upload their own videos to these websites)

Dailymotion
Google Video
Joost
YouTube
Veoh

Introducing Video on Demand (VoD)

Video on Demand (VoD) is one of the latest trends in the television and film industry and is in a bid to appease audiences growing demand for greater control, choice and immediacy over their viewing habits.

This introduction will refer to the television aspect of VoD which is divided into a television cable service and an online service, the latter being my main focus. VoD works by using either an application that connects to the internet or a website that acts as a database of video content typically available at a cost. The video content, usually in a programme format, is obtained by the user through either “streaming” the content, allowing it to be viewed whilst the data is transferred, or “downloading”, where the programme is transferred in its entirety and can only be watched when the download process is complete. Streaming is a popular format chosen for viewing video content and forms part of the peer-2-peer networks that UK television broadcasters use for their VoD services.

BBC’s iPlayer, Channel 4’s 4OD and Sky’s Anytime all use Kontiki’s Delivery Manager, a peer-2-peer network software that works by the user downloading the television programme from other users rather than a central server. The downloaded programmes are encoded with digital rights management (DRM) that protects copyright and restricts piracy.

For Audiences

Benefits include:

  • Convenience
  • Immediacy
  • Digital quality picture and sound
  • Can be used to preview entire series
  • Catch up on missed episodes
  • Watch programmes where and when you like
  • Freedom to watch which episode you like

Negatives include:

  • Uncertainty of new technology
  • Don’t understand how to operate it
  • Computer specifications aren’t compatible with software
  • Don’t have fast internet connection speed

For the TV Industry

Benefits include:

  • Can be used as a site for ‘first look’ of new episodes
  • Source of revenue through payment or sponsorship
  • Cheaper to set up than a new ‘free-to-air’ channel for established broadcasters
  • Worldwide audiences
  • Established VoD technology is advancing forward

Negatives include:

  • Some software is divided into Macintosh or Windows compatibility only
  • Possibility of hackers
  • Censorship/Classification issues

Useful links for further research

Watch a video clip
 from RealNetworks on how streaming media works

SearchVoIP.com (Explanation of Streaming media)

Streaming Media World (News, resources and online tutorials about Streaming media)

AOL video (Example of website using VoD)

What is Web3.0? LAMP, AJAX and Web2.0?

I should start by explaining what Web2.0 is first. Web2.0 is a term to describe websites that exist today the interactive content the Internet provide its users today. It is easily visiable through websites that cater virtual community features (Http://www.facebook.com, Http://www.myspace.com etc…) or places in which the audience are the main content providers (much like the original idea behind the creation of the Internet) for example Wikipedia or Blogs. One of the main coding used in the Web2.0 phenomenal is PHP, to create the editable features. However along with PHP other codings were used to create editable feature; Mysql, Asp, Javascript.  PHP has therefore advanced to combine all of these to create the coding language LAMP and Ajax. LAMP is an abbreviation of the operating system LINUX, the web server APACHE, the database management system MySQL and PHP. Php runs alongside MySQL in most of the database needed interactive features. When looking at tutorials, in order to create a simple login section, MySQL was needed in order to maintain and manage the production.  After looking through the Php coding on the internet and on the blog I already attained, I have a basic understanding of how the coding functions; however when looking on the internet in order to create a login section for my DS task I have come to understand that an understanding of MySQL is required in order to make the project work; therefore I am now looking at both MySQL and PHP for my assignment 2 project.Lamp is very popular at the moment in the web design industry. Ajax is a lot quicker then just php, as javascript makes the editable features within webpages instant, (instead of having to refresh pages) therefore making editing websites, blogs, or virtual community content a lot quicker and easier. Ajax stands for Asynchronous JavaScript And XML. Mainly used with text, it is also able to edit images, sounds and videos. It was developed to increase the usability, speed, and interactivity of Web pages. Little is known about web3.0 yet, and there are many arguments over what it is. Nevertheless it is expected to be where the corporations will make money. Programs such as Second life; in which replicates real life, however in a virtual, Internet environment are thought to be on the forefront of the Web3.0 frontier.  Web3.0 is expected to enhance interactivity, the online experience and allow users to try anything online by combining elements of artificial intelligence, or 3D graphics.       

Marc  

http://marc.izonedesign.co.uk

Draft proposal, Cube in Flash

I have been brainstorming the best possible way to present my portfolio so that it is quick and straightforward for the user to see and use, as well as being able to insert audio footage of my ideas- ie explaining what the images are about.

I have decided to create a cube that the user can navigate round, with an image on each face. The cube will be turned by a joystick type button next to the cube and when the user clicks on a side, the image will appear large on the screen and the audio will play.

I have researched how to do this and it appears to be very difficult, so a great deal more research will be needed! Here are links to some useful sites ive found so far! :-  http://www.petitpub.com/labs/media/flash/3dcube/ ,    http://www.gotoandplay.it/_articles/2004/07/skew.php?PHPSESSID=a0860be74755ebcd7966ee467bb14c69,      www.adesblog.com,   www.flashsandy.org,  I have also bought ‘Flash Game Programming for Dummies’ to help me through!

Creating a 3D cube using flash will involve using flash, PHP and javascript.

Here is an example of the code involved according to the first site I quoted.

stop();
var images:Array;
var outText:String=””;
var done:Boolean=false
this.onEnterFrame = function(){
if(!done){
done = true;
images=urls.split(“|”);
for( var i=0; i < images.length; i++){
var loader = new MovieClipLoader();
images[i]=”http://static.flickr.com/&#8221; + images[i];
outText+= ‘\r’+images[i] ;
image=this.createEmptyMovieClip(“image”+i, getNextHighestDepth());
loader.loadClip(images[i], image);
image._x = 80*i + 4;
image._y = 3;
}
report.text=outText;
}
}

I have created a cube shape in flash and am researching how to achieve a distortional skew when I add my pictures to the sides of the moving cube.

First I will need to put each side of the cube into a seperate layer and turn them into movieClips. Then, to distort a movieClip I will need to make the picture by multiple stripes and control them respectively. This is going to be tricky!

The common to dynamically skew a movie clip is to make a tween to render the skew angle, however this wont work for images in a cube, my best bet is probably to put a movie clip in a stratched movieClip.

MovieClip itself does rotation and _parent does stretching, The _parent can also do rotation and the movieClip can also do stretch. So, with a combination of stretch and rotation I could make the square movieClip skew to the cube shape. 

A cube will work on 3 axis- x-up, y-across, and z- around.

Now, the tricky bit will be knowing how much _rotation and _xscale and _yscale we should apply to _parent and movieClip itself, however I must also take the z axis into consideration if the viewer will be able to control the movement of the cube.

Tocalculate the relationship of skew angle and _parent._yscale I will need to do some maths! The stretchig of _parent._yscale will increase the skew angle and shrink the _parent.yscale will shapen the skew angle.

As I do not want the cube to play as a movie, but the direction that it turns in to be controlled by the user, I will aso have to research how to ‘rotate around a 3d (x,y,z) axis’ manually.

I think this has great potential to be a very interesting (and challenging!) project- bring it on!

The Structure of PHP

In 2002 <?php had been installed and hosted on 19 million internet servers. With PHP being installed on the Web Servers instead of the viewer’s computers, it is accessible to most Mac and PC users. PHP is embedded within HTML codes allowing the creator to move between HTML and PHP codes instead of using large extensive coding. This allows the creator the ability to; in a HTML page develop the graphical look of the website while using PHP to code the create the interactive features. When a page is requested that contains PHP, the processor translates and executes all the commands in the page, and then outputs the result to the browser as regular HTML. This allows developers the ability to hide their coding, as when a user goes to view the source within the Internet, it will just reveal the HTML and not the extensive PHP coding. The PHP coding includes tags like <?include(“include/….)?>  which calls for different sections of website, allowing larger and smaller sections of the website to be split down to help in the development of the coding. This is similar to a CSS Stylesheet, however unlike CSS, the coding is written in HTML.  For example if a footer is required, the <?include/….)?> coding would be
 

</div><?                                               
include(“include/inc_navigation.php”);
?><div align=”center” id=”footer” style=”font-family:Arial, Helvetica, sans-serif; font-size:10px;”> 
<p style=”color:#666666; padding-top:8px;”>
                                All content © 2002-06 <a href=”http://www.marc.izonedesign.co.uk&#8221; mce_href=”http://www.marc.izonedesign.co.uk”>Marc Taylor</a> |                                <a href=”index.php” mce_href=”index.php”>Home</a> |                               
<a href=”about.php” mce_href=”about.php”>About</a> |
                                <a href=”contact.php” mce_href=”contact.php”>Contact</a> |                               
<a href=”index.xml” mce_href=”index.xml”><img src=”/template/images/rss.gif” mce_src=”/template/images/rss.gif” alt=”RSS” style=”border:none;” /></a>
               
</p>
</div>               
</body>
</html> 

<?PHP has similar coding tags as Actionscript in the sense that it uses variable tags e.g. 
<?php                               
if (isset($_COOKIE[‘userName’]))
                                {                                               
$loginName = $_COOKIE[‘userName’];
                                               
$result = @mysql_query(“SELECT * FROM users WHERE userName = ‘$loginName'”,$db);
                                               
$myrow = @mysql_fetch_array($result);
                                               
$userRank = $myrow[userRank];
                        }                       
?>
 

The coding above is for a login box in which (from what I can gather so far) looks for a saved cookie on a users computer to find their username and password. If the cookie is found then fine, if not then a username needs to be filled in and the results are searched through a mysql database in order to find the participant. Also like Actionscript the coding uses the { } tags to separate specific parts of the coding. IF (something == something else)
{
THEN Statement
} else {
ELSE Statement
}
 

PHP scripts are always enclosed in between two PHP tags. This tells your server to pass the information between them as PHP. The three different forms are as follows: <?
PHP Code In Here
?>

<?php
PHP Code In Here
php?>

<script language=”php”>
PHP Code In Here
</script>    

While looking through a Website blog production folder on my PC I gained from a work experience, I noticed that a PHP production folder and a HTML production folder differ a lot in its structures. In order to organise the mass amount of external files required in a PHP project, a lot more folders are needed. Unlike in HTML project (unless you want to be really unstructured and messy) you cant just get away with the simple IMAGE FOLDER and CONSTRUCTS FOLDER’s instead you require at least a TEMPLATE FOLDER, INCLUDE FOLDER, ADMIN FOLDER and EDITOR FOLDER. With so many extra files flying around it is really important to keep them organised.  

Here are a few things PHP can do: •Ad Management
•Auctions
•Blogs
•Multi-Level Marketing
•Polls and Voting’s
•Form Processors
•Countdowns
•Randomising
•Discussion Boards
•Text Processing
•Creating Virtual Communities
•Wikis 
•Web Fetching
•Tests and Quizzes
•Quote Displays
•Reviews and Ratings
•Music Libraries 

For more information into what you can to with PHP please follow this link to a tutorial sitehttp://www.hotscripts.com/PHP/Scripts_and_Programs/         

 Marc http://marc.izonedesign.co.uk

A tutorial in changing rotation due to where the mouse is

Firstly open up a flash document and make a barrel-Draw a big circle and a smaller circle within this and then a Diagonal line coming out from this smaller circle. Select this whole drawing and convert it into a movie clip and give it an instance name.

Now make a tank that this barrel will go on top of-Simply draw a rectangle and convert it into a graphic and give it an instance name. If this rectangle hides the barrel, click modify and send to back.

Now go back to the movie clip and in the actions panel enter this code:

onclipEvent (enterFrame)  {                                                                                                radians = Math.atan2(_root._ymouse-this._y, _root._xmouse-this._x);                degrees = (radians/Math.PI)*180;                                                                      this.rotation = degrees;                                                                  }                                                         

This code will make the diagonal line follow the mouse. I will now discuss what parts of the code do:

  • radians = Math.atan2(_root._ymouse-this._y, _root._xmouse-this._x);   

The above code equates the angle between the mouse and the barrel measured in radians. We subtract the y and x co-ordinate of the mouse from the y and x co-ordinate of the barrel. The atan2 part requires differences between two co-ordinates to evaluate the angle in radians. To view a picture on how this works and to understand more into radians and degrees, visit the link below:

             http://www.tutorialized.com/view/tutorial/Rotation-using-atan2/24772

  • degrees = (radians/Math.PI)*180;  

The above code converts radians into degrees. It easily evaluates the angle measured in degrees.

  • this.rotation = degrees;

Finally this part of the code sets the rotation of the barrel. It does this by assigning rotation property of the barrel to the variable of degrees.

If you now want to learn how to shoot out of the barrel by clicking the mouse as well as rotating it, visit the link below:

http://www.tutorialized.com/tutorial/The-Tank-Part-2-Rotating-and-Shooting-the-Cannon/11467