Weber Design Labs » Featured http://www.weberdesignlabs.com/blog Open Source Thought Thu, 01 Jul 2010 19:49:36 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Weber Design Labs New Website Launch http://www.weberdesignlabs.com/blog/2010/06/weber-design-labs-new-website-launch/ http://www.weberdesignlabs.com/blog/2010/06/weber-design-labs-new-website-launch/#comments Thu, 17 Jun 2010 16:21:18 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=288 Weber Design Labs has launched their new site! It features 3D interfaces, lots of video, an Augmented Reality Business Card and so much more. Check it out at www.weberdesignlabs.com! Or just check out the website reel below and then check out the site.

19ced92369fb45d8b252ca8954864e8f

]]> http://www.weberdesignlabs.com/blog/2010/06/weber-design-labs-new-website-launch/feed/ 1 Top HTML5 + Javascript Demos http://www.weberdesignlabs.com/blog/2010/05/top-html5-javascript-demos/ http://www.weberdesignlabs.com/blog/2010/05/top-html5-javascript-demos/#comments Sat, 29 May 2010 15:55:01 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=274 HTML5 and Javascript are very powerful and could make the internet a lot more interactive and a lot more standardized. While Javascript is running faster and faster on browsers like Chrome and Firefox, its still got a ways to go to be as interactive as Flash. Check out some of the top HTML5 demos on the internet today.


Check out these 3 amazing demos by Satoshi Ueyama showing 3D objects and texturing on a 2D canvas. Beware that this requires a a fast Javascript engine on your browser. I recommend Google Chrome.



Side-scrolling game made in HTML5.



3D Engine with Javascript made by Kevin Roast.



Animation Done with HTML5 and Javascript.



Sketchpad made in HTML5 and Javascript.



SNES Emulator in HTML5 and Javascript.



Freeciv.net is an Open Source strategy game which can be played online against other players, or in single player mode against AI opponents.

]]> http://www.weberdesignlabs.com/blog/2010/05/top-html5-javascript-demos/feed/ 2 Flash on Android vs. HTML5 http://www.weberdesignlabs.com/blog/2010/05/flash-on-android-vs-html5/ http://www.weberdesignlabs.com/blog/2010/05/flash-on-android-vs-html5/#comments Sat, 29 May 2010 07:15:01 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=271 Mobile is becoming more and more important and with that how interactive our mobile experiences are becoming is also more and more important. There are many interactive technologies on the web, but none have come close yet to the wide-spread use of the powerful Flash. HTML5 is being constantly referred to as the Flash killer and while it might be a good replacement for video on the web in some circumstances, it comes up short in other areas and is generally at least several years behind Flash. HTML5 is new, but the technology that makes HTML5 interactive (JavaScript) is not new at all. Javascript is extremely powerful, but it is not meant for graphical animation, 3D and a lot of what Flash does naturally. HTML5 will have its use, but it is not yet a replacement for most of the uses for Flash. I have developed in Javascript and Flash and I for most uses I would develop rich interactive applications/interfaces in Flash over Javascript.

Here is Flash 10.1 running on Android:

As a note, this video is made by an Adobe Flash Platform Evangelist and Flash 10.1 is still in beta.

Here is another video that shows the speed of HTML5 and the speed of Flash. Flash generally is quicker in performance than HTML5.

An important part of the evolution of the mobile platform is a standard development language/environment that can reach across to many mobile devices. As Apple moves farther away from a standard mobile development language (Objective C) and Android uses Java for its applications, the one that can be deployed on all Android devices, Nokia, Blackberry, etc. is Flash. This allows a developer to take the same code written for the Android and use it on Nokia and Blackberry devices without too much modification, which means businesses can reach more people with less development cost/time. This is critical for mobile to move forward.

]]> http://www.weberdesignlabs.com/blog/2010/05/flash-on-android-vs-html5/feed/ 0 Online Video Player Standards http://www.weberdesignlabs.com/blog/2010/01/online-video-player-standards/ http://www.weberdesignlabs.com/blog/2010/01/online-video-player-standards/#comments Tue, 19 Jan 2010 21:11:54 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=258 Media is now common place to have on a site. There is usually an element of video to every professional site. It is important to make video players that allow the user to focus on the content and not on the controls. Keeping a clear standard of video controls helps the user to quickly grasp how to use your video player.

Here is some research that will allows us to find the most common controls and make sure that those controls are in the appropriate video players and that the user interaction with those controls is clear and understood.

Download Online Video Player Standards (1869) ]]> http://www.weberdesignlabs.com/blog/2010/01/online-video-player-standards/feed/ 0 Flash 10 Coverflow http://www.weberdesignlabs.com/blog/2009/12/flash-10-coverflow/ http://www.weberdesignlabs.com/blog/2009/12/flash-10-coverflow/#comments Thu, 17 Dec 2009 02:22:41 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=242 The last version of the coverflow was made several years ago and its still quite popular (over 700,000 downloads on just version 2). So I decided to make a new version, this new version takes advantage of the new Flash 10 3D capabilities, which is perfect for this particular use. It allows for the Flash to load faster (because its not using Papervision3D) and most important preform much faster. Now users can add a lot more items to the coverflow and still have very snappy performance.

Here are the benefits over the previous coverflow version:

  • Improved Preformance
  • Faster Load Time
  • Easy Modification through XML
  • AS3 Standardized Code
  • Easy Class Structure

And of course you still get many of the benefits of the last version, such as the XML Based (Images, Links and Titles).

I have recently updated the code to help people that are not so familiar with Flash, but still want to use the code. I have included a few flash vars, if they are not provided there are defaults in the code. Here are the flash vars:

flashvars.xmlPath = “xml/data.xml”;
flashvars.backgroundColor = “0×000000″;
flashvars.labelColor = “0xFFFFFF”

“xmlPath” is the path to the XML file.
“backgroundColor” is the color of the background.
“labelColor” is the color of the text label in the middle of the coverflow.

So please download it, play with it, make it better and post your code in the comments to help everyone out. Lets make this piece of code the best it can be!

View Demo

Download Flash 10 Coverflow (9030)

NOTE: I would not recommend trying to learn flash with this file. There are a lot of people asking how to change text color, if you are having these requests I would suggest going through some Lynda.com Flash tutorials to get you familiar with Flash or hiring a Flash developer to help you out.

Hope you enjoy and post additions you would like on the next version (I’m thinking of video handling).

]]> http://www.weberdesignlabs.com/blog/2009/12/flash-10-coverflow/feed/ 210 Flash Google Maps Store Locator http://www.weberdesignlabs.com/blog/2009/12/flash-google-maps-store-locator/ http://www.weberdesignlabs.com/blog/2009/12/flash-google-maps-store-locator/#comments Tue, 15 Dec 2009 07:27:18 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=244 Modern Habits feels it is important to give back to the community and encourage learning of new technologies. So we have provided an example which you are welcome to take and use wherever you want. This example is for Danny DeVito’s Limoncello (http://www.dannyslimoncello.com), which we have the pleasure of working for. This is to help people to find his excellent product. Its a store locator in Flash Actionscript 3 using the Google Maps API.

This example shows a map of the nation which allows the user to specify a general area and then sends them to the chosen state where it loads from an XML the locations and displays them in a nice little Lemon icon. If the user double clicks the Lemon icon it will ask for the user’s address and will calculate directions and display them on the right side of the screen. For demo purposes only California and Colorado are working.

You will need to get a Google Maps API key, which can be found at the URL below:
http://code.google.com/apis/maps/signup.html

View Demo

Download Flash Google Maps Store Locator (342)

]]> http://www.weberdesignlabs.com/blog/2009/12/flash-google-maps-store-locator/feed/ 1 Facebook Connect http://www.weberdesignlabs.com/blog/2009/12/facebook-connect/ http://www.weberdesignlabs.com/blog/2009/12/facebook-connect/#comments Fri, 11 Dec 2009 06:55:20 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=219 Almost every website has a goal of increasing participation and creating connections. Well that is what Facebook is all about. Facebook Connect lets users bring their identity and connections from Facebook to your website. Once they connect with our sites through Facebook Connect we can then bring in their name, photos, events, friends, connections, activity, distribution and much more. We can even use these user’s conenctions to publish our content to. Which basically means that whenever someone connects to us through Facebook connect we will most likely get another user due to publishing our content on their activity stream. This applies a viral nature to new sign ups that the internet has never seen before.

If you don’t think that tapping into this resource is important, please watch this video.

  • Facebook Connect increases commenting by 15%-20%
  • Facebook Connect increases registration by 15%

Facebook is a huge resource for companies now who want to allow their users to quickly engage with them and uses them as a publishing outlet. The implementation of this is not out of our reach and can give us lots of possibilities in our interactive experiences.

Example:

Prototype Experience

In this example Prototype (a console game) is using the user’s information from their Facebook through Facebook Connect to bring their information into a video intro that has their content. So they see their name, place they live during this video intro. This personalizes the video intro for the user and really speaks to the narrative of the game and experience. Watch the video or experience it yourself with your Facebook account.

Pros:

  • Increases engagement
  • Brings the users information to the site
  • Turns every user into a possible publishing outlet for viral marketing

Cons:

  • Some users may not like this method of connecting
  • Depends on Facebook
  • Fairly new, so there is a learning curve

Why Is It Important To Us:

  • We are constantly searching for the best way to connect to our users, this is a new and very successful way for users to connect to brands and engage them in a way we were not able to do
  • Gives us an opportunity of using our users as a viral marketing outlet, which not only brings more people to the site, but also shows the brand as up to date with what is going on in the social space.
]]> http://www.weberdesignlabs.com/blog/2009/12/facebook-connect/feed/ 0 Flash iPhone Apps http://www.weberdesignlabs.com/blog/2009/12/flash-iphone-apps/ http://www.weberdesignlabs.com/blog/2009/12/flash-iphone-apps/#comments Fri, 11 Dec 2009 02:50:51 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=215 Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3. These applications can be delivered to iPhone and iPod touch users through the Apple App Store.*

A public beta of Flash Professional CS5 with prerelease support for building applications for iPhone is planned for later this year.

Here are some videos that get us really excited about developing iphone applications in Flash:

Some obstacles are going to be:

  • Resource Management Is Now A Much Bigger Concern
  • iPhone Approval Process Is Going To Be Longer Because Of The Flood Of Flash Applications
  • UI Considerations are much more important as people are used to a specific UI and Flash will be changing that
]]> http://www.weberdesignlabs.com/blog/2009/12/flash-iphone-apps/feed/ 0 Multitouch Support In Flash http://www.weberdesignlabs.com/blog/2009/12/multitouch-support-in-flash/ http://www.weberdesignlabs.com/blog/2009/12/multitouch-support-in-flash/#comments Fri, 11 Dec 2009 02:34:50 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=207 Adobe AIR 2 provides end users with exceptional application experiences while giving developers the easiest and most powerful way to develop desktop applications across multiple platforms (Mac, Windows, and Linux).

AIR 2 builds on the success of AIR 1 by giving developers new capabilities, and even tighter integration with the desktop. Some new features of AIR 2 include:
<div>
<ul>
<li>Support for the detection of mass storage devices.</li>
<li>Advanced networking capabilities like secure sockets, UDP support, and the ability to listen on sockets.</li>
<li>Support for native code integration.</li>
<li>The ability to open a file with its default application.</li>
<li>Multi-touch and gesture support.</li>
<li>New APIs for access to raw microphone data.</li>
<li>Webkit update with HTML5/CSS3 support.</li>
<li>Global error handling.</li>
<li>Improved cross-platform printing</li>
<li>Improved security and support for enterprise and government standards.</li>
</ul>
</div>
<div>Here is a demo video of Multitouch in action:</div>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”425″ height=”344″ 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/va33sU-_Bzk&amp;hl=en_US&amp;fs=1&amp;” /><param name=”allowfullscreen” value=”true” /><embed type=”application/x-shockwave-flash” width=”425″ height=”344″ src=”http://www.youtube.com/v/va33sU-_Bzk&amp;hl=en_US&amp;fs=1&amp;” allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

<br/>
<object width=”425″ height=”256″><param name=”movie” value=”http://tv.adobe.com/assets/swf/player.swf”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><param name=”FlashVars” value=”fileID=2475&context=162&embeded=true&environment=production”></param><embed src=”http://tv.adobe.com/assets/swf/player.swf” flashvars=”fileID=2475&context=162&embeded=true&environment=production” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”256″></embed></object>

You can read more here:

http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html

]]> http://www.weberdesignlabs.com/blog/2009/12/multitouch-support-in-flash/feed/ 0 Sound Visualization in Flash http://www.weberdesignlabs.com/blog/2009/08/free-visualization-with-papervision3d-source/ http://www.weberdesignlabs.com/blog/2009/08/free-visualization-with-papervision3d-source/#comments Fri, 21 Aug 2009 23:26:59 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=168 So I wanted to make a website for a electronic music group I love called JUSTICE. I offered them a free website with all the bells and whistles because their music has inspired me and helped me through many late nights. Sadly, their record label turned me down for their MySpace page.

So I thought I would release the source code for my project to everyone, so hopefully some good will come out of my hour or so worth of work. This is one of the more sloppy pieces of code I have done, so please excuse that.

Watch the demo of the site:

Download Download Visualization Source (530) ]]> http://www.weberdesignlabs.com/blog/2009/08/free-visualization-with-papervision3d-source/feed/ 0 AS3 Video Coverflow http://www.weberdesignlabs.com/blog/2009/06/as3-video-coverflow/ http://www.weberdesignlabs.com/blog/2009/06/as3-video-coverflow/#comments Sat, 06 Jun 2009 20:31:37 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=131 So everyone likes the coverflow effect and everyone is using video these days.
I wanted to do this effect in AS3 and thought it would be nice to release it to everyone.
Its not polished or paticularly stunning (in fact its pretty plain), but its just an example of how to do it and some good code to get you started in the right direction. I don’t recommend this for people who are not familiar with flash or are beginners, just a caution – but its a great opportunity to learn!

View Demo

Download Video Coverflow AS3 (1882) ]]> http://www.weberdesignlabs.com/blog/2009/06/as3-video-coverflow/feed/ 12 Flash iTunes Cover Flow – Version 2 http://www.weberdesignlabs.com/blog/2007/09/flash-itunes-cover-flow-version-2/ http://www.weberdesignlabs.com/blog/2007/09/flash-itunes-cover-flow-version-2/#comments Tue, 25 Sep 2007 19:47:02 +0000 Stephen http://www.weberdesignlabs.com/blog/?p=11 So, people have been commenting a lot on the iTunes Cover Flow. Mostly they are good comments, but there were a few suggestions. I made one suggestion that seemed to make sense and was very easy to implement.

New Feature:

-Link based on XML for the Artist and the Album. If no link is given then the button is disabled.

-Link is placed on the actual text of the Artist and Album name.

Have fun and make it better.

Coverflow

UPDATE: NEW Flash 10 Coverflow. It is recommended that you use this new version as it will preform better.


Example:
Example

Source Files:
Download Flash Coverflow AS2 - CS3 (763637)
Download Flash Coverflow AS2 - Flash 8 (569566)

Please send me your improvements or modifications and I would be happy to put them up to help everyone else and I will attribute it to you and give you a link.
Remember this code is Open Source so please use, improve and share.
This code is under the MIT License.

Note: If the images are not showing up for you and you are pulling the images from a different server than the flash piece is being served from than you need to use a crossdomain.xml file to allow the flash piece to read from the remote server. This is a flash security feature and the only alternative to this is using a proxy page (as far as I am aware of). Read More

If you are experiencing a flickering on your images make sure to use the latest version.

Transparent PNG images are now supported.

If you have any questions don’t hesitate to post because there are a lot of nice people who will love to help.
Good luck!

-Stephen

]]> http://www.weberdesignlabs.com/blog/2007/09/flash-itunes-cover-flow-version-2/feed/ 1459