blog.yehiashouman.com

Adobe Tour 2010

2010-05-22T13:02:00.000-07:00

Today was just a GREAT saturday! I had the honor to give a session at The Arab Academy for Sciences and Technology (AAST) on Adobe Flash Video Evolution. The session was one of seven sessions given under the Adobe Tour - www.adobetour.com (An Adobe User Group Initiative)

The session was basically tackling how the web evolution has actually reflected upon the Flash/Media evolution on the web. And how online video experiences inherited traits of Web 2.0 and 3.0 to look the way they look today. Telling us a little about the future as well.

I would like to thank Ahmed Rabieh for pushing me to actually get on the Adobe User Group ship, and thank the organizers of the event for taking care of us and the attendees for being engaged and keeping that enthusiastic atmosphere. I would love to definitely thank the love of my life for her continuous support.

Here's a slide show of my presentation ...

Moving To Flex: Tooltip on a SimpleButton

2009-09-19T20:58:00.000-07:00

Gone are the days of spending hours on building components in Flash. I agree that Adobe Flex, will make me Laaaaazy! The reason behind that is that Flex unlike Flash is made for that very reason, to speed up the development time. The best friend of your company's top management it would be! I secretly enjoyed that geek-satisfaction you get when you build your own very-primitive components in Flash, like a List! I never liked that of Flash. I always ended up building my own, skinnable and much lighter during the days of keep your Flash movie at 100k file size. Having recently moved to Flex, I thought I would forever loose that satisfactory moment of a developer's glory. Well, I was wrong! Flex gives you the speed, control and flexibility all in a single pack!

On a project I am currently working on, I needed to build my own custom Button that when you roll over would display a tool tip. I used SimpleButton to build my button. But sadly, since SimpleButton does not have a toolTip property it felt a bit awkward. After some Google.getResults("SimpleButton toolTip").length==null, I came to this post by Peter deHaan. I learned that I can dynamically create a tool tip and destroy it. I faced an additional issue with the positioning of the toolTip that I created.

Here's how I handled it:

package com.shouman.ui
{
 import flash.display.SimpleButton;
 import flash.events.MouseEvent;
 import flash.geom.Point;
 import mx.controls.ToolTip;
 import mx.managers.ToolTipManager;

 public class Marker extends SimpleButton
 {
  
  [Embed(source="assets/images/Buttons/tagMarkerUp.png")]
        [Bindable]
        protected var iconUp:Class;
         
        [Embed(source="assets/images/Buttons/tagMarkerOver.png")]
        [Bindable]
        protected var iconOver:Class;
        
  [Embed(source="assets/images/Buttons/tagMarkerDown.png")]
        [Bindable]
        protected var iconDown:Class;
        
  public var info:*;
        
  protected var toolTip:ToolTip

  public function TagMarker(ptag):void
  {
   tag= ptag;
   super();
   this.overState = new iconOver();
   this.upState = this.tag.EVENTTYPE!=3? new iconUp() : new iconUp_B();
   this.downState = this.tag.EVENTTYPE!=3? new iconDown() : new iconDown_B();
   this.hitTestState = new iconUp();
   this.useHandCursor = true;
   this.addEventListener(MouseEvent.CLICK,handleClick);
   
   /*All you need to do is handle when the toolTip should show up, 
   and hide with ROLL_OVER and ROLL_OUT events handling*/
   this.addEventListener(MouseEvent.ROLL_OVER,handleOver);
   this.addEventListener(MouseEvent.ROLL_OUT,handleOut);
    
  }
  
  private function handleClick(e:MouseEvent):void{
  
   //raising event here...
  }
  private function handleOver(e:MouseEvent):void{
   //first you need to find the position of the container of the button globally
   var position:Point = localToGlobal(new Point(this.parent.x, this.parent.y));
   /*
    *create the tooltip passing the text to display, then 0 for x position and we need to make it higher
    *than the y position of the container by 20 pixels.
   */
   toolTip = ToolTipManager.createToolTip(info.TITLE, 0, position.y - 20) as ToolTip;
   
   /*now you reposition the tooltip at the x of the button (position.x) then center it to the 
    *button (toolTip.width/2)+(this.upState.width/2). Note that I got the toolTip width after i filled
    *the text on the createToolTip call. I had to move it to the right by half the width of the button
    *to make sure it is properly centered.
   */
   toolTip.x = position.x-(toolTip.width/2)+(this.upState.width/2);
   
  }
  private function handleOut(e:MouseEvent):void{
  
   //now you can safely destroy the tool tip
    ToolTipManager.destroyToolTip(toolTip);
  }

  
 }
}

Obviously it turned out easy to be done...glad I am coding on Flex!

Online Media 101

2009-04-13T22:48:00.000-07:00

Having been in the online media industry for quite some time now I thought I'd put together some "media 101" articles.

The following is a listing of some media jargon. This is quite useful for developers who are looking forward to get their feet in or customers whom would like to get their terms right.

I will start with some general jargon...

Web TV Internet TV: refers to a set-top box that makes it possible to view web content on a television screen. ..

IPTV Closed TV, Orbit, ART, comcast ..etc

Online TV:Streamed TV on Video Players.. Online Service (www.Hulu.com)

Media Platform: Basically a media content management system (Web application) that is focused on media, it could have a player, encoding engine

Encoding: Writing your media files in a specific codec, changing parameters that control quality, file size, keyframes

DRM: Digital Rights Management - A mechanism in which the content is digitally signed to prevent insecure access.

Analog Hole: The analog hole basically says that anything that can be perceived by human senses (Eventually displayed on screen) can never be secured against unauthorized use - essentially because it can be captured (Whether streamed or progressively downloaded; there is always the software to do the job!). Definitely a killer to DRM investment!

Video Display Ratios

4:3 - AKA 1.33:1 Width to Height, Standard TV (SDTV) Scale Ratio
16:9 - AKA 1.78:1 Width to Height, High Definition TV (HDTV) Scale Ratio - Widescreen TV Ratio (Not equivalent to CINEMA)
24:9 Widescreen
2.39:1 Anamorphic/Cinemascope (prior to 1970)

Video Display Jargon
PillarBox: 2 black horizontal boxes on left and right appear when a 4:3 video is displayed fitted on a widescreen
LetterBox: 2 black vertical boxes on top and bottom appear when a 16:9 video is displayed fitted on a SDTV normal 4:3 screen

Video File Types:

FLV The FLV format is an Adobe file format for storing media content that supports Sorenson Spark, Nellymoser, On2 VP6, and mp3 codecs. It is used to deliver audio and video for playback in Adobe Flash Player, Adobe Media Player, and Adobe AIR.
F4V F4V is an Adobe file format for storing media content, based on MPEG-4 Part 12 (ISO/IEC 14496-12), which supports H.264 and HE-AAC codecs. It is used to deliver audio and video for playback in Adobe Flash Player, Adobe Media Player, and Adobe AIR. Supports HD Video
MP4 Supports HD Video
WMV Basically for Silverlight and is a MS Technology; Windows Media Video - Limitied to MS Technologies - has DRM though (Good luck with that!)
MOV Quicktime Movie; Runs on all platforms too.

Video Codecs

H.264 H.264 is a standard for video compression. It is also known as MPEG-4 Part 10, or MPEG-4 AVC (for Advanced Video Coding)
MPEG-4 MPEG-4 is a collection of methods defining compression of audio and visual (AV) digital data
VP6 Developed by On2
VP7 TrueMotion VP7 is a video codec developed by On2 Technologies as a successor to earlier efforts such as VP3, VP5 and TrueMotion VP6.

Content Deployment/Storage:

CDN A content distribution network; content delivery network
Dedicated Server A dedicated hosting service, dedicated server, or managed hosting service is a type of Internet hosting where the client leases an entire server .
Shared Hosting A shared web hosting service or virtual hosting service or derive host refers to a web hosting service where many websites reside on one web server.

Playback Models:

Progressive Download Also referred as HTTP streaming. Allows user to view or interact with data while the content is being downloaded.
Streaming A method of "playing" animated/motion picture or audio data received over a network. The transmitted data file is played in real time AS it arrives (bit by bit) at the recipient's end. The opposite of "streaming" is "downloading.". There is RTSP (Realtime Streaming Protocol) and RTMP (Adobe's RealTime Media Protocol)
Pseudostreaming/HTTP An HTTP workaround that writes the header of the file on the fly and appends the rest of the file from a parameterized point to allow seeking to time points in a video file still not downloaded.

Monetizing Content: The media alchemy of converting your media content to money!
Ads Comes in many flavors. There are …

Pre Appears before video
Mid Appears during video playback
Post Appears at the end of a video
Overlays Appears on top of video usually having a close button

PPV Pay-per-view. A system by which a viewer can pay and view the programme he wants
P2V Pay-to-View/Pay per minute; a system by which a viewer enters their credit card information and starts viewing and automatic deduction takes place based on viewing minutes
Download User can just download the file by paying for it

Player Controls/Components

Play,Pause,FF,RW, and other playback controls
Volume Slider A slider control that controls the volume, draggable (rather than old + and -)
Progress Bar/Scrubber A bar that shows progress of video playback (and downloaded so far), it could have a scrub handle
Scrub Handle Allows the user by click and drag to seek to points in video (past downloaded area in case of streaming and pseudo-streaming)
Overlay Plugin JW Player and other opensource players have developed Plugins like Comments, Ratings …that goes on top of video

Additional Viewing Interactivity
Zoom Ability to zoom in to video, specially in HD video
Seek to point For Streaming, Pseudostreaming only you can seek beyond downloaded time
Fullscreen Ability to go fullscreen with Flash Player version 9+
Ads Ads as described in this document
Annotations Overlaid boxed on top of video with text on them to point out something in the video or as comment (Implemented during 2008 in Youtube)
Captions Overlaid Text Captions (Subtitles) for different languages/translation
Panning Ability to drag video around, usually comes with zooming.
HD Provide another version of the file in High definition format
Adaptive Streaming/Dynamic Bitrate Switching Ability to change to a different bitrate (quality) based on user's connection to use the most of his connection serving him the best quality affordable.
Multiview Pick a different camera!, Created by BitGravity (www.bitgravity.com)
Sharing Methods Embed, Share to Social Media Network (Facebook ..etc), Copy Link

Examples of opensource players are
JW Player
http://www.longtailvideo.com/

FlowPlayer
http://flowplayer.org/

I personally prefer the JW Player.

This little dictionary should help you move around knowing what to say/ask for!

Good luck with the media boom! Don't forget to monetize your knowledge ;)

FLV FPS is affected by Flash Document FPS in IE

2007-03-24T03:41:00.001-07:00

Unlike what Adobe's documentation say that you can have your FLVs play back at a frame rate different than that of the Flash document, last week I came to discover that that was totally misleading! Well, in most of the cases at least !

I am working on an IPTV project. (Online TV - like Youtube ..etc). and I have been suffering for the past five months to make the application work smoothly as intended no matter how much requirements the client keep adding (which is adding a lot of value to the application as well).

Here's my findings, it was required to play video clips on the site at 30 fps. NTSC video is 29.97 or 30 FPS. PAL and SECAM video are 25 FPS. Cinema films are 24 FPS. and most of the animated websites you see on the web are from 12-30 FPS.

Now here's the trick, I followed exactly what Adobe says in their documentation that Flash Document FPS rate does not affect video playback. Well, this is true only on Mozilla Firefox (And not to a big extent though, will discuss that shortly). And this is very wrong on Internet Explorer. I was streaming a 30 FPS video in a Flash document set to 12 FPS, the client kept complaining that he can see dropped frames in the video playback and that it was somehow chunky. I tracked down the FPS rate in a debugging field, and I was shocked to see my 30 FPS video playing at 12 FPS on IE only, and at 30 FPS on Firefox !!!

After googling and pulling my hair out, I thought of trying to increase the Flash document FPS (Although I trust everything Adobe says about their product in their documentation should be true!) and voila ! The video is playing at 30 FPS in IE. To add more to my surprise and to lessen my happiness, I found out it overloaded Firefox and its playback became chunky !

It's worth mentioning that I am using Actionscript 2.0, I tried to hack the Flash Player version 9 to set the stage frameRate property but definitely couldn't though I tried:
stage["frameRate"]

I thought of coming to a rate in between to work for both browsers, but that was a failure ! I had to create 2 SWF versions, one for Firefox (12 FPS) and one for IE (30FPS) and using the a server script I could send back the SWF appropriate to the client's browser.

I am really surprised why they (Adobe) couldn't add the FPS as an html object parameter tag like background color ! Why embed it in the SWF binary file itself ? But then again, I still love you Adobe ! Glad you added a feature to change FPS using code in AS3.0.

OOP 101: OOP is about Species - 2/5

2006-03-10T08:46:00.000-08:00

Encapsulation:
OOP introduces a better organized way to write your code. You definitely have used variables before and might have had problems with colliding variable names, (e.g. a variable on the root with name "count" and another _global variable called "count"). The great thing about OOP is that you can really give identity to pieces of code. Much more than composing your code in the form of functions. It would rather be better if you can have different "managers" who perform different tasks and who does have their identities as if they were little people here and there knowing what their task is and how they do it AND at the same time they do not care about other's way of performing their tasks. They only know what methods or properties to call others by. This is the concept of encapsulation, typically, a class should know what it does and how it can do it, it knows nothing about the external world, and no body knows about the way it performs its tasks. Much like our early examples, a designer knows everything that goes with design, a developer knows everything that goes with development. They can communicate but with certain limits. A developer/manager asks the designer to make a template, the designer creates the template (they don't necessarily have to know anything about how the template is being done, they just need/know about the output).

Visibility of methods and variables (properties)
We have learned that methods are actions done by instances of a certain class, and that properties give us a chance to give information or get information in or out of that class instance. Typically applying this concept (Encapsulation), we must have recognized now that there are things that the class know about and no body else is interested in it, these things are private to that class instance. And that there are other things that are exposed for others to communicate with that class instance, that are public communication channels, these are public methods and properties.

So in terms of code examples:

Public Members
Public methods could be something like
myClass.getClassName();
myCharacter.smile();
myCharacter.moveTo(x,y);

Properties could be like:
myCharacter.xPos
myCharacter.hairColor = 0xFF0000;

Private Members:
Private Methods
this.createChildren();
this.drawMyInterface();
this.updateView();
this.createHeader();

Private Variables
this._newXPos;
this._label_str;
this._label_txt;
(note that the word "this" implies the call of the method or property from inside the class)

Inheritence
Inheritence, is really very useful. Say you have a game (Police officer, thieves and innocent people), and your main character is the police officer inforcing the law in town. Your thieves (Sorry), I mean thieves, are walking around terrorizing the innocent citizens.
In the conventional classic world, you will have to create 3 classes(one for each type). All of which are performing say 50% of the same functionalities. You are doing redundant work (100% extra work), that is, because they both run, walk, have the same human figure (Assuming you are not going to chase alien thieves). Inheritence comes in handy in these situations. You will simple write 1 class with the same functionalities that is common between all your characters, and then write simple derivations of those characters to suite each type. This will I promise you (When you master it) will save you tons of work. Inheritence works like this

Person Class defines the following common private functions
runTo(x,y)
walkTo(x,y)
CheckIFShot();
ApplySkin(SkinID);

then,
PoliceOfficer Class extending Person Class will inherit the methods listed above and then you can add specific performance specifically for this class. So PoliceOfficer will have
runTo(x,y)

walkTo(x,y)

CheckIFShot();

ApplySkin(SkinID);
Shoot(characterID);
Arrest(thiefID);

and the Thief Class would extend the Person Class as well, so it will have
runTo(x,y)

walkTo(x,y)

CheckIFShot();

ApplySkin(SkinID);

Shoot(characterID);
Rob(citizenID);
Escape();

Typically a Citizen Class would extend the Person Class as well, so it will have

runTo(x,y)

walkTo(x,y)

CheckIFShot();

ApplySkin(SkinID);
Escape();
Scream();

Note that when you extend a class you don't have to re-write the grey private methods, they are already defined, when you simple use the magical keyword "extends".

Interfaces
is simply a blue print for a new class that classes that wish to perform like intended in that blue print should follow. It's a list of methods all classes should perform in order to comply with the needs of compatibility. This is essential when you have several serious programmers distributed and want to write a few classes that has the same communication channels. E.g.
All the last classes will have to define the following methods as an example:

/*use the skinID to get a library item and attach
to the instance's skin_mc.(Movieclip)*/
renderSkin(skinID);
/*a function that will (if called from any character
instance) return a
number 0 to 100
representing the energy level of the character*/
getEnergyLevel()

The constraint that all these classes should implement a specific method is defined in the interface.

We will move deeper as we continue ...

OOP 101: Intro - 1/5

2006-02-24T15:29:00.000-08:00

Intended Audience Level: Beginner

OOP is simply bringing life practices into programming.

What is OOP ?
OOP - Object Oriented Programming. Is grouping different functionalities in your application as job descriptions done by different managers.

In a typical IT software house you will have a

Designer: Knows everything about design, is a service provider to all other departments, knows how to draw, knows which colors matches which ones.
Developer: Knows about code, instructions given to PC to perform certain actions. Knows about calculations and processes
Marketing Manager: Knows most about the needs of the market, competitors...etc

These employees are given tasks to perform that they know how to do in advance.
These employees are directed by a manager
These employees does not know about each other's sub details.
These employees knows best at what they are specified in

This model is similar to object oriented programming. Lets see how that would look in a simple application example. In programming, the group of functionalities that are relevant in field can be grouped in a single class, so if we were speaking of the company example above, We would have

Designer class
Developer class
Marketeer class
ManagingDirector class

Let's say we need to create a small game, spaceship fighting alien enemies. we will call it "Space fighter"

we will typically have a few classes as a start

Spaceship Class
Alienship Class

we will add up to these classes functionality as we move on. Just remember those classes names.

PROPERTIES
Properties is a very simple concept. A property is the state of a specific feature of a class or a reference to another element the class knows about. Ouch! that was hard to understand ok, Let's apply this to our 2 models, the company model and the "Space fighter" examples.

For the company model:

Any employee may have the following properties


developer.isBusy =true;//a boolean property

developer.Name ="John Smith";//a string property
developer.skills = ["UML","XML","C#"];//an Array:he is skilled in UML,XML,C#
developer.experience=5; //indicating 5 years of experience - a Number property:

A designer may have

designer.skills = ["Photoshop","Flash","CSS"];

Typically more properties can be specific for designer instances (employees of type designer).

designer.isGoodAtPhotoshop = true
designer.isIllustrator=true;

A manager may have the following property
Manager.isMicroManagerType=false; //all the employees will be happy

For the Space Fighter model:

Spaceship.isDead=true; //so decrease the lives by 1 and restart space ship.
Spaceship.lives=3;
Spaceship.energy=50;
Spaceship.shields=true;
Alienship.type="Predator"; //will tell the class to render itself as a predator enemy ship
Alienship.energy=20;
Alienship.x; //x position of the alien ship

METHODS:
Methods are simple actions that instances of that type can do/perform.

For the company model:

designer.draw();
designer.findColorMatch(blueColor); //this method can return white as a color match
developer.writeCode();
developer.debug();
Marketeer.FindCompetitors();
Marketeer.getMarketingPlan();
Manager.control(resource1,resource2,resource3);
Manager.doPresentation(audience1,audience2 ...audienceN);

For the Space fighter example:

Spaceship.fireMissleAt(enemyShipID);
Spaceship.glideLeft();
Spaceship.explode();
Spaceship.initialize();
Spaceship.autoDrive();
Alienship.explode();
Alienship.fireMissle();

Key Differences between Properties and Methods:

Naming:
Methods are always given a verb name, example:
doSomething(); createChildren(); draw();Where properties are always given an adjective:
happy = true; dead = true; isOK = true;Performance:
Typically, a method performs something, whereas a property says the state of a certain feature of my instance is X.
Similarly in english:
You order someone to "Sit down" - this is a method you are calling
Whereas properties are information related to that person.
You inform him with his job description - this is a property setting.

We will continue with exposing more of the hidden treasures of OOP.