Scion Juice Contest Entry

By Shoreline Studio | April 7, 2009

This contest is hosted by scion and cut&paste. The prize is 5k and so far I’ve submitted these three designs.

Version 1

View Entry

Version 2

View Entry

Version 3

View Entry

What do you think? Which one do you like best?

Posted in Communication, Inspiration, Internet, Web Design | Tagged , , , , , | 1 Comment

The Infinite Scrolling Menu

By Shoreline Studio | February 2, 2009

Using inspiration from two Kirupa tutorials, “Create the Infinite Menu” and “Adding Thumbnails” I have decided to post a tutorial on how to create an infinite scrolling menu that pauses on rollover without the weird stuttering.


Steps to Creating the Infinite Scrolling Menu

  1. Download the partial source first here.
  2. Open the source provided. There is nothing on the stage yet, all of the assets are in the library. If your library is not already open, open it now (Ctrl + L).
  3. You will see a movie clip named, menu. This movie clip contains the buttons and is where you can add your text, images, etc. notice that the registration point of this clip is on its left end, which is very important.
  4. In order to make the clip look like it is continually scrolling/repeating on the stage you will need two instances of the menu movie clip.
  5. Drag and drop the menu movie clip onto the stage. Position them with the Properties Panel, the first at X:0 / Y:100 and the second at X:800 / Y:100 (the clip is 800 pixels wide and the registration mark is 100 pixels from the top of the stage). Now select both clips, and hit F8 to turn them into 1 clip. Be sure to put the registration point of this new clip in the top left. Name this movie clip, scrolling_menu and give it an instance name of scrolling_mc.

    Tutorial - Screen 1

    Tutorial - Screen 2

  6. To make the hit areas, create a new layer and call it, hit area, now drag the hit_area movie clip on to the stage twice. You will need to align one to the far left of the stage and another to the far right of the stage (not the movie clip). The hit_area movie clip that you placed on to the left of the stage should have an instance name of hit_left while the right should have an instance name of hit_right. Now that you have the hit areas on the stage you will want to make them invisible by setting their alpha to 0 (zero).


    Tutorial - Screen 3
    Tutorial - Screen 4
  7. Now to make the menu scroll! Make a new layer and call it actions. Open the Actions panel (F9) and enter this code:


    this.createEmptyMovieClip(”scroller”, 1000);
    scroll_speed = 5;
    scroller.onEnterFrame = function() {
    if ((_root._ymouse>=scrolling_mc._y) && (_root._ymouse<=scrolling_mc._y+scrolling_mc._height)) {
    if ((_root._xmouse>=(hit_right._x-100)) && (scrolling_mc.hitTest(hit_right))) {
    scrolling_mc._x -= scroll_speed;
    } else if ((_root._xmouse<=(hit_left._x+100)) && (scrolling_mc.hitTest(hit_left))) {
    scrolling_mc._x += scroll_speed;
    }
    } else {
    delete scroller;
    }
    };


  8. Also, you can always change the speed, mine is set at 5, but you can make it faster or slower if you want. Now, if you test your movie you will notice it is scrolling but not repeating when you scroll to the left. That is because you need to add a litt more code. Select your movie clip, scrolling_mc and open the Actions panel for the movie clip (F9). Now enter this code:


    onClipEvent (enterFrame)
    {

    if (_x > 0) _x=-800;
    if (_x < -800) _x=0;

    }

  9. Now test your movie and scroll to the left and to the right, you will notice that no matter which way you move you mouse and no matter how long you go in one direction your menu will continue to scroll and repeat!

You can download the final source here.

Posted in Flash, Help, Internet, Tools, Tutorials | Tagged , , , , | Leave a comment

15 Helpful Business Tools

By Shoreline Studio | January 22, 2009

Need a site to help you manage your projects? Need a way to remotely access someone’s computer? Or just need a better tool to help you organize your notes… wll here is a compiled list (in no particular order) containing 15 helpful Web sites and business tools that will save you time, work, and money.

  1. LogMeIn - LogMeIn provides organizations and individuals with secure, easy-to-use and cost effective solutions for remotely supporting, connecting and accessing digital information, applications and Internet-enabled devices.
  2. Basecamp - is a web-based tool that lets you manage and track projects (or simply ideas) and quickly create client/project extranets.
  3. Skype - With Skype’s free software – by the way, it works seamlessly with your internet connection – you can chat away with free Skype-to-Skype calls and never worry about cost, time or distance.
  4. Remember The Milk - Online to do list and task management.
  5. YouSendIt - The secure, cost-effective and easy-to-use YouSendIt services are ideal for anyone with the need to send, receive and track digital content.
  6. DimDim - Free Web Meeting, Free Web Conferencing, Meetup, Open Source, Net Meeting, eLearning, web conference, Unified Collaboration, Online Meetings, Online Training, Free Screen Sharing, collaboration, live meeting.
  7. Protonotes - HTML prototyping collaboration tool.
  8. Highrise - Contact Manager, Web Based CRM, Address Book for Small Business.
  9. EtherPad - Realtime Collaborative Text Editing.
  10. Pandora - Had to add this because it’s the best Internet radio!
  11. Harvest - Simple online time tracking, timesheet and reporting software.
  12. Backpack - Intranet, Group Calendar, Small Business Organize.
  13. Campfire - Real-time group chat for business. It’s like instant messaging, but optimized for groups. Especially great for remote teams.
  14. WikiPad - A way to keep your notes organized electronically. You can actually manage to be almost completely paperless with the use of this innovative and some-what “glorified” web-based note pad.
  15. BionicBooks - Free accounting software for startup or small business owners. BionicBooks helps you maintain the company accounts and track costs.
Posted in Business, Communication, Help, Internet, Management, Tools, Web Design | Tagged , , , , , | Leave a comment

TweetSuite Button Fix

By Shoreline Studio | January 12, 2009

If anyone has noticed once you have installed the TweetSuite plugin in the configuration settings you can either enable or disable the Tweet This button. Unfortunately I still haven’t figured out how to move this button from the top of the post to somewhere else, but I did manage to fix the spacing issue between that button and the copy in the post.


This is how the button looks without the fix:

TweetSuite

This is how it looks now:

TweetSuite

To fix the spacing issue go to the plugins section and edit the TweetSuite plugin code (Warning: Making changes to active plugins is not recommended. If your changes cause a fatal error, the plugin will be automatically deactivated).

In the source code you will find a code snippet like this (click to enlarge):

Plugin Code

All you need to do is add a semi-colon and change the amount of pixels you want in the margin, like this (click to enlarge):

Plugin Code

Posted in Blogs, Twitter, Web Design | Tagged , , , | Leave a comment

Inspirational Sites

By Shoreline Studio | January 9, 2009

As a Web designer/developer I am expected to be in the know and be up-to-date with everything that is Web. So I do a lot of searching on the Web to find new inspirations, I sign-up for newsletters, and find new tutorials to do so that I can be more efficient in the programs I use on a daily basis. While doing this I have accumulated a ridiculous amount of bookmarks… I actually have them categorized! There are so many great sites on the Web that are both inspirational and helpful and I just had to share!

Inspirational

Newsletters

Tutorials

Blogs

Posted in Blogs, Email, Inspiration, Tutorials, Web Design | Tagged , , , , | Leave a comment

Favorite Firefox Add-ons

By Shoreline Studio | January 9, 2009

As a web designer the add-ons that Firefox offers are extremely useful because I can use one browser to tidy up my XHTML, validate my css, and even view my site as Internet Explorer! Here are my favorite add-ons:

Capture Fox Firefox Add-on

You can capture your screen and record your voice to make screencasts (tutorials, e-lessons, etc.). Download here

Fireshot

FireShot is a Firefox extension that creates screenshots of web pages.
Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.
It’s possible to choose whether you want to capture entire web page or take screenshot of only visible part of the web page. Download here

Sothink Web Video Downloader

A simple, clean and easy-to-use FREE Firefox extension for video download and Flash download. Supports Windows/Mac/Linux operating systems and the latest Mozilla Firefox 3. Download here

FireFTP Firefox Add-on

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. Download here

DownThemAll! Firefox Add-on

The first and only download manager/accelerator built inside Firefox! Download here

WordPress Helper Firefox Add-on

The Firefox extension Wordpress Helper helps you working with Wordpress by providing useful help and tools. The extension eases the fast and simple access to develop-relevant pages of the Wordpress Codex. So you always have all the necessary help at your fingertips. It’s also possible to search after strings of text that is currently marked. Furthermore it’s possible to easily switch to Wordpress backend of current site. More than that, a small Icon indicates wether the currently displayed website makes use of WordPress. Download here

MeasureIt Firefox Add-on

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels. Download here

Colorzilla Firefox Add-on

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. Download here

Web Developer Firefox Add-on

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux. Download here

View formatted source Firefox Add-on

Displays formatted and color-coded source and optional CSS information for each element. You can see exactly which CSS rules match for an element. The rules are displayed including file name and line number. The topmost element is that with the highest priority. Download here

Firebug Firefox Add-on

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page… Download here

Pixel Perfect Firefox Add-on

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML. Download here

Link Checker Firefox Add-on

Check the validity of links on any webpage. Download here

Window Resizer Firefox Add-on

Resize your browser to various standard resolution sizes. Download here

IE View Firefox Add-on

Lets you load pages in IE with a single right-click, or mark certain sites to *always* load in IE. Download here

OperaView Firefox Add-on

Open pages in Opera from Firefox and Mozilla context menus. Very usefull for web developers. Download here

Dummy Lipsum

Generate “Lorem Ipsum” dummy text (from http://www.lipsum.com).  Download here

Google Toolbar for Firefox

View the Google pagerank of web sites, view backlinks, as well as access to all of Google’s services including, gmail, calendar, etc.Download here

StumbleUpon Firefox Add-on

StumbleUpon discovers web sites based on your interests, learns what you like and brings you more. Download here

Twitbin Firefox Add-on

Creates a sidebar on your firefox browser to allow you to communicate with twitter.com. Send and receive twitter messages from anywhere on the web. Download here

Posted in Web Design | Tagged , , | Leave a comment