Client Tech 4

Ct4 Assignment 1

Going into the first assignment, I still wasn’t happy with learning flash actionscript, my personal feeling regarding it weren’t very positive. However, when we started the lectures it became clear that adobe had made some major changes to accommodate more traditional programmers with ActionScript 3, and this turned out to be a good thing for me.

Going through the week one tutorial was actually rather nice. I felt immediately at home with actionscript3 due to it’s similarities with javascript, so working on assignment one was more or less a pleasant surprise!

One thing I wondered, though, was if Actionscript had pointers or not, and the short answer was “sort of”.

In this first week we learned how to set up a class file association with the flash project file, and have it use that as what we know as the “main” in C++, I then found that the C++-like programming style could further be used by using the onEnterFrame eventlistener and attaching it to a method of the main class instance; effectively acting as a main loop.

The whole event thing was way beyond me, though, and I’ll need to pay close attention when it’s finally explained in the working class.

Another thing that I’m wondering about is.. Since a lot of things are being instantiated with new, do these also need to be removed? It would seem to me that they are allocated dynamically, and thus, would need to be deleted after use.

Making frugal walk for the extended exercise was a breeze. I simply populated an array with cos and sin values, generating a nice arc for frugal to follow while jumping. Nice and simple.

Result

FlowChart

Click for larger view

Ct4 Assignment 2

The second week, I started off with a more positive attitude due to the experience with the first one. We worked on creating a particle system of sorts, with the main document class generating and killing bees, which would then move from one spot to another using a motion tween, which seemed handy, but I’d rather write myself (C++ programmer mentality?)

I found the design patterns to be extremely familiar, which seems to be a recurring theme that I’ve come across ever since I signed up for A&T.

I was also happy to not be forced to re-use last weeks work, as I’ve had rather bad experiences with that in IGAD where you can’t follow the lecture because you had a problem in last weeks’ code and this weeks’ builds on top of that.

Other things I’ve been messing with this week were alpha, scale, and dynamically creating a textfield on each bee so you’d be able to see their names. As it turns out, you can simply new a TextField object and set some properties. The only thing to note is that you’ll also need to create a TextFormat object and set it’s properties in order to be able to set the TextField’s text style, which seems a bit weird to me. Finally, to assign the style to the field, you simply assign your TextFormat Object to the TextField’s .defaultTextFormat attribute.

One thing I found particularly.. Unprofessional.. Let’s put it like that, was the use of named array elements. This makes iteration through the array cumbersome if you don’t have access to it’s contents names, on top of the fact that the Array implementation in ECMAscript is anything but safe and optimized. Rather the opposite; it adds attributes to a generic object and let’s you grab those using the [ n ] format, according to my research on the subject.

result

flowchart

Ct4 assignment 3

Just when I thought we weren’t going to re-use previous assignments, the 3rd assignment popped it’s head around the corner. I wasn’t amused by this stunt, to say the least.

Anyhow, for assignment 3, we were going to message the bees, make them grow old, get sick, and die completely using the eventlistener, and eventdispatchers. This was different for me than the other assignments, because following ken’s assignment didn’t give me working eventlisteners for some reason. The listeners were registered, which you can check by calling the hasEventListener method on any subclass of Sprite. The method to be called, however, refused to co-operate with me, and it wasn’t until the exam week where I had some one-on-one time with ken, when we were finally able to find out what was going wrong, and the concept of eventlisteners and dispatchers became clear to me.

Using the eventlisteners, the bees were eventually able to message requests to the environment for their removal, as they were ready to die from illness.

Assignment 3 was rather short, which cut me some slack. How nice!

result

flowchart

result flowchart

Ct4 assignment 4

With the 4th assignment, I think ken set out to poke fun at me, once again building on top of the previous assignment, like we did last week. Fortunately, everything I needed for this week’s work did function in last weeks’ assignment, so I was able to get busy with the work  relatively quickly.

Moving forward from assignment 3, we’re off doing evil, creating a killer bee that actually eats the nice and the sick bees (really, it just eats anything it comes across). Talking code, this means checking collision between the evil bee and the others, mirroring it’s sprite, and  removing the bees from the stage.

New bees are also generated at random intervals, so if you stick around for a while, you’ll have the entire screen absolutely packed with bees; easy targets for lots of points.

I decided to go all out with assignment 4, and actually create a game as suggested in the extended exercise. What I added was a textfield with modified text style (using TextField and TextFormat), which would display the number of bees eaten. This information would always be displayed below the killer bee, as you moved him around using the mouse.

I also added a timer, in order to create an arcade-style game, using the Timer object, and set it to fire a method of the main document class at regular intervals and count down the time using that. The objective of the game is to eat as many bees as possible within 15 seconds.

result

flowchart

result flowchart

Ct4 final assignment

Once I got to the final assignment, I felt I had a pretty good understanding of basic Actionscript 3, and I was actually able to create the entire game in one evening; after creating assignment 4 on the very same day. I started out thinking about structures; what kind of data to I need to store for my game to be able to function? A pickup class and a SnakeSegment class were created, and a document “Main” class also joined the ranks shortly after. In the Pickup and SnakeSegment classes, which I made by extending the MovieClip class, I create the visuals in the constructor.

I then thought about my approach for the snake’s trail, and decided to create 2 Arrays; one which would hold the snake’s tail, and one which would hold the trail of the snake’s head. I would then only need to put the tail on the trail, and keep inserting new snake segments into the tail when it would need to grow in length, and push a new head trail in the trail array every time the head moved. I then shift (instead of pop) the first element of the array out of the trail, using the first-in-first-out model, whereas the snake’s tail simply uses a first-in-last-out model, because it doesn’t matter in which order the snake’s segments are in the array.

Using this system, I was able to create the snake with it’s trailing body succesfully. I did, however need to create something that would allow me to pass the snake’s x and y variables to the trail (which I named path) for storage, and so another class was born: Position. Position was a simple container class, but turned out to be a great thing to use, and I had absolutely no trouble getting everything to work.

Lastly, I used a timer with an eventlistener attached to regulate the game’s speed, and attached a listener to KeyboardEvents for my game’s controls.

The score is calculated when the snake does a hitTestObject collisioncheck with the item pickup, after which the pickup is simply relocated, not destroyed, and points are added to the score.

Custom fonts are also used in this game, and after some research online, I found an easy way to implement them; add them to the flash library and instantiate an object of it’s linkage classname, and subsequently assigning it’s fontName to the TextField’s (TextFormat) .font property and setting the fontEmbed to true, after which it just seemed to work!

Video

Result

Flowchart

Click for larger view

Tags: actionscript, as3, assignments, ct4

Analysis of a digital social network

I’m analyzing Phantasy Star Online, PSO for short. PSO was one of the very first online multiplayer console RPGs, and it’s been used as the source of inspiration for many modern videogames such as Lost Planet 1 and 2, The Monster Hunter series, and Guildwars.

The game revolves around communication, and it’s universal translation system.

There are three ways to meet new people; when playing online, enter a random game and get to know the people inside, then exchange cards so you can stay in touch and play some more later.

Since the game uses visual lobbies that are a part of the gaming experience, you can run into people, start, or join a conversation with anyone in the lobby, and exchange cards so you can stay in touch. The last way of meeting new people is by playing with friends you already know, and hooking up with their friends.

An interesting aspect of PSO is that players generally spend just as much time, or more, than actually playing the game itself.

A typical interaction where the player would meet a new node for their social network in the lobby would be like this:

Player A: TTF anyone?

Player B: Not on this char, lemme switch to my lower level, brb.

(player B returns with different character)

Player A: I’ll make

Player B: k

(in the game itself)

Player A: oho nice gear you’ve got there, legit?

Player B: yeah, took a shitload of forest runs!

Always very simple, corporative, team-talk, and simple daily things like school, friends, other games and films are common topics.

(Ps. I missed the explanation on how to do this due to a dentist appointment and couldn’t get on natschool at the time of writing)

Tags: gaming, pso, social network, videogame

Suggesting a sequel

In this activity, I’m supposed to analyze a film, tv series, or youtube clip

Using youtube clip here

All from teenage boy perspective

User Prerequisite

• Suspension: the suspension of disbelief is created easily, since the clip is mostly realistic, and believable where it’s not realistic.
• Empathy: I empathize with the main character of the clip, it’s a realistic situation.
• Parasocial relationship: I liked the action and humor and feels positive towards the name and service.
• Interest: I like the action and the main character, I have the impression that he is cool, and I’d like to be like him.

Motives

• Escapism: from your own boring world of daily repetition
• Mood management: I feel excited, captivated
• Achievement: having a good excuse for being in the closet half naked.

Effects

• Excitation transfer: channel+ associated with fun, good.
• Catharsis: Tension, Excitement, Laughter.
• Learning: Channel+ is cool and funny.

Suggestion for a sequel

Create a similar one with a indiana jones/egyptian theme, featuring the guy that ‘catches’ the main character of this one.

Personality tests

The human metrics (Myers-Briggs) test

My result for this test was ESFJ. As someone with an ESFJ personality, I like to think that I show genuine interests in the well-being of others. The result also says that people of my personality type are often skilled to bring out the best in people, but I’m not so sure if that’s the case for me. I DO have a natural interest in trying to understand other people’s point of view. I am serious about the things that I’m doing, and often quickly see efficient ways of handling tasks, and am a bit of a perfectionist. I also enjoy doing little things that make life easier for others.

Emotionally, I’m easily hurt, and take pleasure in other people’s happiness. I give generously, but expect appreciation in return. I also seem to have a thing for reading people.

Lastly, I tend to be vocal in expressing what I think is right and wrong, and I work best in structured, controlled environments. I feel a bit insecure in atmospheres of uncertainty.

The first test was the only one that made me go “WOW”, it was spot-on!

international hobo site test

result: conqueror-seeker

seeker enjoys finding things and is generally curious

Conqueror wants to feel that they’ve faced a real challenge when accomplishing something in order to be satisfied with the result

Both of these are true in my case, I enjoy discovering new things (though not in the game sense), and want to feel like I’ve done something useful that took effort.

GamerDNA (bartle test)

Result: Explorer

loves new things, discovering them

again, completely true. Though not as accurate/detailed as the  first one

Genre analysis

For this analysis I am taking a look at 3 games in the RPG genre (console based)

Week 5, good web design

Webdesign isn’t a simple thing to do, there are browses which may or may not support the web standard which you’re using to take into account. Layouts and fonts might just render slightly differently, some tags might not be supported, and so on. The following is a short review of 5 websites that have a good design on all fronts, visually, conceptually, and technologically.

Digg.com

Well-known to the tech and IT crowd, digg.com is a place for users to submit things which they deem interesting. If a lot of users think something is great, then it’ll get more attention on digg, and as a result, other people will discover the site. This allows the little guy with a brilliant idea to actually gain status and public attention on the web.

Sporting mainly a 3-column layout, he site is very easy on the eyes, and allows you to dig down to the kind of topics which you are interested in very easily. The only thing distracting is the sheer volume of advertisement, but due to it’s simple visual style, this doesn’t change the usability of the site.

Digg is created entirely in xhtml 1.0, build entirely using a css/div layout, and uses some simple ajax to do its thing in a user-friendly fashion.

The Apple Online Store

Another Xhtml website with a css/div layout, the Apple store uses a 5-column approach, and succeeds. The outer left and right columns function as sidebars with links to relevant content, the main product lineup on the left, accessories and 3rd party products on the right.

A mostly subtle colorscheme is used, with contrast added to the most essential information, allowing shoppers to quickly navigate to their product of choice and anything related to it. Apple has opted to use the inner three columns for a tabbed interface at the top, allowing them to put a large amount of information at the focal point of the website.

As usual, apple is very successful at taking existing technologies and applying them in a way that just feels natural. The end result is that other sites and designers are heavily copying bits and pieces, which I view as a good thing.

CSS Zen Garden

The CSS Zen garden deserves a mention in any web design and technology-related discussion. It serves a simple purpose: to show the possibilities of webdesign using pure css layouts. Dozens of web designers have sent in their stylesheets, and the result is an impressive showing of just what you can achieve using a div/css layout. visitors can change the entire look and feel of the site on the fly, and are encouraged to take a look under the hood, at the stylesheet, to look at, and learn from.

Due to the dynamic appearance of the zen garden, it’s really impossible to say wether or not the site is using a 2, 3, or maybe 5 column layout, since that’s all up to the designer of the stylesheet’s imagination. One thing is for sure; the zen garden is at the forefront of proper web design, and shows aspiring designers a number of ways to properly do their job and make the web a better place.

Iconresource.net

Icon resource is a pay-for tutorial website that conveys proper icon design by freelance macintosh interface/icon designer Sebastiaan de With. The site sports a clean look with light colors that go easy on the eyes. The site uses some ajax, and embedded video and primarily stands out on the good visual design aspect. Still, I wanted to give this one a mention in my list because of the well-designed layout, visuals, and attention to detail.

Flickr.com

Another more familiar website, Flickr is a photo sharing website for vacation shots, semi-professionals, and pro photographers alike. It sports a very low contrast, very light color scheme, with some blue and pink elements sticking out. This keeps the focus on the images and makes the site itself fade to the background when watching pictures. You stop noticing the site and only see the content. The layout is a very spacious, clean, and simple one, without any advertisements and leveraging modern web technologies such as javascript and in the background OpenID/YahooID to stay out the users’ way. It’s simple, and does only one thing, but does it well.

Week 4: javascript

For week 4, I was pretty confident I’d be able to do the javascript assignment quickly. Having never really used JS, but being relatively experienced with C++, I felt at home with it instantly due to the the identical syntax, so the only thing I had to learn were some minor differences between the languages and the document object model, which turned out to be quite some work still, but only took me a short while to figure out with the internet to reference. All in all, I think it took me about an hour and a half to have the bug-free assignment done and I’m very pleased with that. the DOM is still a bit scary, but was easier to play with than I though it would be.

You can basically set the name and id tags of a div or a other tag, and address html elements, or groups of elements using those using getElementById or getElementByName which return objects for you to work with. the only real difference between JS and C/++ was with function declarations/implementations where you don’t need to specify a return type, nor do you need to specify the variable types, or even use the var statement for function arguments.

I’ll give an example:
First one is a function in JS

1
2
3
4
5
6
7
8

function PopulateOptions(options, max)
{
	var i;
	for(i = 0; i < max; i++)
	{
		AddOption(options, i);
	}
}

and the same function rewritten in C/++

1
2
3
4
5
6
7
8

void PopulateOptions(OptionsList* options, int max)
{
	int i;
	for(i = 0; i < max; i++)
	{
		AddOption(options, i);
	}
}

As you can see, nothing dramatic, pretty easy to understand and read!

Once again, pretty easy homework to do ; ]

Tags: ajax, javascript, xhtml

Week 3, jumping through hoops: object

Embedding Media on a webpage

the homework for this week was to research the (x)html object tag. Truth be told, I’ve never had an in-depth look into this thing, or any way to embed multimedia into an (x)html page. But as it turns out, it’s quite a horrible thing to do. Reason being that on Internet explorer browsers, the object tag is used, while on mozilla/netscape based browsers, embed is used for the same purpose. the W3C also mentioned partial support for the object tag on it’s website, and as we all know, partial browser support is always nice for a web developer to have to deal with… not.

So adobe recommends putting an embed tag inside an object tag to ensure that all browsers actually do what you’d expect them to do, which seems like a fair approach, as long as it doesnt break the xhtml standard on my sites.

So then I decided to look around on some websites myself, and see how they solved the problem, and what i found out was: they didn’t. Some use object, some use embed, but never a combination, and usually a very ugly ‘fix’ is put in place, like putting the html for the embed inside of a div src attribute, and it’s to no-ones surprise that none of these sites are actually using valid xhtml, or even html, and from what I can see, they purely rely on the browser to fix the html for them, which is really the most horrible thing you could ever do as a web designer. For now I like the youtube approach best, which I’ve pasted in a quote below. I can’t wait for html5 and xhtml2 to take over with their proper multimedia support tags, and get rid of the object soup.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="340" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/SYxte83ISuc&amp;hl=en&amp;fs=1&amp;" />
<param name="allowfullscreen" value="true" />
<!-- embed tag here is for cross-browser compatability -->
<embed type="application/x-shockwave-flash" width="500" height="340" src="http://www.youtube.com/v/SYxte83ISuc&amp;hl=en&amp;fs=1&amp;" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Pushing the web to the edge

Another part of the assignment is to find a number of websites, or web-applications if you want to be all fancy-pants about it.

So I’ve looked around for a bit, and came up with my top 5 of boundry-pushing sites that I could come up with, any some comments on why they are.

Photoshop.com

In an attempt to keep people from pirating Adobe’s own creative suite just for simple image editing, Adobe has created an online version of photoshop which lets you do basic edits and transformations in your browser, free of charge. Utilizing flash, Photoshop’s web cousin gives the user just enough tools to prevent them from pirating, but not nearly close enough tools for the pro, or semi-pro user. A full-blown online image manipulation application pushes the boundaries of what you’d expect to do in a browser, using it as a tool, not as a viewer, any longer.

Jaycut.com

What photoshop.com does for photos, Jaycut does for home video editing.

Giving the user all the tools they could possibly need, Jaycut allows for video editing similar to Apples’ iMovie, or Microsofts’ Windows Moviemaker, but online, accessible  anywhere where there is a browser with Adobe Flash support. Video editing in the browser: very much pushing the limits of what you expect to be able to do on the internet.

Google Docs

Docs is an online replacement for Microsoft Office, OpenOffice, and other word processing applications. It moves creating, saving, sharing, and collaborating on documents entirely into ‘the cloud’, where you can optionally save a copy to your local computer in a number of common formats, including word document. Though not entirely in real-time, it also allows you to work on the same document with multiple people at the same time. As a response to google docs, Micosoft has started development of their own online office suite, but only offers it as a bonus feature of it’s existing software (still requiring you to pay for it).

RPX/OpenID

While technically not a useful website when used alone, OpenID and RPX allow for instant login on a large variety of other websites, without requiring the user to create yet another online account. The services uses modern web technologies like flash and ajax to work it’s magic, and supports users logging in with Windows Live ID, Yahoo, Blogger, Facebook, Twitter, OpenID, AOL, MySPace, Wordpress and the list goes on and on. Users can log in on any of these websites using a single account, which they most likely already have, lowering the threshold of engaging with an online community or service. OpenID is an open standard/platform, is owned by no-one, and gaining traction on the web since it’s fairly easy to add to existing websites.

In short, RPX with OpenID aims to be a single login for the internet, and is being increasingly successful in it.

Tags: embed, html, object, standards, web, xhtml

week 2, dreamweaver

second lecture, more basic info that I knew back in 2005. I had some trouble with dreamweaver, setting things up, but sorted it out within 20 minutes or so. Also set up my ftp client, and Coda (www.panic.com/coda), which I think might just become my favorite web development editor. Never had a need to use such a tool before, but it does seem to be handy right now, and loads cheaper than dreamweaver (as in, i can actually afford to buy it legally).

Ken saw my site from last week today, wanted to talk about me going through the stuff faster and reminded me about the exemptions. I guess I forgot that there was some time reserved to sort those things out for people who already have the skills. I’m thinking this would be a nice idea to free up some time and focus a bit more on the other lectures, but we’ll see just how much of CT I can skip. I don’t know javascript, but since I know C/C++, this should be fairly easy.

Check out my amazing website though! [/sarcasm] (opens in a new window/tab)

Week 1, first website

A pretty boring lecture, probably interesting to quite a large part of the class, and I’ve heard about people pulling all-nighters already over this stuff, but to me this is just way too easy.

Was supposed to make a simple website using html, but that’s ancient, so I decided to make a tableless css layout with some nice subtle colours. And I’ve been able to do the whole thing during the lecture. Got bored at some point and decided to just relax for the rest of the lecture. I like Ken as a lecturer though, he can explain stuff in a way that conveys the most important information to people to those for who this is new.

I haven’t actually seen a whole lot of people with webdesign experience just yet, and to top it off, there was this guy sitting behind me who was complaining that typing html was too much work. Obviously he had absolutely no clue what so ever what the full-blown IGAD courses are like. A&T has been pretty easy going so far.

I’m still going to the lectures though, maybe there is some useful information in the later lectures, I mean, I’m self-taught, so theres quite the possiblity that I’ve missed some handy techniques or whatnot.