You are browsing through Tutorials

Chinese language tips for web design

Friday, May 14th, 2010

Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. I want to archive them here just in case I need to reference this ever again since it was PAINFUL…
Some Chinese Website tips:

  1. Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “Microsoft YaHei”, “MS Yahei”, “宋体”, sans-serif;
  2. Standard chinese sans-serifs are: Hei, HeiTi or “Microsoft YaHei”
  3. Standard chinese serifs are: “Fang Song”, or “宋体”
  4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=”utf-8″>

References:

Tags: , , ,
Posted in Design, Tutorials, cs, css, programming, solution | 5 Comments »

Augmented Reality – Test 1

Thursday, April 1st, 2010

Yukiko's test of Augmented reality

I just got my augmented reality demo to work! It was really easy – Just one afternoon of work. To try it out you need: A webcam, a printout of this page. Click on this link and hold up your printout to your webcam in order to play with the demo.

I pretty much followed this video tutorial by The Flash Blog. It describes how to use the FLAR and Papervision 3d toolkits with Flex to detect a symbol in a video feed and map a 3D model to its plane. I just adapted his tutorial to Flash. (I’ll post my .FLA shortly)

Here were my overall steps:

  1. Download FLARToolkit
  2. Download Marker Generation tool (Air app)
  3. Made marker in Photoshop and printed it out
  4. Ran the Marker Generation app and saved a .pat pattern file
  5. Created FLARdemo.as class file, Flardemo.fla
    • in the .fla, declare Flardemo object, add to display
    • setupFLAR() – import .pat file
    • setupCamera()
    • setupBitmap() – load video feed into flartools
    • setupPV3D()
      • Create scene, camera, container
      • create lights, materials, objects
      • Create render engine, FLAR trans matrix, viewport
      • Add to display list
    • Create onEnterFrame event handler
      • Feed video to FLAR
      • test for symbol detection, if yes then,
        • get and set transform matrix
        • render papervision!
Some overall troubles and solutions included:
  • Since in Flash, not flex, I needed to declare, create, and add to display list a FLARdemo object in my .fla file. This wansn’t described in the Flash blog tutorial.
  • Also since I was working in Flash, library imports were a bit more complicated. I eventually gave up and cut/pasted from another tutorial that he was following. A less documented, but code provided tutorial is located here by a guy named Mikkoh.

Tags: , , , ,
Posted in Flash, Tests, Tutorials, programming | No Comments »

Photoshop CS3+ Letterpress Tutorial

Sunday, May 3rd, 2009

letterpress tutorial finished

Here is a simple way to get a letterpress effect in Photoshop CS3 and above.

To summarize, you apply a bevel and emboss layer style to the area around the ‘imprinted’ art. For this tutorial, I will show how to make the effect and then use smart objects to warp it non-destructively. (more…)

Tags: , , , , ,
Posted in Tests, Tutorials, photoshop | 11 Comments »

Writing files from Mac to NTFS hard drive

Thursday, September 11th, 2008

I’m at work needing to transfer files from my Mac to my NTFS hard drive. The file system normally allows the drive to be read but unable to write to. There’s too many complicated tutorials/forum posts so I’m making it simple for myself and hopefully others here. 2 downloads and no funky terminal stuff.

  1. Download MacFUSE on Google Code - Install & restart
  2. Download the MacOSX NTFS-3G plugin – Install & restart
Now the NTFS drive should be writable. 
Notes:
If you get an error like:
$LogFile indicates unclean shutdown (0,0)
Failed to mount…

You need to plug in the drive into a windows pc and then “Safely remove hardware” by right-clicking on the lower right-hand green arrow that says “Safely remove hardware”. There’s other ways, but this is the easiest I’ve seen.

Most helpful forum link by jo7ker on Sat, Mar 3 2007 at 9:12AM PST
http://www.macosxhints.com/article.php?story=20070220150856279



Tags: , , , , , , , ,
Posted in Computer, Tutorials, solution | No Comments »

Reflections- Before & After

Monday, August 18th, 2008

Before
After

Tags: , ,
Posted in Design, Tutorials, photoshop | No Comments »

Tutorial: How to copy file path in Mac OSX

Thursday, July 3rd, 2008


So you can’t cut/paste file paths easily in Mac OSX. No keyboard shortcuts and even “get info” doesn’t give a selectable pathname. Yes, you can see the path, but you can’t get it onto the clipboard. Hmm.. after trolling a bit of the internet, I found that there’s some freeware and some methodologies- drag into terminal or into textWrangler… They all sounded a bit involved when speed and simplicity is the issue. My method of choice came from Camarena in a forum link: Create a simple apple script, turn it into an .app and then drag that app into any finder bar so it appears as an icon.  So here’s the step by step.

Create the App:
  1. Open the applescript editor, create a new script
    Applications > Applescript > Script Editor

  2. Paste the following: 
    tell application “Finder”
    set sel to the selection as text
    set the clipboard to POSIX path of sel
    end tell

  3. Save as an File Format > Application 

  4. Drag the .app file into any finder window’s toolbar to add the shortcut

To use:
  1. Select the file you want to copy the path
  2. Click the scipt shortcut icon you just created
  3. Now it’s on your clipboard, so you can paste the filepath!

Tags: , ,
Posted in Tutorials, Uncategorized | No Comments »

Make Flash stage transparent

Wednesday, May 7th, 2008

Ok. Here’s a quick tip on how to make your stage transparent in flash.

  1. Go to publish settings: File > Publish Settings or Shift + F12
  2. In the HTML Tab, Find the Window Mode setting and select Transparent Windowless from the drop down menu.

Source: Adobe’s tech help site

Tags: , ,
Posted in Design, Tutorials | 1 Comment »

Rotate Dynamic TextField in Actionscript 3

Thursday, March 27th, 2008

This is a tutorial on how to rotate textFields in Actionscript 3 (AS3)

1) First you must embed the Font. Go to the Library pallete. Right-click and select “New Font…”

2) In the new “Font Symbol Properties” dialog box, select the font you want to embed. I’m using Allstar for this example. Also type in a name to call the font within the Library. Click “OK” to close the box.


3) Back in the Library, you can see the font you just embedded, but you now need to change the linkage properties. Right click on the font symbol and select “Linkage…”

4) In the Linkage Properties dialog box, check the checkbox “Export for ActionScript”. Then enter the class name that you will reference in the ActionScript. Click Ok to close the dialog.

5) Now in the Actions pallete, enter in the following text to create the textField and display it on the stage.

Tags: ,
Posted in Tutorials, programming | 4 Comments »