Steven Kovar Interactive - Tech Journal

Custom code based on image sizes in ExpressionEngine

2011-08-12T16:32:03Z

This is not really ExpressionEngine-centric - The concept will work in any CMS that spits out an uploaded image path - but since I’m using an ExpressionEngine tag, I’m classifying it as an ExpressionEngine article.

Ok, so I found that I had a preferred dimension for a particular image type in a site I work on. I try to fill a width of 615px wide, when possible, but I unfortunately don’t always have the luxury of getting this resolution image. To preserve my layout, and preserve image quality as much as possible, I want to allow large images to fill the width, and place smaller images centered within a grey div. Here’s how I did it:

First of all, you need to set PHP to “Output” in your template preference. If you are ever confused as to whether you need to set PHP to render on input or output in a template, just remember when set to “Output”, ExpressionEngine tags will parse first, then your PHP will parse. When set to “Input”, your PHP will parse first.

<?php 

$min_width = 550; //through some testing, I found i can safely scale images that are approximately 550 wide up to 615 wide without tremendous loss of quality, but I could be stricter and just set this to 615 if I wanted. 
$img_path = "{event_image_thumb}"; // my ExpressionEngine custom file tag. This inputs the image URL into my function
$imagehw = GetImageSize("$img_path"); // This creates an array, of the image width and height. 
$imagewidth = $imagehw[0]; // this grabs the first element in the array. Remember, the first item in an array is always [0].

if ($imagewidth>=$min_width) { //if the actual image is at least as wide as my preferred dimension

    echo "<img src=\"$img_path\" width=\"615\" />"; // simply echo the image tag with the image URL and use it as is. 

} else { // if we made it here, the image is narrower

    echo "<div class=\"imgHolder\"><img src=\"$img_path\" width=\"$imagewidth\" /></div>"; // echo  div with the image within it. With CSS, I'm setting auto margins and the properties of the div. 

}
?> 

And that’s it! This could be used for a lot of other purposes in which you need to write some custom code based on your image size. For example, dealing with vertical vs horizontal images would only require some greater than or less than comparison between the first (width) and second (height) items of the array to adjust a layout accordingly.

Mining date-based ExpressionEngine URLs

2011-08-12T16:09:21Z

For a calendar project I’m working on, I ran into the need to create an ExpressionEngine readable date from URL segments.

My segments are set up as follows:


www.mysite.com/templateName/cateogory/YYYY/MM/DD

In order to format the URL into a date ExpressionEngine understands, I set PHP to “output” and created a PHP variable using the segment variable feature of EE to reformat:

<?php 
$mydatebegins = "{segment_4}-{segment_5}-{segment_6} 00:00"; 
?> 

We can stop there, and we have a date you can use in the Channel Module to filter entries. What I needed, however, was a string to use in the Query Module to query the database and find entries based on the date in the URL.

I then echo this as a string using PHP strtotime, as follows, as an embedded template variable:

{embed="myembeds/myTemplate" startDate="<?php echo date( strtotime($mydatebegins));?>"} 

So, this little technique didn’t take long, and sent me on my way to creating my own calendar with a little more flexibility than what the default ExpressionEngine dynamic url behaviors provide.

Preselecting Pulldowns in ExpressionEngine Standalone Edit Forms

2010-06-02T05:58:56Z

This is for EE 2.0, and if you are using an earlier version, skip the system hack.

To create a Stand-Alone-Edit form, first follow the method graciously shared by Ty Wangsness, of eMarketSouth:

http://www.emarketsouth.com/blog/details/how-to-create-standalone-edit-forms-in-expressionengine-2.0/

Beware that you need to perform a small hack to your EE system. When I do this, I keep a text file with my site files in which I record any hacks or alterations I've made so I have a list of things to be aware of when upgrading the system.

Pre-selecting pull-downs

Imagine that you have a list of options in a custom field pulldown menu, as follows;

<select id="field_id_01" name="field_id_01">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select> 

Just use a conditional to compare your pulldown options with the information stored for that entry in the database, in conjunction with the HTML "selected" feature;

<select id="field_id_01" name="field_id_01">
    <option value="option1" {if channel_fieldName == "option1"}selected="selected"{/if}>option1</option>
    <option value="option2" {if channel_fieldName == "option2"}selected="selected"{/if}>option2</option>
    <option value="option3" {if channel_fieldName == "option3"}selected="selected"{/if}>option3</option>
    <option value="option4" {if channel_fieldName == "option4"}selected="selected"{/if}>option4</option>
</select> 

Now your pulldown form fields should be preselected with the current value from the database.

iPad is more than just an e-Reader

2010-02-05T23:33:55Z

A lot of fuss has been made over Apple’s new iPad, but it seems to me that most articles and discussions about it have centered around it competing in the e-reader and netbook market, particularly against Amazon’s e-reader, the Kindle. Other topics have included email, web use, and using the iPad for watching movies. For me main thing that has been overlooked is the new possible uses in the arts. Just a few applications that already exist for the iPhone/iPod and could easily be resized to take advantage of the larger iPad screen, could make this a revolutionary tool for visual artists, DJs, VJs, designers, video editors, illustrators and others. While in some ways, this is just a giant iPod Touch or iPhone, the larger scale will allow apps new functionality and precision.

I can see the greatest possibilities for visual and audio artists in the realm of OSC and MIDI applications, due to the flexibility, modularity inherent in the communication specs and the increasing number of applications that have OSC or MIDI capability. Almost every live audio application is MIDI capable, and some of the most popular live video applications are also. Apple’s Motion, a motion graphics application has midi capability, so one could use the iPad as an external controller. Modul8 one of the most popular live visual applications, has very powerful midi control.

The iPad will definitely be able to replace some OSC/MIDI hardware: Jazz Mutant’s Lemur has been a popular and revolutionary touch-screen OSC/MIDI controller for live performance for years. At around $2000, it’s definitely not within the reach of everyone. There are already a lot of apps in the app store that when used on a larger screen could give the Lemur competition at a fraction of the price. In fact these apps would become much more usable in a larger format. I’m sure the Lemur is great, flexible and robust, but I predict that some of the following apps will grow to fit the new screen size and give visual and audio artists a multitude of new controller options.

Hexler TouchOSC

This app is close in concept to the Lemur. It has a range of controllers including faders, knobs, buttons and step sequencers, and now has an accompanying desktop app for configuring custom layouts.
http://hexler.net/software/touchosc

Trapcode ProLoop

Not just a creator of ground-breaking After Effects plugins, Trapcode has created a revolutionary sound looping app. It allows you to load your own loops in and is priced at an attractive $5.00. I predict that you’ll see this one on a lot of iPads in the next few months.
http://trapcode.squarespace.com/journal/2010/2/1/trapcode-proloop-new-iphone-app.html

iOSC

This app is similar in many ways to TouchOSC. One powerful feature is the ability to control multiple OSC apps on different hosts. Great for combining control of audio and video.
http://recotana.com/iphone/iosc/en/index.html

iTouchMidi

Too many apps to write about, iTouchMidi has a large suite of midi apps.
http://www.itouchmidi.com/?q=node/283

My Favorite New Things From 2009

2009-12-29T16:44:04Z

Every year brings new workflows, or at least minor adjustments and improvements to my workflow. There were a lot of things that marginally improved my workflow - Adobe CS 4, Snow Leopard, VMware Fusion and others, but only a few things have radically altered the way I do or use something. I’ve picked some of my favorite things that are not all necessarily “new”, but that are at least new to me, or recently integrated into my workflow. In no particular order:

Panic Coda

This has been around since 2007 and facilitates one window web development. I’ve been hand-coding since I picked up XHTML and CSS several years ago, but I’ve always used Text Wrangler or BBEdit, a browser and an FTP app to develop sites. On a whim i tried out the Coda demo, and was quickly convinced it was worth the $99.00. There are too many features to list, but the features that I find most useful are a built-in Webkit browser for previewing files, Code Snippets that allow you to save often-used bits of code for fast retrieval, direct one-click publishing from your site’s folder, real-time XHTML compliance validation, code highlighting (of course), and a very powerful search and replace function. I use code now for just about everything, including my ExpressionEngine Templates, Actionscript, and XML files. Coda has been a great time saver for me. I can’t believe I wasn’t using it sooner.
http://www.panic.com/coda/

ExpressionEngine

I really can’t say enough good things about this CMS. I’m very excited to run more sites on it. I’ve recently upgraded to 2.0, and will soon be purchasing the Multiple Site Manager to run all of my personal sites. My first CMS experience entailed painful attempts at fashioning Wordpress into a functional CMS, which worked, but seemed very inefficient. The constant upgrades released to patch new vulnerabilities in Wordpress were very annoying. ExpressionEngine by contrast is simply a very robust, secure and easy to upgrade system. Templating is intuitive, as is custom field creation, and the system allows you to put whatever information where ever you want it. I see it as a very designer friendly blank canvas. Now that I started flat-file templating in Coda, I enjoy working with it even more.
http://expressionengine.com/

Backblaze

I’m not sure how I slept at night without an offsite backup solution. It seems ridiculous to back-up gigs and gigs of data online, and honestly the initial backup will take DAYS. But then it’s incremental, and you have the ability to retrieve any lost data should you have a catastrophic system failure, fire or other tragedy that affects your on-location physical backups. At 5 bucks a month for unlimited storage, it’s a steal for the piece of mind it brings.
http://www.backblaze.com/

Modul8 2.6

Just released, the new version of Modul8 has lots of new features which have radically improved this live video mixing app. Although not a “radical” upgrade (the system looks and works pretty much the same), 2.6 is a significant enhancement. The most important additions for me: More precise and controllable sound reactivity, add/subtract layer modes (to me, this alone was worth the upgrade price.), and a new feature that treats a folder of stills as video.
http://www.modul8.ch/

iPhone

Five words: Freed me from my desk. I’m a freelancer working in multiple time zones and I worry a lot about customer service. Having an iPhone allows me to stay on top of communication with email and Skype, and also to enjoy an occasional sunny afternoon in the park. Having an endless supply of reading material for long rides on public transportation is nice too. Oh, and I don’t get lost anymore. Thanks Google Maps.

What are some of your favorite new additions to your workflow from 2009?

After Effects Bezier Motion Paths - Toggle Hold Keyframe

2009-11-12T14:15:19Z

Ever run across the issue with bezier motion paths in Adobe After Effects, where the object or camera following a path moves backwards a little bit before going forward, after a set of two identical keyframes? This is known as the Boomerang Effect in After Effects, and can happen even when you intended the object to be static by setting a sequence of two keyframes with identical position values.

Solution: Select the first set of position keyframes, right-click, and select TOGGLE HOLD KEYFRAME from the menu. You can also undo this, of course. Simply right-click and toggle it again. Another sometimes less ideal solution is to use straight motion paths.

Canon HV20 Pulldown Removal for CS4 (Repost)

2009-10-03T22:28:53Z

Found this info today in the infinitely useful HV20.com forums at: http://www.hv20.com/showthread.php?t=13421

I thought it was useful enough to repost it.

It includes a script for automatically guessing pulldown for a group of Premiere captured HV20 footage in AE:

function ReverseTelecine() {
    var sel = app.project.selection;
    if (sel.length == 0) {
        alert("Please select clips in the Project window.");
        return;
    }

    for (i = 0; i < sel.length; i++) {
        if (sel[i] instanceof FootageItem) {
            sel[i].mainSource.guessPulldown(PulldownMethod.PULLDOWN_3_2);
        }
    }
}

ReverseTelecine(); 

To use the script, just copy-and-paste it into TextEdit, then save it as .jsx file (eg, ReverseTelecine.jsx). You should save it to your scripts directory. (On OS X, that’s /Applications/Adobe After Effects CS3/Scripts). Then you can run the script from the pull-down menus in AE by selecting File/Scripts/ReverseTelecine.jsx.

Workflow:

1. Capture your clips to .mpeg files using Premiere. (This is fine for me, as I almost never want to capture all the footage on a tape. I usually have a log sheet telling me which clips I’ll actually need, so I have to set up the capture manually anyway. YMMV.)

2. In AE, bulk import all those .mpeg files to the Project window. They should all be selected after they import.

3. Run the above script.

4. Drag all the clips to the “Create a New Composition” icon in the Project window.

5. In the “New Composition from Selection” dialog that appears, make sure “Multiple Compositions” and “Add to Render Queue” are checked, then hit OK.

6. Open the Render Queue tab and hit the Render button.

7. Have a beer.

8. Edit the rendered clips in Premiere.

For this to be effective, you have to set up After Effects so that its default render settings are what you want (eg, Prores 422). So you might want to render one clip manually before doing the above, so the render defaults and target directory are correct.

Five Things I’ve learned About Freelancing

2009-09-14T09:24:32Z

Here are five things that I have learned over the years that are important to me, and might help other freelancers that are just starting out.

1. Get an office. If you don’t have a quiet place away from home, even an inexpensive shared office space, or at the minimum a door you can close on the office, you might create a problem separating work and free time. If there are other people in your house, they may not understand that you aren’t always available to chat or “hang out”. Set your boundaries by defining a space for yourself, and make it clear that when you are in that space, you’re at work. Blending work and free time causes anxiety, lowered productivity, stress, and depression.

2. If the work just isn’t there, pretend like it is. Make projects for yourself. Fill in your unbooked hours with your own projects. You’re a one-person business, and you’ll need to support it with the same types of structures that other businesses employ: marketing, research and development, and employee improvement programs. Make a website for yourself, learn a new technology, study typography, look at the work of other artists. Improve Improve Improve. In the process of constantly exploring your field, learning new technologies and generally paying close attention to the market and market trends, you’ll begin to define the direction of your business and your personal interests. You will find new sources of potential customers and you’ll also be able to offer new services.

3. Make a website for yourself. Keeping a public “storefront” is very important. Have a portfolio. Show your portfolio and new projects regularly. Look busy. If you are a print designer, you may still carry around a portfolio, but i you are primarily involved in electronic design, your site will be your work showcase. If you are web designer, you have the additional benefit of having a sandbox in which to explore different technologies.

4. Define your own style. Don’t get caught up in every new design trend. Many aren’t that long-lived, or attractive. Of course, staying contemporary is important, but I think it’s just as important to work towards doing what you do better. Refine the legibility of your design, create more context, work on the visual flow, rhythm and sculpting of subtle details that make a design look great. The principles of design never go out of style.

5. Build long standing relationships, and maintain them. Service your existing customers first. Having long-standing work relationships with firms makes you more money as it increases your workload, and reduces your overhead. You’ll need less marketing time if you have at least half or even all of your time booked by a handful of customers. Administrative time in gerneral will decrease as you improve your relationship with your clients. You’ll get a better sense of their company and what they like, more opportunities to do “packages” and campaigns that will form an attractive and cohesive unit in your portfolio, and you’ll develop a streamlined and direct method of communication with them. If you base your workflow on too few customers, however, you can really be hurt when something happens to one of them… budget changes, they’re out of business, etc.

Interesting Data Visualization

2009-09-04T11:00:18Z

Having come from the United States, “a country of immigrants”, I found this interactive immigration visualizer in the New York Times to be very thought-provoking and well-designed. By choosing an individual country from the top left pull-down menu, and sliding the time slider, you can quickly grasp the ebb and flow of immigration from a particular country over time.

http://www.nytimes.com/interactive/2009/03/10/us/20090310-immigration-explorer.html?ref=us

Skipping the Multi-entry Page in ExpressionEngine

2009-08-25T08:59:03Z

I’ve had a nagging issue since I launched this site with figuring out how to indicate a “current” state in the navigation in multi-entry pages that are limited to one entry. Client work and travel took over for a while, but I always had in the back of my mind that I needed to address the problem and I am happy to have finally found a solution.

The portfolio section of this site is set up with sub-navigation that directs you to a particular category of the portfolio. The main category page is a multi-entry page that I have limited to one entry, with a thumbnail list that directs you to single-entry pages for each portfolio item. Indicating a “current” state navigation in a single entry page is a fairly straight-forward process of comparing segments in the URL with a conditional that applies a CSS selector if the condition rings true.

First, create a new template for your navigation, or sub-nav, whichever it might be. When you embed that template, you should set a variable that will be passed to your embedded template. I’ve set three here, but the important one here is “loc”. This will pass the location to the embedded template:

{embed=‘portfolio/thumbnail_nav’ loc=’{segment_3}' cat='7' titl="interactive"}

In this case, “loc” is going to tell the embedded navigation template that the location is “segment_3” from the URL - since the single entry URL appears in segment 3, the variable will pass the entry URL to the embedded template. “titl” fills in the last segment of the url_title_path. “cat” obviously tells the navigation which category’s entries should be returned.

In the code that is inside the embedded template, you can see that we’ve passed the location variable into a conditional that, when true, applies the class of “outline” to my list item.

{exp:weblog:entries weblog="portfolio" category="{embed:cat}" orderby="date" sort="asc" dynamic="off"}
<li><a href="{url_title_path=portfolio/{embed:titl}}"><img src=’http://www.transopticmedia.net//site/images/uploaddirectory/portfolio/{thumb_filename}’ height="xx px" width="xx px" alt="{url_title}""} class="outline" /></a></li>
{/exp:weblog:entries}

Of course, in the case of the active single entry page, the conditional returns true:

url_title=="{embed:loc}"

Because the url_title of the entry is in segment three, which when passed to the embedded template results in: url_title=url_title, the conditional rings true for the active page, but not for the other items in the navigation. It seems much simpler to keep all of this inside one template, but due to the rendering order of templates (I assume), you must have this conditional in an embedded template because the hosting template renders first, and the embedded template renders second. You need to first have the host template rendered to determine what the URL is, which the embedded template needs to determine whether or not the conditional is true for each item in the navigation list.

Confused? Me too! For problems like this, I need absolute quiet, a cup of strong coffee and a lot of patience. Enter the next problem:

My portfolio sub-navigation consisted of links that call up a multi-entry category page which was limited to one entry.

<li id="interactive"><a href="http://www.transopticmedia.net/portfolio/interactive" {if segment_2=="interactive"} class="current"{/if}title="Gallery">interactive</a></li>
<li id="events"><a href="http://www.transopticmedia.net/portfolio/events" {if segment_2=="events"} class="current"{/if} title="events">Events</a></li>
<li id="motion"><a href="http://www.transopticmedia.net/portfolio/motion" {if segment_2=="motion"} class="current"{/if} title="motion">Motion</a></li>
<li id="print"><a href="http://www.transopticmedia.net/portfolio/print" {if segment_2=="print"} class="current"{/if} title="print">print</a></li>
<li id="web"><a href="http://www.transopticmedia.net/portfolio/web" {if segment_2=="web"} class="current"{/if} title="web">web</a></li>

You can see that a current state is indicated with a simple conditional that compares the segment URL. What about the current state in the thumbnail navigation for the one, latest entry that is allowed to appear on my multi-entry category pages? Since the third segment of the URL is blank because the category page simply calls up the latest entry automatically, the conditional that I set earlier for my thumbnail navigation never rings true so never applies the “current” state to the active thumbnail on multi-entry pages.

After a lot of time spent researching a way to sort my entry dates with PHP to find out a method for telling my embedded navigation that the latest item should have a “current” state applied to it’s link, it finally dawned on me that it would be much easier just to skip the multi-entry page altogether. I really don’t need it. The way I’m using it, it might as well be a single-entry page.

So, my solution for this was to change my category-level navigation for each category to render a list item that is linked directly to the latest entry, then to use a segment conditional to apply a “current” state when selected. Using url_title_path allows you to pull out the latest entry’s URL. The link text remained that same as it was when the link was directing to a template path for a multi-entry page.

{exp:weblog:entries weblog="portfolio" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="latest"><a href="{url_title_path=portfolio/latest}" {if segment_2=="latest"} class="current"{/if}>latest</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="8" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="interactive"><a href="{url_title_path=portfolio/interactive}" {if segment_2=="interactive"} class="current"{/if}>interactive</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="7" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="events"><a href="{url_title_path=portfolio/events}" {if segment_2=="events"} class="current"{/if}>events</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="6" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="motion"><a href="{url_title_path=portfolio/motion}" {if segment_2=="motion"} class="current"{/if}>motion</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="4" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="print"><a href="{url_title_path=portfolio/print}" {if segment_2=="print"} class="current"{/if}>print</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="5" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="web"><a href="{url_title_path=portfolio/web}" {if segment_2=="web"} class="current"{/if}>web</a></li>
{/exp:weblog:entries}

Now I’ve taken the multi-entry page completely out of the loop and have a current state for every navigation item in the portfolio. My only concern with this method is that it might create extra database queries. But, I assume I can overcome this performance hit with template cacheing. Is this the most efficient way to do this? I’m not sure and I’m certainly open to other ideas.

Opera Unite

2009-06-17T10:01:05Z

Let me preface this post with this: I’ve never been a regular Opera user, although I’ve always had some respect for it. I’ve just never been inspired to use it over Safari. I’m pretty set in my ways when it comes to browsers. When Mac OS X came out, I was quick to adopt Safari and I’ve had a really hard time switching to anything else since then. Firefox is great, standards-compliant, and I even have my bookmarks synched with Safari, but for some reason I just don’t feel right unless I’m using Safari. I proof sites I’m working on in Firefox and the range of unpleasant and web-standards-breaking IE builds and, less often, Opera.

When I read a headline today that Opera 10 Beta was going to revolutionize the web, my curiosity was piqued. Opera has a rich history of creating standards-compliant browsers that cater to the user’s preferences. They create a great browser for people with visual impairments and other disabilities. According to the Opera website, the new browser would be “a Web server on the Web browser”. After reading a bit more, I took the plunge and downloaded it. You know what? I think they may just have something.

Opera Unite is a new platform that allows developers to create applications that enable people to share information directly between browsers, cutting out the middle man - the web server. The Opera browser effectively behaves like a web server, dishing out or sharing files on a variety of three levels; public, limited (by invite with a URL), and private, to anyone with a browser . Opera Unite behaves as a gateway between browsers (the visitor doesn’t need to be using Opera). You can share your media library with friends or with yourself on a different computer, or while you are away from home. You can select a file sharing folder on your computer and share files on the same three privacy levels, or serve a full website from your browser. The caveat is obviously that the serving computer must be running, with Opera Unite running. Opera Unite lives in the browser, but you must additionally turn that functionality on.

As a test, I put a 40 mb video in my file sharing folder, and then pasted the URL for file sharing into Safari, and downloaded the video. It took 13:22 to download it. Not bad, I suppose. It will definitely be a faster and more reliable way to transfer larger files directly to a remote user than through iChat. As a test, I visited the URL for my music library on my iPhone. Although the page loads and I can see the list of albums, the button functionality wasn’t quite right and I couldn’t play the songs. But it’s beta, and they could potentially work around that.

Aside from Opera Unite, the browser is standards compliant and it renders pages extremely fast. Side-by-side, I’d say it is as fast a Safari. Users can re-skin the browser to their liking. There are two stock skins installed with the Mac build; Opera Standard and Mac Native, but users can install more and switch between them at will. There are a range of other new features, including facial gesture recognition for navigation, Geolocation API support and “Speed Dial”. When you open a new tab, you get a “Speed Dial” layout of screen caps of sites that you visit frequently, much like the new Safari 4.0 release. The browser includes some nice developer tools, that allow the user to reduce to the page to the bare page heirarchy, with ID’s and Classes labeled.

I think Opera has a clever idea, at the very least, and a great implementation of it. A part of me really wishes it would have been an idea generated on an open source platform, like Mozilla or Webkit, where it would take off faster. I could be proven wrong, but I think the potential of Opera Unite is limited by the small user base (growing a bit, at 2.2% in May, according to w3cschools) and proprietary nature of the browser and I wouldn’t be surprised to see many of these features swept up and duplicated in the more popular Webkit and Mozilla browsers in the near future. The idea is nonetheless very progressive and it will be interesting to see what independent developers create for it. For me, Opera Unite provides a quick and very easy way to access files when I am away from home, or to quickly set up file sharing with other people. If they port out Unite to the iPhone, one could listen to their entire music library on the go. The downside is of course the fact that the serving computer must be running for all of these services to be available, and I generally prefer to shut down my computer to save electricity when I’m not at home. With that in mind, I can still envision myself using it to facilitate file transfers to remote project team members, sharing a great song with a friend, and to help with doing work on the road.

Hydrogen Car Design to be Released “Open Source”

2009-06-16T17:01:52Z

Riversimple unveiled their hydrogen car today in London. The designs for the car will be released online, and open source.

It’s interesting to consider the how much faster green technologies, and technology in general, would evolve if more durable goods companies followed the open source model. The proposed system in this case releases the plans and design of the hydrogen car, and in turn requires agreement from external companies that are making it to share any design improvements with the original designers, Riversimple, who in turn then republish these improvements online and open source. This obviously reduces the overhead and need for Riversimple to create a large manufacturing facility and distribution network and allows Riversimple to focus on engineering. The open source movement in software has certainly improved the quality and availability of software for PC users, for example; Mozilla, Webkit, Linux, etc. The open source movement succeeds by engaging a community, driven by a common goal, rather than by following the old model of creating products purely for profit. Can this business model revolutionize industry? Can a failing GM be broken into a thousand localized workshops spread throughout the world?

Visit the BBC news article: http://news.bbc.co.uk/2/hi/science/nature/8103106.stm
Visit the Riversimple site: http://www.riversimple.com/

Assigning movie clips levels in Actionscript 3.0

2009-06-04T20:17:06Z

I’m relatively new to Actionscript 3.0, but I recently took the pledge that any new projects I build will be in AS 3. Recreating the concepts of AS 2 in AS 3 can be a daunting task. One issue I ran into today, was learning how to assign a stacking order to externally loaded clips.

in Actionscript 2.0, you can load external or library movie clips into levels to create a stacking order of movie clips on the stage. For example, you might have a navigation clip that always loads at the highest level so it remains visible and on top of all other clips. In Actionscript 3.0, level functionality has been removed. In AS 3.0, you can recreate this effect by using setChildIndex. In AS 3, all external content must be loaded into a container and you can then set the z-index of the container. Loading an external swf and setting the z-index of its container is pretty straightforward. In the following example, I’ve created a function that loads an external SWF and assigns it a z-index. I’ve added an Event Listener to a button (actually, a movie clip) on the stage that calls this function when clicked:

function doLoad01(event:Event):void {
    var request:URLRequest = new URLRequest("myClip.swf");
    var ldr01:Loader = new Loader(); //
    this.addChild(ldr01); // "this" = the stage, the "child" is the loader container
    this.setChildIndex(ldr01, 10); //this sets the z-index of the swf's container, "ldr01", to level 10
    ldr01.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
    ldr01.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    ldr01.load(request);
} 

As you can see, the method for loading clips and sending them to levels is pretty straight-forward, but compared to AS 2 has changed quite radically.

Chicago Design Archive

2009-05-29T10:58:04Z

This site has been around for years, but I remember what a valuable resource the Chicago Design Archive site was for me when I first moved to Chicago. It was a great way to get acquainted with Chicago’s design legacy. The site covers most areas of graphic design, including; identity, print, advertising, packaging and environmental design.

Unfortunately there are some gaps in information about particular items, such as the date it was created, but the collection is visually stunning and gives a great overview of Chicago design and the Midwest aesthetic. Since I moved to Germany, I’ve been revisiting the gallery to compare and contrast what was happening in the Midwest with the European design aesthetic.

Visit the site: www.chicagodesignarchive.org

Designer: Paul, Arthur, Client: Playboy, Date: 1960, Subject: Magazine Spread

Adobe After Effects CS4: Using the Unified Camera Tool

2009-05-16T11:39:04Z

Adobe has clearly spent a lot of energy between releasing After Effects CS3 and CS4 on improving the 3D features and tool sets. For the me, my favorite addition right now is the Unified Camera Tool and the speed at which it allows one to set the orbit and position of the cameras. The only downside is that you’ll need a three-button mouse to take advantage of it.

With the Unified Camera Tool, setting up the camera position in your scene goes incredibly fast.

You’ll see the Unified Camera Tool icon in the topmost tool bar in AE:

If you click and hold that icon, you can see the three camera tools underneath; Orbit Camera Tool, Track XY Camera Tool and Track Z Camera Tool.

If you have a three button mouse, you’ll need to make sure it’s set up to function with three buttons in system preferences (if you are on a mac) . I’ve got an Apple Mighty Mouse with the primary button on the left, secondary on the right and the trackball is set as my third button. Once that’s set up, try scratching together a quick scene with some objects distributed in 3d space and after a few minutes you’ll see how much easier and more intuitive it is now to adjust the camera.