CAP119_tut_website

74 Project three Update your skills

Matt BoothFrom print to new media, freelance designer and Flash developer Booth has been in the design industry for 14 years; in the last two as a freelancer he’s been searching for new ways of extending his contacts list.www.fl ashtemple.com

Skills Learn how to integrate Flickr and Twitter into Flash Set up an e-commerce site Create an email campaign

Computer Arts Projects _January 2009 www.computerarts.co.uk

Adobe Flash

Get yourself noticed

Matt Booth reveals how adding simple online applications on your portfolio site can work hard to boost your profi le Creating an online portfolio is just the start of getting yourself noticed. Your site is competing against other freelancers in a battle for potential clients, so it must eye-catching as well as super functional, allowing your work, skills and contact details to be seen quickly. Building your contact list isn’t rocket science: from emailing designers and agencies you want to work for, to joining networking events in your area (or creating your own), to following the right people on Twitter, there are many ways to generate interest. In this project we look at essential applications that our fi ctional designer Mark Bennett is adding to his site. As well as using Flickr to display your latest photos, we’ll insert a Twitter feed that will link to your blog, and create a link to an e-commerce site, where you can generate a buzz and make some cash by selling t-shirts and prints of your work. Finally, we’ll add a newsletter sign-up option. Once all this is in place, you need to make the technologies work for you. Build your contact list in Flickr, follow the right people on Twitter, add your folio to Behance Network or Carbonmade and build your Linked-in following. You’ll need knowledge of basic AS3 ActionScript, online design and Photoshop.

www.computerarts.co.ukcomputerarts.co.uk

On the discYou’ll fi nd the fi les you need for this project on your cover disc, in the Resources folder

CAP119.tut_website 74 8/12/08 11:55:47 am

Get yourself noticed 75

01 This is a simple one-page Flash site, split into two vertically scrollable areas. The left side is for your details, newsletter sign-up, Twitter and Flickr feeds, downloads, contact details and recent news, while on the right, potential clients can see your work and get an idea of your skills. The contact area is important; here you can link to all the ways potential clients can get in touch with you. The news area is also valuable, as not everyone will read your blog; it should display recent awards or new projects.

02 Your ‘about me’ copy should be prominent and to the point, covering your key skills, experience and big clients you’ve worked for (it’s good to get a copywriter’s help). There’s also a newsletter sign-up link, to collect a database of interested people, and a clear link to the blog – essential for displaying important work and latest news.

03 Twitter may seem a little pointless at fi rst, and possibly a waste of time; however, it’s an invaluable tool for freelancers. Agencies and designers alike use the site for everything from recruitment to solving problems they’re facing. I sourced a week-long contract from an agency in Sydney because I replied to their “twitter” asking for designer folios. Twitter also helps you hear about upcoming social and professional events – just make sure you are following the right people.

04 Flickr is also an important resource, and can help you build up your list of contacts in a similar way to Twitter. It allows you to post your work directly to the site, using links to display it from your main site. This means all your work is one place, and that more people will see your portfolio. It can also be used to show your latest photography in the form of a small Flickr feed. I’ll show you how to do this in the following steps.

www.computerarts.co.uk January 2009_ Computer Arts Projects




Flickr Flickr is a great way of making contacts, displaying your work and showing other aspects of your creative talent. Lo-fi photography has become a hobby of mine, so I keep my more creative photographs separate from my family holiday snaps by having two separate Flickr accounts.

05 The idea behind this file script is that you are requesting a set of results from Flickr in an XML format based on your personal Flickr details. The results are then parsed, as you would any other XML file. Next loop through the resulting XML, drop a thumbnail from the library onto the stage, and add to that a preloader from the library, which displays the percentage loaded of each image.

06 For this file to work with your Flickr images, you will need both an API Key and your NSID. The API Key can be obtained from www.flickr.com/services, while your NSID (here it is referred to as your User ID) can be found here: www.flickr.com/services/api/explore/?method=flickr.people.getInfo. Then open Flickr_viewer.as on your disc (found in Resources>Website tut> Files>Com>Flickr), and insert your API and NSID values on lines 14 and 15.

07 You can change the number of images you want to display by changing the imageQty value. The gap between each image can be changed by altering the imageGap value, and the Y position of each image by altering the imageYpos value. The path to the image (flickrImage) is built from the elements on each line in the resulting XML. As we want to view the thumbnail version of the images, add _s.jpg to the end of the path. Once each image is loaded and displayed, a link is added to the thumbnail that, when clicked, takes you directly to the correct page within Flickr.

08 Once your latest Flickr images are displayed correctly, you can play around with the settings or add your own. You can choose to display them in columns instead of in a line, animate the way they are displayed, or use a timer that refreshes your images every 30 seconds.


Newsletters Offering the opportunity to sign up to a newsletter is a great way to build your contact list. It’s also a useful way to remind people you are there and what you’ve done recently, as those all-important people may not check your blog as much as you would like. Just don’t over do it: one a month is more than enough, and keep it concise.



12 Now all you need to do is open up TwitterBadge.as (on your disc in Resources>Website tut>Files>com>Twitter), and change the username variable to your Twitter username. Once it’s all working nicely, you can adapt the script to show more than one tweet, and style it as you see fit.

11 Open up the Twitter.as file located on your disc in Resources>Website tut>Files>Com>Twitter/api, and change the YOUR_PHP_ADDRESS variable to the address of your uploaded proxy.php file.

10 I found this great example of a Twitter feed for Flash on www.storypixel.com by Sam Wilson. To get up and running, you need to upload the proxy.php file to your PHP server. Using a browser, go to the installed proxy.php address. If you see a blank screen then you’re good to go; if there’s an error, chances are it’s not a PHP-friendly server. You will need to upload the crossdomain.xml file if you are running it from a different server.

09 Twitter is an invaluable tool for freelancers. As well as potential employment opportunities, you could also use it to announce new work, receive feedback from fellow designers, or find the answer to a technical problem that you’ve been wracking your brains over. This all relies on you being followed, though, so get involved: find out who other people are following, reply to people’s tweets – let people know you are there.




13 Another great way to create a buzz about your design work is to sell it. Whether your designs are on t-shirts or limited edition prints, if it’s good, people will buy it. It all helps in building your profile, and it’s another avenue for revenue. In this example, we are going to use www.bigcartel.com. It’s a customisable, cheap (free if you go for the lowest of the three packages), and easy-to-use online store, and a great way of getting gear up online quickly.

15 Now your store is designed and in keeping with your brand, you can start to add your products. You are given categories such as posters, CDs and tees, but you can also edit these to suit your product. Add your product title, a description, the price and shipping costs. The amount of products you can add is down to which package you choose. It may be best to use the free package, allowing up to five products, until the store becomes established.

16 Your store is designed and your products in. You should return regularly to check on the visitor stats, orders and those referring you. Time to let everyone know it’s there – as well as Twitter and your blog, you can do so with a newsletter.

14 Once you have created an account you can get straight into designing your store. You could choose to keep things simple and change the colours of the backgrounds, text and links, for instance, or if you have CSS knowledge you could edit the style.css. The main area for you to design is the header image, which needs to be 740px wide. It can be as deep as you like.




17 It’s always good to bring people up-to-date and remind them you’re out there. You could send out a reminder email, or add a newsletter sign-up option to your site and blog. Once you have a list of people who want to receive your newsletter, it’s really easy to set one up. In this example, we are going to use www.mailbuild.com.

19 You can design and build your own templates and import them into your Template Gallery for later use, or you can choose a predefi ned template, using it as it is or modifying it. Once you have a design template you are happy with, you can add your content.

20 Now the email is designed and full of content, it’s ready to go. Defi ne your recipients from the list collected on your website and blog; you could split them into groups to really hone the campaign. Now you need to set a schedule and delivery date for your email. Once it has been sent, you will be notifi ed and you can track its success.

18 When you’ve created an account, start setting up and designing your email campaigns. Set up your newsletter details, including Campaign Subject (this appears as the recipient’s subject), who it’s from, and the Reply-to address so people can get in touch.


CAP119_tut_website

Documents

Transcript of CAP119_tut_website