00:00
00:00
Newgrounds Background Image Theme

TarikNakich just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

Programming "metro" clock ?

475 Views | 9 Replies
New Topic Respond to this Topic

Programming "metro" clock ? 2013-10-15 11:07:35


Hello ! I believe that most of you know the feeling when you say- "YES", even really not knowing what your signing for. I was asked for help, for Latvian TV show, and I could not say NO. Yeah but enough for that, the question is:

Is it possible to make this kind of a clock on flash ?(silly question, but I`m just wondering if it is going to work on AS 2, adobe flash 8.)

CLOCK EXAMPLE, COCK EXAMPLE, CLOCK EXAMPLE, CLOCK EXAMPLE

Is there some advices of making clock ?

How to change ratio of the file, that it shows 4 : 3 and when it`s seen on tv it`s 16 : 9 ?

Last question, is there anyone interested helping me and ofcourse making some Barter with me by getting some free Art and money. MOOOONNEEEEYY. /It`s not an a advertisement !

Thank you, Kembry, the One.

Response to Programming "metro" clock ? 2013-10-15 17:32:18


Advices for making the clock:
You will need to animate a number cell (the paper sheet which displays the number on itself) in Flash. You may need to use Motion Editor (with 3D coordinates involved) to produce 3D effect, but you don't have to, if you simply use skewing from side to side, as that will produce an effect as well.

Then you'll have to draw 10 ciphers, put them in a clip called Cipher (which should have 10 frames - one for each cipher), place the cipher clip inside both halves of the moving paper clip (since the paper clip is animated it should consist of 2 halves which have masks applied to them) and give it an instance name.

Then, using code, you play animations of paper clips and change the frame of the cipher clip inside both halves.

Advice how to make it change aspect ratio.
Use horizontal and vertical cropping. It means make the text fit the screen either vertically or horizontally, preserving the text's aspect ration. If the text is wider than the screen or higher than it, then you make the text fit horizontally (if it was previously fitting vertically) or vertically (if it was previously fitting horizontally).
The code for this:

//AS 2.0
//input parameters, modifiable
var screen_width:Number=550;//the dimensions of the area into which you need to squeeze scalingSymbol
var screen_height:Number=400;
var scalingSymbol:MovieClip=_root.text;//scalingSymbol needs to be inside the _root, and it  can be any
//the program starts here, do not edit the code
var s:MovieClip=scalingSymbol;
var scale:Number=screen_height/s._height;
if(s._width*scale>screen_width)scale=screen_width/s._width;
s._xscale=s._yscale=s._xscale*scale;

Result: the scalingSymbol occupied the maximum area available inside (screen_width; screen_height) while preserving its own aspect ratio.

Response to Programming "metro" clock ? 2013-10-15 17:40:15


About scaling, I forgot to mention that you also need to position the scalingSymbol in the center.
Assuming that the origin point of text is in its center, here the program continues.
(second part of the program above)

s._x=screen_width/2;
s._y=screen_height/2;

Now scalingSymbol is also in the center of the screen.

If your text is not the only element on the screen, and you can't simply position it in the center, you may have to move elements relatively to each other and apply different types of scaling to them. This task usually takes some thinking from the designer/programmer and depends on your particular interface design.

Response to Programming "metro" clock ? 2013-10-19 04:57:47


Thanks man, ur very active in helping me :), I get the idea of 10 frames, and that in every frame would be one cipcher, but masks are kind of a pain in the ass. The tutorial u wrote remind me the way the clock is made on AE.

Response to Programming "metro" clock ? 2013-10-24 16:31:11


Alright, we did it, me and my friend, we made the clock, but now we are having some strange size problems.
This clock is going to be used on tv, so it needs to be small like logo in the right or the left side of the TV screen.
I am exporting the file 65 px X 21px, but even it`s exported when I am scaling it it`s scales with the screen window. But the biggest problem is when I open it with Adobe decoder and it shows that it`s in square box which is 150 px X 150 px. I got no idea what to do, because I think I did everything right, but some kind of a way it doesn`t work.

1) Maybe it`s because I clicked in Publishing setting-Html- transparent ?
2) Maybe flash has some error ?

CLOCK

Response to Programming "metro" clock ? 2013-10-24 17:52:00


Use a specific align method called BOTTOM_RIGHT.
List of StageAlign methods

//code on a frame
stage.align=StageAlign.BOTTOM_RIGHT;

Use a specific scale mode called NO_SCALE;
List of of StageScaleMode's

stage.scaleMode=StageScaleMode.NO_SCALE;

Response to Programming "metro" clock ? 2013-10-24 18:01:26


Sorry, use this instead on AS2:

Stage.align="BR";
Stage.scaleMode="noScale";

Took documentation from here.

Response to Programming "metro" clock ? 2013-10-25 11:34:44


KKots, thanks a lot, your a good support.

I copied script and it works, but strange is that in the first frame, it always shows a big clock and than it becomes small, in the size it`s meant to be.

It`s pretty tough thing, because this clock is going to be used in TV, so I `m a bit stressed. But I think I will find out the answer to make it good.

Response to Programming "metro" clock ? 2013-10-25 13:13:05


If there is a problem, as I think I've just read, then post the clock again.
If you have placed my code on the first frame on the main timeline, and it is not displaying things properly on the first frame still, then you may need to make everything invisible for 1 frame duration.

//the code on the first frame, after setting Stage.stuff
_visible=false;
onEnterFrame=function(){
  _visible=true;//works even if you already have a oEF function
  //you just need to add one line
}

Response to Programming "metro" clock ? 2013-10-26 11:37:40


Yes, pretty much what kkots said


-