Using the SCSS Baseline Type Utility
Typographers and type enthusiasts will attest that aligning a typeface to its baseline grid is an essential part of any text-heavy design. Maintaining a consistent vertical rhythm is an important part in the creation of beautiful typography and layouts. This is accomplished easily in programs such as Adobe InDesign. However until now, I have yet to find a tool that easily accomplishes this with web type, while remaining flexible to the individual needs of a project.
Continue reading →
Create Music with Technitone (again!)
In 2011, we worked with Google on a Chrome experiment to demo the then-new Web Audio API. Although we were only tasked with coming up with something that could show the new audio features, our (often-excitable) team came up with a project that pushed our capabilities in a ton of technologies, including WebGL, Canvas, web sockets for multi-player, and CSS animations. For a great technical dive into the original Technitone.com we launched with, check out the html5rocks.com article!
Continue reading →
Continue reading →
In the course of every project or endeavour, there is an inevitable need for open discussion and the effective capture of ideas, goals, and requirements. Whether you’re taking notes, doing UI/UX planning, or are deep into design, taking a step back to leverage sketching can prove to be a key part of a productive creative process.
Sketching allows you to freely and more quickly explore concepts and solutions without involving a more rigid digital design tool like Photoshop or Sketch. There are no rules or constraints, just the freeform expression of ideas. Continue reading →
Thanks to everyone that has played and supported Bardbarian so far! It has been amazing to see what the Treefortress guys have come up with, and we couldn’t be more thrilled with the result.
An update has been posted on the Steam Community about what players can expect from Bardbarian once it arrives. Check it out, and be sure to leave your thoughts.
If you haven’t checked out Bardbarian on iOS, yet – you can download it in the app store. Keep an eye here, or on the Treefortress blog for more Bard-related announcements in the coming months.
We would like to let everyone know that Spelling Plus Library (aka SPL), our Flash/Flex spell-checking library has been released open source.
We first released SPL as a commercial component over 6 years ago, with a major overhaul to support the Text Layout Framework almost 4 years later. It was always our goal to provide a high quality, performant, and feature rich product, backed by great support. As the requirements of the industry have shifted, and the demand for Flash components has dropped, we felt it was a great time to release it to the community at large.
The entire SPL repository is now available under an MIT license, meaning it is free to use for everyone, including on commercial projects. This includes:
- The SPL source code. Word list loader and parser, text highlighter, and spelling suggestion and replacement utilities
- The Flex-based AIR application that helps create, modify, and export word lists
- All examples, spikes we used for testing, and some internal demos
- The build process to export Flash and Flex SWCs
- Generated word lists using custom compression for US and UK English, along with tested word lists for Spanish, French, and German.
You can check out the GitHub repository to get everything. Feel free to submit pull requests. Please note that we are no longer supporting SPL, so any questions or issues reported may not get immediate responses.
Thanks to our supporters over the years, we are super proud of what SPL has accomplished, and hope that it will continue to see life moving forward.
We recently spent some time playing with a new feature in Chrome called Web Audio Input, which provides access to a microphone or other audio input.
The result was “Orcastra” (ha!) which allows users to select one of five deep sea characters who lip sync along to the user’s audio input.
Creating Orcastra was quite straightforward. The characters were all created in the Flash CS6 IDE (MovieClips with timeline animations) and exported to HTML5 using Toolkit for CreateJS. We used PreloadJS to load all our assets, TweenJS for simple tweens, and EaselJS as the display layer.
We use feature detection to ensure the browser supports audio input, prompt users to allow access to their microphone, then listen for volume changes (with maximum mic gain) to confirm audio input before showing the character selection screen. Once the user picks a character, it’s just a simple matter of syncing the CreateJS animations with the current input volume level.
Orcastra should work with any Web Audio Input enabled browser. This currently includes the latest version of Chrome for OSX, and Chrome Canary for Windows, but you’ll need to enable the feature with chrome://flags and restart your browser before trying it.