(TUT) Creating a Flash clock for themes

[dark13]

The original idea comes from ryuuji

 

Using Flash Professional it is possible to create a .swf clock to use in themes

 

 

Here's the actionscript code, I started from some code found on internet and did some changes. I'd like to hear

BadBoyBill 's opinion about potential memory leaking

// This line puts the date object into a variable we can use more easily

var now:Date = new Date();



// These 3 lines put the hours and minutes, into variables

var hours = now.getHours();

var minutes = now.getMinutes();

var ampm



// Conditional statement to set AM or PM according to hour(military time)

if (hours >= 12) {

    ampm = "PM";

} else {

    ampm = "AM";

}

// Conditional that converts military time to standard time display

if (hours > 12){    

    hours = hours - 12;

}

if (hours == 00){    

    hours = 12;

}

// Conditional that adds 0 to the front of any hour less than 10

if (hours < 10){    

    hours = "0" + hours;

} else {

    hours = hours;

}

// Conditional that adds 0 to the front of any minute less than 10

if (minutes < 10){    

    minutes = "0" + minutes;

} else {

    minutes = minutes;

}



// Writing time into dynamic text

time_txt.text = hours + ":" + minutes + " " + ampm ;



// Creating variables for date

var day = now.getDate();

var tday = now.getDay();

var year = now.getFullYear();

var month = now.getMonth();



// Creating arrays for month and day, it transform numbers into text

var mArray:Array = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "OCT", "SEP", "NOV", "DEC"];

var dArray:Array = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];



// Writing date into dynamic text

date_txt.text = dArray[tday] + "," + mArray[month] + "," + day + "," + year ;

If you want to change separators of date/time change the character between " " in these lines

time_txt.text = hours + ":" + minutes + " " + ampm ;
 
date_txt.text = dArray[tday] + "," + mArray[month] + "," + day + "," + year ;

You can change fonts and style clicking on layers with arrow in flash, if you plan to use an unusual font embedd it into the .swf. the .fla flie use arial as default, everyone has arial font installed.

 

The template is really basic and will not fit any theme but you can use it as base to make a clock that fit your theme. I'm not using seconds as to me they make clock a bit too complicated but I can add the code to get them if someone want them. The swf MUST loop.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------

 

Weather Widget

 

This is the code for a very simple text weather widget, internet connection is obviously required and hyperspin must have permission to access internet.

 

BEWARE OF SWFS ACCESSING INTERNET, USE ONLY SWF TAKEN FROM SECURE SOURCE

//Creating global variables

var loader_xml:URLLoader = new URLLoader();

var loader_yahoo:URLLoader = new URLLoader();

var myXML:XML;

var woied:Number = 721943;

var farcel:String = "c";

var xml_local:XML;

var xml_yahoo:XML;



// Loading local XML to get city location variable

function onLoaded(e:Event):void

{    

    xml_local = new XML(e.target.data);

    woied = xml_local.woied;

    farcel = xml_local.farcel;

    loader_yahoo.load(new URLRequest("http://weather.yahooapis.com/forecastrss?w=" + woied + "&u=" + farcel));

    loader_yahoo.addEventListener(Event.COMPLETE, onLoadedYahoo);

}



// Parsing data from Yahoo! XML, writing data into weather text object

function onLoadedYahoo(e:Event):void

{

    xml_yahoo = new XML(e.target.data);

    

    var yweather:Namespace = new Namespace("http://xml.weather.yahoo.com/ns/rss/1.0");
    var day:String = xml_yahoo.channel.item.yweather::condition.@code;

    weather.text = xml_yahoo.channel.yweather::location.@city + " | " + xml_yahoo.channel.item.yweather::condition.@text + " - " + xml_yahoo.channel.item.yweather::condition.@temp + " °" + farcel + " | " ;    

}

// Load yahoo! XML

    loader_xml.load(new URLRequest("C:/HyperSpin/dark13/WEATHEREXAMPLE.xml"));

    loader_xml.addEventListener(Event.COMPLETE, onLoaded);

For god's sake DO NOT loop the .swf. Yahoo!'s apis cap is 2k requests per IP every 24 hours, looping the .swf would mean pushing 30-120 requests per SECOND! If you loop it you will have a widget that will work only for an hour or so every 24H.

 

---------------------------------------------------------------------------

Changing location for weather widget

 

To change location you need to copy dark13 folder into C:\HyperSpin It's  MANDATORY as the .swf file will read WEATHEREXAMPLE.xml to retrieve the information for your city, if you have HyperSpin installed on another hard drive letter just create in c: HyperSpin folder and drop here drak13 folder.

 

Once you've done that connect to https://weather.yahoo.com/ and search for the city you want to have weather for. Search for it even if Yahoo! get your city on the fly.

Look at the URL once the page has loaded

 

 

Do you see the number 721943 ? I's the WOIED of the city you have searched and the .swf need that code to show a specific city's weather, in this case Italy, Rome

 

now open C:\HyperSpin\dark13\WEATHEREXAMPLE.xml , it's a really simple file

<xml>
 <woied>721943</woied>
 <farcel>c</farcel>
 </xml>

Put the WOIED of the city you want weather for where the code already is ( es <woied>2450022</woied> for Miami) and, if you want f° instead of c° change the c with a f in farcel (  <farcel>f</farcel> )

 

The original idea for clock comes from ryuuji

Thanks to nyoshonen for sorting out my messed up code and make variable taken from local XML working

dark13 flash clock templates.zip

dark13 flash Wheater template.zip

[BakerMan]

This is just flat out brilliance.

 

Hey there Mr. Dark. 

 

I think it's about time I confer with you on a few things. 

 

Your Aeon Nox Theme is outlandishly incredible, your flash scripts are awesome, and well, you seem to REALLY know your shit.

 

This is something that I will most definitely be implementing at some point. Just incredible. 

 

Hopefully you've had the chance to check out my project "Hyperspin Cinematic."

 

I don't know if it's something you even remotely like, but at some point down the line I hope to be able to intertwine our projects in some way or another. 

 

My project is most definitely not far along enough yet to really consider that right now, but there's something I'm hoping you can help me with.

 

Video Override Transitions actually play in TRUE 16x9. You do not have to create a custom xml or trick Hyperspin into anything. The only bad thing is that once a Override transition is done playing, it's done. It doesn't continuously loop.

 

Do you think that is something you could help with? Do you think you could come up with a script to enable a continuous loop with Override Transitions?

 

Your feedback would be greatly appreciated.

 

Have a good day brother dark.

[ryuuji]

That's very well made man

with that choice of yours to use the clock as Special artwork I just saved 1 slot for artwork in my themes xD

 

The next thing to improve is the HYPERSEARCH ... have no idea how to theme that thing ) plus the exit menu ... wish it could support .swf ... everything looks pixelated

[ninja2bceen]

So that zip file can be used as special artwork?!!!!?

Tapatalk signature

[dark13]

The .zip file is a .fla template, you need flash professional to open it

 

Make your flash clock selecting position, font, filters and export as movie. The file is a basic clock and it's REALLY ugly, it's just a pre-made template with layers and code to quickly create a .swf clock.

A .swf can be obviously used as specialA1, in HS official theme this layer is used for joystick animation but on the .ini of the system you can move and animate in/out it.

 

@JamesBaker

 

Is the transition a .swf? If it's a .swf just use this code right clicking on the last frame of a layer and selcting "action" on pop up menu

gotoAndPlay(0);

When your flash reader (or HS) will reach the last frame it will play again from frame 0 and so on The good thing of this looping method is you can loop a .swf  animation at the frame you want, so you can create an "entry" animation played once, lets' say from frame 0 to 20, and then make looped animation from frame 21 using

gotoAndPlay(21);

On the last frame of the animation

[ninja2bceen]

I don't have flash professional. I guess when u get it to Swf or what not ready for a drop into special art can u post it?

Tapatalk signature

[dark13]

I don't have flash professional. I guess when u get it to Swf or what not ready for a drop into special art can u post it?

Tapatalk signature

 

Try this example, 1024*40 bar, .fla + .swf in the .zip. It has also ticking : made trought a 60 item array .

clock ticking.zip

[ninja2bceen]

Wuts all this mean? Just unzip and place it as special art to see if it work?

Sent from my iPad using Tapatalk

[dark13]

Wuts all this mean? Just unzip and place it as special art to see if it work?

Sent from my iPad using Tapatalk

 

Try the .swf into a theme as artwork layer, using special artwork on a pre-made theme is a bit complicated. On the official HS themes special artworks are used like that

 

SpecialA1: is the joystick moving right/left

SpecialA2: is the joystick moving up/down

SpecialB1: is the "press start" text

SpecialB2: is the "free play" text

 

They are in Media\*SYSTEM NAME*\Images\Special

 

Renaming the .swf as "SpecialA1" and moving it in that folder will give as result the bar showing at a "wrong" position entering and leaving the screen as SpecialA1 is animated out to show SpecialA2. Special artworks are a really interesting (and underused) thing BUT you need to make a brand new skin, implementing it in official HS themes isn't a breeze. You should use SpecialA1 for the clock bar and move joystick and text on SpecialB1/B2 creating a new .swf. BBB had a GREAT idea splitting images for special artworks as you can do really cool stuff with it BUT you must have a strategy about using these layers

You can change Special artwork position and animation opening *system*.ini in settings folder , here's the main menu one

 

[wheel]

alpha=.15

small_alpha = 1

style=horizontal

speed=high

vert_wheel_position=right

norm_large=170

norm_small=170

vert_large=240

vert_small=240

pin_large=500

pin_small=200

horz_large=170

horz_small=170

horz_wheel_y=386

text_width=700

text_font=Style4

small_text_width=260

large_text_width=400

text_stroke_size=7

text_stroke_color=0x000000

text_color1=0x00BFFD

text_color2=0xFFFFFF

text_color3=0x00BFFD

color_ratio=1

shadow_distance=6

shadow_angle=45

shadow_color=0x000000

shadow_alpha=1

shadow_blur=0



[pointer]

animated            = true

x                   = 965

y                   = 384



[video defaults]

path=C:\HyperSpin\Media\Main Menu\Video\



[sounds]

game_sounds=true

wheel_click=true



[Special Art A]

default=true

active=true

x                   = 512

y                   = 720

in                  = 0.4

out                 = 0.4

length              = 3

delay               = 0.1

type                = normal

start               = bottom





[Special Art B]

default=true

active=true

x                   = 512

y                   = 740

in                  = 0.4

out                 = 0.4

length              = 3

delay               = 0.1

type                = fade

start               = none

You can change Special artwork's position and animation from here

 

If you want to play a SWF outside HS just to check it the best software is media player classic https://mpc-hc.org/

[ninja2bceen]

Thanks I may you with it as I don't want to screw up my custom specials. If u have it already set up I'd be interested in copying ur settings

Tapatalk signature

[dark13]

Thanks I may you with it as I don't want to screw up my custom specials. If u have it already set up I'd be interested in copying ur settings

Tapatalk signature

 

If you want to try the clock dowload Aeon Nox XIII and try this one http://www.hyperspin-fe.com/topic/5401-aeon-nox13-wip/page-13#entry169358

... or just dowload special.zip and use it as artwork layer on a theme Fitting the clock on official HS themes isn't that easy

[ninja2bceen]

Ok Ya the plan is to add special artwork layer to main menu themes

For the zip file I can literally just add that file as a layer of do I have to unzip etc? Any hope of that working as special art?

Tapatalk signature

[ryuuji]

This should be pinned!

[dark13]

Ok Ya the plan is to add special artwork layer to main menu themes

For the zip file I can literally just add that file as a layer of do I have to unzip etc? Any hope of that working as special art?

Tapatalk signature

 

Assuming your SpecialA1 was 1024*768 here's the gui with the clock. SWF and FLA into the .zip file.

final.zip

[ninja2bceen]

I literally said man that's sexy when I opened hyperspin. thanks, amazing!

[Guest]

Thank you for the script ! I have adapted it for my HyperSpin, with a Timer to get a realtime clock, that so cool !

[dark13]

I corrected the code and changed the templates for download in first post. Forgot "september" in months array lol

[ninja2bceen]

Assuming your SpecialA1 was 1024*768 here's the gui with the clock. SWF and FLA into the .zip file.

dark can you modify this one u did for me?

Tapatalk signature

[dark13]

Yeah, but it will take some days. Want to definitely sort out weather widget and make a really cpu and memory intensive (fullscreen weather icon) "weather system" for testing porpouses to check out potential memory leaking of the code

[ninja2bceen]

Sure, I'm happy to wait for the update just don't forget about me. Thanks

Tapatalk signature

[dark13]

Ok, I've done some changes in the first page. This thread is now for clock and weather widget. I'll post code for weather widget with images and day forecast here http://www.hyperspin-fe.com/topic/11490-weather-widget-main-menu-wheel/. The fact is to add icons you need really HUGE switche statements, while the weather widget attached in the very first post is around 30 lines of code the one posted in the linked thread is 1400 lines...

 

 

dark can you modify this one u did for me?


Tapatalk signature

 

dark13 folder goes in C:\HyperSpin\

 

Read the first post of this page to get instructions for changing location. The XML to modify is obviously ninja2bceen.xml

SpecialA1-ninja.zip

[ninja2bceen]

thanks for the attachment! the clock works great.

I'm trying to understand the weather thing though. In your attachment, I placed the dark folder in my E:\Arcade-PC\hyperspin folder and I modified the xml so its in F and in my city. What do I do with the fla? Should there be a swf for weather and clock? Is there a file that I need so I see the clock and weather in the top right corner? I'm sure I'm doing something wrong.The clock swf works great!

[dark13]

Read the first post for instruction on how to change location.

 

 

This is what you should see on top

 

The .swf has clock and weather.

 

For weather you need internet connection and give permission to HyperSpin to access internet. Weather is retrieved from Yahoo! weather
 

ninja2bceen.xml MUST be in C:\HyperSpin\dark13 the path is harcoded into the .swf

The .fla is the source file, you need adobe flash professional to open it. Adding the source with this kind of thing is a good thing, so everyone can open the .fla, check code and export it. A .swf that asks for internet connection is alway "suspicious", flash player itself blocks internet connection of local .swf, you need to add exception to run it in flash player.

 

Check this video

 

Have you ever seen HS asking for internet connection? Obviously NO, it's my weather widget trying to access internet to retrieve Yahoo! .xml to show weather

[ninja2bceen]

This is all besides me. Thanks for responding. Is it easy to change the mapping to E:/Arcade-PC/hyperspin/dark since that is my portable?

Yep I already changed the xml to know the location

Sent from my iPad using Tapatalk

[dark13]

The hardcoded path is E:/Arcade-PC/hyperspin/dark13/ninja2bceen.xml

 

I cannot test it as E: is my dvd driver

 

Anyway you dont' need a full Hyperspin installation, just the .xml into C:\HyperSpin\dark13 (case sentitive)

 

 

 

 

SpecialA1.zip