Sealed and dynamic classes

Back in the days of actionscript 2, you could add any property to pretty much any object, just calling it and setting a value, like this:

 myMovieClip.thePropertyILikeWithAStrangeName = "some string"

Actionscript 3.0 instead, being a more serious language, defines the basic class as sealed. That means that you can’t add any property on a object. You have to extends that class, and adding public properties.

public class MyClass extends MovieClip {
public thePropertyILikeWithAStrangeName:String
public function MyClass() {
super();
}
}

That class is sealed. You can’t

var foo:MyClass = new MyClass();
foo.anotherProperty = 42;

The dynamic keyword, permits to ‘unseal’ a class, giving back the possibility to add any property on runtime.

public dynamic class MyClass extends MovieClip {
public thePropertyILikeWithAStrangeName:String
public function MyClass() {
super();
}
}

Now you can:

var foo:MyClass = new MyClass();
foo.anotherProperty = 42;

There are speed and cleaness drawbacks on using dynamic classes. The rule is that if you use it, you should be able to seriously motivate it.

Note that there are few dynamic classes in the default Actionscript framework; the most known is of course, Object .

Read more:
livedocs
ActionScript 3: Dynamic Classes

Saving preferences in Air Applications

Every now and then, while working on a AIR application, i feel the need to save or restore some config info, like the last window position, or the last opened files.

Instead of embedding this login in every app, I thought about a PreferenceManager class that stores and restores values.

How it should behave:

  • It must save data on a file.
  • It must save data on an open and editable format, so if something goes wrong..
  • It should be a static class, so i can access it in every other class of my application, whitout the need to have the reference to the instantiated object.
  • It should be really simple to use. And should not require any setup.

Read the rest of this entry »

Navigating through a long page: part 1

Sometime i see around websites made just by one page. One really long page which contains all the information and offers some method to navigate up and down.

There are many ways to accomplish this, flash or javascript based; i’m going to talk about the latter, because is kinda easy to learn, and permits me to use non destructive javascript.

Non destructive javascript it is a tecnique to use javascript which don’t rely on javascript for modifying the basic content and structure of the page (so that can be viewed also fully with javascript disabled). What we do, for example, is to use js to hook the anchor links and slightly redirect their behaviour; if you turn off js they remain working anchor links.

I’m going to use jQuery, i really love this little library :-)

So let’s start planning!

The planning phase

What we have is a really really long html page, on which we need to move up and down. Let’s say a lot of paragraphs filled with lorem ipsum. We want to scroll up and down really smootly from one link to another, and we want a menu that follow us while moving on the page.

In this tutorial i’ll explain the scroll aspects, in the next i’ll talk about the moving menu.

The basic html structure

What we expect to have is a menu with voices that leads to some specific areas in the page. In the simplest form we can use html link that points to some anchors, in the form

<a href="#someId">text</a>

that will bring you to somewhere in the page where is an emelent with that id.

This is an example of the basic html structure.
I’ve added some css rules to semplify what follow, but nothing special.

Adding the fun

But that page is boring, everybody wants a funny scroll!

So we introduce the jQuery library in the project. We include the jQuery javascript in the head tag, and at the bottom of the page we prepare a place for our script to go.

<script type="text/javascript" src="js/jquery-1.3.1.js" ></script>

Wait. At the bottom of the page? Yes. Just before the </body> closing tab. Why? Because the Yahoo Exceptional Performance team said so, to not block parallel downloads, and these are good practise to follow (also because IE6 sometimes tend to mess up with the $(document).ready() ).

Now googling around i foun that the html element to animate, to scroll the page, differs from firefox and explorer and safari. You’ll never guessed eh?
We have to find which one is the right element. A rapid test consist to scroll down both ‘html’ and ‘body’ and then find out which one has moved. (Of course this goes in the $(document).ready() handler);
Let’s see:

var scrollElement = 'html, body';
$('html, body').scrollTop(1);
if ($('html').scrollTop() == 1) scrollElement = 'html';
else if ($('body').scrollTop() == 1) scrollElement = 'body';
$('html, body').scrollTop(0);

So now we have to override the default link behaviour. But only in the case links are to id in the page. We can easily select them with the *= operator (that means ‘contains’ ).
We also need to know where to scroll:  for an <a> element, the ‘hash’ property tells the references element; $(this.hash) is the jQuery wrap to that element in the page. We can easily find his y position by reading the offset() method.

The event.preventDefault() method inhibits the default link behaviour.

$("a[href*=#]").click(function(event) {
        event.preventDefault();
        $(scrollElement).animate({ scrollTop: Math.round($(this.hash).offset().top) - 200 }, 750);
    });

Tadaaa! Every link to an id now scrolls smoothly. Notice that i’ve subtracted 200 pixel from the y position, because i don’t like the linked element on the top of the browser viewport (so i scroll 200pixel before).

This the example. Soon the following part, where we will animate the menu!

Creating a Carousel using jQuery

A Carousel is a component used to preview images, a little inline slideshow of thumbnails. There are quite a lot premade carousels ready to be copied and pasted if you don’t mind about, but i think that this is a nice example to start working with jQuery.

Step zero: planning

For the structural aspects of the carousel we will use a unordered list, masked by a fixed – width div. The list doesn’t have a maximum number of elements, we will count the and count their width with the Javascript; obiously the list should now be a traditional vertical list: we’ll handle this with css.

There’ll be also two clickable elements, outside the mask, to gently move the list left or right.

The HTML

The html is really simple: is just a list wrapped by a div. The div acts like a mask, hiding the images.

&lt;div id="carousel"&gt;
        <ul>
                <li> <img src="..." width="200" height="150" /> </li>
                <li> <img src="..." width="200" height="150" /> </li>
                ...
        </ul>

<span id="left">left</span> | <span id="right">right</span>

We also have the left and right elements. They can be pretty much anything, a good graphic should do the work.

It is important to specify the image width attribute, because the Javascript code will need it to calculate the carousel width.

The CSS

The css is in charge of horizontalizing the list, and masking with the div.

#carousel {
        overflow: hidden;
        position:relative;
        width: 500px;
        height: 150px;
        list-style: none;
    }

Note that we specify the height and width of the component here; we also specify position:relative, which should have really no sense, but is here only to cover a bug in IE7, just like is explained here (in italian)

    #carousel ul {
        padding: 0px;
        margin: 0px;
        position:relative;
    }
    #carousel li {
        display: inline;
    }

    #carousel img {
        border: 0px;
    }

This should explain by himself. The ul position is relative because we want to move it.

So now you should have a non - moving carousel. Funny. Ah.

So now you should have a non moving carousel. Funny. Ah.

And finally.. Javascript!

Here’s where the magic happens..

Fist thing: importing the right files: jquery.js and the easing plugin (we want a sexy movement, not a linear one!). Remember to do this in the <head> tag

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>

Next, we will add some code (in a script tag, obiously):

var shift = 250;

    $(document).ready(function() {
        var ulWidth = 0;
        $("#carousel ul img").each(function(i) {
            ulWidth += $(this).outerWidth(true) + 4;
        });
        $("#carousel ul").css("width", ulWidth);

What’s happening here?  We have a variable, called shift, which we will use to controll how much we want to slide the list each time; Next we bind a function to the document ready event – when all the page has finisched loading. We use the ulWidth variable to sum all the single thumbnail’s width. We initializa it to 0 and then, for each img tag in the list, we will sum the outerWidth() (and a little padding, to be nice); outherWidth() is a nice jQuery function that report the width of an element, including margins.

        $("#right").click(function() {
            var newPos = $("#carousel ul").position().left - shift;
            if ($("#carousel ul").width() + newPos &lt; $("#carousel").width()) {
                newPos = $("#carousel").width() - $("#carousel ul").width();
            }
            $("#carousel ul").animate({ left:newPos+"px"}, 1000, "easeInExpo");
        });
        $("#left").click(function() {
            var newPos = $("#carousel ul").position().left + shift;
            if (newPos &gt; 0) newPos = 0;
            $("#carousel ul").animate({ left:newPos+"px"}, 100, "easeInExpo");
        });
    });

Here, we setup the onClick handlers over the left and right elements. When you’ll click one of these, the magic should happen..
For each handler we read the position().left property and sum the amount that we want to scroll( the shift variable).

It it important to check that the right edge of the list (the left edge + the width) should stay out (on the right) of the viewport, or else we will see the list background. We don’t want to scroll when there are no more images!
The same thing for the left edge, when we scroll left, or else there be space on the left of the first image.

And… it works! Try the demo, or download the examples

Further readings:

the Carousel Pattern on the Yahoo Design Pattern Library and the really good JQuery documentation
Credits to webdevlonge which has a really nice tutorial on creating a carousel with mootools