Page 1

Label Slider XML Image Banner Rotator with Video - Documentation  

How to install Banner properties How to animate caption text How to add video How to add SWF How to change fonts Support

p. 2 p. 4 p. 11 p. 14 p. 15 p. 16 p. 17

1


Label Slider XML Image Banner Rotator with Video - Documentation

How to install Bellow is the HTML code you need to run the SWF file: <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.settingsXML= "assets/xml/MY_SETTINGS.xml"; flashvars.mediaXML= "assets/xml/MY_MEDIA.xml"; flashvars.cssURL= "assets/xml/MY_CSS_FILE.css"; flashvars.folderPath= "http://www.YOUR_DOMAIN.com/PATH_TO_ASSETS/"; var params = {}; params.menu = "false"; params.quality = "high"; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; params.allowfullscreen = "true"; var attributes = {}; attributes.align = "middle"; swfobject.embedSWF("MY_EXAMPLE.swf", "myDIV", "900", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes); </script> <p id=" myDIV "></p>

Now let's explain what code goes where: Inside the <head></head> tags we insert the following: <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.settingsXML= "assets/xml/MY_SETTINGS.xml"; flashvars.mediaXML= "assets/xml/MY_MEDIA.xml"; flashvars.cssURL= "assets/xml/MY_CSS_FILE.css"; flashvars.folderPath= "http://www.YOUR_DOMAIN.com/PATH_TO_ASSETS/"; var params = {}; params.menu = "false"; params.quality = "high"; params.scale = "noscale"; params.salign = "tl"; params.wmode = "transparent"; params.allowfullscreen = "true"; var attributes = {}; attributes.align = "middle"; swfobject.embedSWF("MY_EXAMPLE.swf", "myDIV", "900", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes); </script>

<p id=" myDIV "></p> 2


Label Slider XML Image Banner Rotator with Video - Documentation Inside the <body></body> tags we insert the following:

 <p id=" myDIV "></p>

Don't forget to change "MY_SETTINGS", "http://www.YOUR_DOMAIN.com/PATH_TO ASSETS/" , "MY_EXAMPLE" and "myDIV" with the actual file names and paths that you have.

IMPORTANT In the deploy folder you have 7 folders with the examples. If you open the HTML file from any folder that runs the SWF you will see the same code running there. You can also use the code from the HTML file

3


Label Slider XML Image Banner Rotator with Video - Documentation

BANNER PROPERTIES General Properties <auto_play value="true"/> Set this to true if you want to auto rotate or false to disable auto rotate <component_width value="940"/> Set the width of the component. It must be the same with the SWF file

<component_height value="500"/> Set the height of the component. It must be the same with the SWF file <banner_width value="670"/> Set the width of the banner. <banner_height value="345"/> Set the height of the banner. <banner_border_color value = "0xffffff"/> Set the banner border color. <banner_border_alpha value = "1"/> Set the banner border color alpha. Values from 0 to 1( 0.1, 0.2 - 0.8, 0.9, 1 ) <banner_border_thickhess value = "4"/> Set the banner border thickness. <keep_aspect_ratio value="false"/>

4


Label Slider XML Image Banner Rotator with Video - Documentation Set false if you use photos resized to your own dimensions. Set true if you want to keep aspect ratio of photos that are larger than your banner dimensions <banner_background_color value = "0xcccccc"/> Set the banner background color. <banner_background_alpha value = "1"/> Set the banner background color alpha. <load_background_image value="false"/> Set to false if you donâ&#x20AC;&#x2122;t want to load a background image for the banner. Set to true otherwise. <background_image_link value=""/> Load a background image for the banner. This image will be behind the banner <text_numbering_CSS_tag value="numbering"/> This is the CSS tag from the StyleSheet file. If you create another CSS tag inside the banner Style Sheet file than be sure you enter the CSS class value here.

Text properties <embed_fonts value="true"/> Set to true if you want to embed the fonts. Set to false if you donâ&#x20AC;&#x2122;t want to embed fonts and also if you are using Arabic, Cyrillic and other languages that contain special characters. You can set true if you have for example your own Arabic font.

Video properties <preview_play_label><![CDATA[<playLabel>play/pause</playLabel>]]></preview_play_label>

5


Label Slider XML Image Banner Rotator with Video - Documentation This is the label you will see on video. Change it to other text and/or language. Keep the playLabel CSS tag or create your own. <preview_button_label_back_color value="0xffffff"/> Sets the preview button label background color <preview_button_label_back_color_alpha value="1"/> Sets the preview button label background color alpha <preview_button_label_back_shadow_active value="1"/> Sets the preview button label background shadow. Enabled for 1 and disabled for 0 <preview_button_label_shadow_active value="0"/> Sets the preview button label shadow. Enabled for 1 and disabled for 0 <preview_button_label_shadow_color value="0x4c4c4c"/> Sets the preview button label background shadow color.

<video_time_label_cssTag1 value="videoTime1"/> This is the CSS tag from the StyleSheet file for current video time. If you create another CSS tag inside the banner Style Sheet file than be sure you enter the CSS class value here. <video_time_label_cssTag2 value="videoTime2"/> This is the CSS tag from the StyleSheet file for total video time. If you create another CSS tag inside the banner Style Sheet file than be sure you enter the CSS class value here. <thumb_play_scale_size value="1"/> Sets the thumb play button scale size. Values from 0 to 1

<thumb_play_back_out_color value="0xffffff"/> Sets the play button background out color

6


Label Slider XML Image Banner Rotator with Video - Documentation <thumb_play_back_out_color_alpha value="1"/> Sets the play button background out color alpha <thumb_play_back_over_color value="0x0c0c0c"/> Sets the play button background over color <thumb_play_back_over_color_alpha value="1"/> Sets the play button background over color alpha <thumb_play_sign_out_color value="0x0c0c0c"/> Sets the play button sign out color <thumb_play_sign_out_color_alpha value="1"/> Sets the play button sign out color alpha <thumb_play_sign_over_color value="0xffffff"/> Sets the play button sign over color <thumb_play_sign_over_color_alpha value="1"/> Sets the play button sign over color alpha <scrubber_background_color value="0xffffff"/> Sets the scrubber background color <scrubber_background_color_alpha value="1"/> Sets the scrubber background color alpha <scrubber_loaded_color value="0x9c9c9c"/> Sets the scrubber video loaded color <scrubber_loaded_color_alpha value="1"/> Sets the scrubber video loaded color alpha 7


Label Slider XML Image Banner Rotator with Video - Documentation <scrubber_progress_color value="0x4c4c4c"/> Sets the scrubber video progress color <scrubber_progress_color_alpha value="1"/> Sets the scrubber video progress color alpha

Thumbs( list items ) properties <thumbs_position value="right"/> Sets the list items position. Values: right or left or none <thumbs_visible value="8"/> Sets the number of list items that are visible. This is useful when for example you have 14 slides and you want 6 to be visible and the others to scroll using the arrows. <thumbs_padding value="4.7"/> Sets the vertical padding between thumbs items <thumbs_size value="180"/> Sets the thumbs items size in width <thumbs_height value = "20"/> Sets the thumbs items height <thumbs_effect_size value="20"/> Sets the thumbs effect size <thumbs_out_color value="0xffffff"/> Sets the thumbs out color 8


Label Slider XML Image Banner Rotator with Video - Documentation

<thumbs_out_color_alpha value="1"/> Sets the thumbs out color alpha <thumbs_over_color value="0x9c9c9c"/> Sets the thumbs over color <thumbs_over_color_alpha value="1"/> Sets the thumbs over color alpha <thumbs_selected_color value="0x0c0c0c"/> Sets the thumbs selected color <thumbs_selected_color_alpha value="1"/> Sets the thumbs selected color alpha <thumbs_arrow_position value="bottom"/> Sets the thumbs arrows position. Values: bottom or right <thumbs_arrow_padding value="20"/> Sets the thumbs arrow padding <thumbs_arrow_back_out_color value="0xf4f4f4"/> Sets the thumbs arrow background out color <thumbs_arrow_back_out_color_alpha value="1"/> Sets the thumbs arrow background out color alpha <thumbs_arrow_back_over_color value="0x0c0c0c"/> Sets the thumbs arrow background over color <thumbs_arrow_back_over_color_alpha value="1"/> Sets the thumbs arrow background over color alpha 9


Label Slider XML Image Banner Rotator with Video - Documentation

<thumbs_arrow_sign_out_color value="0x0c0c0c"/> Sets the thumbs arrow sign out color <thumbs_arrow_sign_out_color_alpha value="1"/> Sets the thumbs arrow sign out color alpha <thumbs_arrow_sign_over_color value="0xf4f4f4"/> Sets the thumbs arrow sign over color <thumbs_arrow_sign_over_color_alpha value="1"/> Sets the thumbs arrow sign over color alpha

10


Label Slider XML Image Banner Rotator with Video - Documentation

HOW TO ANIMATE CAPTION TEXT To animate the text all you need to do is alter the settings in the media.xml file. Bellow you will find these settings explained: <link>http://activeden.net/user/flashcreed/portfolio</link> Set the URL link for the slide. Users clicks on slide and it is redirect to that link

<target>_blank</target> Set the target for theURL. Users clicks on slide and it is redirect to that link but in a new page.

<thumbText> <outText><![CDATA[<head>IMAGE no 1</head>]]></outText> <overAndSelectedText><![CDATA[<subhead>LOREM IPSUM DOLOR SIT AMET</subhead>]]></overAndSelectedText> </thumbText> This is the text for the thumbs( list items ). <outText> is the text you see when you are not with the mouse over the thumbs <overAndSelectedText> is the text you see when you are with the mouse over the thumbs or the thumb is selected

<slideTime>3</slideTime> Set the time until it goes to the next slide

<slideEffect>verticalStripes</slideEffect> Set the effect that is applied on the slide when it is showed

11


Label Slider XML Image Banner Rotator with Video - Documentation

<description> This tag is the area where you add your caption text

<text><![CDATA[<infoLabel>THE LABEL SLIDESHOW</infoLabel>]]></text> Set the HTML formatted caption text

<textPosX> <start>20</start> <finish>20</finish> </textPosX> Set the start and finish X position of the text. The start represents the position from where the caption text will start to animte and the finish represent the ending position where the text will stop

<textPosY> <start>20</start> <finish>20</finish> </textPosY> Set the start and finish Y position of the text. The start represents the position from where the caption text will start to animte and the finish represent the ending position where the text will stop

<textEffect>slide</textEffect> Set the effect type for the caption. There two effects: alpha and slide

<textBackgroundShadowActive>1</textBackgroundShadowActive> Set to 1 to enable caption text background shadow Set to 0 to disable caption text background shadow 12


Label Slider XML Image Banner Rotator with Video - Documentation

<textBackgroundColor>0x0c0c0c</textBackgroundColor> Set the background color of the text

<textBackgroundAlpha>1</textBackgroundAlpha> Set the background color alpha of the text

<textShadowActive>0</textShadowActive> Set to 1 to enable caption text shadow Set to 0 to disable caption text shadow

<textShadowColor>0x0c0c0c</textShadowColor> Set the text shadow color

This is the ending tag of the animation properties and text for the captions </description>

13


Label Slider XML Image Banner Rotator with Video - Documentation

HOW TO ADD VIDEO Let's presume that you want to embed the video "video1.mp4" in your fresh purchased banner. In your "media.xml" file, inside any node, you will find the following tags: <item imageURL="assets/media/example1/images/image2.jpg"> <thumbText> <outText><![CDATA[<head>IMAGE no 2</head>]]></outText> <overAndSelectedText><![CDATA[<subhead>LOREM IPSUM DOLOR SIT AMET</subhead>]]></overAndSelectedText> </thumbText>

You can add the video by adding the following tag before <item imageURL="assets/media/example1/images/image2.jpg"> <videoURL>video1.mp4</videoURL>

IMPORTANT The link is disabled when playing video.

14


Label Slider XML Image Banner Rotator with Video - Documentation

HOW TO ADD SWF SWF files are loaded the same as the images. The SWF supported type are AS3 ones. Also please create your SWF files to the dimensions of the banner. <item imageURL="path_to_swf/your_file.swf">

15


Label Slider XML Image Banner Rotator with Video - Documentation

HOW TO CHANGE FONTS STEP 1: Go to "assets/fonts/" directory and open "fonts.fla" file. Inside the FLA file, open the Library ( Window -> Library). Right click inside the Library window, select New Font.

STEP 2: Give it a name, select the font you want and check the "Export for Actionscript" box.

STEP 3: Click OK and a warning message will appear.

STEP 4: Click OK on that message too and after that publish the FLA file.

STEP 5: Now you are ready to use the new font. Just insert it's name inside the CSS file ( the CSS files are in "assets/css/" folder )

16


Label Slider XML Image Banner Rotator with Video - Documentation

SUPPORT For any questions or problems you may have, please don't hesitate to contact us at support@flashcreed.com. The support team is always there for you.

Thank you, Best regards, Flashcreed Team.

17


ewswfwqfq2f  

ewrrwrfwsafvcwsdgfvgwsgfvwsfvwserf

Advertisement
Read more
Read more
Similar to
Popular now
Just for you