6 03, 2012

Free Social Media Vector Icon Set (including pinterest and google plus!)

By | 2016-11-21T17:21:13+00:00 March 6th, 2012|Categories: Creative Design|Tags: , , , , , , , , , , |

First I would like to say I am a Web Developer here at Beacon so Design is not my specialty. However, I’ve gradually been getting annoyed by the round corners that are on most social icons. I think there is always the ‘too much’ factor and for me I’ve been given too much round icons. So the only thing that looks fresh and appealing to me anymore is square. I’ve looked at other free icon sets out there and still have yet to find a basic and simple square set. So I decided to give it a shot :).

All these icons are vectors I created within Adobe Fireworks CS4. For most of these I used the method mentioned in this post (http://trentrichardson.com/2009/04/11/convert-bitmaps-to-vectors-in-fireworks/) and others I copied the company provided vector into fireworks and modified from there. Feel free to download and do what you’d like with them. I have them all within one file for ease of creating/posting but again each is its own vector so you can copy it into another document or slice them out from the file.

Download Here

This Vector set includes:

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • WordPress
  • Google +1
  • RSS
  • SlideShare
  • Goodreads
  • GitHub
  • Forrst
  • Amazon
  • Blogger
  • YouTube
  • Dribbble
  • Skype
  • Vimeo
  • Delicious
  • Technorati
  • Last.fm
  • StumbleUpon
  • Yahoo!
  • MySpace
  • Foursquare
  • Flickr
  • Tumblr
  • Meetup
14 10, 2010

Slick Pop-up Video Player using GreyBox & Flowplayer

By | 2016-11-21T17:56:35+00:00 October 14th, 2010|Categories: Web Development|Tags: , , , , , , , |

Both GreyBox and Flowplayer are free third-party resources for pop-ups windows and online video, respectively.  Combining the two makes a great video player that is easy to maintain and design. Download the source files:

Both will be packaged in ZIP files.  Unpack them and place their contents into their respective directories as shown below:

You will also need to add a folder called ‘videos’ unless you choose to deviate from this tutorial.  Your index file will be a page with the links to the video.  First, open your index file or whatever page you are working with that will display link to the pop-up videos.    These lines of code are required in the <head> tag to get GreyBox to work:

Then, within the body of your document, set up links or image links using this format or similar format found on the GreyBox useage page:

You can set your own title up here or your own popup window size.  All of your anchor tags will refer to the document specified in the ‘href’ attribute, which we will create next.  This prevents us from making a new HTML file for every video you may have on your link page.   Create an HTML file in the same directory as your video links page (index.html in this example) and name it ‘player.html’.  This page will dynamically (using JavaScript) to serve the video based on the filename provided in the links page anchor tag. These lines are needed to get the Flowplayer working within the GreyBox popup:

The dynamic page allows you to just modify your anchor tags ‘href’ attribute in the file that calls the player page.   This page can also be written in ASPX or PHP pages to accomodate your site.  If this is the case, the JavaScript can be replaced with code to get the filename variable from the URL. Your directory should now have a setup like the following:

The index page will look something like this in a browser:

And once the link is clicked, you should get a pop-up player that looks like this: