Adobe Flash Lite on mobile

October 6, 2009 § Leave a comment

Adobe has updated the Flash Lite development.

Flash Lite requirements:

Free videos related to mobile are available on iTune
Adobe Creative Suite Video Podcast

Paper Prototype Stencil for iPhone

April 23, 2009 § Leave a comment

Yahoo releases a very useful stencil kit at Yahoo! Developer Network (YDN) for paper prototyping and for usability testing.

Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG).

This is not the native artwork with layers as it is saved as a compressed file. You can’t move or edit each individual item. For professional designers, it save a bit of time and effort as you don’t have to register as developer and learn how to use Dashcode and Xcode Interface Builder to come up with mockup.

For developers, you can easily to Dashcode or Xcode Interface Builder to show the screen. However, this is something you can share with your product manager so they can explain things better on paper.

For non-technical business owners, it is extremely useful because you can use it as paper modeling. You can beat anything better than FREE.

Mobile – iPhone
Mobile – Nokia and Black Berry

Firework CS4 CSS & Image Export

April 20, 2009 § Leave a comment

I’m going to explain the proper approach to layout prototype for exporting web compliant CSS & images using Firework CS4

By default, there is a web folder. Always create new folder to create div or content. Create a new layer. It becomes a new folder. Use it to create div elements for page layout. You can consider a div for header, a div for footer, a div for content. Create a new rectangle and rename the layer. The rectangle layer name will become the html <div> id. Size of new rectangle will become the size and position of div.

Any image you want to be exported to the CSS must be a slice-holder. You can optimize the image by selecting image type and format.

Don’t allow any overlapping on the text rectangle.

If you create rectangles within main rectangle, Firework will export those smaller rectangles as child of those container div. Think the layout as columns and rows so you can effectively create unique containers.

After you export as CSS & Image, you can open Dreamweaver to review the HTML and CSS codes. It is very cool…

Adobe CS4 Firework

April 20, 2009 § Leave a comment

Many are not aware of the latest CS4 Firework has evolved into far more than a lighter weight of graphic software like Photoshop. CS4 Firework has transformed into a rapid prototyping software for any design project including website or web app.

The key advantages are the ability to mix bitmap and vector images together, able to import native artwork from Photoshop, Illustrator, etc. You can scale any image with 9 Slice transformer with smart guide without distorting the images. 9 Slice scaling can be used without using symbol.

  • 9 Slice Scaling
  • export interactive PDF
  • export AIR
  • export to Flex
  • export HTML/CSS

You can generate password-protected interactive PDF for clients to review and sign-off. Create AIR prototype that run on any platform. Apply lighting effects, shadow effects, styles, blend modes. Import hierarchical layers and layer effects on Photoshop PSD files. Import Illustrator AI files without losing integrity. Export Fireworks PNG files directly to Flash CS4 without losing editability on vectors, bitmaps, animations and multiple states.

CS4 Firework is designed to add it back to your design and development workflow. You can use common library to add standard compliant HTML and CSS code. It uses CSS-based fluid layout design instead of absolute positioning layout design. It is designed to develop Mockup or templates with better and quicker design work flow and ease into the development integration.

CS4 Firework Animation

April 4, 2009 § Leave a comment

F8 function is to access the Convert to Symbol to convert a object into symbol.

Set the symbol type to Animation.

Use CS4 Fireworks Measure tool in the Vector category of the Tools panel or in the Auto Shape Properties panel (the last button in the panel) to create a diagonal motion path.

Use a new layer with opacity as mask layer. Make sure State 1 is the current state. Select both mask layer and animated symbol and select Modify > Mask > Group as Mask.

CS4 Firework Updated CSS Export Script

April 4, 2009 § Leave a comment

It is worthwhile to note that there is a updated CSS Export script available here that is more standard compliant.

  • Creating semantic markup is made easier by tagging text objects
  • All font sizes are created using percentages, to allow for user text resizing in all devices and browsers
  • Div elements with heights now also have a min-height equivalent to allow for varying amounts of content and user text resizing
  • Multiple paragraph elements are now created from a single text object where appropriate, as opposed to using breaks
  • There is an improved, more flexible library of HTML component symbols, including a List Item symbol to create unordered lists
  • Divs with all border placements and sizes now output at the correct size and positioned more correctly

There is good CSS resources here.

CS4 Firework SmartCSS

April 4, 2009 § Leave a comment

SmartCSS started out as an extension for Fireworks CS3, now it is included as a standard feature in Fireworks CS4.

The idea of using CS4 Firework is to rapidly prototype from wireframe to mockup, from interactive PDF to CSS and Images export. It is designed to reduce the efforts and steps in workflow from scratch paper prototype, wireframe to interactive mockup. It is designed to save time and steps in creating templates. It would save developers time to handcode from scratch.

2 Export Modes:

1) uses a layout engine to analyze the placement of the objects in the Fireworks design and generate the expanding pages

2) uses absolute positioning to place the objects in the design

If your design includes overlapping objects that do not facilitate the export of expanding page content, the layout engine will be disabled, a warning will be displayed, and the CSS export option will use the absolute position mode to generate the CSS code.

When you use absolute position mode, Fireworks simply places each design object at a precise location on the browser window.

Where Am I?

You are currently browsing the Adobe CS4 category at Web Builders.