Devirtuoso » Flash http://www.devirtuoso.com Web Development Wickedness Tue, 24 Jan 2012 17:16:01 +0000 en hourly 1 http://wordpress.org/?v=3.3 Smooth Scrolling in jQuery http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/ http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/#comments Wed, 30 Nov 2011 16:04:40 +0000 Shawn http://www.devirtuoso.com/?p=1434 Single page websites seem to be all the rage now a days. Scrolling effects seem to be in high demand. So in this post I’ll show you how to create a smooth scrolling page with jQuery.

What are we building?

We’ll be creating our own fansy smansy website. The nav will sit fixed at the top. Once we click on a nav item it will scroll down to the section. Best of all, if JavaScript is shut off, it will degrade gracefull and just jump down to the section.

Download Example

The HTML : Content

First thing we need is some content to scroll. This can be anything as long as their is enough of it to scroll….otherwise this tutorial is pointless ;) At the top of each section we’ll need to specify an id (we’ll be using this for our navigation). It can be on anything. Really just put the id on what you want to appear at the top of the page. For this example I put it on the header tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
    <div class="section">
        <h1 id="html">HTML</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="css">CSS</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="php">PHP</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="javascript">JavaScript</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="jquery">jQuery</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
</div>

The HTML : Navigation

Now that we know what the ids are for each section we can go ahead and use those to create a navigation.

1
2
3
4
5
6
7
<div class="navigation">
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#php">PHP</a>
    <a href="#javascript">JavaScript</a>
    <a href="#jquery">jQuery</a>
</div>

Now just having this when we click on the navigation it should take us down to our desired location.

The CSS

Nothing to Crazy here. The most important part is the navigation. The position:fixed attribute keeps it at the top. And the margin top on the section class just make sure the content isn’t below the navigation when first loading the page.

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
28
29
30
<style>

/* Made the container thin
so I didn't have to come up
with too much content */
.container{
    width:300px;
    margin:0 auto;
   
}
/* So the sections don't fall
underneath the navigation */
.section{
    margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
   underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
    position: fixed;
    background:white;
    padding:20px 20px;
    width:100%;
    margin-top:0px;
    top:0px;
}
</style>

The jQuery (aka The Magic behind smooth scrolling)

The jQuery isn’t overly complicated. We’re just going to use the animate function to a specific location over time. Now we get that location by referencing the item that has the id that the href of our navigation points to. So if our navigation points to “#css”, then we’ll get the position of the item that has the id of “css”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
$(document).ready(function() {

    // Click event for any anchor tag that's href starts with #
    $('a[href^="#"]').click(function(event) {

        // The id of the section we want to go to.
        var id = $(this).attr("href");

        // An offset to push the content down from the top.
        var offset = 60;

        // Our scroll target : the top position of the
        // section that has the id referenced by our href.
        var target = $(id).offset().top - offset;

        // The magic...smooth scrollin' goodness.
        $('html, body').animate({scrollTop:target}, 500);

        //prevent the page from jumping down to our section.
        event.preventDefault();
    });
});
</script>

Putting it all together

Here is everything all in one.

Enjoy!

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE HTML>
<html>
<head>

<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style>

/* Made the container thin
so I didn't have to come up
with too much content */
.container{
    width:300px;
    margin:0 auto;
   
}
/* So the sections don't fall
underneath the navigation */
.section{
    margin-top:60px;
}
/*
1. Keeps the position at the top of the page.
2. Adds a background so you can't see text
   underneath the nav.
3. Adds a little padding for breathing room.
*/
.navigation{
    position: fixed;
    background:white;
    padding:20px 20px;
    width:100%;
    margin-top:0px;
    top:0px;
}
</style>
</head>

<body>
<div class="container">
    <div class="navigation">
        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#php">PHP</a>
        <a href="#javascript">JavaScript</a>
        <a href="#jquery">jQuery</a>
    </div>
    <div class="section">
        <h1 id="html">HTML</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="css">CSS</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="php">PHP</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="javascript">JavaScript</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
    <div class="section">
        <h1 id="jquery">jQuery</h1>
        <p><!--Your HTML Content Goes HERE --></p>
    </div>
</div>

<script>
$(document).ready(function() {

    // Click event for any anchor tag that's href starts with #
    $('a[href^="#"]').click(function(event) {

        // The id of the section we want to go to.
        var id = $(this).attr("href");

        // An offset to push the content down from the top.
        var offset = 60;

        // Our scroll target : the top position of the
        // section that has the id referenced by our href.
        var target = $(id).offset().top - offset;

        // The magic...smooth scrollin' goodness.
        $('html, body').animate({scrollTop:target}, 500);

        //prevent the page from jumping down to our section.
        event.preventDefault();
    });
});
</script>

</body>
</html>
Download Example
]]> http://www.devirtuoso.com/2011/11/smooth-scrolling-in-jquery/feed/ 0 How to Add an AddThis.com Component to Your Flash Site http://www.devirtuoso.com/2009/07/how-to-add-an-addthis-com-component-to-your-flash-site/ http://www.devirtuoso.com/2009/07/how-to-add-an-addthis-com-component-to-your-flash-site/#comments Thu, 02 Jul 2009 08:13:30 +0000 Shawn http://www.devirtuoso.com/?p=606 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.

flash-screenshot

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>
   
<!-- Embed Flash using swfobject. (Can use any method of embeding flash here) -->
<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">
    <!-- Flash Will Go Here -->
</div>

<div id="addThisBtn">
    <!-- Add Script Given By AddThis.com -->
</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>

<!-- Load JQuery -->
<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

]]> http://www.devirtuoso.com/2009/07/how-to-add-an-addthis-com-component-to-your-flash-site/feed/ 4 HTML vs Flash Websites. Which is Better? http://www.devirtuoso.com/2009/05/html-vs-flash-websites-which-is-better/ http://www.devirtuoso.com/2009/05/html-vs-flash-websites-which-is-better/#comments Fri, 29 May 2009 09:32:29 +0000 Shawn http://www.devirtuoso.com/?p=346 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.

]]> http://www.devirtuoso.com/2009/05/html-vs-flash-websites-which-is-better/feed/ 3 Gaia Flash Framework: Speed up Development for All Flash Sites http://www.devirtuoso.com/2009/05/gaia-flash-framework-speed-up-development-for-all-flash-sites/ http://www.devirtuoso.com/2009/05/gaia-flash-framework-speed-up-development-for-all-flash-sites/#comments Wed, 27 May 2009 14:26:08 +0000 Shawn http://www.devirtuoso.com/?p=318 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.

gaia-flash-framework
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.

]]> http://www.devirtuoso.com/2009/05/gaia-flash-framework-speed-up-development-for-all-flash-sites/feed/ 1 10 Beautiful Flash Websites http://www.devirtuoso.com/2009/05/10-beautiful-flash-websites/ http://www.devirtuoso.com/2009/05/10-beautiful-flash-websites/#comments Tue, 26 May 2009 04:15:51 +0000 Shawn http://www.devirtuoso.com/?p=290 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.

Toyota Prius

toyota-prius

 

Nissan Good Decision

Flash Website - Nissan Good Decision

 

Umbro

Flash Website - Umbro

 

Labuat

Flash Website - Labuat

 

Diesel Fragrances

Flash Website - Diesel Fragrances

 

Nissan

Flash Website - Nissan

 

Ark +

Flash Website - Ark +

 

Paint With Ben

Flash Website - Paint With Ben

 

Puma Lift

Flash Website - Puma Lift

 

GE – Ecomagination

Flash Website - GE Ecomagination

]]> http://www.devirtuoso.com/2009/05/10-beautiful-flash-websites/feed/ 1