Welcome to our first edition of Premium tutorials. We have decided to share the knowledge of how some of our files are made. In our first tutorial we will cover the design and implementation of a Flash Countdown with Reflection. For this purpose we have created a Countdown in Photoshop which you can download from our Freebies section.
WHAT WE WILL BE CREATING
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/tut/clock/flashCountdown.swf” width=”570″ height=”260″ targetclass=”flashmovie”]
[/kml_flashembed]
[download id=”41″]
ASSETS USED
STEP 1: PREPARING ASSETS IN PHOTOSHOP
We will first slice components in our Photoshop countdown file. Open Photoshop and choose any of the available countdowns. In this tutorial we will use first implementation since we would like to animate outer and inner part of the countdown background. Choose the slice tool (K) and make a selection like in the screenshot below.
Now do the same for the outer part and the line visually separating upper and lower part of the countdown. Name them countdownOuterPart and separatorLine. Now choose File/Save for Web & Devices, change format to PNG and save only selected slices. Make sure you hide background when saving otherwise you will get fragments of background on your outer part of countdown (on rounded borders). When you are slicing outer part go to layer clockBackground and change fill opacity to 0% so you only get a border layout like in the screenshot below. You can also do that on layer itself (set Fill to 0%).
STEP 2: IMPORTING ASSETS TO FLASH
Now that we have all the necessary assets, open Flash and make a new document in AS3. First we have to import our assets into library. Go to File/Import/Import to Library and import all three assets that we have created in Photoshop. Go to Window/Library to bring up the library tag. You will see three images that you just imported. It is time to convert them to MovieClips so we can interact with them with actionscript.
STEP 3: CONVERTING ASSETS TO MOVIECLIPS
Drag each image to your stage, right click on it and select Convert to Symbol. Name MovieClips with the same name you named your images.
Do not forget to name instances of each Movieclip (Window/Properties and then enter Instance name).
STEP 4: SETTING DYNAMIC TEXT
Now put dynamic text over outer and inner background but be sure it’s behind the separator line (for the separate effect). Name instance of your text as numberText, choose the font you want (we have used Bebas Neue) and click Embed (you can only embed numbers). Below is a screenshot of how the stage looks at the moment.
Now drag separator line to the stage, convert it to MovieClip and right click on it then select Arrange/Bring to Front (this is important because we want it to separate numbers).
STEP 5: COMBINING ASSETS
It is time to combine all assets and make one component out of it. Select all four assets (outer background, inner background, text and separator line), right click and choose Convert to Symbol. Name it countdownComponent and check Export for Actionscript. Now delete the component from stage.
STEP 6: SETTING THE STAGE WITH ACTIONSCRIPT
First we have to import Tweenlite classes. Press F9 to bring actions menu and copy following code at the start of the document.
import com.greensock.*;
import com.greensock.easing.*;
Define main holders for our countdown instances and array which will hold them for future reference (when we subtract time).
var countdownHolder:Sprite = new Sprite ();
var countdownHolderArray:Array = new Array();
We will now create four instances of countdownCounter with a for loop. Please note that we have created a class countdownCounter in previous step that acts like a variable type now.
for (var k:int = 1; k <= 4; k++){
var cCounter:countdownCounter = new countdownCounter();
cCounter.x = (cCounter.width + 5) * k – cCounter.width / 2;
cCounter.y = stage.stageHeight / 2 – cCounter.height / 2;
countdownHolder .addChild(cCounter);
countdownHolderArray.push(cCounter);
}
We position them on center of the stage and add it to the stage with addChild. Save the file as flashCountdown.fla and export the movie. Your stage should look similar to screenshot below.
STEP 7: MAKING XML THAT HOLDS THE END TIME
Open a text editor (like Notepad++) and copy paste following code in it:
Save the file as countdown.xml.
STEP 8: LOADING XML FILE INTO FLASH
Copy and paste following code at the start of the actions menu (right after Tweenlite classes import):
var myXMLLoader:URLLoader = new URLLoader();
var countdown:XML;
myXMLLoader.load(new URLRequest(“countdown.xml”));
We now have to read the content. Paste following lines:
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
function processXML (e:Event):void{
countdown = new XML(e.target.data);//here values from xml are read to variables
StartCountdown();
}
As you can see we have add a call to function StartCountdown. We will insert our for loop within this function:
function StartCountdown(){
for (var k:int = 1; k <= 4; k++){ var cCounter:countdownCounter = new countdownCounter(); cCounter.x = (cCounter.width + 5) * k - cCounter.width / 2; cCounter.y = stage.stageHeight / 2 - cCounter.height / 2; countdownHolder .addChild(cCounter); countdownHolderArray.push(cCounter); } } [/cc]
STEP 9: CALCULATING TIME
We have to subtract current time from the end time to get how much time is left before an event happens. This is why we will acquire two times:
[cc lang="actionscript3"]var endTime:Date = new Date(countdown.year,countdown.month 1,countdown.day,countdown.hours,countdown.minutes);
var currentTime:Date = new Date();
Now calculate the difference between current and end time and then apply calculations for days, hours, minutes and seconds:
var timeLeft:Number = endTime.getTime() – currentTime.getTime();
seconds = Math.floor(timeLeft/1000);
minutes = Math.floor(seconds/60);
hours = Math.floor(minutes/60);
days = Math.floor(hours/24);
seconds %= 60;
minutes %= 60;
hours %= 24;
All this code has to be applied before the for loop in StartCountdown function. We will now add four if sentences to our for loop to apply our new time values. For loop should now look like this:
for (var k:int = 1; k <= 4; k++){ var cCounter:countdownCounter = new countdownCounter(); cCounter.x = (cCounter.width + 5) * k - cCounter.width / 2; cCounter.y = stage.stageHeight / 2 - cCounter.height / 2; if (k == 1) cCounter.numberText.text = String(days); if (k == 2) cCounter.numberText.text = String(hours); if (k == 3) cCounter.numberText.text = String(minutes); if (k == 4) cCounter.numberText.text = String(seconds); countdownHolder .addChild(cCounter); countdownHolderArray.push(cCounter); } [/cc] Save the file and export it. Your SWF now looks like this:
Finally we see some results. Numbers are standing still though. Time that you see on the screen is time left until event at the time you exported the movie. This actually works and if you would refresh a page on your website it would always show the correct time (from the time of refresh of course). But what we want is a dynamic countdown that will calculate time each second and adjust the timer accordingly.
STEP 10: COUNTING DOWN
We have to add a time listener that will call a function each second, subtract value for 1 and apply new values to our countdown.
[cc lang="actionscript3"]if(timeLeft > 0){
contdownTimer =new Timer(1000);
contdownTimer.addEventListener(TimerEvent.TIMER, countingDown);
contdownTimer.start();
}
Now add a function that will calculate days, hours, minutes and seconds each time timer calls it.
function countingDown(e:TimerEvent):void {
seconds–;
if(seconds < 0){ seconds = 59; minutes--; if (minutes < 0){ minutes = 59; hours--; if(hours < 0){ hours = 59; days--; } } } } [/cc] As a final step add new values to the countdown text. We will use our array to apply new values: [cc lang="actionscript3"]
countdownHolderArray[0].numberText.text = String(days);
countdownHolderArray[1].numberText.text = String(hours);
countdownHolderArray[2].numberText.text = String(minutes);
countdownHolderArray[3].numberText.text = String(seconds);
Save the file end export. You should now have a fully functional Flash countdown that you can set via XML file.
STEP 11: ADDING REFLECTION
First you have to download a PixelFumes Reflect class that will help you implement reflection with ease. Extract and copy it to your com folder (where you already have Tweenlite). Now simply add following code at the end of our StartCountdown function:
var r1 = new Reflect({mc:countdownHolderArray[0], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});
var r2 = new Reflect({mc:countdownHolderArray[1], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});
var r3 = new Reflect({mc:countdownHolderArray[2], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});
var r4 = new Reflect({mc:countdownHolderArray[3], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});
Save your file and export. You will see a nice reflection is now added to our countdown. Play with alpha, ratio and distance settings to get the best effect for your needs.
CONCLUSION
Our first premium tutorial has come to an end. We hope you have enjoyed reading it and that you will put some of that new knowledge to good use. If you haven’t done so already, please download source files that will help you throughout the tutorial. If you have any suggestions please post them in comments section. Please note that source file is saved as Flash Cs4. If you would like a CS3 version please contact us. Good luck!
[download id=”41″]
You must be logged in to post a comment.