Review: Writing Interactive Fiction with Twine

Writing Interactive Fiction with Twine - Amazon affliate link

Writing Interactive Fiction with Twine  by Melissa Ford is from Que Publishing (2016). This book is part software manual, part writing workshop.

The software described in the book, Twine, is free to download. There are sites mentioned in the book where you can publish your completed interactive fiction. If you have your own web site, Twine stories can be published there.

If you loved the choose your own adventure books from a few years ago, this is the modern version of that type of storytelling.

Twine can be used to create more than stories. It can create games, puzzles, and role-playing games. It’s meant for game designers and game players who have lots of ideas of their own for exciting games. (I think it would also be a great way for people who love to write fan fiction to work their way into a more high tech approach to storytelling.)

In terms of writing advice, the book talks about story structure, character building, creating settings, balancing pacing and action, keeping players engaged, and the all important storytelling rule to “show, don’t tell.”

The approach to the software used in the book is step by step. You should read the book with Twine open on your computer so you can try out all the ideas and suggestions and learn how to write in the Twine languages.

The book instructs in the use of macros in a choice of Twine languages. It also explains how to create variables, conditional statements, and arrays. With the help of macros for history, either, random, click, mouseover, prompt, count, append, prepend, replace, remove and more, a user can create a complex and exciting interactive world. There are built-in Twine functions to control turns, display, actions and more.

A Twine writer can use HTML and some CSS to change fonts, backgrounds, sidebars, links and more. You can import Google fonts with the stylesheet. Twine lets you add images to your story.

If you are interested in creating interactive fiction or games that you can easily share with others, you should take a look at Twine as your software tool. This book will make you an expert user with an easy to follow, step-by-step approach.

Summary: Melissa Ford shows you how to create a game or puzzle using Twine software, and helps you be a better writer in the process.

A review by Virginia DeBolt of Writing Interactive Fiction with Twine (rating: 5 stars)

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy.

New Tool: Responsive Image Breakpoints Generator

Responsive Image Breakpoints Generator

A new open source tool, Responsive Image Breakpoints Generator, should be at the top of your to-do list of new things to learn to use. Developed by Cloudinary and offered to web designers for immediate use, the tool describes itself,

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

After you choose what you want the breakpoints generator to do for you, you can then download a zip file which contains the HTML5 code which uses the srcset attribute of the img element to set up the responsive breakpoints. The zip file also contains all the images that are referenced in the srcset attributes.

For a longer description of the tool, see this excellent article at Smashing Magazine, which explains a bit more about the tool.

5 Cool New Color Scheme Tools

How do you pick a color scheme for your design projects? Do you browse various color palettes? Perhaps you employ tried-and-true color wheels. Both are good ways to develop color schemes, but if you want to discover fresh new schemes you might want to give the following five new and cool color scheme tools a try.

1. Interaction of Color

interactions

You might be familiar with Josef Alber’s “Interaction of Color,” a must-read for all graphic designers published by Yale University Press. Now, meet the iPad app, which features Alber’s teachings alongside interactive plates and videos. The app lets you learn more about color theory and helps you pick the perfect color scheme with its palette tool, which behaves “like paper.”

2. Flat UI Colors

ui flat

If you’re into flat design – the modern web and mobile design trend – then you’ll love this free flat UI color tool, which lets you easily copy numerical RGB and hex values for the most popular colors used in the Flat UI Pro palette. The only way this application could be better is if it included suggestions for complementary colors based on the colors you’ve added to your palette.

3. ColoRotate

color rotate

A new kind of color scheme development tool that lets you build palettes in 3-D, ColorRotate is available on the web or as an interactive iPad app. Click and drag your way to a new custom color scheme, then tweak adjustments on the sliding scale. Or, browse some of the other color scheme creations crafted by users who came before you.

4. Colorzilla

color zilla

The ultimate color tool for Chrome, even if it’s still in beta. Colorzilla lets you get the color of any pixel on any page, generate CSS and CSS gradients, analyze any URL to generate a color palette, and, of course, pick colors to add to a saved palette. If you use Google Chrome, add the Colorzilla extension to your browser (it’s free) and start picking colors today.

5. ColorBug

color bug

A light yet incredibly useful color scheme application for Windows, ColorBug is essentially a color picker tool that lets you drag and drop colors to multiple palettes, then make adjustments to those palettes right in the application. You can select different color code formats, create instant CSS gradients, and even generate color swatches for popular design applications such as Adobe Swatch Exchange (.ase).

Have you tried any of these color scheme tools? Which is your favorite, and how did it stack up to your usual method of color palette selection? Let us know in the comments!

[Ed.: This is an updated version of a post that was published earlier on Web Teacher.]

Guest Author’s Bio: Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint and Facebook.

Flash is Dead. Long Live Animate

Adobe Animate CC Logo

Flash has had a few hard years. HTML5 whupped its ass. So it’s going away.

Sort of.

In its place, Adobe will give us Animate CC, which loses the loser of a name but retains much of the function. There will be added functions, as well. Here’s Adobe’s announcement of the change.

To summarize the changes, here’s how Adobe describes what the new software will do:

  • Drawing, illustration and authoring
    • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
    • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
    • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
    • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
    • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
    • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
  • CreativeSync integration
    • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
    • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
  • Output capabilities
    • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
    • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
    • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
    • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

The new Adobe Animate CC will be released in January 2016.

Amara Makes Video More Accessible

I just discovered a subtitling tool called Amara that is a global captioning and translation project for video. I’m a couple of years behind the times. In case you haven’t heard of it either, here’s an introduction to the tool.

Amara is now helping with translations and captioning in many places. They say their caption editor is easy to use. I didn’t try it out, but it’s free. Amara also provides you with a way to connect to others around the world who might be willing to help translate and caption a video into another language. Since translating and or captioning a video is a labor intensive process, it’s interesting that this web-based tool is using the idea of crowd sourcing the work.

  • There’s a good review of how using the tool works at PCWorld. The review is a couple of years old so there may be improvements since then.
  • The Global Voices Community Blog has a recently updated post of instructions for translators who use Amara.
  • Vimeo, TED, and many other organizations partnered with Amara. TED provides a set of tutorials for Amara users.

Their Twitter account is @AmaraSubs. Their Facebook page is Amara Community. Neither have frequent postings, but they are worth following if you are interested in accessibility or teach accessibility in your web education classes or at conferences.

Suggestions from a Web Educator for the Dreamweaver Folks at Adobe

I’ve been teaching Dreamweaver again. Yeah, I do it all the time, I know. I have some ideas about what Dreamweaver needs to do to make life easier for newbies who haven’t been using the product forever like I have.

The New Document Options

The Dreamweaver New File dialog box
The Dreamweaver New File dialog box

These suggestions deal with the options for people who are opening a new file and starting to work on a new site.

  1. Get rid of the fixed width layouts.
  2. Provide a 1, 2 and 3 column responsive layout
  3. The Fluid Grid layouts are very complex. Find a way to make them more user friendly. In fact, if there were enough useful responsive layouts provided in the layouts category, fluid grids could go away, period.

The CSS Designer

Regarding the CSS Designer interface, when media queries are present, even if all the CSS rules are in a single stylesheet, the CSS Designer lists them as separate stylesheets. It would be clearer if the terminology was different. Perhaps something like “save the styles in” or “locate the style in” to indicate where to place them in the single stylesheet.

In the panel where the selectors are listed, it would be very helpful if some sort of divider or identifier could be included to indicate which selectors went with which part of a stylesheet. When there are media queries, there are several selectors by the same name. Yes, I know that the selectors at the end of the stylesheet would be the ones used in the @media rules, but that isn’t obvious to someone rather new at CSS.

Why Adobe Should Care About This

I see people who are new to Dreamweaver in my classes. If Adobe wants them to convert to subscribers and users, they need to pay attention to the learning curve on the product. I can’t tell you statistics on how many of the people who come to learn Dreamweaver go away thinking maybe they’ll use WordPress instead, but it’s a good percent. Putting aside my female tendency to be modest –  I’m a good teacher. I’m doing everything humanly possible to make successful Dreamweaver users out of my students. Some attention from the Adobe Dreamweaver team should go into the same consideration.

Adobe Creative Cloud: The Good News and the Bad News

good vs. bad

The good news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. You’re up to date all the time.

The bad news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. Every time you update it’s different and you have to figure things out all over again.