Automate Text to Image Banners

From macosxautomation.com:

http://www.macosxautomation.com/lion/createbanner/index.html

Create Banner Image from Text

Those familiar with the creation of web-content know that because of font availability and other issues, it may be necessary to display text on a webpage as an image instead of using CSS. The Create Banner Image from Text action is designed to simplify the process of creating an image from text. This action will render text passed to the action as an image, styled using either chosen type parameters or, in the case of passed RTF input text, use the existing formatting of the passed text.

The Action Interface

The following desccribes the various controls and parameters used in the action interface.

1. Image Filename - By default, this text input field (1) is disabled, in favor of automatic naming using the selected text as the image name. To enter a custom name, deselect the checkbox located to the right of the field (2)
   
   TIP: this input field will accept text tokens, Automator workflow variables, or a combination of the two, as the name for the rendered PNG image file. Therefore, unique names can be dynamically generated for each use of the action.
2. Automatic File Naming - Select this checkbox (2) if you want the name of the rendered PNG image file to be based on the selected text. For example, the selected slide title “My Slide Title” would be used to name the generated image file: “My Slide Title.png”
3. Destination Folder - Pick the folder that is to contain the rendered image from this popup menu (3).
   
   TIP: this popup menu will also accept Automator workflow variables, so receiving folders can be determined dynamically.
4. Replace Existing File - Select this checkbox (4) if you want to replace any existing image files with the newly rendered file.

5. Text Style - This control (5) determines the method used to set the style attributes of the rendered text. If the popup menu is set to custom (above), the typeface (6) and size (8) controls will be enabled, allowing you to choose the font, color, and size for the rendered text. However, if the control is set to use style of Rich Text input (below), the Rich Text formatting (RTF) settings of the input text will be used.

6. Typeface - Select the typeface to be used in rendering the image, from this popup menu (6) displaying the list of fonts currently installed on your computer.
   
   TIP: to navigate the menu quickly, click once on the popup to display the menu, then type the first letter of the font you want, then use the up and down arrow keys to highlite the desired typeface. Hit the Return key to make the selection.
7. Text Color - Click this color well (7) to summon the system color palette, and select the color to use for the text in the rendered image.
8. Type Size - Enter the font size in this input field (8) to be used in rendering the selected text to image.
9. Preview - The preview view (9) displays the current parameters of color and typeface. The type size is not shown to scale. When the action is used in a service that is set to display when the service is run, the preview view can be resized horizontally by dragging this control to the right. The text will display in actual pixels (up to 128 pts)

Service Collection

A common use of the action is in the creation of a service that renders the text selected in any application, into an alph-channel image. This simple service workflow is shown below:
You can download and install this example and these other service workflow files:

1. Render Selected Plain Text as Image - this workflow service uses the currently selected plain text (in any application) as the source for the banner image. You set the text properties, such as font, size, color, yourself. (Available Text Style: Custom)
2. Render Selected Rich Text as Image - this workflow service uses the currently selected rich text (in any application) as the source for the banner image. By default, the text styles of the passed text are used, but can be overridden using the custom text style option. (Available Text Style: RTF or Custom)
3. Create Banner Image with Clipboard Text - uses the text copied to the clipboard as the source for the banner image. By default, the text styles of the passed text are used, but can be overridden using the custom text style option. (Available Text Style: RTF or Custom)
4. Render Prompted Text to Image - prompts the user to enter the text for the banner image. You set the text properties, such as font, size, color, yourself. (Available Text Style: Custom)
5. Render Selected Text as Image and Add to Slide - (shown below) this workflow service provides an easy way to convert slide titles in Keynote to image files, enabling you to use non-standard fonts in presentation placed on mobile devices that have a limited number of installed fonts. By default, the text styles of the passed text are used, but can be overridden using the custom text style option. (Available Text Style: RTF or Custom)

TRY IT YOURSELF! Download a zip archive of the service workflows list above. To install, double-click each workflow file and click the Install button in each of the forthcoming dialogs. Once installed, the services will be available from the Application > Services menu.

SlideShows using HTML5 / CSS / JSS

HTML5 with CSS and JS slideshow from padalicious.com:

http://padilicious.com/code/slideshows/index.html

Image Slideshows with Transitions

An essential component of internet-based communications is the digital photograph. Nearly every website incorporates the use of images as a means conveying information and emotional messages. The adage by Fred R. Barnard remains true and relevant today: A picture is worth a thousand words.
So some things never change. But, what has changed is how you can display collections of images. With technologies like HTML5 and devices like the iPad, you can now create attractive interactive slideshows that incorporate video-like transitions like dissolving from one image into the next.
This article will explain the structures and methods used to create basic HTML5 slideshows with transitions, ideal for displaying your images with flair!

The Technique

Although you won't have to actually write the JavaScript and CSS required to create these example slideshows with effects (you can copy and paste the provided sample code), it’s still important to understand the techniques involved.
The slideshow examples all use the same techniques of using JavaScript to trigger transition effects to images by applying CSS stylesheets to the images and their container elements.

These are the steps:

1. The webpage hosting the slideshow will contain a DIV element that will act as the container for the slideshow. In standard HTML, a DIV is a block-level element that visually isolates a section of a document on a webpage. A DIV can contain other DIVs, SPANs, images, videos, etc. The slideshow DIV will be assigned a unique indentifer (id) that will enable the JavaScript controllers to locate it on the page. Also, the slideshow DIV will initially contain a single image.

2. When triggered, the slideshow JavaScript script will begin by adding the next image to be shown in the slideshow, to the slideshow container. It is placed in the DIV but behind the current image.
3. Next, the script assigns CSS classes to the slideshow container and each of the images it contains. These CSS classes define the initial states and properties of the elements prior to applying the transition.

4. The transition effect is triggered by changing the CSS stylesheet class of the container to a second CSS stylesheet. When the container style class is changed, the browser applies the indicated transition type (in this case a cross-dissolve) to the image elements in the manner and timing described in the CSS classes.
5. When the transition has completed, the script cleans up by removing the original image from the container and resetting the slideshow container back to its default state (no assigned class).

The result is an attractive transition between the two images and the slideshow is ready for the user to proceed to the next image. These steps are repeated each time the user activates the slideshow trigger.

Adapting the Examples for Use

You can easily adapt the examples for use in your projects. Simply copy the source code of the transition example you want to implement, and perform these procedures:

1. Make sure your images are named numerically and in sequence: i.e. 1.jpg, 2.jpg, 3.jpg, 4.jpg, etc.
2. Edit the value of the imageCount variable in the JavaScript script so that it matches the number of images your slideshow will contain.
3. If your images are not scaled to 640 x 480, then edit the width and height properties of the #photo-container CSS stylesheet at the top of the source to match the dimensions of your images. (NOTE: if you are using the cube transition, be sure to edit the other CSS stylesheet to account for the new image width)
4. If your images are not placed in the same folder as the webpage source file, adjust the value of the incomingImage.src variable in the script to reflect the new path, like this:
   
   incomingImage.src = 'path/to/image/folder/' + nextImageFilename;
5. Make sure that the JavaScript script for preloading the images contains these two lines for every image:
   
   var image8 = new Image();
   image8.src = "8.jpg";

That’s all that is necessary to have a slideshow with CSS transitions!

BASIC SLIDESHOWS

Here are example slideshow demonstrating some standard transition effects:

• PUSH DOWN • (iPad)
• SPIN • (iPad)
• SCALE • (iPad)
• DISSOLVE • (iPad)
• SWIPE • (iPad)
• HORIZONTAL FLIP • (iPad)
• VERTICAL FLIP • (iPad)
• FALL • (iPad)
• ROLODESK • (iPad)
• DOOR • (iPad)
• SWAP • (iPad)
• CUBE • (iPad)
• TOSS • (iPad)
• FADE-THROUGH • (iPad)

SOURCE CODE

Here is the source code for the cross-dissolve example.

All CSS Scrolling SlideShow

A great Chris Coyler demo for an infinitely scrolling slideshow:

http://css-tricks.com/infinite-all-css-scrolling-slideshow/

... The way I did it was to make one big long graphic where the first part and the last part are visually identical.

Then you animate the left position of that image until it appears it's completed one full cycle (but really is just moved far enough to look identical), then it quickly warps back to the original position and starts over.
We just need an outer wrapper to be relative positioned and hide the overflow, then an inside container in which to animate (which is the image).

NPR Dynamic Content - Create Once, Publish Everywhere

http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/

COPE: Create Once, Publish Everywhere

Guest Author, October 13th, 2009

Comments(52)

This guest post comes from Daniel Jacobson, Director of Application Development for NPR. Daniel leads NPR’s content management solutions, is the creator of the NPR API and is a frequent contributor to the Inside NPR.org blog.

The digital media world is in the process of dramatic change. For years, the Internet has been about web sites and browser-based experiences, and the systems that drove those sites generally matched those experiences. But now, the portable world is upon us and it is formidable. With the growing need and ability to be portable comes tremendous opportunity for content providers. But it also requires substantial changes to their thinking and their systems. It requires distribution platforms, API’s and other ways to get the content to where it needs to be. But having an API is not enough. In order for content providers to take full advantage of these new platforms, they will need to, first and foremost, embrace one simple philosophy: COPE (Create Once, Publish Everywhere).

Much more online, including a detailed slideshow example of pages on multiple platforms:
http://www.slideshare.net/danieljacobson/npr-examples-of-cope?from=ss_embed

Flow Chart:
http://blog.programmableweb.com/wp-content/npr_architecture_diagram.jpg


NPR API:
http://www.npr.org/api/index