Category Archives: Communication Technology

Illustrator Cutlines

How to add cutline in Illustrator to print/cut in Roland VersaWorks?

I. Create the sticker “cloud” outline,

II. Add the outline to the original,

III. then add a cutline.

I. Create the background cloud outline

  1. Live trace in 3 colours (create swatches)
  2. expand so paths are visible
    (look for unnecessary paths outside the area and delete them)
  3. select all and copy to a new layer
  4. locked original layer
  5. paste in place on the new layer duplicate layer
  6. pathfinder->unite
  7. effect->path->offset path
  8. Object->Expand Appearance to get rid of more little bits in the shape
  9. pathfinder->unite again to be sure only a single solid bounding shape
  10. change fill colour to inspect for bits, (notice you may knock out the fill and only a cutline remains)
  11. Inspect and try again trashing paths that interfere until a good solid bounding shape
  12. Trouble?

  13. During the live trace, an extra path may be encircling the whole, ungroup the paths, and trash the extra paths while drilling down in the layers tab.
  14. Object->Ungroup to be able to select paths
  15. Change fill colour after pathfinder unites
  16. Round corners during path offset

II. Add the cloud outline

  1. Instead of rearranging the two layers, unlock the original layer and “drag down” the top layer to the original layer as another object (takes practice), watch the video at 2:28 for how/where the pointer grabs the top layer to drag onto the original layer (the little “selector square” lights up on the right when you drag the coloured sure from one layer to the little sector sure in the next layer. If you do it right it is a “undo move selected” in the edit undo menu
  2. Object->Arrange->Send to Back

III. Create a cutline

  1. Select All and Object->Group
  2. Copy all and paste in place on a new layer again
  3. Pathfinder->Unite
  4. No Fill
  5. Single pixel stroke in the Versaworks colour swatch
  6. Trouble?

  7. Add Versaworks swatches to Illustrator
  8. Versaworks cutline colour: CYMK: C:0 Y:0 M:100% K:0

Simplified Create a Sticker from a JPG/PNG:

  1. New Document
  2. Open Palettes: Swatches(open Versaworks library), Trace, Layers, Pathfinder
  3. Place
  4. Live Trace and Expand to Paths
  5. Edit Colour (so whites are white and blacks are black)
  6. Copy and Paste in place on a new layer duplicate layer
  7. Pathfinder Unite
  8. Effect Path Offset
  9. Object Expand Appearance
  10. Remove Fill and one point Versaworks swatch line.(swap fill/stroke clicking double curved arrow)

Save As *.eps

Print Friendly, PDF & Email

Beta Test TypingWeb

I need some, err, Guinea pigs to test a “free” online typing program. It looks good so far, I just need a few sample students to simulate the process to see if it will work for us at STJ.

What I am able to determine so far is as teacher: I can maintain groups of students, collect data, monitor results, and test. That’s all good stuff from my end.

I really do not know what the app looks like from a student point of view, so before jumping in to the deep end with it I’d like a few industrious, curious students to give is an honest try.

Let me know if you would like to be a tester of this online keyboarding course.

Print Friendly, PDF & Email

Inspect CSS Elements in Safari

I enabled the following “Advanced” Safari CSS Inspect Element trick so long ago, I forgot I had done it. Of course on my own machines, I enabled this once, and haven’t had to since. In the school MacLab though, students wanting to edit/inspect CSS will need to re-enable the Safari Develop menu each time they log in. C’est la vie.

After enabling the Develop menu, a right-click on any element of a web page should cause the Inspect Element contextual menu to appear.

There you go, infinite design possibility enabled.

Print Friendly, PDF & Email

Make a Mouse-over Button in Flash CS4

Need a button to switch frames or scenes?

  1. Open Flash CS4
  2. Draw a shape and select it. Next, right click on the object and name it My_btn. Make sure that it is a button symbol type.
  3. Click on your new symbol. Then in the properties panel, click where it says “< Instance Name >” and type My_btn.
  4. Go to the Library Panel and double-click on My_btn. This should open up a new window where you can edit your button. Notice that the timeline has changed now. Now, the timeline says “Up” “Over” “Down” “Hit”. This is where you edit how the button reacts to the mouse.
  5. Leave the “Up” event the same and copy the “Up” event frame and paste the frame in the “Over”, “Down”, and “Hit” spots. Now, go to the “Over” event and change the color of your button to anything that looks good to you.
  6. Choose Edit>Edit Document to return to the document
  7. Test the button by choosing Control>Test Movie It should be when you roll over the button with your mouse that it changes color and when you click on the button, it changes to your “Hit” color.

Now its time to make a button that is clickable:

  1. Now it is time for the code part. This code will make the button change positions in the timeline.
  2. Go to frame one and press F9(right click the keyframe->Actions or Window->Actions) to open the actions panel and put the following code:

    My_btn.addEventListener(MouseEvent.CLICK, CursorClick);
    function CursorClick(event:MouseEvent):void{
  3. Create a new keyframe and draw something on frame two.
  4. Test your video and have fun!

Tips if you have errors:
1. note the symbol name “My_btn” in the library, properties instance, and where it appears in the script
2. note the frame # in the lines with a gotoAndStop command
3. be comfortable switching from editing a document and editing a symbol – note the differences in the timeline

Add a similar button to frame 2 that will return you to frame 1.

Try the following script in place of the one above and notice the differences in its behaviour:

My_btn.addEventListener(MouseEvent.CLICK, CursorClick);
My_btn.addEventListener(MouseEvent.MOUSE_OUT, CursorOff);
function CursorClick(event:MouseEvent):void{
function CursorOff(event:MouseEvent):void{

Example button navigation between frames in the same scene:
[swf], 400, 300[/swf]

Example button navigation between scenes:
[swf], 400, 300[/swf]

Example button to start/stop an animated soccer ball:
[swf], 400, 300[/swf]

Looking for help to embed swf objects in your blog? Look for and activate the WP-SWFObject plugin.

Print Friendly, PDF & Email

Example Photography Assignments

Mac Lab Equipped, Software Installed, Resources Readied

Installed hardware:
25 new iMacs, Promethean Board and projector, MacPro server, MacBook Pro, 5 Canon Rebel XSI with Sigma 200 lenses, 5 Canon FS10 digital video cameras, tripods, monopods, Pelican cases, SD readers, and an m-audio keyboard.

Installed Software:
Adobe Master Suite CS3(CS4 arrives n November, 2008): InDesign, Photoshop, Illustrator, Acrobat Pro, Flash Professional, Dreamweaver, Fireworks, Contribute, After Effects, Adobe Premiere Pro, Soundbooth etc.

Apple: iMovie, iDVD, GarageBand, Quicktime, iTunes, iPhoto, PhotoBooth etc.

Microsoft Office: Word, Excel, PowerPoint, etc.

Online Services:
STJ Google Docs
STJ iBlogs built from Wordpres Multi-User
STJ Forums built from PunBB
STJ Gallery built from Menalto’s Gallery2
Adobe lesson plans
Student ePortfolios in Acrobat PDFs
Exemplars by Adobe Students

Next? I’ll be meeting with students, individually and small groups to set up Introductory level Student Learning Guides for at least three of the following courses:

Students will be keeping a “Learning (b)Log” to chronicle new learning in ComTech. The blog will also be evaluated for credit towards Information Highway 2 INF2200. Students must have at least one credit in Keyboarding (minimum goal of 30 WPM) before attempting the remaining courses.

Print Friendly, PDF & Email