CHEATS BY SUPER LEGENDS: Customizable Flash Analog ClockCHEATS BY SUPER LEGENDS
HomePagesBlogLinkMore Shortcodes…PortfolioTwo Column PortfolioThree Column PortfolioGrid PortfolioLarge PortfolioContactFebruary 6, 2013Customizable Flash Analog ClockPosted byPranav Madhani
Customizable Flash Analog Clock
Tutorial GoalCreate a customizable analog clock in Adobe Flash. The time displayed depends on the viewers computer time. This tutorial will create the functionality of the Flash object below:Step 1 : Document SetupOpen Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 300 x 300Step 2 : Create the Clock Face MovieClipSelect the Oval Tool,
, and draw a circle of any size on the Stage.Change the width and height of the circle to 190 using the Info Pane.
Window > InfoWith the circle selected use the Align Pane to center it on Stage. Make sure the "To Stage" button is down, then click the two align options circled below:
Window > Align
Convert the circle on Stage to a MovieClip.
Modify > Convert to Symbol
Name: clock_mc
Registration point: centered
Step 3 : Prepare Clock MovieClip for its HandsDouble click the clock_mc on Stage.In the Timeline Pane, rename 'layer 1' to 'Clock Face'.
Create 3 new layers by clicking Insert Layer,
, 3 times.
Rename each layer as below and Lock the 'Clock Face' layer by clicking the black dot in the Lock column. See below:
Step 4 : Create clock's second, minute and hour handsSelect the 'Second Hand' layer.
Select the Rectangle Tool,
, and draw a second hand for your clock. You can easily customize the look later, for now a simple shape will do.
With the shape selected use the Align Pane to center it on Stage. Make sure the "To Stage" button is down, then click the two align options circled below:
Window > Align
Convert the shape on Stage to a MovieClip.
Modify > Convert to Symbol
Name: second_hand
Registration point: bottom
With the second_hand MovieClip selected, give it the instance name 'second_hand' in its properties panel. (below the stage)
Lock and Hide the 'Second Hand' layer and select the 'Minute Hand' layer.
Then repeat Step 3 twice to create the minute_hand MovieClip and the hour_hand MovieClip. Typically the minute hand is thicker than the second hand and the hour hand is shorter than both. Remember you can always go into the Library to modify the look of your clock and it's hands later.Step 5 : Bring the clock to life with ActionscriptCreate a new layer above the 'Second Hand' layer, name it 'Actionscript'.
Select Frame 1 on the Timeline and open the ActionScript Window.
Window > ActionsEnter the following code: (Explained in comments and below)
Line 1: Attaches the onEnterFrame function to the clock. The code will execute once per frame.
Line 3 - 6: Gets the current time and stores the hour, minutes and seconds into variables.
Line 8: hour is 0 to 23, this line converts it to the 12 hour clock.
Line 10 - 12: Converts time into an angle.
Line 14 - 16: Rotates each of our MovieClips to the appropriate angle. This is why we named the MovieClip instances: hour_hand, minute_hand, second_handSave and Test your progress. You should see a working clock similar to the one below:
Control > Test Movie
Step 6 : Customizing your ClockNow that you have a functional clock, it is time to have fun customizing it.Click on the layer you wish to customize, unlock it and make sure it is not hidden.Then double click the MovieClip on Stage and use the Flash drawing tools to change its color and shape. Have fun!Test your Movie periodically to see your modifications.
Custom Clock : Concluding StatementsAfter writing this tutorial, I thought it might be fun to see everyone's custom clocks. So, if I receive at least 10 custom clocks, I'll create a special page for them and continue to add them as they come in.Submit to: tutorials@pixelhivedesign.comYour .swf file (not the source .fla)Your name/handle (optional)Website Address (optional)Please keep them under 50kb and no larger than 300x300 px, thanks0comments:
HomePagesBlogLinkMore Shortcodes…PortfolioTwo Column PortfolioThree Column PortfolioGrid PortfolioLarge PortfolioContactFebruary 6, 2013Customizable Flash Analog ClockPosted byPranav MadhaniCustomizable Flash Analog Clock
Tutorial GoalCreate a customizable analog clock in Adobe Flash. The time displayed depends on the viewers computer time. This tutorial will create the functionality of the Flash object below:Step 1 : Document SetupOpen Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 300 x 300Step 2 : Create the Clock Face MovieClipSelect the Oval Tool,
, and draw a circle of any size on the Stage.Change the width and height of the circle to 190 using the Info Pane.Window > InfoWith the circle selected use the Align Pane to center it on Stage. Make sure the "To Stage" button is down, then click the two align options circled below:
Window > Align
Convert the circle on Stage to a MovieClip.Modify > Convert to Symbol
Name: clock_mc
Registration point: centered
Step 3 : Prepare Clock MovieClip for its HandsDouble click the clock_mc on Stage.In the Timeline Pane, rename 'layer 1' to 'Clock Face'.Create 3 new layers by clicking Insert Layer,
, 3 times.Rename each layer as below and Lock the 'Clock Face' layer by clicking the black dot in the Lock column. See below:
Step 4 : Create clock's second, minute and hour handsSelect the 'Second Hand' layer.Select the Rectangle Tool,
, and draw a second hand for your clock. You can easily customize the look later, for now a simple shape will do.With the shape selected use the Align Pane to center it on Stage. Make sure the "To Stage" button is down, then click the two align options circled below:Window > Align
Convert the shape on Stage to a MovieClip.Modify > Convert to Symbol
Name: second_hand
Registration point: bottom
With the second_hand MovieClip selected, give it the instance name 'second_hand' in its properties panel. (below the stage)Lock and Hide the 'Second Hand' layer and select the 'Minute Hand' layer.Then repeat Step 3 twice to create the minute_hand MovieClip and the hour_hand MovieClip. Typically the minute hand is thicker than the second hand and the hour hand is shorter than both. Remember you can always go into the Library to modify the look of your clock and it's hands later.Step 5 : Bring the clock to life with ActionscriptCreate a new layer above the 'Second Hand' layer, name it 'Actionscript'.Select Frame 1 on the Timeline and open the ActionScript Window.Window > ActionsEnter the following code: (Explained in comments and below)
Line 1: Attaches the onEnterFrame function to the clock. The code will execute once per frame.Line 3 - 6: Gets the current time and stores the hour, minutes and seconds into variables.
Line 8: hour is 0 to 23, this line converts it to the 12 hour clock.
Line 10 - 12: Converts time into an angle.
Line 14 - 16: Rotates each of our MovieClips to the appropriate angle. This is why we named the MovieClip instances: hour_hand, minute_hand, second_handSave and Test your progress. You should see a working clock similar to the one below:
Control > Test Movie
Step 6 : Customizing your ClockNow that you have a functional clock, it is time to have fun customizing it.Click on the layer you wish to customize, unlock it and make sure it is not hidden.Then double click the MovieClip on Stage and use the Flash drawing tools to change its color and shape. Have fun!Test your Movie periodically to see your modifications.
Custom Clock : Concluding StatementsAfter writing this tutorial, I thought it might be fun to see everyone's custom clocks. So, if I receive at least 10 custom clocks, I'll create a special page for them and continue to add them as they come in.Submit to: tutorials@pixelhivedesign.comYour .swf file (not the source .fla)Your name/handle (optional)Website Address (optional)Please keep them under 50kb and no larger than 300x300 px, thanks0comments:
No comments:
Post a Comment