What is CreateJS?
For me, CreateJS will be a way to take my Flash skills and use them in a way that will work with HTML5, and on more devices than the Flash Player is currently running on.
First things first - You need to know HTML and JavaScript. A great place to learn this is at W3Schools, don't worry, it's free!
I'd start with learning HTML, then HTML5, then JavaScript.
CreateJS appears to be a JavaScript 'library' (a collection of JavaScript functions that someone has written, that makes really complex things a lot easier), which also writes a lot like actionscript 3 (Flash programming language). So if you know JavaScript, or ActionScript 3, then a lot of the logic behind what you are doing comes very quickly.
Second things second - You need to download the library.
It looks like you can actually use the online versions of the libraries in your scripts, but I think your fields would have to be online too for that to work.
For writing and testing script on your hard-drive, the files need to be on your hard-drive too (I tried accessing the online one, it wouldn't work. I'm sure some people knew this was obvious, but I had to check.).
The website for downloading them is here. And you will have to unzip the folder to access the files inside.
Once inside, open the 'tutorials' folder, then the 'Getting Started' folder, and then the 'index.html' file. This will take you through the basics of how to use the library as a script source, making a canvas tag, and if I remember correctly, drawing a red circle.
For now, I will be going through these tutorials, so anything I post will just be a re-organisation of what I learnt there, into a format that makes more sense to me.
But I just thought I'd post this, because I spent a long time trying to find free tutorials on line, only to find that they were available within the download itself!
Warning: The tutorial may have typos in the code (e.g. Window, instead of window), but the source code for the examples works, so use that as a guide.
Thursday, 20 December 2012
Tuesday, 27 November 2012
Create JS Tutorials
It is my intention to start learning CreateJS. I love programming in Flash, but the time has come to start being less dependant on it, I think. Even with the new version of Flash, with which it seems you can publish some things to HTML5, I'd feel alot more comfortable understanding how things work from the ground up.
I have downloaded CreateJS, and it has some tutorials within it, as well as some demo files - so I'm going to start there.
(Don't get me wrong, I'm still going to use Flash, it is brilliant, in my opinion.)
Here goes!
I have downloaded CreateJS, and it has some tutorials within it, as well as some demo files - so I'm going to start there.
(Don't get me wrong, I'm still going to use Flash, it is brilliant, in my opinion.)
Here goes!
Thursday, 12 July 2012
How To Dynamically Load Greek Characters
Loading text dynamically is a bit of a faff, but once you have got that sorted for your ordinary text, what about funny characters (like copyright etc)?
This can be done with url encoding, so if you want to add a copyright symbol, you look up the url encoding for it (http://www.w3schools.com/tags/ref_urlencode.asp, you have to scroll down), and then in your text file, you write %a9.
Fine, but what about those characters that have no URL encoding?
Some of those can be accessed too, by looking up their unicode entity.
The unicode entity for the alpha symbol (lower case) is U+03B1. If you want to get that directly into flash, you have to write '\u03b1;'.
But if you are importing it from a text file, it has to reach flash as 'α'... and the ampersand and the hash have to be url encoded...
giving you...
%26%23x03b1; to get flash to output the symbol alpha.
One more thing,
You have to set the text box to 'render text as HTML' (the little <> button on the properties panel). And if you are adding the text to the box via actionscript (in actionscript 2 you can just set the variable of the box on the properties toolbar), then be sure to write it as htmlText, i.e:
textbox.htmlText = stringFromTextFile;
And I'm out!
This can be done with url encoding, so if you want to add a copyright symbol, you look up the url encoding for it (http://www.w3schools.com/tags/ref_urlencode.asp, you have to scroll down), and then in your text file, you write %a9.
Fine, but what about those characters that have no URL encoding?
Some of those can be accessed too, by looking up their unicode entity.
The unicode entity for the alpha symbol (lower case) is U+03B1. If you want to get that directly into flash, you have to write '\u03b1;'.
But if you are importing it from a text file, it has to reach flash as 'α'... and the ampersand and the hash have to be url encoded...
giving you...
%26%23x03b1; to get flash to output the symbol alpha.
One more thing,
You have to set the text box to 'render text as HTML' (the little <> button on the properties panel). And if you are adding the text to the box via actionscript (in actionscript 2 you can just set the variable of the box on the properties toolbar), then be sure to write it as htmlText, i.e:
textbox.htmlText = stringFromTextFile;
And I'm out!
Friday, 20 April 2012
How to print jobs in as2
In AS2, the PrintJob class allows you to pick parts of the screen, or particular movieclips, or frames of a movie clip to send to the printer.
You can make changes to the appearance of a movie clip, send it to the printer, and then change it back.
var pj:PrintJob = new PrintJob();
pj.start(); //now you can find out the orientation of the page setup, or the width of the printable area etc.
pj.addPage(_root);
pj.send();
The addPage function has four parameters:
The first lets you say which movie clip you want to print.
The second lets you pick a particular area of the movie clip.
The third lets you render bitmap pictures more accurately.
The fourth lets you pick a frame of the movie clip to print, so you could print frame 2 of the root timeline while still on frame 1.
For more info, see http://docs.brajeshwar.com/as2/PrintJob.html
You can make changes to the appearance of a movie clip, send it to the printer, and then change it back.
var pj:PrintJob = new PrintJob();
pj.start(); //now you can find out the orientation of the page setup, or the width of the printable area etc.
pj.addPage(_root);
pj.send();
The addPage function has four parameters:
The first lets you say which movie clip you want to print.
The second lets you pick a particular area of the movie clip.
The third lets you render bitmap pictures more accurately.
The fourth lets you pick a frame of the movie clip to print, so you could print frame 2 of the root timeline while still on frame 1.
For more info, see http://docs.brajeshwar.com/as2/PrintJob.html
Thursday, 12 April 2012
How to alter text files on your hard drive with as3
This uses the FileReference class, and shows how to access a text file, and save a text file.
To access the text file:
var fr:FileReference = new FileReference(); //if this is created within a function, it won't work
//because it really only exists within that function
function lFile(evnt:MouseEvent):void {//this function has to be initiated by the user
fr.addEventListener(Event.SELECT, seld); //the method that will be called when the user selects a file.
fr.browse(); //this opens up the dialog box
}
function seld(evnt:Event):void {
fr.addEventListener(Event.COMPLETE, compd);
fr.load(); //makes the file available to the swf
}
function compd(evnt:Event):void {
outpt.text = String(fr.data);
}
The uploading of a file has to be initiated by the user, e.g. by clicking a button.
To save some text to a file:
var fr2:FileReference = new FileReference();
function sFile(evnt:MouseEvent):void {//again, this has to be called by the user
fr2.save(outpt.text, 'textfile.txt');//second parameter is optional
}
One odd thing I noticed with this, by specifying what I wanted the text file to be called, if I accepted that name in the saveas dialog box, then it was fine, even though the '.txt' was not shown in the dialog box. If, however I changed the name to something else, then I had to add the '.txt' myself, or it wouldn't know what kind of file it was supposed to be. (So if I go to Windows Explorer, it doesn't have the right icon, and when I try to open it from there, I get asked what program should be used.)
To access the text file:
var fr:FileReference = new FileReference(); //if this is created within a function, it won't work
//because it really only exists within that function
function lFile(evnt:MouseEvent):void {//this function has to be initiated by the user
fr.addEventListener(Event.SELECT, seld); //the method that will be called when the user selects a file.
fr.browse(); //this opens up the dialog box
}
function seld(evnt:Event):void {
fr.addEventListener(Event.COMPLETE, compd);
fr.load(); //makes the file available to the swf
}
function compd(evnt:Event):void {
outpt.text = String(fr.data);
}
The uploading of a file has to be initiated by the user, e.g. by clicking a button.
To save some text to a file:
var fr2:FileReference = new FileReference();
function sFile(evnt:MouseEvent):void {//again, this has to be called by the user
fr2.save(outpt.text, 'textfile.txt');//second parameter is optional
}
One odd thing I noticed with this, by specifying what I wanted the text file to be called, if I accepted that name in the saveas dialog box, then it was fine, even though the '.txt' was not shown in the dialog box. If, however I changed the name to something else, then I had to add the '.txt' myself, or it wouldn't know what kind of file it was supposed to be. (So if I go to Windows Explorer, it doesn't have the right icon, and when I try to open it from there, I get asked what program should be used.)
How to get the REAL date into Flash
Flash has a Date object, that can give you the date and time, but it gives you the date and time that is on the users computer.
e.g.
var dt:Date = new Date();
trace(dt);
This will trace out whatever time the user's computer is set to, whether it is 5mins slow, or 10 years fast.
If this date/time is being used for some kind of authentication i.e. to see if the deadline is past, then you should load the time from the server.
var ld:LoadVars = new LoadVars();
ld.onLoad = function(succ:Boolean) {
dt_txt.text = this.servertime;
}
ld.sendAndLoad('servertime.php',ld,'POST');
On the servertime.php file:
$today = date('YmdHis');
echo "&servertime=$today";
?>
(Sometimes I have issues with the data being echoed out, try removing the ampersand from the front, or not.)
The reason why I use the date('YmdHis') is because it gives you a number that is perfect for sorting, and a recognised datetime stamp for mysql, if you ever need it.
4.30pm (and 22 seconds), 5/11/2012 = 20121105163022
If you need to sort the dates, you can do a numeric sort. If you want to check if something happened before Jun 2012, you look to see if the number is smaller than 20120600000000, and so on.
e.g.
var dt:Date = new Date();
trace(dt);
This will trace out whatever time the user's computer is set to, whether it is 5mins slow, or 10 years fast.
If this date/time is being used for some kind of authentication i.e. to see if the deadline is past, then you should load the time from the server.
var ld:LoadVars = new LoadVars();
ld.onLoad = function(succ:Boolean) {
dt_txt.text = this.servertime;
}
ld.sendAndLoad('servertime.php',ld,'POST');
On the servertime.php file:
$today = date('YmdHis');
echo "&servertime=$today";
?>
(Sometimes I have issues with the data being echoed out, try removing the ampersand from the front, or not.)
The reason why I use the date('YmdHis') is because it gives you a number that is perfect for sorting, and a recognised datetime stamp for mysql, if you ever need it.
4.30pm (and 22 seconds), 5/11/2012 = 20121105163022
If you need to sort the dates, you can do a numeric sort. If you want to check if something happened before Jun 2012, you look to see if the number is smaller than 20120600000000, and so on.
Tuesday, 10 April 2012
How to make a div scrollable
<style type="text/css">
div.scroller
{
overflow: scroll;
width:300px;
height:500px;
}
</style>
...
<div id="scroller"></div>
The scroller property is controlled via css. You won't see the scroll bars unless their is a width and height to your div.
How to use javascript to change an element's attributes
document.getElementById('id').setAttribute("style","position:absolute;left:10px");
This method is useful if you have a lot of properties to add, but it can overwrite the other style attributes that you may have already set.
An alternative method is:
document.getElementById('id').style.width = "500px";
Sunday, 8 April 2012
Javascript: Rewrite element content
How to change the content of an element...?
In the head tag:
In the body tag:
In the head tag:
<script type="text/javascript">
function giveWidth(e) {
document.getElementById('wid').innerHTML = window.innerWidth;
}
</script>
In the body tag:
<p>Window width <a href="" onclick="giveWidth(event);return false">is</a> <span id="wid">500</span> pixels.<p>
The return false makes sure that the browser doesn't try to open a new window when you click on the link.
Tuesday, 27 March 2012
How to Make Your swf Resize to Fit The Browser Window Automatically
If you want your swf to be as big as it can be in the browser window, and to resize automatically fit the user resizes the browser window:
Change the width and height values to 100%, and the scale to "default".
e.g.
Obviously, if you have the script included, then you will need to change the values there too.
By the same token, you could set the swf to fill up most, but not all of the screen, by setting width and height to 80%, for example.
Change the width and height values to 100%, and the scale to "default".
e.g.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="oxphos" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="oxphos.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scale" value="default" />
<param name="bgcolor" value="#ffffff" />
<embed src="oxphos.swf" loop="false" menu="false" quality="high" scale="default" bgcolor="#ffffff" width="100%" height="100%" name="oxphos" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
Obviously, if you have the script included, then you will need to change the values there too.
By the same token, you could set the swf to fill up most, but not all of the screen, by setting width and height to 80%, for example.
Thursday, 22 March 2012
How to Create a MySQL Database if it Doesn't Exist - Very Easily
This is so easy I almost don't believe it, except I've tested it and it works.
$create = mysql_query("CREATE DATABASE IF NOT EXISTS databasename");
Crazy easy, no?
$create = mysql_query("CREATE DATABASE IF NOT EXISTS databasename");
Crazy easy, no?
Sunday, 11 March 2012
Mariam's clock
Note to teacher: Mariam did this herself, she is quite familiar with Flash by now, though she did need some help. When she needed help, I told how to do things, so she did them herself. From this experience, one of the things I could see her learning was that the numbers have to be positioned correctly, or a 'quarter' isn't really a quarter. So she repositioned some numbers in the last page.
Subscribe to:
Posts (Atom)