JC Play List Properties
Overview | Properties | Methods | Events | XML
Most of these properties can be set in the Component Inspector (Alt + F7).
| Property | Type Component Inspector |
Description |
| _targetInstanceName | String yes |
The instance name of the target viewer object (a Flash loader component or an audio/video player component) used as loader for the contents of the list. Each item of the list could have, besides its thumbnail, a corresponding media file (image, video, audio, flash clips) that will be loaded in that target viewer object when an item from the list gets selected. If the target viewer object (a loader component or audio/video player) has a property called source, which is used to set the path and file name of the media file to be loaded, then the list component will automatically set that source property. If JC Play List is used with the JC Player video player component then the list component will automatically set the videoURL property of the video player when an item from the list is selected. JC Play List also works with the LoaderProV3AS3 component for loading images and Flash clips and also with Adobe's UILoader component. It will also load content automatically into these loader components, when an item from the list is selected. If the loader or player component set as target viewer does not have a property called source, but instead it has a property with a different name, that property should be specified to JC Play List. You can do that by setting the list component's targetSourceName property. In this case it is recommended that the targetSourceName property is set before the _targetInstanceName or target properties. If the targetSourceName was already set and then a JC Player, LoaderProV3AS3 or Adobe UILoader component is sat as target viewer than we recommend setting targetSourceName to an empty String before that. If the target viewer object is set, but the targetSourceName property is left unset and the target viewer does not have a property called source, then JC Play List will not load any contents in that viewer object. Usage:
componentInstance.targetSourceName = "contentPath";
or
componentInstance.targetSourceName = "";
|
| autoPlay | Boolean yes |
Specifies whether the slide show is turned on or not. If autoPlay is true, a slide show will start, selecting the items one by one. The delay between items is specified by the photoDelay property. If the file extension of the content of an item is specified in the photoTypes property, than the slide show will go on normally by selecting the next item after the amount of time specified at photoDelay, if repeat is set to "none" or "all". In case of video content, the slide show will pause until the video is finished. If the video player is JC Player, the slide show will automatically advance to the next item in the list, after JC Player finishes playing the video. If another video player is used, the slide show will pause until the user specifically instructs the JC Play List component to continue the slide show (by selecting another item in the list - call the previous(), next(), random(), play(), selectItemAt() or selectItemByProperty() methods). The same goes for audio content: the slide show pauses until the user tells it to continue - JC Player cannot be used to play audio files, so the aut advance feature is no longer valid. If repeat is set to "current" and autoPlay is true (slide show enabled), then the currently selected item will be selected repeatedly and the slide show will not advance to the next item, it will always reselect the same item from the list. Note This property is only taken into consideration if autoPlay is set to true and repeat is "none" or "all". Default: false Usage:
componentInstance.photoDelay = 3;
|
| autoResizeItem | Boolean yes |
Specifies whether the items in the list resize depending on the size of the list. If it is false, the items will have the same size as the item clip has in the component's skin (it will keep the same size) and they will not resize. In this case, if the list has a vertical orientation, then the width of the list will not change. If the list has horizontal orientation, the height of the list will not change. If the property is true, the items will resize according to the new size of the component. In this case, if the list has vertical orientation, when it is resized, the item will change only its width. If the list has horizontal orientation, only the height of the item will be changed (changing the size of the thumbnail). Default: false Usage:
componentInstance.autoResizeItem = true;
|
| backgroundColor | Color yes |
The background color for the list, the spacing between the list, slide buttons and scroll bar. Default: 0x000000 (black) Usage:
componentInstance.backgroundColor = 0xFFFFFF;
|
| disableColor | Color yes |
The color applied on the component's assets when the list is disables. Default: 0xCCCCCC (gray) Usage: componentInstance.disableColor = 0x999999; |
| easeType | String [easeNone, easeIn, easeOut, easeInOut] yes |
The type of easing used for sliding the list. Possible values are "easeNone", "easeIn", "easeOut" and "easeInOut". This property will not be applied for the alpha tween used to display the component after initializing. The type of tween used for displaying the component will always be Regular.easeOut. Default: easeOut Usage:
componentInstance.easeType = easeIn";
|
| enabled | Boolean yes |
Specifies whether the component instance is enabled or not. Default: true Usage:
componentInstance.enabled = true;
|
| highlightColor | Color yes |
This is the color used to display the text inside the list items, the arrows inside the slide buttons and the corresponding shapes of the scroll bar. This color is applied when these objects are in selected or roll over state. Default: 0xFF0000 (red) Usage:
componentInstance.highlight = 0xFFFFFF;
|
| highlightItem BackgroundColor | Color yes |
The highlight color for the item background. This color will be applied when an item is selected or the mouse rolls over an item. Default: 0x000000 (black) Usage:
componentInstance. highlightItemBackgroundColor = 0xFFFFFF;
|
| inkColor | Color yes |
This is the color used to display the text inside the list items, the arrows inside the slide buttons and the corresponding shapes of the scroll bar. This color is applied when these objects are in normal or up state. Default: 0xFFFFFF (white) Usage:
componentInstance.inkColor = 0xFFFFFF;
|
| itemBackgroundColor | Color yes |
The background color for the list items. This color is applied when the items are in the normal or up state. Default: 0x000000 (black) Usage:
componentInstance.backgroundColor1 = 0xFFFFFF;
|
| items | Array no |
[read-only] An Array of objects representing the items from the list. Each object will have all the properties of the item, specified in the XML feed (such as title, description, thumbnail path, content path and so on). Usage:
var listLength:uint = componentInstance.items.length;
|
| keyboardControl | Boolean yes |
Specifies whether the component will accept control from the keyboard. If the property is set to true, the component will allow you to navigate in the list using the arrow keys. The left and up keys are used to select the previous item and the down and right keys select the next item. The keyboard control is only possible when the component instance has focus. Default: false Usage:
componentInstance.keyboardControl = true;
|
| mouseMovement | String [direct, inverse, none] yes |
The list can be scrolled using mouse movement. This property specifies whether the list allows mouse movement for scrolling and if yes, what type to mouse movement will be used. Possible values are "direct", "inverse" and "none". If the value is "none", the list will not be scrollable using mouse movement. Otherwise, the list will scroll in the same direction as the mouse movement, if mouseMovement is "direct", or in the opposite direction of the mouse movement, if the selected value is "inverse". Default: none Usage:
componentInstance.mouseMovement = "direct";
|
| numberOfChildren | uint no |
[read-only] The total number of items loaded in the list. Usage:
trace(componentInstance. numberOfChildren);
|
| orientation | String [vertical, horizontal] yes |
The orientation of the list. Possible values are "horizontal" and "vertical". Default: vertical Usage:
componentInstance.orientation = "horizontal";
|
| photoDelay | Number yes |
The time delay in seconds used for the slide show. If the content of an item has its file extension specified at photoTypes, then the item will be selected for the amount of time specified by this property, if repeat is "none" or "all". If repeat is set to "current" and autoPlay is true (slide show enabled), then the currently selected item will be selected repeatedly and the slide show will not advance to the next item, it will always reselect the same item from the list. If photoDelay is 0, the slide show will not advance to the next item. This setting is usually used for image slide show. If the content is audio or video, the slide show will pause to let the content play and it will automatically advance to the next item after the video is played, if the player component is JC Player. If the player component is another player, than the user would have to continue the slide show - by calling one of the previous(), next(), random(), play(), selectItemAt() or selectItemByProperty() methods. Note This property is only taken into consideration if autoPlay is set to true and repeat is "none" or "all". Default: 3 Usage:
componentInstance.photoDelay = 5;
|
| photoTypes | String yes |
The file extension of the content on which photoDelay will be applied during slide show (autoPlay is true). Usually, this setting is used for image type of content. So when the slide show reaches an item with audio/video content, photoDelay will not be taken into consideration and the slide show will pause until the content has finished playing or until the user instructs the JC Play List component to go on with the slide show (that can be done by calling one of the previous(), next(), random(), play(), selectItemAt() or selectItemByProperty() methods). If video extensions are specified, for example "flv", the JC Play List component instance will select the item with video content, will load into a player (if it is the case) and the slide show go on, without waiting for the .flv file to finish playing. Note This property is only taken into consideration if autoPlay is set to true and repeat is "none" or "all". Default: jpg,jpeg,png Usage:
componentInstance.photoTypes = "jpg,png,tif";
|
| pictureAlign | String [topLeft, topCenter, topRight, middleLeft, middleCenter, middleRight, bottomLeft, bottomCenter, bottomRight] yes |
Specifies the alignment of the thumbnails inside the thumbnail containers, for each item of the list. Possible values are "topLeft", "topCenter", "topRight", "middleLeft", "middleCenter", "middleRight", "bottomLeft", "bottomCenter" and "bottomRight". Default: middleCenter Usage:
componentInstance.pictureAlign = "topLeft";
|
| pictureScaleMode | String [scaleCrop, maintainAspectRatio, exactFit, noScale] yes |
Specifies the way thumbnails inside list items will be scaled. Possible values are "scaleCrop", "maintainAspectRatio", "exactFit" and "noScale". Thumbnail scaling modes:
Default: scaleCrop Usage:
componentInstance.pictureScaleMode = "maintainAspectRatio";
|
| playListHeight | Number no |
[read-only] The height of the list inside the JC Play List component instance. It is possible that the height of the component instance visible on stage is different than the height of the list container. Default: 265 Usage:
componentInstance.orientation = "vertical";
|
| playListWidth | Number no |
[read-only] The width of the list inside the JC Play List component instance. It is possible that the width of the component instance visible on stage is different than the width of the list container. Default: 180 Usage:
componentInstance.orientation = "horizontal";
|
| repeat | String [none, current, all] yes |
The type of repeating used during the slide show. Possible values are "none", "current" and "all". If repeat is "none", once the slide show will reach the end of the list, it will stop. If repeat is "current" and the slide show is on, the component will repeatedly select the current item; the selection will last for the amount of time specified at photoDelay (if the content's file extension is specified at photoTypes) or if the content is video or audio that gets played, it will last until the target player has finished playing the content (if the file extension of the audio or video content is not specified at photoTypes). If repeat is "all", the slide show will restart, once it reaches the end of the list. Default: none Usage:
componentInstance.repeat = "current";
|
| scrollBar | Boolean yes |
The list can be scrolled using a scroll bar. This property specifies whether the scroll bar will be displayed or not. Default: false Usage:
componentInstance.scrollBar = true;
|
| selectedIndex | uint no |
[read-only] The 1-based index of the selected item, in the list. Since it is a 1-based index, the index of the first item is 1, not 0 like in 0-based indexes. Usage:
trace(componentInstance. selectedIndex);
|
| shuffle | Boolean yes |
Specifies the way the items will be selected during a slide show. If it is set to true, the items will be selected in a random way and not one after the other. Default: false Usage:
componentInstance.shuffle = true;
|
| skin | String yes |
The name of the skin applied to the component instance (you could use a different skin for different JC Play List instances on the stage). Currently, the component already has a default skin compiled into it, but you can edit the shapes associated to it by double-clicking on the JC Play List instance on the stage. Please note that any change you make to the shapes inside the JC Play List instance will be reflected on the other lists you have in your Flash application. Default: JCPLSkin Usage:
componentInstance.skin = "MyCustomSkin";
|
| slideButtons | Boolean yes |
The list can be scrolled using scroll buttons. This property specifies whether the component should display the buttons or not. The number of items scrolled using the buttons depends on the slideSize property. Default: true Usage:
componentInstance.slideButtons = false;
|
| slideSize | String [item, page] yes |
Specifies how many items will be scrolled at once, using the slide buttons. Possible values are "item" and "page". If slideSize is "item", then the slide buttons will scroll the list only one item at a time. If slideSize is "page", the slide buttons will scroll the list one page at a time (a page contains as many items as are visible at a moment). Default: page Usage:
componentInstance.slideSize = "item";
|
| smooth | Boolean yes |
Specifies whether the item thumbnails will be displayed using bitmap smoothing or not. Default: false Usage: componentInstance.smooth = true; |
| target | DisplayObject no |
This property is a reference to the target viewer object if one has been set. It can also be used to set the viewer object, by specifying a reference to that viewer. Please also keep in mind that the content will be loaded into the viewer through the property who's name was set to targetSourceName. Usage:
componentInstance.targetSourceName = "path";
or
componentInstance.targetSourceName = "";
|
| targetSourceName | String no |
The name of the viewer object's property that sets the path and file name of the content to be loaded into the viewer. For the LoaderProV3AS3 and UILoader component this property is called source, but JC Play List will know to set it automatically if the target viewer is an instance of those two loaders (so there's no need to set targetSourceName in this case). Also, if the target viewer is an instance of JC Player, targetSourceName should not be set, because the list component sets the videoURL of the player automatically. For any other loader or player components that are used as viewers and do not have a property called source, targetSourceName should be set with that specific components propery name (the name of the property that loads content). Usage:
componentInstance.targetSourceName = "path";
or
componentInstance.targetSourceName = "";
|
| tweenDuration | Number yes |
The time duration in seconds of the tween used for sliding the list and for the alpha tween used to display the component after initializing. Default: 1.5 Usage:
componentInstance.easeType = easeIn";
|
| tweenType | String [Strong, Regular, Elastic, Back, Bounce, None] yes |
Specifies the type of tweening used when sliding the list. Possible values are "Strong", "Regular", "Elastic", "Back", "Bounce" and "None". This property will not be applied for the alpha tween used to display the component after initializing. The type of tween used for displaying the component will always be Regular.easeOut. Default: Strong Usage:
componentInstance.tweenType = "Strong";
|
| visible | Boolean yes |
Specifies whether the component instance is visible or not. Default: true Usage:
componentInstance.visible = true;
|
| xmlFeedFrom | String [xml, flickr, picasa] yes |
Specifies the type of feed that it will receive to populate the list. Possible values are "xml", "picasa" and "flickr". If the value is "xml" then the component expects a custom .xml file that has the xml structure mentioned in this document. If the value is "picasa" or "flickr" then the component expects an rss 2.0 feed from either picasa or flickr. Default: xml Usage:
componentInstance.xmlFeedFrom = "picasa";
|
| xmlPath | String Yes |
Sets the path to a XML file that can configure the playList. The component will read and process the .xml file according to the xmlFeedFrom property setting. It can process three types of feeds: xml feed, picasa rss 2.0 feeds and flickr rss 2.0 feeds. When setting the xmlPath property keep in mind that it depends on the xmlFeedFrom property, otherwise the list will not be loaded correctly. Note If the component will load a picasa rss 2.0 feed, it will automatically change the feed domain from http://picasaweb.google.com to http://photos.googleapis.com because of the cross-domain policy file. Usage:
componentInstance.xmlFeedFrom = "xml";
|
Overview | Properties | Methods | Events | XML
The pack contains the .mxp install file, the documentation file and the sample files.
Fully free component
Easy visual representation of multimedia lists
Compatibility with other components
Fully customizable skin
