Devirtuoso » Flash

How to Add an AddThis.com Component to Your Flash Site

Shawn — Thu, 02 Jul 2009 08:13:30 +0000

The AddThis.com component allows for an easy way to add social website links to your website. Unfortunately they don’t have a flash component yet. I will show you a work around so you can quickly add this to any flash site you may have.

Example

Download

The Theory

The title of this post might be a bit misleading. Technically we won’t be adding the addThis component to the flash, we’re going to float it above the flash. Then have the flash communicate with the JavaScript to position it where it needs to go. To the user it will look like it is part of the flash.

Creating The Flash

In this example we will be adding the addThis component below a menu. In the timeline I created a MovieClip with the name “menu” and placed the menu inside of this. You’re probably going to have your own setup, I’m just using the menu so I can position the component relative to where the menu is.

ActionScript

1
2
3
4
5
6
7
8
9
10
11
12
13

//Place the component at the bottom left of the menu

//(You can place any x and y co-ordinates here)

positionAddThis(menu.x, menu.y + menu.height +10);

//Position Addthis.com component

function positionAddThis(x,y){

    //Values have to be integers

    var left = Math.round(x);

    var top = Math.round(y);

    //Calling JavaScript Function moveAddThis(top,Left)

    ExternalInterface.call("moveAddThis",top , left);

}

You’re going to have to play around with the x and y values a bit later to get everything to line up perfectly.

Load the Flash

Now that we have the flash, we need to embed it into an html file. I’ll be using swfObject, but you can use any method you like. Just make sure the wmode is set to transparent, otherwise the flash will be on top of your component.

You can also add the script for the addThis component at this point. You can pick this up on addThis.com’s website. We’re going to wrap the script within a div with an id so we can reference it later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>

<head>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

    var flashvars = {};

    var params = {};

    var attributes = {};

    attributes.id = "example";

    params.wmode = "transparent";

    swfobject.embedSWF("example.swf", "website", "800", "600", "9.0.0", false, flashvars, params, attributes);

</script>

</head>

<body>

<div id="website">

</div>

<div id="addThisBtn">

</div>

</body>

</html>

Positioning the AddThis Component

At this point we have the flash loaded and calling a JavaScript function that doesn’t exist yet. So lets create that function. We will also add the CSS that will put the component on top of the flash.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style type="text/css" media="screen">

    /* Places the addthis button on top of flash */

    #addThisBtn{

        position:absolute;

        z-index:1000;

    }

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript" charset="utf-8">

// Function for letting flash position the button 

function moveAddThis(top, left){

    //Changes css top and left properties of

    //the addThis div wrapper.

    $("#addThisBtn").css("top", top+"px");

    $("#addThisBtn").css("left", left+"px");

}

</script>

The last thing you’ll need to do is test it out and make sure the button is showing up where you need it. You might have to do some tweaking but you can eventually get it where you need it.

Example

Download

HTML vs Flash Websites. Which is Better?

Shawn — Fri, 29 May 2009 09:32:29 +0000

There has always been a feud between die hard Flash and HTML developers as to which is better. So why not lay out some pros and cons of each and see which one ends up on top.

HTML

HTML has always been the backbone of the Internet. It’s simple to use and learn, but it also comes with its faults. Here are the pros and cons of HTML

HTML pros

SEO
Any thing you type can be crawled by the major search engines. Granted you can do SEO in Flash, but it is no where as easy as HTML.
Easy to learn and use
Even the most novice user can use HTML. With all the WYSIWYG editors out there, practically anybody can create a website now-a-days.
Widgets
There are a lot of widgets out there that you can just plug into your website with little to no trouble, and gain a load of new features. (Google AdSense, Addthis.com share button, Google maps)
Easy integration with back end languages
It is simple to display text from back end languages like PHP or ASP. A simple echo or print method and it’s up on your website.
CMS Integration
There are thousands of pre-built CMS out there that cater to HTML. Simple to install and simple to use.
Good problem solving tools
With tools like Firebug for FireFox, and with new browsers adding built in features, it is becoming increasingly easier to debug any shotty code.
Availability
Anybody that surfs the web can view HTML. This is good for any new devices on the market that want to integrate the web into their device. You can always be sure that they will be able to see your HTML.
Loading Times
Due to the lack of complexity on most HTML pages, load times are fairly quick.

HTML cons

HTML is static
HTML doesn’t have a lot of flair and smooth transitions. It’s pretty static. With JavaScript improving with leaps and bounds this may not be the case in years to come.
Fonts
You have to use system safe fonts. Again this may change with popularity of CSS 3. There are already a couple of JavaScript solutions that fix this, but speed is an issue for larger bodies of text.
Hard to make look exactly like creative
If you have a designer that demands the website looks exactly like the creative in every browser, down to the last pixel…good luck. Not an easy task, especially with older browsers. It’s slowly getting better though. The more browsers follow standards, the easier it will get.
Bugs
Browsers are buggy. I’m sorry if you’re an IE fan, but older versions of IE are EVIL. Especially in the CSS realm, things don’t work the way they’re suppose to. Again this is getting better with every new browser release.
Different browsers
As much as I love Google Chrome, it’s yet another browser you have to make sure your website looks good in. After checking all browsers in different operating systems, this can really take up a chunk of your time. There are some tools to help expedite the process, but it’s still a pain.

Flash

Without a doubt Flash is known for it’s interactivity and flashy effects…hence the name. You can do some seriously involving things but it comes with it’s faults as well. Here is a list of pros and cons for Flash

Flash pros

Interactivity
The ability to seriously involve a user is one of Flash‘s strengths. With 3d graphics and smooth transitions it can really keep a users attention.
Vector Artwork
Up until recently HTML/JavaScript couldn’t display/animate vector artwork. Flash was your only option if you wanted anything either than a graphic and text.
Animation
Any sort of animation Flash can handle like a pro. This makes complex transitions, and immersing displays far more feasible than HTML.
Packaged Up
With services like YouTube’s player you can have a full video player just by embedding it into your code.
No reload
Flash doesn’t need to reload the page after each request. Granted HTML can do this with the help of AJAX but it’s automatic for Flash.
Built in components
Flash offers a variety of different components that you can skin and use to your liking. Styling form components in HTML is possible, but more difficult than Flash.
Immersing experience
This is why most micro sites are done in Flash. It offers the user an experience not just a page view. It has the ability to get people excited about a product or a service.
Audio, video, upload
Media is generally handled better in Flash than HTML. Most players you see on the web are Flash based. Also multiple uploading is a nice feature that Flash offers.
Pixel Perfect
You can design the website to look exactly like the creative with little to no trouble because it looks the same in all browsers.
Fonts
You have a font on your machine…you can use it.
Games
Online games lend themselves to be done in Flash.

Flash cons

Requires plug-in
Flash requires the user to download a plug-in to view it. You don’t have the plug-in you don’t see the Flash.
SEO
Although SEO can be done in Flash, it’s a laborious task.
Accessibility
Flash has added some features to help with screen readers. This still doesn’t compare to HTML though.
Print Problems
There are a list of problems when trying to print from Flash.
Can get confusing
The overall Flash file can get confusing, especially when you are trying to work off someone’s file. Layers upon layers of code can really mess things up.
Bad testing tools
The testing tools within the Flash IDE suck. Plain and simple. So much so, that most people don’t code in Flash, and use other IDEs.
Loading times
Generally speaking, Flash files take longer to load. Since there is a lot more interactivity, this affects load times.

Conclusion

Given the pros and cons of each it becomes clear why there is such a debate. It really comes down to what you need done. If you want a Blog like website, you’re going to go with HTML. If you want more of a interactive site, go with Flash. In about 10 years JavaScript and HTML 5 might give Flash a run for its money, until then there is no real winner. Right now it’s best to use the strengths of each and use them together in harmony.

Did I miss some pros and cons? Let us know which you type of website you prefer.

Gaia Flash Framework: Speed up Development for All Flash Sites

Shawn — Wed, 27 May 2009 14:26:08 +0000

For all you flash developers out there this is a real treat. Gaia is a flash framework that can speed up development drastically for your all flash sites.

I can’t wait to try and use this in on a project. It gives you a simple way to handle the navigation, transitions between pages, preloading and deeplinking. Talk about a time saver. That’s half a website right there. Oh…did I mention that it also handles SEO. It uses an XHTML file that serves as both the data source and the embed page for each page in your site. The way the site is structured seems logical, and doesn’t seem to get in your way of building a great web site.

Here is a video that walks you through the framework : Gaia Screencast
Here is their website: Gaia Website
Here is the download page: Gaia Download

For those of you that have used this framework before, we would love to here your input on it.

10 Beautiful Flash Websites

Shawn — Tue, 26 May 2009 04:15:51 +0000

Here is a list of 10 beautiful flash website that will make you weep from their beauty. They all have a fantastic interface, and should be commended at how well they’ve been put together. Kudos to the developers and designers of the sites. Very impressive work.

Devirtuoso » Flash

How to Add an AddThis.com Component to Your Flash Site

Example

Download

The Theory

Creating The Flash

Load the Flash

Positioning the AddThis Component

Example

Download

HTML vs Flash Websites. Which is Better?

HTML

HTML pros

HTML cons

Flash

Flash pros

Flash cons

Conclusion

Gaia Flash Framework: Speed up Development for All Flash Sites

10 Beautiful Flash Websites

Toyota Prius

Nissan Good Decision

Umbro

Labuat

Diesel Fragrances

Nissan

Ark +

Paint With Ben

Puma Lift

GE – Ecomagination