Character Generator DirectShow Filter User Guide

From MediaLooks Knowledge Base
Jump to: navigation, search

See also: Category:Character Generator DirectShow Filter FAQ.

Contents

Basics

Usage algorithm

The usage of Character Generator is very simple. Base algorithm is:

  1. Add Item (text, image, figure, flash)
  2. Set item properties.
  3. Show item (if it is not shown).

Items naming

Every Character Generator item has its own string identifier and can be accessed through it. It is strongly recommended to give intelligent identifiers to the items, like XML tags names (for example "item-000" or "ticker-news-n-sport", etc.). It will help you to access the items easily while using the advanced features of the Character Generator filter. Please note that names are case insensetive and you cannot use this characters: \n\r\t&;,:<>?*'\" as a part of the name.

Common and XML item interaction

Each item in of Character Generator can be added or changed in 2 ways:

  • Using MLCHARGENLib.CG_ITEM_PROPS structure. It is just like all other MediaLooks objects properties set: you fill the CG_ITEM_PROPS structure fields and apply it by SetItemBaseProps() method.

C# sample code:

//Add new image item
m_objCharGen.AddNewItem("image1.jpg", 0, 0, 0, 1, "my-first-overlay-item"); 
 
//Get initial Properties
MLCHARGENLib.eCG_ItemType itemType;
string fileName;
MLCHARGENLib.CG_ITEM_PROPS itemProps;
m_objCharGen.GetItemInfo("my-first-overlay-item", out itemType, out fileName, out itemProps);
 
//Change some properties
itemProps.nAlpha = 200;
itemProps.eScale = MLCHARGENLib.eCG_Scale.eCGS_ShrinkToFit;
MLCHARGENLib.tagPOINT point = new tagPOINT();
point.x = 50;
point.y = 50; 
itemProps.ptPos = point;
 
//Set new properties
m_objCharGen.SetItemBaseProps("my-first-overlay-item", ref itemProps, 1000);
  • Using XML description. Advanced method, a bit harder to use, but allows to interact with items more flexible.

C# sample code:

 //Add new image item
 string newItemXMLDescription = 
 @"<cg-item path='C:\Program Files\MediaLooks\Multimedia SDK\samples\C#\Playout\bin\debug\image1.jpg'>
      <cg-props pos-x='0' pos-y='0' alpha='255' show='yes' move-type='accel-both' type='Image'
      bg-color='#00000000' pixel-ar='0.000' play-mode='loop' interlace='auto' scale='shrink-to-fit'
      align='center' width='500' height='400'pause='no' edges-smooth='0'> <indent left='0' right='0' 
      top='0' bottom='0'/>
      </cg-props>
      <rate original='yes' speed='1.000'/>
      <anchor item='top-left' screen='top-left'/>
      <auto-blend start='0' ramp='0' on='0' off='0' repeat='no' rewind='no'/>
      <movement speed-x='0.000' speed-y='0.000'/> 
   </cg-item>";
 m_objCharGen.AddNewItem(newItemXMLDescription, 0, 0, 1, 1, "my-first-overlay-item");
 
 //Get initial Properties
 string props;
 m_objCharGen.GetItemProperties("my-first-overlay-item", null, out props);
 
 //Set new properties 
 props = 
 @"<cg-item path='C:\Program Files\MediaLooks\Multimedia SDK\samples\C#\Playout\bin\debug\image1.jpg'>
      <cg-props pos-x='50' pos-y='50' alpha='200' show='yes' move-type='accel-both' type='Image'
      bg-color='#00000000' pixel-ar='0.000' play-mode='loop' interlace='auto' scale='shrink-to-fit'
      align='center' width='500' height='400'pause='no' edges-smooth='0'> <indent left='0' right='0' 
      top='0' bottom='0'/>
      </cg-props>
      <rate original='yes' speed='1.000'/>
      <anchor item='top-left' screen='top-left'/>
      <auto-blend start='0' ramp='0' on='0' off='0' repeat='no' rewind='no'/>
      <movement speed-x='0.000' speed-y='0.000'/> 
   </cg-item>";
 m_objCharGen.SetItemProperties("my-first-overlay-item", null, props, "", 1000);

You can also set just a part of XML properties:

C# sample code:

 //Set new properties
 props = 
 @"<cg-props pos-x='50' pos-y='50' alpha='200' show='yes' move-type='accel-both' type='Image'
 bg-color='#00000000' pixel-ar='0.000' play-mode='loop' interlace='auto' scale='shrink-to-fit'
 align='center' width='500' height='400'pause='no' edges-smooth='0'> <indent left='0' right='0' 
 top='0' bottom='0'/>
 </cg-props>";
 m_objCharGen.SetItemProperties("my-first-overlay-item", null, props, "", 1000);

You can also set just a part of XML properties using XML path:

C# sample code:

 //Set new properties
 m_objCharGen.SetItemProperties("my-first-overlay-item", null, "effcts::shadow::enabled", "", 1000);


To simplify the XML creation/changing you can use the filter's property page. On the item selection it's XML description is displayed in the right panel. So you can create needed item using the property page interface and then use it's XML description in your code.

CharGenPropertyPage.jpg

Items order

Each item is located on its own layer, so you can sort them in any desirable sequence. The items are arranged in increase way: second above first, third above second etc. The order can be changed by ChangeItemZOrder() method call.

C# sample code:

 m_objCharGen.ChangeItemZOrder("my-first-overlay-item", 2);

Note: each item has its own alpha value, so the visibility of lower items can depend on alpha value of the upper items.

Show and hide items

All items can be shown right after it has been added. But very often items are added in hidden mode and shown later in required time.

Item show flag is often presented in item add method. After the item is added you can slightly show it during a time period:

C# sample code:

 //Add sample text item
 string strCookieTxt = "my-text-item";
 CG_TEXT_PROPS textProps = new CG_TEXT_PROPS();
 textProps.bsTextString = "My Sample Text";
 
 //Add item
 //The 5-th parameter in this method ("0") is a flag that indicates that item will be added but not shown.
 m_pMLCharGen.AddNewTextItem(ref textProps, 5, 130, 1, 0, ref strCookieTxt);
 
 //Slightly show item during 2 seconds
 m_pMLCharGen.ShowItem(strCookieTxt, 1, 2000);

Item can be hidden in the same way too:

C# sample code:

 //Slightly hide item during 3 seconds
 m_pMLCharGen.ShowItem(strCookieTxt, 0, 3000);

The new useful and powerful feature of Character Generator is a possibility to show or hide items with special effects.

The effects are: fade, blur, squeeze, movement. The detailed effects description you can find below.

To apply this effects you need to pass them to the additional options string like this:

C# sample code:

 //Set the blur effect on item show
 m_pMLCharGen.SetItemProperties(strCookieTxt, "on-show", "blur-x", "", 0);
 
 //Set the squeeze effect on item hide
 m_pMLCharGen.SetItemProperties(strCookieTxt, "on-hide", "squeeze-xy", "", 0);

The effects can be combined in any desirable ways. Just pass the required effects separated with comma:

C# sample code:

 //Set the squeeze effect with movement from left side on item show
 m_pMLCharGen.SetItemProperties(strCookieTxt, "on-show", "squeeze-y, left", "", 0);

Effects options:

  • Fade

"fade" - show/hide item with fade

  • Blur

"blur-x" - show/hide item with blur on X axis

"blur-y" - show/hide item with blur on Y axis

"blur-xy" - show/hide item with blur on X and Y axes

  • Squeeze

"squeeze-x" - show/hide item with squeeze on X axis

"squeeze-y" - show/hide item with squeeze on Y axis

"squeeze-xy" - show/hide item with squeeze on X and Y axes

  • Movement

"left" - show/hide item with movement from the left side

"right" - show/hide item with movement from the right side

"top" - show/hide item with movement from the top side

"bottom" - show/hide item with movement from the bottom side

Item types

There are 5 main item types in Character Generator: Image, Flash, Text, Graphic, Empty.

Image

Image items use external images for overlaying. It can be files (*.jpg, *.gif, *.bmp etc.) or images from memory added by its handles. To add image from file you need to pass image path to the AddNewItem() method:

C# sample code:

 m_objCharGen.AddNewItem("image1.jpg", 0, 0, 1, 1, "my-image-overlay-item");

To add image from memory you need to pass image handle to the AddImageByHandle() method:

C# sample code:

 m_objCharGen.AddImageByHandle(1234567, 0, 0, 1, 1, "my-image-overlay-item");

where 1234567 is image handle.

Flash

Flash items use external *.swf files for overlaying. It can be used for displaying animated logos, trailing messages etc. To add SWF object you need to pass *.swf file path to the AddNewItem() method:

C# sample code:

 m_objCharGen.AddNewItem("Name_Banner.swf", 0, 0, 1, 1, "my-flash-overlay-item");

You can interact with SWF items you add - call it’s Flash functions or change Flash variables by FlashCallFunction() and FlashSetVariable() methods call.

You can test this logic on our sample applications.

You’ll need flash sample files to test filter on:

SWF file

FLA file

First of all add your flash overlay item:

1. Open CG config panel.

2. Press "Add file" button and choose downloaded "Name_Banner.swf" file.

3. Display flash item by doubleclicking on "Show" field.

Cg flashvar set.png

Now, let’s get flash variable value of the item:

1. Select the item in a list and write “strName.text” into the ”Name” field of “Get/Set Flash variables && functions call” area.

2. Press “Lookup” button. You will see value of “strName.text” variable (William Jonson) in the “Value or Request” field.

C# sample code:

//Get flash variable value
string strValue;
m_pMLCharGen.FlashGetVariable("flash-000", "strName.text", out strValue);

Now, let’s set flash variable of the item:

1. Select the item in a list and write “strName.text” into the ”Name” field of “Get/Set Flash variables && functions call” area.

2. Write “New Name” into the “Value or Request” field of “Get/Set Flash variables && functions call” area.

3. Press “Set” button. You will see that name in a header of flash object turned into “New Name”.

C# sample code:

//Set flash variable value
string strValue;
m_pMLCharGen.FlashSetVariable("flash-000", "strName.text", "New Name");

Now, let’s change a name, using flash function call:

1. Write following request into the “Value or Request” field of “Get/Set Flash variables && functions call” area:

<invoke name="UpdateTitleVal"><arguments><string>UpdateTitle Call!</string></arguments></invoke>

2. Press “Call” button. The “UpdateTitleVal” Flash function will be called with “UpdateTitle Call!” value of an input parameter. You will see that name in a header of flash object turned into “UpdateTitle Call!”

C# sample code:

//Call flash function
string strRet;
m_pMLCharGen.FlashCallFunction("flash-000", @"<invoke name='UpdateTitleVal'><arguments>
<string>UpdateTitle Call!</string></arguments></invoke>", out strRet);

To see Flash variables and functions declaration, please refer to the FLA file.

Text

For Text items there is additional structure MLCHARGENLib.CG_TEXT_PROPS contains text-specific properties (such as font type, font size, text style, etc.) that are not available in MLCHARGENLib.CG_ITEM_PROPS. To change basic item properties use the MLCHARGENLib.CG_ITEM_PROPS structure and the m_objCarGen.SetItemBaseProps() method.

C# sample code:

 MLCHARGENLib.CG_TEXT_PROPS textProps = new CG_TEXT_PROPS();
 textProps.bsTextString = "My Sample Text";
 textProps.bsFontFace = "Arial Bold";
 textProps.nFontHeight = 20;
 m_objCharGen.AddNewTextItem(ref textProps, 0,0,1,1,"my-text-overlay-item");

You can also add text in simplified way: C# sample code:

AddNewItem( "<text>Some Text</text>", .... )
AddNewItem( "<text font='Arial Narrow' size='16' color=Red bg-color=white>Some Text</text>", .... )

Graphic

Graphic is a new type of item. It can be used to create geometric figures (such as circles, rectangles, triangles etc.) as overlay items.

Main purpose of this type of item is:

  • Mark something on overlaid stream.
  • Create a frame and background for any other overlay item.
  • Limit the display bounds of any other overlay item or group of items (see group items section).

The main difference of graphic item creation is that there is no specific structures to create or change it. So all interactions with such items type can be performed through XML.

C# sample code:

 string graphicItemXML=
 @"<cg-item>
      <graphics type='block-2' round-corners='0.300' sides='0' star-inset='0.000' outline='2.00'
      outline-color='0xFFFFFFFF'>
         <fill-color value='0xFF0000FF-0x8000FF00' rotate='0'/>
      </graphics>
      <cg-props pos-x='0' pos-y='0' alpha='255' show='yes' move-type='accel-both' type='Graphics' 
      bg-color='#00000000' pixel-ar='0.000' play-mode='loop' interlace='auto' scale='fit-ar' align='center' 
      width='512' height='64' pause='no' edges-smooth='0'>
      <indent left='0' right='0' top='0' bottom='0'/>
      </cg-props>
      <rate original='yes' speed='1.000'/>
      <anchor item='top-left' screen='top-left'/>
      <auto-blend start='0' ramp='0' on='0' off='0' repeat='no' rewind='no'/>
      <movement speed-x='0.000' speed-y='0.000'/>
   </cg-item>";
 
 m_objCharGen.AddNewItem(graphicItemXML, 0, 0, 1, 1, "my-first-graphic-item");


You can also use a part of description with tag <graphics> on item add:

C# sample code:

AddNewItem( "<graphics color='Red(80)-White(160)-Green(80)'/>", .... )
AddNewItem( "<graphics type='circle' outline=3.0 color='Red(80)|White(160)|Green(80)' outline-color=Black/>", .... )

As you see, the color description in previous sample is rather strange: "Red(80)-White(160)-Green(80)". It's a new feature usage - gradient. More detailed description you can find in "Gradient" section of "Additional features".

Empty

Empty is additional item type. It is used just to limit some other item's display bounds.

Additional features

Groups

Group it's not a new type of item. Any of the item types can become a group if some other items will be added to them. For example you can create a news line scrolling in a colored frame and delimitered with a pictures.

C# sample code:

 //Add background item. It will become a group item when other items will be added to it.
 string graphicItemXML= 
 @"<cg-item>
      <graphics type='block-2' round-corners='0.300' sides='0' star-inset='0.000' outline='2.00'
      outline-color='0xFFFFFFFF'>
         <fill-color value='0xFF0000FF-0x8000FF00' rotate='0'/>
      </graphics>
      <cg-props pos-x='0' pos-y='0' alpha='255' show='yes' move-type='accel-both' type='Graphics' 
      bg-color='#00000000' pixel-ar='0.000' play-mode='loop' interlace='auto' scale='fit-ar' align='center' 
      width='512' height='64' pause='no' edges-smooth='0'>
      <indent left='0' right='0' top='0' bottom='0'/>
      </cg-props>
      <rate original='yes' speed='1.000'/>
      <anchor item='top-left' screen='top-left'/>
      <auto-blend start='0' ramp='0' on='0' off='0' repeat='no' rewind='no'/>
      <movement speed-x='0.000' speed-y='0.000'/>
      <scroll type='crawl' speed='-2.0' distance='32.0' set-indent='10' set-scale='fit-ar' line-height='0.8'/>
   </cg-item>";
 m_objCharGen.AddNewItem(graphicItemXML, 0, 0, 1, 1, "background-item");
 
 //AddText Item
 MLCHARGENLib.CG_TEXT_PROPS textProps = new CG_TEXT_PROPS();
 textProps.bsTextString = "My Sample Text";
 textProps.bsFontFace = "Arial Bold";
 textProps.nFontHeight = 20;
 m_objCharGen.AddNewTextItem(ref textProps, 0,0,1,1,"text-item");
 
 //Add image item
 m_objCharGen.AddNewItem("Picture.jpg", 0, 0, 1, 1, "picture-item");
 
 //Add text and image items to group
 string groupId = "background-item";
 m_objCharGen.GroupAddItem("text-item", 1, 0, 1, ref groupId);
 m_objCharGen.GroupAddItem("picture-item", 1, 0, 1, ref groupId);

Please note that background graphic item has additional line in it's XML descriprion:

 <scroll type='crawl' speed='-2.0' distance='32.0' set-indent='10' set-scale='fit-ar' line-height='0.8'/>

It describes the inner item scrolling properties. This properties will be applied only to inner items of a group and the background item itsefl will not be scrolled. In opposite the inner items has a zero movement speed property value, but they will be scrolled because the background item has scroll speed = "-2".

Groups can also be used as to limit the display area for items (analog of "SetDisplayBounds" method of Text and Grapfic overlay filter).

Here is a code sample for limitation of display area of flash item:

'C# sample code:

 //Add new flash item
 string itemId = "my-flash-item";
 m_pMLCharGen.AddNewItem(@"d:\MyFlashItem.swf", 0, 0, 0, 0, ref itemId); 
 
 //Add this item to new group            
 //The "display bounds" will be limited by this group area
 string itemIdGr = "";
 m_pMLCharGen.GroupAddItem(itemId, 0, "view-area", ref itemIdGr); 
 
 //Get group properties
 string itemProps;
 CG_ITEM_PROPS props = new CG_ITEM_PROPS();
 m_pMLCharGen.GetItemBaseProps(itemIdGr, out itemProps, out props);
 
 //Limit dosplay bounds of the group by settind the tagSIZE
 tagSIZE ts = new tagSIZE();
 ts.cx = 200;
 ts.cy = 200;
 props.szItem = ts;
 
 //Set new properties to group
 m_pMLCharGen.SetItemBaseProps(itemIdGr, ref props, 0);
 
 //Show item added to "view-area" group
 m_pMLCharGen.ShowItem(itemId, 1, 0);

Tickers

Tickers are used to create a news, weather and other information scrolling lines. Let's create a simple 2 line ticker. As you remember we can add it using XML description created on property page:

C# sample code:

 string tickerItemXML= 
 @"<cg-item group-type='ticker' intro-delay='0.0' exit-delay='0.0' exit-time='0.5'>
     <ticker type='crawl' speed='-2.0' set-scale='yes' align='center' start-time='0.0' distance='1.0' line-height='1.0' ignore='no' def-height='28.000'>
     <content>
      <content-item value='Line 1
        Line 2
        Line 3
        ' add-type='add-to-end, multiline'/>
     </content>
     </ticker>
     <graphics type='rect' color='blue(160)-green(80)-orange(160)'/>
     <default-text bold='true' size='20' style='uppercase'/>
     <cg-props pos-x='0' pos-y='490' alpha='255' show='yes' move-type='accel-both' bg-color='Black(0)' 
       pixel-ar='0.000' play-mode='loop' interlace='auto' scale='fit-ar' align='center' width='720' 
       height='28' pause='no' edges-smooth='0'>
        <indent left='0' right='0' top='0' bottom='0'/>
        <group-indent left='0' right='0' top='0' bottom='0'/>
     </cg-props>
     <rate original='yes' speed='1.000'/>
     <anchor item='top-left' screen='top-left'/>
     <auto-blend start='0' ramp='0' on='0' off='0' repeat='no' rewind='no'/>
     <movement speed-x='0.000' speed-y='0.000'/>
   </cg-item>;"
 string tickerName = "ticker-item";
 m_objCharGen.AddNewItem(tickerItemXML, 0, 0, 1, 1, ref tickerName);

But the easier way is to add tickers using special method TickerAddNew():

C# sample code:

 //Add ticker
 string tickerItemXML= 
 @"<cg-item>
      <ticker type='crawl'/>
      <graphics color='ML(180)-White(180)'/>
      <default-text bold='true' size='20' style='uppercase'/>
   </cg-item>";
 string tickerName = "ticker-item";
 m_objCharGen.TickerAddNew(tickerItemXML, 0.05, 0.05, 0, 0, 1, 0, ref tickerName);
 //Add ticker content
 m_objCharGen.TickerAddContent(strCookie, "Line1\r\nLine2\r\nLine3", "add-to-end, multiline");

The word "multiline" means that each text line will be used as a separate ticker item. Otherwise all 3 lines will be used as one ticker item.

The word "add-to-end" means that items will be added to the end of list. The other options are:

"remove-first" - items will be added to the end of list and the first ticker item will be rempved.

"remove-all" - items will be added to the end of list and all other ticker items will be rempved.

Here is the result ticker:

CG ticker.jpg

Except adding a content from code you can write it to the files an add the whole file.

For example you can create a text file "content.txt" with ticker items:

Line 1
Line 2
Line 3

Let's add it to the ticker:

C# sample code:

 //Add ticker
 string tickerItemXML= 
 @"<cg-item>
      <ticker type='crawl'/>
      <graphics color='ML(180)-White(180)'/>
      <default-text bold='true' size='20' style='uppercase'/>
   </cg-item>";
 string tickerName = "ticker-item";
 m_objCharGen.TickerAddNew(tickerItemXML, 0.05, 0.05, 0, 0, 1, 0, ref tickerName);
 //Add ticker content
 m_objCharGen.TickerAddContent(strCookie, @"c:\content.txt", "");

and get the result like on a picture above.

Except the text lines you can add a picture delimiters to your content marked with a special tags.

Here is the eample of a weather ticker file "weather_crawl.txt" containing the picture delimiters:

[[sun:weather\01d.png]] Alicante 18°C
[[cloud:weather\04.png]] Amsterdam 13°C
[[cloud-sun:weather\03d.png]] Athens 25°C
[[cloud-sun]] Barcelona 18°C
[[rain:weather\10.png]] Berlin 13°C
[[cloud]] Bonn 14°C
[[rain]] Bordeaux 16°C
[[cloud]] Brest 13°C
[[cloud]] Brussels 13°C
[[cloud]] Corfu 22°C
[[sun]] Dublin 7°C
[[sun]] Faro 21°C
[[cloud-sun]] Naples 21°C

Let's add it to the ticker:

C# sample code:

 //Add ticker
 string tickerItemXML= 
 @"<cg-item>
      <ticker type='crawl'/>
      <graphics color='ML(180)-White(180)'/>
      <default-text bold='true' size='20' style='uppercase'/>
   </cg-item>";
 string tickerName = "ticker-item";
 m_objCharGen.TickerAddNew(tickerItemXML, 0.05, 0.05, 0, 0, 1, 0, ref tickerName);
 //Add ticker content
 m_objCharGen.TickerAddContent(strCookie, @"c:\news\weather_crawl.txt", "");

You will get the result like this:

CG ticker1.jpg

Please note that picture *.png files are stored in "weather" subfolder of "news" folder.

Compositions

Compositions is a powerful tool for easy operating a big mounts of items. They can be used if you have a several items in separate parts of screen and want to show/hide them in one sequence.

Let's create a simple composition, containing 2 items (SWF and text) show it for 10 seconds.

C# sample code:

 //Add sample SWF item
 string strCookieSWF = "my-swf-item";
 m_pMLCharGen.AddNewItem(@"c:\temp\Name_Banner.swf", 0.05, 0.05, 1, 1, ref strCookieSWF); 
 
 //Add sample text item
 string strCookieTxt = "my-text-item";
 CG_TEXT_PROPS textProps = new CG_TEXT_PROPS();
 textProps.bsTextString = "My Sample Text";
 m_pMLCharGen.AddNewTextItem(ref textProps, 5, 130, 0, 1, ref strCookieTxt);
 
 //Add both items to composition "my-sample-composition"
 string strCompositionID = "my-sample-composition";
 m_pMLCharGen.CompositionsAddItems(strCookieSWF, 0, "", ref strCompositionID);
 m_pMLCharGen.CompositionsAddItems(strCookieTxt, 0, "", ref strCompositionID);
 
 //Hide both items
 m_pMLCharGen.ShowItem(strCookieSWF, 0, 0);
 m_pMLCharGen.ShowItem(strCookieTxt, 0, 0);
 
 //Show your composition. The parameters are:
 //2 - the composition will appear during 2 secomds
 //10 - the composition will be displayed for 10 seconds 
 //3 -  after it the composition will be hidden during 3 seconds 
 m_pMLCharGen.CompositionsDisplay(strCompositionID, "", 2, 10, 3);

Compositions1.jpg

Like all other Character Generator items the compositions can be saved and loaded via XML, so you don't need to add all items to composition again when you'll need them.

Let's save our composition to XML and then restore it from saved file:

C# sample code:

 //Save composition to XML file
 m_pMLCharGen.CompositionsSaveToFile(strCompositionID, @"c:\temp\MyComposition.xml");
 //Remove this composition
 m_pMLCharGen.CompositionsRemove(strCompositionID);
 
 //Load it from XML file
 m_pMLCharGen.CompositionsLoadOne(@"c:\temp\MyComposition.xml", ref strCompositionID); 
 
 //Show your composition. The parameters are:
 //2 - the composition will appear during 2 secomds
 //10 - the composition will be displayed for 10 seconds 
 //3 -  after it the composition will be hidden during 3 seconds 
 m_pMLCharGen.CompositionsDisplay(strCompositionID, "", 2, 10, 3);

You can also use show and hide effects for items in composition to display it more spectacular. Please, refer to the "Show and hide items" section.

Crawls and rolls

This features are used to implement a scrolling groups of items (see Group item type). You can use only one scrolling type for each background item. Configuring of this featire can be done by doing correspondent XML property to <cg-item> root.

Crawl:

 
 <scroll speed='-2.0' set-scale='yes' align='center' start-time='0.0' type='crawl' distance='2.0' scale-type='fit-ar' line-height='0.8'/>

Or roll:

 
 <scroll speed='-2.0' set-scale='yes' align='center' start-time='0.0' type='roll' distance='1.0' scale-type='shrink-to-fit' line-height='0.8' line-width='0.9'/>

Shadow, Blur, Glow, Motion Blur

  • Shadow effect. You can add it by adding XML property to <cg-item> root:
 
 <effects>
    <shadow enabled='yes' blur='6' alpha='128' color='Black' offset-x='3' offset-y='3'/>	
 </effects>
  • Blur effect. You can add it by adding XML property to <cg-item> root:
 <effects>		
    <blur enabled='yes' size-x='3' size-y='3' align='center'/>
 </effects>
  • Glow effect. You can add it by adding XML property to <cg-item> root:
 <effects>		
    <glow enabled='yes' size-x='8' size-y='8' value='1.45' blend='0.40'/>
 </effects>
  • Motion Blur effect. It is usefull when you need a moving item to look more smoothly. You can add it by adding XML property to <cg-item> root:
 <effects>		
    <motion-blur enabled='yes' blend='0.25' auto-speed='1.0' speed-x='0.0' speed-y='0.0'/>
 </effects>

You can combine effects in any desirable way:

 <effects>
    <motion-blur enabled='yes' blend='0.25' auto-speed='1.0' speed-x='0.0' speed-y='0.0'/>
    <shadow enabled='yes' blur='6' alpha='128' color='Black' offset-x='3' offset-y='3'/>
    <blur enabled='yes' size-x='3' size-y='3' align='center'/>
    <glow enabled='yes' size-x='8' size-y='8' value='1.45' blend='0.40'/>
 </effects>
Personal tools