Subtitle Video

July 25, 2007

Some time back, there was a talk of how youTube can make money by showing Ads on its video itself using an overlay. MSN Video also does it (but not as a overlay, which doesnt look good, in my opinion). BrightCove used the overlay mechanism to show/hide their video controls.

Then i came across a blog entry, where he does a rather innovative use of the overlay, to show Subtitles for the video and in different languages. Cool… See it Here

I thought of providing a generalized container overlay to the video and the user can put any renderer he wants, pretty much like the itemRenderers on the FLEX List Componenet. So he can include ads, subtitles and pretty much anything on the overlay. Its still in draft quality, but i thought i’ll share it with you. What i want to impress here is that it can do a lot more with less. Like Ad support. What i mean is, by just changing the renderer in the component, you should be able to switch between subtitles and advertisements on the video… I’ll publish the code as a component when it reaches production quality :)

This is the first example, where I have used a custom Box with Anjali’s Marquee component inside it as the containerRenderer. This probably can be used as overlays for videos in various languages to provide subtitles in english

(click on the pic or here to view the application)

The second example is one where 2 ads are being shown alternating while the video plays. What’s to note here, is that we can even synchronize the ads with the content if the videos are tagged. Web2.0 rocks ! I’m not good at Flash Animations and hence the lousy Ads… :)


(click on the pic or here to view the application)


Elliptical Video Display

June 5, 2007

There are cases where one might require the video to be, say elliptical, instead of the usual rectangular appearance, as below…

This is how to do it. A very easy trick, using the basic drawing APIs of Flash. We just create a mask and then ask the VideoDisplay to wear it. Follow the steps below…

  1. Create a Sprite instance (say myMask)
  2. Use the graphics APIs to draw the required mask – I have used beginFill() and drawRoundRect() functions on the myMask.graphics Object
  3. Set the x & y properties of the mask
  4. Add it to the VideoDisplay instance
  5. Set the mask property on the VideoDisplay instance to myMask

In my app, I have done the Sprite object generation and addition to the component, on creationComplete itself, as I am providing a way of dynamically changing the mask. Because of this, one will find a myMask.graphics.clear(), each time the applyMask() method runs… I have also added code to add drop-shadow to the Video, using the filters property, to increase the “Flex Appeal” :)

View the Application | Download Source


JSON to ASON

June 2, 2007

I have blogged about JSON before but forgot to provide an example for getting JSON into AS. I saw a query on FlexIndia on JSON, so I thought I’ll post it now. The problem is to convert JSON to ActionScript Objects (or ASON). You can first try the demo application to see if this is what you are looking for…

In the app, you can either paste a URL (provided you have the security permissions) of a JSON to convert or paste your own JSON into the textarea and convert it.

This is what you need to do to get this working…

  1. Go to AS3CoreLib on Google Code and download the corelib-.90.zip file and extract it
  2. Get the corelib.swc from the /bin directory
  3. Download the app source or write your own code :)
  4. Do one of the following:
    If you are using FlexBuilder:

    1. Right click on your project go to Properties
    2. Navigate to Flex Build Path -> Libraries Tab -> Add SWC
    3. Now add the corelib.swc to your project
    4. Confirm that you have the line “import com.adobe.serialization.json.JSON;” in the code
    5. Run and Have Fun :)

    If you are using the command-line compiler:

    1. Place the swc in the directory of your mxml code
    2. Confirm that you have the line “import com.adobe.serialization.json.JSON;” in the code
    3. Type the following on the command line
    4. mxmlc -include-libraries=corelib.swc JSONTest.mxml
    5. Run and Have Fun :)

What happens if I drag & drop an ArrayCollection item and a XMLList item into a List ?

May 8, 2007

A pretty interesting question. When Rajesh Bhadra posed this question to me, I thought I should write about this. The answer is pretty straight-forward (though may not be obvious). You’ll have to handle the data type before you add/ render/ manipulate the data. i.e, your itemRenderer code will look like this

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; width=”100″ height=”20″>
<mx:Script>
<![CDATA[
[Bindable]public var txt:String = “”;
override public function set data(value:Object):void{
super.data = value;
txt = (value is XML)? value.@name : value.name;
}
]]>
</mx:Script>
<mx:Label id=”lbl” text=”{txt}”/>
</mx:Canvas>

So, in short, the check looks like…

if(value is XML) {return value.@name}
else {return value.name}

or, converted to a ternary operator

return((value is XML)? value.@name : value.name);

A similar inspection is also needed on the selected object to extract info (as in the inspectSelection() method in code).

The application below, contains a List (with an XMLList dataProvider and a labelFunction) and a TileList (with an ArrayCollection dataProvider and an itemRenderer). The third control is a HorizontalList with the itemRenderer code that i mentioned earlier.

You can drag & drop from the List & Tile to the HList without data loss… that’s the idea. For details…

P.S. This application has been constructed from the skeleton of a code-snippet that was given to me by Rajesh Bhadra


PageDown, PageUp seek in VideoDisplay

May 8, 2007

I read somewhere that it would be cool to have the Flex VideoDisplay do a forward & reverse seek when the user presses PageDown and PageUp keys respectively. I just tried it and it was simple to get this to work, but not without learning something new :)

I first put an addEventListener on application complete on the VideoDisplay…

vd.addEventListener(KeyboardEvent.KEY_DOWN, kbListener);

But it didnt work.

The problem is that inherently, no containers by itself is focusEnabled in Flex. So the listener on Video doesn’t work as there is no focus on it (even with focusEnabled property set to true).

I worked around it by putting the listener on the application. Though the application is also a container, focusing on any of its children (that are focusEnabled, like Button, TextInput… etc) bubbles the keyboard event to the application and eventually triggers the listener. So when I altered my applicationComplete code to

this.addEventListener(KeyboardEvent.KEY_DOWN, kbListener);

it trigerred the listener that checks for the pageUp, pageDown keys and calls for the updation of the playheadTime property on VideoDisplay.

private function kbListener(event:KeyboardEvent):void{
var num:Number = Number(ti.text);
if(event.keyCode == Keyboard.PAGE_DOWN){
movePlayhead(num);
}
else if(event.keyCode == Keyboard.PAGE_UP){
movePlayhead(num*-1);
}
}

private function movePlayhead(num:Number):void{
if(vd.playheadTime+num >0){vd.playheadTime += num;}
}

This works… but its not a perfect solution. The problem here is that even if the pageUp & down are intended for some other purpose in the application (like for an Accordion), still the video will skip forward.

Finally thanks to Srini, i found a solution. The trick is to make VideoDisplay focusable, which is achieved by implementing the IFocusManagerComponent Interface by extending the VideoDisplay Class. So I have MyVideoDisplay which looks like this

package
{
import mx.controls.VideoDisplay;
import mx.managers.IFocusManagerComponent;
public class MyVideoDisplay extends VideoDisplay implements IFocusManagerComponent
{

}
}

And then use

<MyVideoDisplay width=”400″ height=”300″ id=”vd” source=”video1.flv” />

instead of

<mx:VideoDisplay width=”400″ height=”300″ id=”vd” source=”video1.flv” />

and revert to applying the eventListener on the VideoDisplay and Hola… Everything falls in place…

Now only if you click on the Video and then press pageDown/Up does it work. Also, now the Video appears in the tab loop of the application too. The code & app is here


Conditional Drag & Drop

April 10, 2007

We had a small presentation lined up for some Flex users today at our office. I did a presentation on E4X, something I have been discussing a lot on this blog. Harish was taking a session on Drag & Drop and someone in the audience had a very interesting question.

He wanted conditional drag & drop. This meant that he wanted to decide on “dragEnter“, if the data was good enough to be accepted by the destination. I just put together an app which i wanted to share here.

Here, I have 2 DataGrids, one which is a Stock List and the other, a Buying List. You can drag and drop items from the Stock List to the Buying one, but subject to availability. What it does is that, on dragEnter, the following function is executed.

private function enterDrag(event:DragEvent):void{
var obj:Object = event.dragSource.dataForFormat(“items”);
if(!obj[0].available){
event.stopImmediatePropagation();
}
}

The function checks the availability of the item and if unavailable, calls the event.stopImmediatePropagation() method, which doesn’t allow the drop operation on the grid for that item.

You can view the application and the source here


AWS WebService App

April 5, 2007

Here’s the AWS WebService Application I mentioned in my last post.

Thanks to e4x, i could query the AWS (Amazon Web Service), get books with the tag of “Flex” and populate them in a DataGrid (complete with itemRenderers and all) . The challendges i faced in the application were as follows

  • Understanding the way of using the required namespaces to access the result of the WebService. This was done using

private namespace AWSNS = “http://webservices.amazon.com/AWSECommerceService&#8221;;
use namespace AWSNS;

  • Since the data was coming in as e4x XML, the sort functionality of DataGrid was not working as expected. I needed to write sortCompareFunctions to get that to work.

So, here’s the AWS WebService App

and its source


Follow

Get every new post delivered to your Inbox.