PART #2:

With ALL THE BASE Shapes created its time to start combining them to form more complex shapes Using mainly the Pathfinder Palette.

starting point:

Ending point:

Step 1:

Isolate the letters and plan the over laps; this can be tricky, as done in the wrong order you can end up combing or trimming unintended shapes. Luckily with ‘undo’ you can go back and or fix later with some more pathfider work or using the scissor tool to dissect some shapes again.

Isolated the main the body of the R and the two extensions that connect to the R body.
The top extension the comes out of the left top arm pit of the R; Since the extension needs to connect to the R and have it s chute  pass behind it, I selected both pieces and Trimmed them to remove the overlapping area of the extension. Because the resulting shapes all share a border I couldnt use the Combine function on the pathfinder so I used the scissor  tool to snip both the extension end and the arm pit. Deleting the end of the extension and separating the Arm pit points, i then selected the corresponding open points and joined them.

Fill turned of you can see no overlapping outlines.

Similar process to get the Left foot of the R and its kick extension squared away. It also involved some negotiating and trimming its over lap with the Rs main body.

The completed R with only the top left extension un-trimmed. Added the negitave space of the R creating a Compound path so the shape will fill keep the negative space empty.

Close too finished base letters, with top left extension and A sliced un-Trimmed, also the bottom Left leg of the H is yet unconnected to the heart. And the negative spaces in the heat of the T and the A need to be added.

When i first started using illustrator I went about painstakingly trying to trace pretty complex images, not concerned with Illustrators most powerful feature, which is to create complexity by building from simplicity. Just like books aimed at teaching you how to draw illustrator is great when used to block and refine. Towards this end illustrator has an awesome set of drawing tools to help build generic shapes that can be combined with another tool (the PathFinder Tool; more about this one later)

Resources:
if you’re not familiar with the pen tool check out these links: http://school.tatoland.com/illustrator/aipentool.html & http://vector.tutsplus.com/tools-tips/illustrators-pen-tool-the-comprehensive-guide/

STEP #1:

Scanned Drawing, opened in Illustrator. I set the transparency to 20% to help differentiate the vector shaped from the scanned sketch. I always set my scan on its own layer and LOCK the layer so it wont accidentally get moved. I have accidentally moved a scan before and continued drawing with old layers turned off and didn’t realize the new lines were shifted until sometime later, it was a bit of a pain to get them re-registered. All subsequent illustrator work will take place on new layers sitting above the scan layer. Its a pain but if you are going to work on a file for a while of set it down and come back to it, naming layers is super helpful to help keep track of what is where.

STEP #2:

Start to block out the basic shapes. I used the pen tool for this. I am not a fan of the pencil to when it comes to drawing these kinds of precise lines and curves . The pen tool also allows for better control of the number and positioning of anchor points. When drawing with teh pen tol i always turn the fill off and set the stroke to an arbitrary color the will not be confused with the scan I’m tracing.

If youre the kind of person who draws over-lapping letters with out thinking about what goes on behind the over-lap, now is the time to consider it. Closing your eyes only blocks your view of the world it doesnt make it go away; the same goes for the parts of letters that are behind the over-lap. This method of working in illustrator will allow me to combine all these simple looking shapes into much more sophisticated and complex shapes, that would be the wrong use of energy to simply draw out with the pen tool. Once all the shapes are blocked in you can then playing around with the bits, and where and how they sit in relation to each other; something that becomes Sisyphean if done on paper.

I have purposely left out the negative spaces of the letter, they will be added later when the shaped are combined. Also the Arrows will be created separately and then copied and added to each branch.

All the basic shapes are drawn. I set the fill back to the default white and black so i can see the solid shapes and begin any initial adjustments to where the basic shapes will sit.

Next post:

pathFinder Palette and using it to manipulate the simple shapes and turn them into  shapes that more resemble the finished letters of the sketch.

The Next Step after getting the widget into ClearSpring (see The Widget Debacle)is setting up and Facebook application that you link said widget too.

FACEBOOK

• FaceBook Developer site
• FaceBook PHP library

New Application:

Click For larger image

Create new application:

Application Name:
name your application. this like the widget naming in the CS console manager- a referral name)

Authentication:

Click for larger image

Post-Authorize callback URL:
My widget was connected to a micorsite with metrics attached to it, so i entered the micorsite URL.

Post-Removal callbakck URL:
I believe this is a redirect URL the user will go to upon removing the Widget from FaceBook. A thank or installing or a pointer to the widgets dev site or support site can be used.

***EDIT:

When a user selects to remove your application they are not sent to the ‘Post-Remove URL’ as they have removed the application and so will have no further contact with it. A POST request will be sent to this address in the background however containing the uid of the leaving user.

This was copied from HERE

Profiles:

Click for larger image

Tab name: Choose a tab name; along the top of your proilfes page you can add tabs to go to things you want ( i dont do this at all so forgive my lack of proper normanclacher). Consider it a sub navigation bar youre adding a menu item too.

Tab URL:
Add the Absolute URL to where your widget lives; on your server.
**** I LEFT THE REST OF THE INPUT AREAS BLANK–ill try and figure this out in the future.

Canvas:

Click for larger image

Canvas Page URL:
This is like choosing a directory/ folder name. Choose a name (no spaces) that will best describe your app. your application and widget will be accessible at this address; http://apps.facebook.com/-YOUR CHOSEN NAME-/ (replace ‘-YOUR CHOSEN NAME-’, with your name)
Canvas CallBack URL:
this is where shit gets a lil Stupid….
this is the address to your page facebook home page: http://yourserver/widget directory/index.php
*** FaceBook-esse.
When setting up your FaceBook application your basically creating a page or set of pages Facebook will suck into its http://apps.facebook.com framework. You will need to set up at least three documents; full disclosure these still confuse me a quite a bit, although were it set up to be a proper Facebook app it may be made clearer).
Facebook uses its own mark up language FBML FaceBook Mark-up Language, as a means to prevent any code conflicts or maliciousness, and to make this as painful as possible.
You will need to make:

• Index.PHP
• xd_receiver.htm
• profiletab.html
• virtualhairtool.html

****Post my code (in a post yet to be completed)

Optional URLs:

Bookmark URL:
You can use the facebook app home page url; http://apps.facebook.com/-your app name/
Post-Authorize Redirect URL:
this is the URL users will be redirected to after authourising the installing of your application/widget. you can use the app URL http://apps.facebook.com/-your.app name/. You may also be able do other things wiht this, but havent investigated any of the possibilities beyond going to the app home page. Upon getting to the app home page the user will see and INSTALL this application button. where they can choose to instal the app so it appears in their profiles left rail.

Canvas Settings:
Render Method: choose FBML- i havent used the iframe situation yet.

Choose SAVE SAVE SAVE.

I didn’t need any of the other settings, so im not any help with them yet.

FACEBOOK Documents:

• Index.PHP
• xd_receiver.htm
• profiletab.html
• virtualhairtool.html
• Facebook PHP library.

Directory set-up:
you will need a PHP enabled server, the easiest thing to do is to use the same directory that you have your widget in; it will reduce the chances of snadbox security issues and also make it easier to keep track of al the files that will be talking to eachother and iteracting with faceBook.

sever/widget directory/
widget
fb directory/
xd_receiver.htm
profiletab.html
virtualhairtool.html
lib directory/
php directory/ – contains the facebook php library, which your index.php will need to communicate with. *http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz

In the next post in this series i will try and disect the Facebook files… as best as i can, read with low expectations and you might leave happy.

*i’m an idiot so you may have much better luck there then i did.

Some links I checked and found usefull:

• http://wiki.developers.facebook.com/index.php/Main_Page
• http://forum.developers.facebook.com/
• Most helpful to me and i based this tutorial on much of what i learned from this link. I tired to dumy proof it a bit.
• http://www.metablocks.com/blog/2009/01/28/clearspring-consulting-widgets/

the widget tutorial in two parts.

Goals:

• create a widget
• Embed into Clearspring using the In-Page menu
• Set up Simple FaceBook App
• Allow users to install widget on their FaceBook profile

*Assuming have a widget made (will add the making of a xml reading widget);
** make sure you have access to a php enabled server (needed for the Facebook app portion), and decide on the location of your widget.

START:

Create clearspring account;
Log in.

Menu Configuration Area:

Click to see larger

widget name:
this name is used in the ClearSpring console manager (CS manager) to track the widget. Each widget in your account needs a unique name. Consider it a directory of sorts.

Code Type:
My widget used AS2 (if your using AS3 [teach me son]) there will be some differences although probably more similarities in the over all process. Choose AS2.

Menu Type:
Choose Sharing API (this option allows us to load the CS menu into our flash widget at runtime, so no nasty bottom bar will be added to the widget) .  *see menu types

Color Theme:
i didnt really do much with this. to be honest im not sure if its onl for the defualt externally added bottom sharing menu or not… play around and let me know.

Menu size:
Choose menu sixe approapriate to the size of your widget.

Sevices:
choose the Sharing networks you want to target and include in your CS sharing menu. Since the main gola is to get this widget into face bok make sure you have  Facebook checked as one your sharing options.

What do you want to share:
this confused me for a while at first, but what they want is the HTML to display your widget.
So if you published your widget, you want to copy the <object>….</object> tag and its contest and paste into the CS text area. *Make sure the path to your widget in the object tag refers to the Absolute URL of your widget. the full path to it on the server it will live on. (this can be changed later).

Save & Export Menu Configuration:
you can save the configuration setting (as XML, Json, ect) to use again for another widget, youd have to change some of the setting to use again.

SAVE SAVE SAVE.

WIDGET SETTINGS & Flash Updateing…

Click for larger image

EDIT widget tab:
the edit widget tab allows you edit/update and or complete the configuration settings for your widget. It is also where you will get the Actionscript you need to hook into the CS sharing API (its all written for you/ as the AS3 [tach me son!]).

Content Template:
this containts the HTML object tag used to display your widget. if the swf changes servers/ paths you can edit the absoulte URl here.
* if you used the external shairng menu then you might need to reset the size of your widget including the hieght and width of your CS sharing menu
Library Code:
* you will need to access the fla of your widget to edit it.

Click for larger image

Copy the library code provided here. Paste the copied code into the actions layer of your maintain line in your FLA file. The way the CS API works is it loads its self into the Root of your file, so depending on how and where you are making the menu.show() call there can be addressing issues. This tripped me up the first time for quite some time since my project required the widget to be loaded into a SWF, which complicated the absolute addressing of the widget, however it took a while for me to figure that out (if your using this you’re as slow as i am so I’m saving you time).
***ADD code sample with commented out mouse down code and disect.

Widget Info:
add the about widget info; author; email; referral site etc…

Widget parameters:
Allows you to set the parameters for your widget. if your using flash vars to pass config variables or run time user set variables you can add them here; name=”" and val=”default val”

Snapshots:
This create back up images of your widget to be used by various sharing networks as icons or for back up images, I.e. in  Facebook the profile will display the back up image, and when click it will take you to the Facebook app page hosting the widget (more on this as we go)* i also need to look into getting the swf to show in the profile instead of the back up image- not sure it can be done, but i d0nt Facebook much.

PUBLISH tab:

Click for larger Image

Facebook app wizard:
With the widget type were using the ‘wizard’ is as much as a misnomer as you can get. Enter canvas URL… WFT? this area took me quite a while to figure out. In Facebook when you create an application, the URL where the app lives is referred to, in Facebook-esse, as the Canvas. So we need to go start the set up of our  Facebook application. *LINK  Facebook Dev site.

Step two * LINK AS SOON AS the post is together