Instructions Manual
User Manual:
Open the PDF directly: View PDF .
Page Count: 9
Download | |
Open PDF In Browser | View PDF |
Advanced XML Website BY DIGITALSCIENCE Instructions Manual OVERVIEW This template has been specifically designed to be easily customized with all content driven by XML which means you can update content without editing the FLA. This manual will guide you through the process of customizing this template with your own content. For those who wish to ‘tweak’ the flash, all FLA files are included and all code has been well commented. Throughout this template the Tween Class has been used so you can easily change the transition type by replacing Bounce, for example, to Regular, Strong or Elastic. See Tween Class in Flash Help for full list of Tween Class easing properties. GETTING STARTED TEMPLATE SETTINGS To adjust template setting you need to edit index.xml using a simple text editing program such as Notepad on PC or TextEdit on MAC. Below is the XML structure:Between the settings tags you will see a tag for logo. Here you can set the path to the image for the logo and adjust it’s X and Y position in the navigation menu. The current logo is saved in the “content” folder. In the footer tag you can set the footer text which appears at the bottom left of the template. This text is HTML formatted so you can change colour to text and add hyperlinks. In the menu tag you can set whether the main navigation should be open or closed on start up by changing the showNav attribute which is either set to “true” or “false”. PAGE 1 EDITING MENU ITEMS By editing index.xml you can add or change the name of menu items and set the links for the content pages. The main navigation supports up to two levels so you can have Main and Sub menu items. Here is a breakdown of the XML structure: To set the name of menu items see Name attributes. To set content paths see Link attributes. toLoad attributes are for the XML path for content.swf pages only, which is the generic Dynamic Content Window Component. High lighted in blue above you will see an example of how to create a Sub Menu. ADDING BACKGROUNDS To add backgrounds you need to save your background JPEG’s to the “backgrounds” folder. Note: All backgrounds need to be at the same aspect ration to each other. For best results use a width of 1024 by height of 768. Once you have saved your backgrounds, you need to edit content.xml in the “backgrounds” folder. Here is the XML structure: content/logo.png The Delay attribute is the time delay between each background in milliseconds. (1000 milliseconds = 1 second). To add or remove backgrounds simply use the XML structure above. Tip: Try to optimize the background jpegs as much as possible, the bigger the file size, the more processor intensive they will be and thus effect website performance. PAGE 2 SLIDESHOW COMPONENT To use this component you need to first add your slide images to the “slideshow” folder. Then you need to edit content.xml in the “slideshow” folder to add image paths and copy text. Here is the XML structure: To set the title of the slideshow see attribute Name. The Image attribute is the image path, Delay is the time delay for that slide set in milliseconds. Link is the URL path to go to when the slide image is pressed. In the copy tags you can set your slide copy which appears on slide rollover. This copy is HTML formatted so you can set text colour, size and decoration and add hyperlinks using standard HTML tags. EDITING THE FLA If you want to change code or elements in the FLA open slideshow.fla In the Actions layer you will see code for the opening transition for the window which can be changed using Tween class properties. Inside movieclip “content_mc” you will see code in the Actions layer for the slideshow script engine. Here you can set whether autoplay should be enabled on start up. See slideShow variable, either set to “true” or “false”. You can also edit the StyleSheet to set hyperlink text colour and hover effect. See comments in the code for further help. TEAM MEMBERS COMPONENT To use this component you need to first add your team members photos to the “team” folder. To organise staff in categories you can add separate folders in this folder. If you only want one category just use one folder called ‘gallery1’. Then you need to edit content.xml in the “team” folder to add image paths and copy text. Here is the XML structure. PAGE 3 To set the title of this page and the names for each category which appears in the top menu, see attribute Name. The Image attribute is the image path. In the copy tags you can set each staff members bio and contact details. This copy is HTML formatted so you can set text colour, size and decoration and add hyperlinks using standard HTML tags. EDITING THE FLA If you want to change code or elements in the FLA open team.fla In the Actions layer you will see code for the opening transition for the window which can be changed using Tween class properties. Inside movieclip “content_mc” you will see code in the Actions layer for script engine. Here you can edit the StyleSheet to set hyperlink text colour and hover effect. See comments in the code for further help. DYNAMIC CONTENT WINDOW This component can be used multiple times throught the template and all you need to do is use the default XML file window.xml in the folder “content” and save it to different names. To add each content window to the template, edit index.xml and add it to the relevant tags. See example below: All dynamic content windows use the same SWF, see content.swf But each can use different XML files, you must set the path to the XML file in the toLoad attribute. Once you have added it to the main menu you should see the newly created content window when you run the site. Now you need to edit the content xml file to add your content. Here is the XML structure below: PAGE 4 To set the title of this page see attribute Name. The Border attribute is the border size of the content window. By editing the Width and Height attributes you can change the windows dimensions. In the copy tags you can set the content copy. This copy is HTML formatted so you can set text colour, size and decoration and add hyperlinks using standard HTML tags. Below are some examples of HTML formatting: EDITING THE FLA If you want to change code or elements in the FLA open content.fla In the Actions layer you will see code for the opening transition for the window which can be changed using Tween class properties. Inside movieclip “content_mc” you will see code in the Actions layer for script engine. Here you can edit the StyleSheet to set hyperlink text colour and hover effect. See comments in the code for further help. NEWS COMPONENT To use this component you need to first add your thumbnail and large images to the “news” folder. Then you need to edit content.xml in the “news” folder to add image paths and copy text. Here is the XML structure: To set the title of this page see attribute Name. The Thumb and Large attributes are for the image paths. To set headline and date see the relevant tags. In the copy tags you can set your news article copy for the intro and full article and set the text which appears under the large image. This copy is HTML formatted so you can set text colour, size and decoration and add hyperlinks using standard HTML tags. EDITING THE FLA If you want to change code or elements in the FLA open content.fla In the Actions layer you will see code for the opening transition for the window which can be changed using Tween class properties. PAGE 5 Inside movieclip “content_mc” you will see code in the Actions layer for the script engine. Here you can edit the StyleSheet to set hyperlink text colour and hover effect. See comments in the code for further help. IMAGE GALLERY COMPONENT To use this component you need to first add your thumbnail and large images to the “imagegallery” folder. Then you need to edit content.xml in the “imagegallery” folder to add image paths and copy text. Here is the XML structure: Blue Turbine 10 August 2007 Cold Steel 23 August 2007 To set the title of this page and gallery names see attribute Name. The Thumb and Large attributes are for the image paths. Caption is for the text which appears when you rollover a thumbnail. In the copy tags you can set your news article copy for the intro and full article and set the text which appears under the large image. This copy is HTML formatted so you can set text colour, size and decoration and add hyperlinks using standard HTML tags. EDITING THE FLA If you want to change code or elements in the FLA open imagegallery.fla In the Actions layer you will see code for the opening transition for the window which can be changed using Tween class properties. Inside movieclip “content_mc” you will see code in the Actions layer for the script engine. Here you can edit the StyleSheet to set hyperlink text colour and hover effect. Here you will also find the Tween Class transitions for the large image. You can easily change the transition type by replacing Bounce, for example, to Regular, Strong or Elastic. See Tween Class in Flash Help for full list of Tween Class easing properties. In the code you can also set whether auto play should be enabled on start up. See slideShow variable, either set to “true” or “false”. See comments in the code for further help. PAGE 6 VIDEO GALLERY COMPONENT You can add any size video to this gallery and it will always maintain aspect ratio in fullscreen mode. The width and height of each video can be defined in content.xml in the “videogallery folder”. You can add video formats such as FLV, MP4 and MOV by saving them to folders and defining the path in the XML. The XML structure is as follows: To set the title of this page and gallery names see attribute Name. The Thumb attribute is to set the thumbnail image paths. The VideoClip attribute is the path to the video which can either be a relative or absolute path.The Width and Height attributes are to set the dimensions of the video. The Title attribute is for the title of the video. In the copy tags you can set the copy which appears under the video player. This copy is HTML formatted so you can set text colour, size and decoration and add hyperlinks using standard HTML tags. EDITING THE FLA If you want to change code or elements in the FLA open videogallery.fla In the Actions layer you will see code for the opening transition for the window which can be changed using Tween class properties. Inside movieclip “content_mc” you will see code in the Actions layer for the script engine. Here you can edit the StyleSheet to set hyperlink text colour and hover effect. Here you will also find the Tween Class transitions for the video thumbnails. You can easily change the transition type by replacing Bounce, for example, to Regular, Strong or Elastic. See Tween Class in Flash Help for full list of Tween Class easing properties. Also see comments in the code for further help. ADDING VIDEOS You can either play FLV or MP4 videos. MP4 videos supports High Definition video but will only display in Flash if you have the lasted Flash Player plugin installed in your broswer. MP4 won’t play when you run the SWF, only when the SWF is embedded into an HTML page. To encode FLV’s I recommend using the stand alone Flash Video Encoder which comes with Flash 8 and higher. Note: Some FLV encoders do not record the duration time in the video meta data which will result in no progress bar and an undefined duration time when you play the video in Flash so for best results use the Flash Video Encoder. PAGE 7 PHP CONTACT FORM COMPONENT To use this component you need to edit content.xml in the “contact” folder to add your company contact details. Here is the XML structure: To set the title of this page see attribute Name. Attributes companyName and formName are for the 2 headings on the contact form. In the copy tags you can set your company details. This copy is HTML formatted so you can set text colour, size and decoration and add hyperlinks using standard HTML tags. To set the email address messages need to be sent to and the default subject header, you need to edit formSubmit.php in the “contact” folder using a simple text editing program such as Notepad on PC or TextEdit on MAC. The 2 lines you need to change are the following: $sendTo = "name@company.com"; $subject = "Message from your website"; EDITING THE FLA If you want to change code or elements in the FLA open contact.fla In the Actions layer you will see code for the opening transition for the window which can be changed using Tween class properties. Inside movieclip “content_mc” you will see code in the Actions layer for the script engine. Here you can edit the StyleSheet to set hyperlink text colour and hover effect. See comments in the code for further help. MP3 PLAYLIST COMPONENT To use this component you need to first add your MP3 tracks to the “playlist” folder. Then you need to edit content.xml in the “playlist” folder to add paths to each MP3. Here is the XML structure: To set the title of the track see attribute Name. The Path attribute is to set the MP3 path. All tracks are produced by ADG3 Studios. To purchase these great tracks and many more, go to http://www.audiojungle.net/user/ADG3studios PAGE 8 BUILT IN FUNCTIONALITY INTERNAL LINKS You can link to any page in the template from a button by using a specific funtion which has the path to the SWF. Below is the code you need to apply to a button in a content page to link to another content page which uses the toLoad variable. (content window SWF only) featuresBttn.bttn.onPress = function() { _global.loadContent("content.swf", "content/content.xml"); }; Below is the code you need to apply to a button in a content page to link to another content page which does not use the toLoad variable. bttn.onPress = function() { _global.loadContent("news.swf"); }; You can see an example of internal links on buttons by opening the home.fla and checking the code for the “View Features” button. Below is an example of how to insert a hyperlink in the XML text to link to an internal content page which uses the toLoad variable. Note the separator is a comma and there must be no spaces. Click here Below is an example of how to insert a hyperlink in the XML text to link to an internal content page which does not use the toLoad variable in the XML text: Click here You can see an example of internal links in XML text by viewing the slideshow content.xml file. EXTERNAL LINKS You can add external links in the main menu and sub menu by entering a URL for the Link attribute. Please note that for URL’s to work in the menu you must include “http://” in the URL. Below is the line you need to add to index.xml TOGGELING PLAYLIST MUSIC MUTE ON/OFF If you are adding content which has audio you can mute the music volume by calling the following global command: _global.muteVolume(); _global.unmuteVolume(); GENERAL FILE FAQ For solutions to common issues please read my General File FAQ on the link below: http://www.flashden.net/user/digitalscience PAGE 9
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.3 Linearized : Yes Page Count : 9 XMP Toolkit : XMP toolkit 2.9.1-13, framework 1.6 About : uuid:5ef5e02e-e66e-4305-bcbb-309bc460fe15 Modify Date : 2009:03:29 22:50:43+02:00 Create Date : 2009:03:29 22:50:43+02:00 Metadata Date : 2009:03:29 22:50:43+02:00 Document ID : uuid:fa4b6e84-4df9-4524-911a-9015502855f9 Format : application/pdf Creator : Illustrator Producer : Adobe PDF library 6.66EXIF Metadata provided by EXIF.tools