---------------------------------------------------------------------- ---------------------------------------------------------------------- countdown_flip by Daniel Sadowski (info [at] bitemedia [dot] com) ---------------------------------------------------------------------- ---------------------------------------------------------------------- An all-vector, scaleable Flash 'countdown' movie. Counts down to a target date. Easily customizable: included with the .FLA file is a .SWF which loads an XML config file containing the settings. Change the target year, month & date values, number color, number background color, sound settings & animation style settings by changing the XML file. The target date's time-zone relative to GMT can also be adjusted. ---------------------------------------------------------------------- Included in the Zip file: ---------------------------------------------------------------------- Documentation: -------------------------------------------------- countdown_flip_readme.pdf countdown_flip_readme.rtf countdown_flip_readme.txt Flash Files: -------------------------------------------------- countdown_flip_0days_f8.fla (Flash 8 file - displays hours, minutes, seconds) countdown_flip_0days.fla (Flash CS3 file - displays hours, minutes, seconds) countdown_flip_0days.swf (.SWF file) countdown_flip_2days_f8.fla (Flash 8 file - displays 2 days digits, hours, minutes, seconds) countdown_flip_2days.fla (Flash CS3 file - displays 2 days digits, hours, minutes, seconds) countdown_flip_2days.swf (.SWF file) countdown_flip_3days_f8.fla (Flash 8 file - displays 3 days digits, hours, minutes, seconds) countdown_flip_3days.fla (Flash CS3 file - displays 3 days digits, hours, minutes, seconds) countdown_flip_3days.swf (.SWF file) countdown_flip_4days_f8.fla (Flash 8 file - displays 4 days digits, hours, minutes, seconds) countdown_flip_4days.fla (Flash CS3 file - displays 4 days digits, hours, minutes, seconds) countdown_flip_4days.swf (.SWF file) countdown_flip_config.xml (XML config file) HTML, CSS and JavaScript Files: ---------------------------------------------------------------------- Upload these files along with your .SWF and XML files: index.html (HTML index file) _styles/main.css (CSS file used in index.html) swfobject.js (SWFObject 2.0 JavaScript file used for embedding the .SWF) Tweener Class Files: ---------------------------------------------------------------------- This folder contains the AS 2.0 Tweener Class files necessary for the any tweening animation used in the file. Note: This folder does not need to be uploaded to your server in order for the .SWF to function properly. However, if you are going to be editing the .FLA file, the caurina folder plus all sub-folders need to be located in the same folder as your .FLA. caurina folder More information about the Tweener Class can be found here: http://hosted.zeh.com.br/tweener/docs/en-us/ ---------------------------------------------------------------------- Modifying the XML file: ---------------------------------------------------------------------- By adjusting the values within the XML file, you can change the way the .SWF plays back. Make sure all of the tags are properly closed and that the values within the tag are all enclosed in quote marks. One missing tag or character and the .SWF will not work properly. The location of the XML config file is passed as a variable (config_file) by the index.html file. To adjust this variable, open the index.html file and look for this line: var flashvars = { config_file: "countdown_flip_config.xml" }; - change "countdown_flip_config.xml" to your new path - for example, an absolute path such as "http://www.yoursite.com/xml/countdown_flip_config.xml" Alternately, if the config_file variable is not passed from the index.html file, the .SWF is programmed to load an XML file located in the same folder. To change the path to the XML file: - open the .FLA in Flash - in the Main Timeline, double-click on the 'countdown_flip_mc' MovieClip (on the 'countdown_flip' Layer) - single-click on Frame 2 of the 'Actions' Layer and open your Actions window - find this line of code: // -------------------------------------------------- // LOAD XML // -------------------------------------------------- if (_level0.config_file) { var config_str:String = _level0.config_file; } else { var config_str:String = "countdown_flip_config.xml"; } data_xml.load(config_str); - change "countdown_flip_config.xml" to your new path - for example, an absolute path such as "http://www.yoursite.com/xml/countdown_flip_config.xml" endYear="2010" -------------------------------------------------- Target year value. Should be set to a whole number. endMonth="1" -------------------------------------------------- Target month value - set between 1 and 12: for January use 1 for December use 12 endDate="1" -------------------------------------------------- Target date value - set from 1 to 31 endHour="0" -------------------------------------------------- Target hour value - set from 0 to 23: 0 equals 12:00 A.M. 23 equals 11:00 P.M. endMinute="0" -------------------------------------------------- Target minute value - set from 0 to 59 endSecond="0" -------------------------------------------------- Target second value - set from 0 to 59 timeZoneGMT="-5" -------------------------------------------------- Greenwich Mean Time offset of the target date. For example, when set to -5, this corresponds to Eastern Standard Time, which is 5 hours behind Greenwich Mean Time. For Eastern Daylight Time, this would be set to -4, to -7 for Pacific Daylight Time and to -8 for Pacific Standard Time. The .SWF will detect the time-zone of the computer on which it is playing and adjust accordingly (note: time-zone settings are set by the user/operating system so accurate display of the counter relies on users having accurate clock settings). Example: with the above date settings, the target date is set to 12:00 a.m. on January 1, 2010, Eastern Standard Time (Toronto). The .SWF when viewed in San Francisco (Pacific Standard Time) would subtract 3 hours from the target date to make up for the 3-hour time difference between San Francisco and Toronto. numberBgColor="0xCC0000" -------------------------------------------------- Controls the Hex color of the 'number window' background numberColor="0xFFFFFF" -------------------------------------------------- Controls the Hex color of the numbers numberBorderInnerColor="0x191919" -------------------------------------------------- Controls the Hex color of the 'number window' inner border numberBorderOuterColor="0x4B4B4B" -------------------------------------------------- Controls the Hex color of the 'number window' outer border windowHiliteAlpha="75" -------------------------------------------------- Controls the alpha value of the white highlight on top of the 'number windows' - set from 0 (invisible) to 100 (maximum opacity). windowShadowAlpha="75" -------------------------------------------------- Controls the alpha value of the black shadow on top of the 'number windows' - set from 0 (invisible) to 100 (maximum opacity). textLabelColor="0xFFFFFF" -------------------------------------------------- Controls the Hex color of all text labels textLabelSize="10" -------------------------------------------------- Point size value of all text labels. Note that larger point sizes might extend past the width or height of the .SWF - in that case, the stage size must be adjusted in Flash by opening the .FLA. You must also edit the .FLA to change the font (Arial) used. daysLabel="DAYS" -------------------------------------------------- Sets the text of the DAYS label. Set to "" to hide. hoursLabel="HOURS" -------------------------------------------------- Sets the text of the HOURS label. Set to "" to hide. minutesLabel="MINUTES" -------------------------------------------------- Sets the text of the MINUTES label. Set to "" to hide. secondsLabel="SECONDS" -------------------------------------------------- Sets the text of the SECONDS label. Set to "" to hide. flipTime="0.3" -------------------------------------------------- Time (in seconds) for numbers to flip into their final position. Should be comfortably less than 1 second. animationType="easeOutQuart" -------------------------------------------------- Controls which easing equation is used to move the numbers within each 'number window'. These map directly to the animation types used in the Tweener Class. For an explanation of the different transition types, click the Transition Types link on this page: http://hosted.zeh.com.br/tweener/docs/en-us/ linear easeInSine easeOutSine easeInOutSine easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce blurMax="0" -------------------------------------------------- Maximum of vertical blur amount applied to flipping numbers. Set to zero to turn off blur (recommended). According to Adobe: "Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values" so setting this to an even number is a good idea. fadeInTime="0.25" -------------------------------------------------- Time (in seconds) for counter to initially fade in soundFXvolume="5" -------------------------------------------------- Volume level percentage (0 to 100 %). Set soundFXvolume="0" to turn sound effects off. ----------------------------------------------------------------- Tweener License Tweener is free open source software, licensed under the MIT License . Tweener also makes use of Robert Penner's easing equations , which is also free open source software, licensed under the BSD License . SWFObject License SWFObject v2.0 Copyright (c) 2007 Geoff Stearns, Michael Williams, and Bobby van der Sluis This software is released under the MIT License ----------------------------------------------------------------- If you have any ideas on how to make this thing work better/more efficiently, feel free to contact meÉ Daniel Sadowski. info [at] bitemedia [dot] com -------------------------------------------------- © biteMedia, 2008 -------------------------------------------------- biteMedia http://www.bitemedia.com --------------------------------------------------