In this video, we cover some of the fundamental aspects of Object Oriented Programming.
We dive a little bit deeper into inheritance, and look at just what is happening when we extend Movieclip in our document class.
Additionally we talk about the difference between sprites and movieclips. And we flesh out some more parts that are used in classes.
In this video, we learn about one of the fundamentals of OOP code for Flash, creating a Document Class.
The document class is essential to know for doing development in Flash. In this video, we cover quite a lot about the document class, including it’s parts and what they are used for. We also touch on the idea of encapsulation, and inheritance – two of the primary principles of object oriented development.
If you’ve been having fun with the last two posts, you’ll enjoy this last post regarding styling up your Ning page. This last post is intended for administrators of the Ning site, as you’ll need persmission to enter into the management area of the site to make these tricks work.
We’ve already seen that it is possible to accomplish quite a lot of customization using the built-in templates in Ning, and even more can be done by editing the CSS of the page. Now it is time to take it into some more advanced techniques.
Ning has rules that must be adided by. If for instance you try to put something into a textbox that Ning does not like, it will just change it on you. For instance, try inserting an active x object to show some Flash and set the wmode to transparent (or even just omit the wmod parameter). Ning will quickly force a wmode=opaque into your code as a security precaution. Ning is not the only one that does this, Facebook has all kinds of rules like that, resulting in FBML, the somewhat altered Facebook Markup Language that is a restricted markup language.
So you have to work within the Ning framework itself. Thankfully, Ning is pretty easy-going. While it will not let you set the wmod to transparent right in the textbox, it will let you insert an iFrame into the textbox, and within there you can do whatever you like with the wmode. Here is a typical code snippet you could put in a textbox to put an iframe in there:
<iframe align="center" src="http://www.oddlystudios.com/workshop/bopnstop/BopnStop.html" frameborder="0" width="540" height="420" scrolling="no"></iframe>
This is a very simple thing to do, and will let you serve an html page within the frame on the ning page, letting you have all kinds of fun.
Here’s what the body markup might look like for the html page that is loaded into the iframe;
<body bgcolor="#000000"> <!--url's used in the movie--> <!--text used in the movie--> <div id="flashholder" width=540 height=400> <div id="flashcontent" align = "center"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="400" id="BopnStop" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="BopnStop.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#000000" /> <embed src="BopnStop.swf" quality="high" bgcolor="#333333" width="500" height="400" name="BopnStop" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </div> </div> </body>
As you can see, in this HTML page, it is entirely possible to omit the wmode property. That could be important for a few reasons. For me, the reason this became an issue was because I was serving up a flash video game in my Ning page that uses the keyboard to navigate around. In internet explorer, the flash file would lose focus and the arrow keys would start scrolling the whole page around rather than just your player in the game.
Now if you happen to be an admin for the Ning site, you can actually do quite a bit more on your ning pages. This is due to a little trick you can accomplish in the footer of the ning page.
If you look around on the documentation for developers, you will notice that it is possible to insert javascript into the footer of a ning page that does not get edited by the ning code. The reason for this is that many people have their own analytics services they want to use for the sake of tracking page clicks and various activity, some examples being HitBox, Omniture, Google Analytics etc.
The way these analytics services work is that you must import a javascript file to your page, then call a tracking function of that javascript file. This is pretty standard practice.
What it means for us is that javascript that loads into the footer remains largely unchanged by Ning. Hello! That means we can have some fun in that area.
To insert javascript into the footer of a ning page, you can log in the the site as an admin, and go to manage>analytics. In that area you will see a text box into which you can put javascript or html. It does impose a character cap of 1000 characters, but you can do quite a bit with a thousand characters if you know a few tricks.
If you followed the recommendation from previous posts, you’ll already have firebug installed in your firefox browser. This will allow you to find out a lot of information about how Ning operates in serving up your pages. With a little snooping around, I discovered that each page has a ‘ning’ object that can be used to determine the name of the person who is logged in and browsing around the ning site. That’s important, because you must remember that every single ning page, no matter who is using the ning site, will run any javascript that you place in the footer. Therefore, one of the first things you’re going to want to do is put some code in place to ensure that your javascript only runs for you – the administrator. Once you have it all working, you can switch it to allow the javascript to run for anyone on the ning site. Otherwise, as you’re playing around with the code you are going to disrupt the viewing of all of your site members. Take a look at this code:
if(ning['CurrentProfile']['fullName']=="Tim Willison"){ };
This is a little bit ‘hacky’, but essentially this code will check the ning object that exists for every page. In that ning object is a property called ‘fullname’ that will have the actual name registered against the account of the current viewer that is logged in. Ning uses this all over the place, so it is safe for us to use it as well.
This will ensure that any code you run will only run for you, the administrator, as identified by name. Now you can feel free to start introducing javascript, but how about if we narrow things down a bit so that the javascript will run just on your own page rather than all the pages (it can get annoying if every page is running your javascript).
The ning object does not know what page you are on at any given time, so to figure that out we’ll have to use the actual url of the page. You could do something like this;
if(ning['CurrentProfile']['fullName']=="Tim Willison"){ if(location.pathname.indexOf('profile') >0 && location.pathname.indexOf('TimWillison') >0){ //your code in here }; };
There we go. Now you have the ideal conditions in which to play around with javascript on your own personal ning page.
Now you might wonder what you could do inside of a thousand characters that would be of any interest. But with a little knowledge of how ning works, you can actually do quite a lot.
For instance, ning itself has some javascript already in the page for it’s own use, namely jquery (and a dojo wrapper). If you know of jquery, all of your jquery tricks will work. If you don’t know jquery, basically is is a very nice javascript library used for all manner of things like animating divs, doing ajax, etc. There are many tutorials for jquery online.
The main thing you need to know about the ning jquery is that ning wraps the jquery engine in a variable called x$ that you must use to access it, like so;
var postNavigationButton = '<div id="postNavigationButton" width=800 frame=0><input type="button" value="Expand" onClick="toggleProfile();"></div>'; if (typeof(x$) != 'undefined') { x$("#xg_navigation").after(postNavigationButton); };
In the code above, we are first checking that the jquery has been loaded and assigned to the x$ variable (a good idea in case ning changes things). After that, we can call jquery functions by referencing them through the x$ variable. In this case, I’m looking for the “xg_navigation” div and adding my own html div after it – effectively inserting new content under the navigation tabs that ning uses.
I’m sure you can see now how much you could potentially do with your ning pages! In the next tutorial we will examine a few more options that become possible using this technique.
In this last part to the series done by Raz Peel at FITO, Raz talks about some of the lesser known places to find help on Flash projects, including IRC channels, and various other online resources. He mentions some forums, and demonstrates using ‘related topics’ in the livedocs help within Flexbuilder.
I added a few notes as well, I didn’t think Raz would mind. FITO is a pretty relaxed atmosphere.