Newsticker 3D documentation
 
    DOWNLOAD TRIAL VERSION HERE
 
DEMOS

standalone HTML layering loading RSS feed
(using trial version)
 
default swf loading XML feed
 
Quick Start FULL

When you receive the product you will receive a .zip file. The zip file will contain the following files

  • newsticker3D.fla
  • newsticker3D.swf
  • loader.fla
  • loader.swf
  • contents_newsticker.xml
  • swfobject.js
  • index.html
  • /caurina/ folder
  • folders
    /com/
      /patrickjansendesign/
       /newsticker3D/ newsticker3D.as
  • Readme.htm

Do the following steps to start using Newsticker 3D;

  1. Unzip the .zip file.
  2. Copy the /caurina/ and /com/ folder to the folder of your .fla
  3. Open Flash CS4 (or higher).
  4. Open newsticker3D.fla and your own .fla
  5. Copy the Library clips to your own .fla's Library (see also tip)
  6. Drag an instance of the button to stage of your .fla (or copy-paste from original .fla stage to your .fla)
  7. Open file contents_newsticker.xml.
    Choose if you want to use an RSS feed or your own XML. Try for example <RSSfeed>http://rss.cnn.com/rss/money_latest.rss</RSSfeed>
    If you want to use your own XML news feeds, leave the <RSSfeed> blank or delete it. Now configure your own XML feed items. The xml already has examples of how to set nodes but you can read all the options below (see Configuring)
  8. Upload everything to your server to test it out. (Specifically using external RSS feeds, testing locally can show flash player "Security" warnings which online won't be an issue)

If you want to use it as Standalone (not implemented into any other .fla but directly in ANY webpage), do this

  1. Copy these files into the folder of your webpage
    - loader.swf
    - newsticker3D.swf
    - contents_newsticker.xml
    - swfobject.js
  2. Open file index.html from the zip, copy the 2 javascript parts and the <div id="newsticker"> part into your own webpage
  3. If need be, adjust "800", "300" to the size the flash file needs to cover
  4. If need be, adjust left: -20; top: -15; to the position the left top has to be.
  5. Open file contents_newsticker.xml. and repeat/do step "7" above
  6. Upload everything to your server to test it out. (Specifically using external RSS feeds, testing locally can show flash player "Security" warnings which online won't be an issue)


> TOP <

 
Configuring

You set/configure a few things in the Library items of newsticker3D.fla. MovieClip "text MC 0", "text MC 1" etc hold the different kinds of fonts you use in the news ticker. For both scolling items and their popup descriptions.

MAKE SURE YOU CHECK AND SELECT THE TEXTFIELD INSTANCES ON STAGE AND IN PROPERTIES PANEL CLICK "EMBED" TO DEFINE WHICH LETTERS NEED TO BE EXPORTED INTO THE RESULT.

You can also modify the visual of the jump-scroll left/right triangles in their movieclips and the gradient corner effect in the back.

For the rest, you use the contents_newsticker.xml file. Below you see the settings and nodes to define visuals and contents

RSSfeed   If you prefer to use an RSS file for feed, define it here, otherwise leave blank.
RSSfeed_linktarget   Links on news feeds for RSS file use are opened in this target frame (xml has individual options)
Xpos   Horizontal base position of the news ticker
Ypos   Vertical base position of the news ticker
itembackground   Use the bar background behind news feed items (false will show text only). Attributes are;
offY : shift vertically
height : bar height
color: bar inside color
bevel: bar outside color
gridcolor: bar dots grid color
angle3D_L   3D depth angle for left side
angle3D_R   3D depth angle for right side
skewL   Skew vertical factor for left side
skewR   Skew vertical factor for right side
YshiftL   Shift left side if need be vertically. (pixel correction)
YshiftR   Shift right side if need be vertically. (pixel correction)
speed   Scrolling speed of the news ticker
maskwidth   Base mask full fill width of both left and right side
maskgradwidth   Extra gradient mask fill width of both left and right side, to gradually fade out the left and right sides.
backcorner   Add background dark/light corner effect in the center. Attributes are;
wL : Left side width
wR : Right side width
h: height
alphaL: Left side transparency
alphaR: Right side transparency
itemspacing   Space between news feed items
font   Default font MC type (Library item "text MC 2") for news feed items
fontsize   Default font size for news feed items
coloreven   Default font color for even items (2,4,6 etc)
coloruneven   Default font color for uneven items (1,3,5 etc)
showpupup   Use popup descriptions (if news feeds have any)
bordersize   Popup description default border size
popupX   Popup description default horizontal position
popupY   Popup description default vertical position
popupwidth   Popup description default text width
popupfontsize   Popup description default font size
popupmoveX   Popup description default horizontal move distance
popupmoveY   Popup description default vertical move distance
skewRpop   Popup description default skew factor (to match or adjust to right side of the bar if ned be). Should match ± skewR
popuptweentime   Popup description default tweening time
popupbackoff   Popup description default background area offset (enlarge area from text)
start_accelerate   Start scroll speed acceleration
jump_accelerate   Jump scroll speed acceleration
jump_Y   Vertical position of the jump-scroll left/right buttons. Attributes are;
xL : Left button horizontal position
xR : Right button horizontal position

Item Feeds
4 main feed properties, title is required, rest is optional

title   News feed header/title.
offY   Offset text vertically, useful to adjust according to title font choice up or down a bit.
color   Text color, overrides default even/uneven color
size   Text size, overrides default
     
link   link to open on click
target   optional frame target to open link into.
     
itemfont   Library font mc to use for this title.
     
description   Popup description for this title
backoff   Popup description base background area offset (enlarge area from text). If none, uses popupbackoff
backoffL   Left offset (overrides backoff)
backoffR   Right offset (overrides backoff)
backoffU   Up offset (overrides backoff)
backoffD   Down offset (overrides backoff)
backcolor   Background color
bordercolor   Background border color
bordersize   Background border size
roundcorner   Background round corner size
textcolor   Text color (overrides default black)
align   Text Alignment (left / right / center / justify)
w   Text field width (overrides default popupwidth) 
font   Library font mc to use for this title.
size   Text field font size (overrides default popupfontsize) 
shiftY   Shift popup (plus its tween) vertically, for minor adjustments
skewRpop   Skew vertical popup (overrides default skewRpop)
alpha   Popup background alpha (default 0)
     
glowfilter   Add glowfilter to title text
color   filter color
alpha   filter alpha
blurX   filter blur X
blurY   filter blur Y
strength   filter strength
quality   filter quality
     
bevelfilter   Add bevel filter to title text
distance   filter distance
angle   filter angle
highlightColor   filter highlight Color
highlightAlpha   filter highlight Alpha transparency
shadowColor   filter shadow Color
shadowAlpha   filter shadow Alpha transparency
blurX   filter blur X
blurY   filter blur Y
strength   filter strength
quality   filter quality

> TOP <
 
 
Tips

Some tips to keep in mind when working with Newsticker 3D;

  • Text anti-aliasing type
    You can experiment with the antialiasing of the font. Instead of default "anti-alias for Readability" you could also try "anti-alias for Animation", which can smooth the effect but may slightly affect the readability.

  • Copying Library items between flas
    You can open multiple Library Panels and "pin" them to copy between Libraries with the 2 icons on the top right of the Library panel

  • Standalone-use (html DIV placement) ... choose placement wisely
    If you use html DIV placement of the ticker, make sure it doesn't cover any areas which should be clickable below (such as buttons and links). Notice that the background gradient corner effect also will 'highjack' mouse control and any content below that will not work because flash contents take precedence. Either turn the background gradient off or decrease its widths.

  • Delete non-used fonts
    If you only use 1 font or a few fonts, delete the not used "text MC X" (where X are numbers) from the Library so they are not included on export/publish. This will save a few unneeded KB's in the final .swf file

> TOP <