CSS Relative Positioning

August 28, 2006

I presume you know something about CSS positioning. If not read this; http://www.w3schools.com/css/css_positioning.asp

There is this really nice cross-browser trick to center your HTML page in your browser.

It goes like this. Place a div with for example id “page” inside your html;

<html>

<head>
<!– put a title and a link to your stylesheet etc… here –>
</head>
<body>
<div id=”page”>
<!– put your content here –>
</div>
</body>

</html>

and make up your CSS so that it contains this;

html,
body
{
width:100%;
text-align: center;
}

#page {
width: 800px;
margin: 0px auto;
}

Where 800px (800 pixels) could of course be any other width that you want to use.

Now this works fine apart from the fact that absolute positioning no longer works, or so I thought. I had a real tough time trying to make relative positioning inside the “page” div work cross browser, but I kept encountering tiny miss-placings of my elements in IE browsers. Close to desperation I luckily found Ten_CSS_tricks_you_may_not_know, trick 9 saved me. All you have to do to use absolute positioning (which works the same in all major browsers) is adding this line “position:relative;” to the style declaration of the containing container.

So with:

#page {
width: 800px;
margin: 0px auto;
position:relative;
}

You can now use absolute positioning on HTML elements you place inside the page container. Be aware that your absolute positioning coordinates are now relative to the position of the container.

Freenigma a Big Brother?

August 28, 2006

I was looking on Technorati to see if more people where writing about freenigma.

And yes 138 people did.

The “Big Brother comes to FireFox” post of Ben Laurie came to my attention.

Ben Laurie did better research on the workings of freenigma then I did and he points out the possibility for freenigma to spy on the content of your emails. Here are 2 of the points he makes that are worth considering before you sign up with freenigma.

  1. Freenigma can read your mail. They can poses both the decryption key and the encrypted message you send to your recipients.
  2. Freenigma can impersonate you.

I can see why I would have to trust freenigma. But doesn’t this sort of service always need a middle man that can be trusted, and what would it take for you to trust the middle man.
I think that having to worry about the integraty of one party, is a lot better then having to know that your private emails are send as plain text over numerous of parties.

Please let me now if there are serious flaws in my reasoning.

I just discovered this really cool mail encryption tool: freenigma.

Freenigma adds strong e-mail encryption technology to your favourite webmail service. I’ve tested freeenigma with Gmail but the website claims that you can use freenigma with Yahoo! Mail, Hotmail and others as well. Now you can decide for yourself which of your e-mails are really private.

What I like is that freeenigma installs as a Firefox extension, this ensures that you can use the software on almost any platform.

Okay, let me explain how easy it is to sign-up for encrypting your emails.

  1. Go to http://www.freenigma.com/ and sign up for an invitation. They say you might have to wait a few hours before receiving your invitation, but I got mine in just a few minutes.
  2. Go through te registration process.
    Provide your emailadress (or multiple emailadresses) and a password that will from now on be your account information for the freenigma encryption service.
  3. Install the firefox extension. You get a link that helps you install that with one click.
  4. Inivite contacts.

Your good to go now.

Here is how I send an encrypted email to my girlfriend using Gmail.
When you use the firefox extension for the first time you will be asked to sign in. You use your email-address and password for that purpose.

Go to your Gmail “Compose Mail” and add a recipient, a subject and a message in there. Then press the “encrypt” button in the top of the page.

Freenigma Encryption
The result is that your message get’s encrypted. All you have to do now is press “send”. The other party receives the encrypted message and has a decrypt button provided by the same firefox extension to decrypt the message.

Freenigma Decryption
You’ve never been bothered with exchanging the secret encryption key with the other party, freenigma securely did this for you. (Note you can only send encrypted emails to email-addresses that are in your list of contacts at https://www.freenigma.com/freenigma/service/ ).

This freenigma service can be really interesting even if Gmail would provide it’s own encryption/decryption mechanism. Besides preventing that your mail messages are send across the unsafe Internet as plain text, this way of working also ensures that people breaking in to your mailbox can still not read your past emails if they don’t know the account information for you freenigma service. And if you would use freenigma with multiple mail services (for example I use Gmail, hotmail and yahoo mail) you don’t have to bother creating 3 separate encryption accounts you can just setup your encryption account and safe contacts in one location.

I like this service. Tell me what you think of it.

I love to ski!

August 26, 2006

Aaahhh, it’s been far to long since I last stood on skis. February to be precise. This is me in Bellwald, Switzerland.

I still get goose pimples watching this picture. Although I’ve really been there the picture stays surreal. What a mighty landscape!

IMG_1921

Here is a small videoclip of me on BigFoots

This is the time of year that I must begin planning something for next winter. We’re thinking about going to Spindleruv Mlyn (Czech Republic) for a week with Christmas and New Years Eve because it’s cheap.

I would love to go to Bellwald again, but right now it would be to expensive for me. Previous year I was there on invitation of a good friend who shared his house there with me. Hopes he invites me again this February!

Where do you go on wintersport? Any recommendations for me?

Antivirus Software

August 25, 2006

WordPress has this “Next blog” button, interesting to see where that can lead you. Try it yourself. Be surprised.

I found Andryan’s Miscellaneous Blog trough the “Next blog” button.

Andryan is recommending avast! antivirus.

Looks alright this avast! anti-virus. I don’t need it right now because I’m using a licensed copy of Kaspersky 6. Good product in my humble opinion.

Clamwin is another free virus-scanner. I’ve used it and recommended it to others in the past, but with clamwin your responsible yourself for what gets scanned at what doesn’t. You have to explicitly tell clamwin what to scan.
This avast! anti-virus looks the be a better constant protection. I think I will give it a try when my current Kaspersky license expires.

When I started this blog, it wasn’t my intention to fill it up with stories/tutorials/complaints about Flash and ActionScript. But I’ve been doing a lot of Flash development lately so I came to write about it. Apparently I’m far from being the only Flash web-developer that searches the Internet for guidance. In this post are the ActionScript/Flash related search strings that made search engines guide visitors to my Blog in the last three days. Because I’m a nice guy, I want to help people that search for answers and so I’m gonna try to answer the questions behind the search strings. (If I can decipher what the question was.) I think that the original searchers have found their answers by now, but maybe someone else is helped by this.

I give my help in the format.

  • SEARCH TERMS
    My answer to what I think was the question.

My answers will primarily relate to Flash 8 ActionScript 2.0 because this is what I’ve been working with lately.

Okay here we go;

  • Element MOVIE TITLE is undefined in FORM
    My Blog is the first results when you Google on these terms but I won’t be able to help. I have no clue of what the questions is. So Google, please remove me, I’m probably of no use with such a high ranking!
  • flash timeline code
    Probably looking for the possibilities of coding against the Flash TimeLine.
    This is what I know of ActionScript related to the timeline.
    There is the MovieClip property _currentframe which informs of which frame your MovieClip is currently playing.
    There are the MovieClip functions gotoAndPlay and gotoAndStop. Both take as a parameter either a number representing the frame number, or a string representing the label of the frame, to which the play-head is sent. gotoAndPlay makes the playhead play from there gotoAndStop makes the play-head stop there.
  • put a blog inside a flash file
    flash blog
    blog inside a flash movie
    “blogging in flash”

    Nice! I wrote two entries about this subject. I hope this helps.
    findability-and-linkability-with-flash
    and
    blogging-in-flash
  • average color in an image
    color average image
    image average color

    This search does not have to have been Flash related, but for those interested I posted a piece of ActionScript code that calculates the average color in an image.
    taking-color-average-from-image
  • removeMovieClip actionscript 2.0
    This person probably had trouble using ActionScript to remove MovieClips. Flash only allows you to programmatically remove a movie clip instance if its depth is within a specific range. Any MovieClip with a depth between 0 and 1048575 inclusive can be programmatically removed. Any other MovieClip remains unaffected by removeMovieClip( ). I wrote a function that first swaps your MovieClip to proper depth and then removes it.
    another-thing-thats-missing-in-actionscript-20
  • finding inner child nodes length ActionS
    I have to guess what this person was looking for. It might have been the XML support in ActionScript. XML support is one of the few things in ActionScript I’m enthusiastic about. They (Macromedia, now Adobe) really nailed that. Learning the XML API was absolutely painless. Here is an excellent tutorial: http://www.kirupa.com/web/xml/index.htm
    The thing I like the best about Flash XML support is that XML are still parsed even when there slightly malformed.
  • htmlText embedded font
    flash Textfield.embedFonts bug
    flash actionscript embedded fonts
    embedding fonts in flash
    flash css embedded fonts
    embedding a font in a text field dynamic
    embedFonts ignores html text flash
    “TextField.StyleSheet” + embedded fonts

    Embedding Fonts in your Flash Movie is far from trivial. This is how I made it work for me.
    embedding-fonts-in-flash
    Okay so now you have your fonts embedded in Flash. I had the unpleasant surprise that embedding the font made some of my htmlText disappear. It turned out that I had to specify the font-family style attribute for every HTML tag I was using.
    another-day-another-fight-with-flash
  • dynamicly
    Funny someone found my blog using a spelling error as search term. What does that say about my blog? 🙂
  • actionscript 2.0 type check String.prototype
    actionscript string replace
    actionscript “in string” function
    actionscript 3.0 trim function
    actionscript 2.0 string replace pattern
    trim spaces in actionscript
    flex textfield trim the textfield data
    actionscript string trim
    actionscript string replace pattern
    string replace action script
    string replace actionscript
    Flash ActionScript replace function
    actionscript extending string
    replace function actionscript
    actionscript string replace function
    flash action script trim string
    flash string functions replace
    actionscript replace function
    string replace action script
    flash action script string replace
    trim functions in actionscript
    actionscript 8 string replace
    actionscript string functions
    as 2.0 String.prototype
    actionscript 2.0 String.prototype and type
    actionscript string
    actionscript 2 indexOf
    actionscript string

    Whooha! Damn. I’m definitely not the only one missing some String functionality in Flash. For the String replace function you could use: originalString.split(replace_what).join(replace_with)
    If you need more functionality I recommend bundling all the extra String functionality you need in a String Toolkit (a custom made class). I found ways to implement String trimming, String searching, String replacing and a lot more.
    string-functions-macromedia-forgot
    More-Advanced-String-Replace
    This should get you started. If you not more String functionality, just ask, I might have it for you.
  • Flash Bezier Drawing
    flash drawing
    actionscript bezier curve
    flash draw bezier curve
    drawing paths in flash
    movieclip.beginfill remove fill
    drawing curves between nodes flash 8
    draw curves actionscript flash
    Flex 2.0 beginGradientFill
    flash drawing api bezier
    flash drawing api runtime
    These search terms seem all related to the Flash MovieClip drawing API. This is what I wrote about the drawing API.
    Flash drawing API
    and specificly about Bezier curves
    Flash drawing API bezier
  • flash actionscript string[] array
    Looking for ways to create string arrays in ActionScript. Look no further.
    flash-actionscript-string-array
  • draw line as underline flash actionscript
    I’m not sure what this searcher was hoping to find. If you want to underline text, I recommend using a StyleSheet with text-decoration: underline; for the part of your text that you want to underline. Don’t use the drawing API for this purpose. To complicated.
  • “bitmap.draw()” flash
    replace bitmap movieclip
    You probably need the BitmapData class. Google on that search term you will probably find what you need.
  • flash blogger
    Nope, I’m not a Flash Blogger. It is not my intention to Blog about Flash. I’ve been blogging a lot about Flash lately and that let many to my blog searching for guidance in using Flash. This kind of locked me up in this behaviour, but I will stop blogging about Flash as soon as my current Flash project ends.
  • as2lr
    If your looking for the ActionScript 2.0 Language Reference PDF you can find that on Adobe’s webpage.
    Documentation Page: http://www.adobe.com/support/documentation/en/flash/
    Complete Flash 8 Documentation: flash_pdfs.zip
    BTW as2lr.pdf is an excellent resource to start your every research on ActionScript features.
  • flash swapdepths puzzle piece
    Yes swapping depths is another thing that has not been implemented very intuitively. All MovieClips you create must exists on some depth. The depth of a MovieClip determines how it’s stacked above or under other MovieClips. Depthnumbers are integer numbers that can not be shared by more then one MovieClip. In other words there can only be one MovieClip per depth. If you want to swap your MovieClips depth with that of another then this is possible. There is the function MovieClip.swapDepths() which takes the new depth for your MovieClip and place it in that depth swapping with whatever was there. When creating MovieClips you have to specify at with depth you want them. After that you can only change your MovieClips depth using swapDepths. MovieClip.getDepth() is used for retrieving the depth of a MovieClip and MovieClip.getNextHighestDepth() can be used to retrieve the “next-highest-depth-used-in-your-MovieClip” +1.

Whooha. Hope that clears some things up.

To dynamically create a button (clickable MovieClip) with ActionScript you only have to define the onRelease event. For example this makes a button out of your MovieClip ‘MyMovieClip’.

class com.mywebsite.MyMovieClip extends MovieClip
{

function MyMovieClip()
{}
public function onRelease()
{
//Do Something
}

}

Frustrating thing however is that your MovieClip is now only clickable on its graphics. So say it has some text and some lines, it will be only clickable when the mouse is exactly hovering above character-pixels or precisely above the line-pixels.

I found a real easy trick that makes a user defined region clickable. Dynamically draw a invisible shape(!) defining the region you want to be clickable using the Flash drawing API. This invisible drawing is impossible in the authoring tool. I tried it, but invisible graphics collapse/disappear.

I defined a function handling the onLoadInit event to draw my “click”-region.

public function onLoadInit()
{

drawClickableRegion();

}

private function drawClickableRegion()
{

beginFill(0xFFFFFF, 0);
moveTo(-2.5, -5);
lineStyle(0, 0xFFFFFF, 0);
lineTo(-2.5,5);
lineTo(35,5);
lineTo(35,-5);
lineTo(-2.5,-5);
endFill();

}

As you can see, my code draws a box between -2.5,-5 and 35,5. I use fill- and line-color 0xFFFFFF with an alpha 0. You can use any arbitrarily chosen color but make sure you set the alpha to 0 to make your shape invisible. From now onwards your dynamically created MovieClip is a button. Remember to redraw this region whenever you use the clear() function on this MovieClip elsewhere in your code.