Home

SLIDESHOW

1. albumWindowAlpha number 100 60 Transparency value albumWindowRoundedCorners number 100 15 Value specifying how much the corners are rounded albumWindowShadowSize number 10 5 Shadow size albumWindowShadowColor color 000000 Shadow color albumWindowShadowAlpha number 100 50 Transparency value albumWindowAlign topLeft topRight bottomLeft bottomRight LeftCenter rightCenter bottomCenter topCenter center center How to position the image info in the slideshow albumWindowMarginX number 1000 0 Horizontal margin from the left or right side in pixels albumWindowMarginY number 1000 0 Vertical margin from the top or bottom side in pixels albumWindowRows number 1 1000 2 Number of rows albumWindowColumns number 1 1000 2 Number of columns albumWindowAutoSize true false true f true the rows and columns specified will be overridden with values which are automatically calculated albumWindowLineWidth number O0 20 2 Line width stroke of the window albumWindowLineColor color ffffff Color of the line albumWindowPadding number OQ 100 15 Padding in pixels albumWindowIconMargin number 1000 15 Margin between icons and albums albumWindowIconSpacing number 5 100 10 Spacing between icons in pixels albumWindowIconSize number 5 100 12 Size of the icons in pixels albumWindowIconColor color ffffff Colo
2. WD SLIDESHOW User Mandat Contents Introduction d How does it work So what s an XML file 1 tn 3 Let sset things up U 5 Prepare folder structure ua 3 co a oe ee ean ee ee a et 3 Put MonoSlideshow on your Site 3 oor 6 Disable startup logo sd Load a custom XML file d Start With a specified image e acte et S hti Loading Flickr RSS Feeds Attributes 0 8 Global attributes 8 Main attributes AK The image Info object Attributes for Albums 10 Main EURE a ee MEME 10 The thumbnail window object 11 The album window object 12 The controls object 13 The loading icon object 14 The mark object 14 MonoSlideshow User Manual Introduction MonoSlideshow is a Flash slideshow to view your images in a web page It can be placed on every website in whatever size you want and filled with whatever content you like It s designed for maximum flexibility whether you want to have a professional looking portfolio or just an image rotator on your website Some features Resize and position everything to suit your needs Color every object you see Attach links to images Supports sound and music Caching and preloading images How does it work Monoslideshow is a single SWF file There s no need to edit the slideshow in the Flash IDE itself In
3. available attributes are defined below The standard values are displayed between square brackets Global attributes The following attributes are global attributes They are to be defined only once in the lt preferences gt tag backgroundColor color ffffff randomizeAlbums true false false loadAlbum text none startWith photos thumbnails albums photos startWithAlbumID text none startWithImageID text none Attributes for images Every image tag img can have the attributes specified below Every attribute below could also be placed in the preferences or the album tag to specify global values for each of the images the tag contains with the exception of title description src thumbnail link and target Main attributes title text description text src url thumbnail url Link url target text blank id text sound string soundVolume number 100 100 waitForSound true false true imageAlign topLeft topRight bottomLeft bottomRight LeftCenter rightCenter bottomCenter topCenter center center imageMarginX number 1000 0 imageMarginY number 1000 0 imageScaleMode scaleToFit scaleToFill noScale downscaleToFit downscaleToFill scaleToFill MonoSlideshow User Manual scaleToFit scaleToFill imagePause number 0 5 86400 3 Time to wait in seconds until the n
4. in seconds the Ken Burns effect is active kenBurnsStart coordinates x1 y1 x2 y2 Coordinates of the rectangle on the image to start the Ken Burns effect with Use coordinates from the unscaled image kenBurnsEnd coordinates x1 y1 x2 y2 Coordinates of the rectangle on the image the Ken Burns effect wil zoom and pan to Use coordinates from the unscaled image The image Info object imageInfoColor color 000000 Color of the background imageInfoAlpha number 0 100 75 Transparency value of the background imageInfoRoundedCorners number 100 10 Value specifying how much the corners are rounded imageInfoShadowSize number 10 0 The size of the shadow MonoSlideshow User Manual 9 imageInfoShadowColor color 000000 imageInfoShadowAlpha number 100 100 imageInfoLineWidth number 20 0 imageInfoLineColor color ffffff imageInfoAlign topLeft topRight bottomLeft bottomRight LeftCenter rightCenter bottomCenter topCenter center topLeft imageInfoMarginX number 1000 5 imagelnfoMarginY number 1000 5 imageInfoTransitionTime number 1000 0 5 imageInfoWidth number 50 1000 200 imageInfoMaxSize true false true imageInfoPadding number 100 5 A imageInfoTextAlign left right center left imageInfoTitleSize number 1 1000 12 imageInfoTitleColor color ffffff imageInfoTitleContainsNumber tru
5. number 1000 0 Set the number of images to preload showLoadingIcon true false true f true show the loading icon showAlbumsButton true false true f true show the albums button showThumbnailsButton true false true f true show the thumbnails button showMuteButton true false false If true show the mute unmute button showPreviousButton true false true f true show the previous button showPauseButton true false true f true show the play pause button showNextButton true false true f true show the next button showControls true false true f true show the controls showImageInfo always never ifAvailable onRollOver onRoLLOverIfAvailable ifAvailable Determines if the image info will appear ifAvailable only shows the info when info is available onRollOver only shows the info when you roll your mouse over the image onRollOverlf Available only shows info if it s available and you roll your mouse over the image The thumbnail window object thumbnailBackgroundColor color 000000 Color of the background overlay behind the thumbnail window thumbnailBackgroundAlpha number 100 75 Transparency value of the background overlay behind the thumbnail window thumbnailWindowColor color 000000 Color thumbnailWindowAlpha number 100 60 Transparency value thumbnailWindowRoundedCorners number 100 15 Value specifying how much the corners are rounded thumbn
6. some default behaviours These behaviours can t be altered via the XML file Instead these can be customized by passing Flash parameters to Monoslideshow Below are the instructions Disable startup logo By default Monoslideshow displays a logo when it s loading the slideshow To disable this you have to do set a Flash parameter showLogo to false Using SWFObject you can do the following In the head of your page place a link to SWFObject script src swfobject js type text javascript gt lt script gt On your web page i e index html place your slideshow in a lt div gt between lt body gt and body like this div id mssHolder gt lt p gt Temporary holder for the Flash object lt p gt lt div gt Place this piece of javascript on the same page below the lt div gt script type text javascript gt var so new SWFObject monoslideshow swf mss 480 360 7 ffffff so addVariable showLogo false so writeC mssHolder lt script gt Load a custom XML file By default Monoslideshow loads a file called monoslideshow xml To load a custom file you have to pass the parameter dataFile to Flash It works like this script type text javascript var so new SWFObject monoslideshow swf mss 480 360 7 Zffffff so addVariable dataFile yourfile xml so writeC mssHolder lt script gt Start with a specified image To start with a specified image
7. you can place the startWi thImageID attribute in the preferences tag You could also pass the parameter to Flash It works like this script type text javascript gt var so new SWFObject monoslideshow swf mss 480 360 7 Zffffff so addVariable startWithImageID idName so writeC mssHolder lt script gt To start with the second photo your XML file would be looking something like this album thumbnail album1 jpg imagePath album1 thumbnailPath thumbs1 gt lt img src photol jpg gt MonoSlideshow User Manual lt img src photo2 jpg id idName gt img src photo3 jpg gt lt album gt Loading Flickr RSS Feeds Monoslideshow supports Flickr RSS feeds You can find links to these RSS feeds on group pages and personal pages on www flickr com To load a Flickr album just copy the URL of the RSS file and paste it in your XML file like so lt album size medium gt lt flickr gt lt CDATA url_to_rss_feed gt lt flickr gt lt album gt There are a few attributes you can set in the lt album gt tag LinkToImage true false false size tiny thumbnail small medium large original MonoSlideshow User Manual 7 Attributes To customize MonoSlideshow you have to edit the XML file There are a lot of options available The following objects each have their own attributes Global images image window thumbnail window loading icon controls All
8. ailWindowShadowSize number 10 5 Shadow size thumbnailWindowShadowColor color 000000 Shadow color thumbnailWindowShadowAlpha number 100 50 Transparency value thumbnailWindowAlign topLeft topRight bottomLeft bottomRight LeftCenter rightCenter bottomCenter topCenter center center How to position the image info in the slideshow thumbnailWindowMarginX number 1000 0 Horizontal margin from the left or right side in pixels thumbnailWindowMarginY number 1000 0 Vertical margin from the top or bottom side in pixels thumbnailWindowRows number 1 1000 4 Number of rows thumbnailWindowColumns number 1 1000 4 Number of columns thumbnailWindowAutoSize true false true f true the rows and columns specified will be overridden with values which are automatically calculated thumbnailWindowLineWidth number 20 2 Line width stroke of the window thumbnailWindowLineColor color ffffff Color of the line thumbnailWindowPadding number 100 15 Padding in pixels thumbnailWindowIconMargin number 1000 15 Margin between icons and thumbnails thumbnailWindowIconSize number 5 100 12 Size of the icons in pixels thumbnailWindowIconSpacing number 5 100 10 Spacing between icons in pixels thumbnailWindowIconColor color ffffff Color of the icons thumbnailWindowIconDimColor color 444444 Color of the icons when they re unclickable thumbnai
9. cription text No description Display No description if the image doesn t have a description The controls object controlAlign topLeft topRight bottomLeft bottomRight bottomCenter topCenter bottomCenter How to position the image info in the slideshow controlMarginX number 1000 10 Horizontal margin from the left or right side in pixels controlMarginY number 0 1000 10 Vertical margin from the top or bottom side in pixels controlTransitionHorizontal true false true f true the control hides away horizontally if its alignment is not centered MonoSlideshow User Manual 13 controlColor color 000000 Color of the control object controlAlpha number 100 75 Transparency value controlPadding number 100 11 Padding in pixels controlIconSize number 5 100 12 Size of the icons in pixels controllconSpacing number 100 8 Spacing between icons in pixels controlIconColor color ffffff Color of the icons controlIconRollOverColor color 10a4f0 Color of the icons when the mouse rolls over them controlDelay number 1 60 2 Delay before the controls fade away in seconds controlFadeInAreaSize number 1000 30 Determine the size of the invisible area where the mouse has to roll over before the controls pop up controLLineWidth number 20 2 Line width stroke of the control object controLLineColor color ffffff Color of the line contro
10. e false true imageInfoTitleMaxCharacters number 1 1000 1 imageInfoDisplayNoTitle text No title imageInfoDescriptionMargin number 1000 1000 0 imageInfoDescriptionSize number 1 1000 10 imageInfoDescriptionColor color ffffff imageInfoDescriptionMaxCharacters number 1 1000 1 imageInfoDisplayNoDescription text No description Attributes for Albums Every album tag lt album gt can have the attributes specified below Every attribute could also be placed in the lt preferences gt tag to specify global values for each of the albums it contains with the exception of title description thumbnail imagePath thumbnailPath soundPath backgroundMusic backgroundMusicVolume and size Main attributes font helvetica unibody ffffff title text description text thumbnail url imagePath url thumbnailPath url id text soundPath text backgroundMusic url backgroundMusicVoLume number 100 100 randomizeImages true false false autoPlay true false true MonoSlideshow User Manual 10 autoPause true false true f true the slideshow pauses when a new image is selected by the control buttons or the thumbnail window onFinished Loop loadNextAlbum stop Loop Determines what to do after an album has completed loop tells the slideshow to play the album all over again loaadNextAlbum loads the next album and stop just lets the slideshow stop preLoadImages
11. ext image is displayed imageTransitionTime number 0 1 1000 0 5 Time of transition in seconds imageTransition blend leftToRight rightToLeft topToBottom bottomToTop LeftToRightBlend rightToLeftBlend topToBottomBlend bottomToTopBlend leftToRightFadeOutBackwards rightToLeftFadeQutBackwards topToBottomFadeOutBackwards bottomToTopFadeOutBackwards pinhole pinholeBlend fadeInOut bubbles bubblesBlend photoFlash noTransition blend Choose a transition type Some examples blend LeftToRightBlend BA VA VA A VA ESCRIBE fadeInOut bubblesBlend EU BUDE ii leftToRight bubbles me E E T lt m 29 ER leftToRightFadeOutBackwards noTransition B E lt lt kenBurnsMode random randomPan randomZoomIn randomZoomOut none none The Ken Burns effect slowly zooms or pans accross the image Note if active imageScaleMode and imageAlign will have no effect The Ken Burns effect scales the images according to scaleToFit and imageAlign will be center This way there s always room to smoothly pan and zoom across the image in the slideshow There will be no left over space kenBurnsVariationPercent number 100 25 Specify how much variation will be applied to the Ken Burns effect kenBurnsTime number 0 1 1000 5 The time
12. lRoundedCorners number 100 15 Value specifying how much the corners are rounded controlAutoHide true false false f true the controls hide away after controlDelay seconds controlShowOnStartDelay number 60 3 If O the control object is displayed once during the given number of seconds controlShadowSize number 0 10 5 Size of the shadow controlShadowColor color 000000 Color of the shadow controlShadowAlpha number 100 75 Transparency value The loading icon object loadingIconAlign topLeft topRight bottomLeft bottomRight LeftCenter rightCenter bottomCenter topCenter center bottomRight How to position the image info in the slideshow loadingIconMarginX number 1000 15 Horizontal margin from the left or right side in pixels loadingIconMarginY number 1000 15 Vertical margin from the top or bottom side in pixels loadingIconSize number 100 25 Size of the loading icon in pixels loadingIconColor color ffffff Color of the loading icon loadingIconBackgroundColor color 000000 Color of the loading icon background loadingIconAlpha number 100 75 Transparency value of the loading icon loadingIconLineWidth number 20 2 Line width stroke of the control object loadingIconLineColor color ffffff Color of the line loadingIconShadowSize number 10 5 Size of the shadow loadingIconShadowColor color 000000 Color
13. lWindowIconRollOverColor color 1 a4f Color of the icons when the mouse rolls over them MonoSlideshow User Manual 11 thumbnailWindowInfoSize number 1 1000 12 Size of the info text thumbnailWindowInfoColor color ffffff Color of the info text thumbnailWidth number 5 1000 50 Width of the individual thumbnails in pixels thumbnailHeight number 5 1000 50 Height of the individual thumbnails in pixels thumbnailRoundedCorners number 100 3 Value specifying how much the corners are rounded thumbnailSpacing number 1000 2 Spacing between thumbnails in pixels thumbnailShadowSize number O0 10 0 Shadow size thumbnailShadowColor color 000000 Shadow color thumbnailShadowAlpha number 100 50 Transparency value thumbnailHoverDistance number O0 100 8 Distance to hover the thumbnails when the mouse rolls over them thumbnailHoverShadowSize number 10 8 Shadow size to morph to when the mouse rolls over them thumbnailBrightnessAdjustment number 255 255 0 Brightness adjustment of the thumbnail thumbnai LHoverBrightnessAdjustment number 255 255 128 Brightness adjustment of the thumbnail when the mouse hovers over them The album window object albumBackgroundColor color 000000 Color of the background overlay behind the thumbnail window albumBackgroundAlpha number 100 75 Transparency value of the background overlay behind the thumbnail window albumWindowColor color 000000 Color
14. of the shadow loadingIconShadowAlpha number 100 50 Transparency value loadingIconDelayBeforeFadeIn number 60 0 2 Determines after how many seconds the loading icon will start to fade in If the image is loaded before this delay the loading icon won t show up The mark object markFile url Url to the file containing the mark You can load SWF files and JPG files Tip for creating transparent overlays you could place a PNG file inside a SWF file and load the SWF markAlign topLeft topRight bottomLeft bottomRight leftCenter rightCenter bottomCenter topCenter center topRight How to position the image info in the slideshow markMarginX number 1000 0 Horizontal margin from the left or right side in pixels markMarginY number 1000 0 Vertical margin from the top or bottom side in pixels markTransitionTime number 1000 0 5 Time of transition in seconds MonoSlideshow User Manual 14 N All contents 2006 Monokai all rights reserved Monoslideshow and the Monoslideshow logo are trademarks of Monokai All other trademarks service marks and logos used in this document are the trademarks service marks or logos of their respective owners www monoslideshow com MonoSlideshow User Manual
15. r of the icons albumWindowIconDimColor color 444444 Color of the icons when they re unclickable albumWindowIconRollOverColor color 10a4f0 Color of the icons when the mouse rolls over them albumWindowInfoSize number 1 1000 12 Size of the info text albumWindowInfoColor color ffffff Color of the info text albumWidth number 5 1000 50 Width of the individual thumbnails in pixels MonoSlideshow User Manual 12 albumHeight number 5 1000 50 Height of the individual thumbnails in pixels albumRoundedCorners number 100 3 Value specifying how much the corners are rounded albumSpacing number 1000 10 Spacing between albums in pixels albumShadowSize number 10 2 Shadow size albumShadowColor color 000000 Shadow color albumShadowAlpha number 100 50 Transparency value albumHoverDistance number 100 8 Distance to hover the thumbnails when the mouse rolls over them albumHoverShadowSize number O0 10 8 Shadow size to morph to when the mouse rolls over them albumBrightnessAdjustment number 255 255 0 Brightness adjustment of the album icon and info area albumHoverBrightnessAdjustment number 255 255 128 Brightness adjustment of the album icon and info area when the mouse hovers over them albumInfoWidth number 5 1000 150 Width of the album info text in pixels albumInfoHeight number 5 1000 50 Height of the album info text in pixels albumInfoMargin number 100 2 Margin bet
16. rything between these two tags is the content of it An opening tag must always have the exact same name as the closing tag The only way a closing tag differs from its opening tag is an extra forward slash At the third line starts another opening tag The tag is called album and its corresponding closing tag is located four lines further Inside the opening tag are two attributes called thumbnail and imagePath Attributes are always contained inside a tag The value of an attribute in this case album1 jpg and album1 respectively must always be enclosed MonoSlideshow User Manual between quotes or They are to be used to specify something about the tag they are contained in In this case the thumbnail of the album is album1 jpg and the path to all its images is images The three next lt img gt tags are the actual image files They all contain two attributes called src and thumbnail The attribute src specifies the link to the image inside the folder imagePath The link to the thumbnail is specified by the attribute thumbnail As you ve perhaps noticed these tags lack a regular closing tag Instead of writing lt img src photol jpg gt lt img gt you could also write lt img src photo1 jpg gt These type of tags are called self closing tags We use them here because the lt img gt tag has no content by itself All the information is extracted out of its attributes You can completely build your own slideshow by
17. stead all its information is directly read from a XML file It s compact extremely versatile and easy to set up The fact that Monoslideshow uses XML to populate the albums and setting the preferences means that it is flexible and easily integrated in your existing site So what s an XML file MonoSlideshow reads all its information from a single textfile called monosLideshow xml To put images in your slideshow you have to edit this file This could easily be done by using a simple text editor such as Notepad or TextEdit What exactly is an XML file Well basically it s just a plain text file But XML files differ from ordinary files in that they use certain rules to structure the content XML is a computer language and actually it s a bit like HTML Just as with HTML files content in XML files is placed inside tags Let s take a look at an example to illustrate how all this works lt xml versionz 1 0 encoding utf 8 gt slideshow album thumbnail albumi1 jpg imagePath album1 gt img src photol jpg thumbnail thumb1 jpg gt lt img src photo2 jpg thumbnail thumb2 jpg gt img src photo3 jpg thumbnail thumb3 jpg gt lt album gt lt slideshow gt The first line says that this textfile is a file which uses the XML language You always have to include this line The second line is an opening tag called lt slideshow gt It s corresponding closing tag is located at the last line Eve
18. w The tag is self closing and consists only of attributes For example imageTransition is an attribute for the lt image gt tag but could also be inserted in the album tag to affect all images in it or even in the preference tag to affect all images in all albums Attributes inserted at a lower level override those at a higher level MonoSlideshow User Manual 4 Let s set things up 1 Prepare folder structure 2 Create XML file 3 Put MonoSlideshow on your site Prepare folder structure The following example shows a basic structure for your folders index html slideshow slideshow monoslideshow xml slideshow monoslideshow swf slideshow images slideshow images photol1 jpg slideshow images photo2 jpg slideshow images photo3 jpg slideshow thumbnails slideshow thumbnails photo1 jpg slideshow thumbnails photo2 jpg slideshow thumbnails photo3 jpg Create XML file Put all references to all images in your XML file Use the examples above to see how the XML file is structured If you re stuck you could get help in the forums on ww monosLideshow com Note Be sure to correctly implement your links For example if Monoslideshow can t find your mark file or your sound files Monoslideshow will not run Put MonoSlideshow on your site To put monoslideshow swf on your site you have to embed it in your webpages Nowadays MonoSlideshow User Manual Extra s Monoslideshow has
19. ween thumbnail and info text in pixels albumInfoPadding number 100 5 Padding in pixels albumInfoRoundedCorners number 100 3 Value specifying how much the corners are rounded albumInfoColor color 10a4f0 Color of the album info text backeround albumInfoAlpha number 100 75 Transparency value of the album info text background albumInfoShadowSize number OQ 10 2 Shadow size albumInfoShadowColor color 000000 Shadow color albumInfoShadowAlpha number 100 50 Transparency value albumInfoTextAlign left right center left Alignment of text albumInfoTitleSize number 1 1000 12 Font size of the title text albumInfoTitleColor color ffffff Font color of the title text albumInfoTitleContainsNumber true false true f true the album info will contain the index of the current album and the number of images in the album albumInfoDisplayNoTitle text No title Display No title if the image doesn t have a title albumInfoTitleMaxCharacters number 1 1000 1 Font size of the albumInfoDescriptionMargin number 1000 1000 0 Margin between title and description albumInfoDescriptionSize number 1 1000 10 Font size of the description text albumInfoDescriptionColor color ffffff Font color of the description text albumInfoDescriptionMaxCharacters number 1 1000 1 Limit the number of characters displayed in the description If the value is 1 there s no limit albumInfoDisplayNoDes
20. writing your own XML file You only have to know which attribute names MonoSlideshow uses to customize the slideshow They are all summed up a few pages further Let s first take a look at another example lt xml versionz 1 0 encoding utf 8 gt slideshow preferences imageTransition bubblesBlend controlAutoHide false gt album thumbnail album1 jpg imagePath album1 gt img src photol jpg thumbnail thumb1 jpg gt lt img src photo2 jpg thumbnail thumb2 jpg gt img src photo3 jpg thumbnail thumb3 jpg gt lt album gt album thumbnail album2 jpg imagePath album2 thumbnailPath thumbs gt lt img src photol jpg gt lt img src photo2 jpg gt lt img src photo3 jpg gt lt img src photo4 jpg gt lt img src photo5 jpg gt img src photo6 jpg gt lt album gt lt sLideshow gt This slideshow consists of two albums Also a new attribute called thumbnailPath is introduced in the second album tag This attribute defines the path to all the images Now if an lt img gt tag doesn t contain a thumbnail attribute it looks for a thumbnail in this folder for a file with the exact same name as in the src attribute This way you could easily set up two folders One for all the images and one for all the thumbnails Another new tag is introduced here the lt preferences gt tag Here you would insert the attributes which you d like to change for the entire slidesho

SLIDESHOW

Contents

Download Pdf Manuals

Related Search

Related Contents