Can you translate PSD to HTML?

Someone send me an email. Can you translate a PSD to HTML?

After a few minutes I wrote back yes. But then I attempted to make sure everything was working as I always do.

My code editor had a bug. DAGNABBIT!

I fixed that bug and made a few other changes and now, now you can drag and drop a PSD onto this page (or app) and it will create your HTML web page, HTML, CSS and all.

Release 4.7.4 – Snippets… it means sharing…

A snippet is a document (or code) that you can create and share with someone else. It can be an design or meme that someone else can modify or a template that someone else can build onto.

Because of your snippet, you may save someone the pain or trouble of learning what you’ve learned if they did not have the knowledge. They can benefit from your knowledge. Like Isaac Newton said:

“What Descartes did was a good step. You have added much several ways, and especially in taking the colours of thin plates into philosophical consideration. If I have seen a little further it is by standing on the shoulders of Giants.”

Who may have heard it from 12th century theologian and author John of Salisbury:

“We are like dwarfs sitting on the shoulders of giants. We see more, and things that are more distant, than they did, not because our sight is superior or because we are taller than they, but because they raise us up, and by their great stature add to ours.”

To create a snippet is easy. After you create your content in Radiate, go to File > Save as Snippet. A dialog will appear showing a thumbnail, name and description. Give your snippet a name and then click Save.

After your snippet is saved you will have three links. The first will let someone edit the snippet in the Radiate application. They can’t save over your original snippet but they can make a new one. The second will open in the MXML text editor. It shows a live preview and an editor so you can see the code. You can also create snippets in the text editor. The third option is a preview only. You would use this for sharing a prototype with a client or sending a friend a link to your meme.

Changes:
– added support to load snippet via URL
– added support to embed images or placeholders in HTML
– added support to embed thumbnail in the MXML markup
– added support to import radial gradients from MXML
– added new menu item Save Snippet and Import Snippet
– added embed images option to Export window
– added export snippet window
– added import snippet option to ImportWindow

  • removed link to normalize css in HTML page
  • added prevent redirect class to dynamically show prompt using browser onbeforeunload event. can be used to prevent accidental redirect when unsaved changes
  • when adding text to document, like a paste event, pastes now creates a RichText instance instead of Label
  • fixed. paste thrown an error for files, bitmap data and text on desktop
  • fixed bug in line when mouse has not moved
  • started work to fix snap to lines not showing for right and bottom when on application
  • can now click lock in layers item renderer
  • sorted components in component inspector
  • added search to components list

  • changed page doc type to html5

  • fixed zoom to fit content
  • added duplicate item to edit menu
  • fixed items being hidden sometimes on mouse up after drag
  • fixed graphic elements incorrect scaled when zoomed in on desktop
  • fixed no spaces or incorrect spaces between attributes in MXMLDocument exporter
  • added corner radius inspector for rect graphic element
  • fixed HTML CSS outline error in desktop
  • fixed line component dragged to stage not having fill
  • added Sharpen filter
  • when dragging component to Library to create snapshot we create a sharper image for vector graphics
  • fixed MXML editor not showing in ImportWindow on desktop

  • now showing error message when dragging and dropping invalid file from browser

  • fixed fit to scale not quite fitting
  • mostly fixed rich text editor call out not positioned correctly when document is scaled
  • fixed error when copying graphic element
  • fixed cosmetic issue in copying and pasting animation
  • fixed line not changing to constraint on key down unless mouse was moved
  • showing glow around image that can be replaced when dragging
  • fixed snap to edge not choosing nearest snap edge when multiple edges exist
  • showing snap lines until snap animation is complete
  • fixed logout message appearing when mouse is down outside of logout window
  • added import image to File menu
  • fixed error when exporting MXML document
  • fixed bitmap data to string value appearing in Image source property inspector

  • removed before unload event handler that was appearing unnecessarily in browser

  • moved clipboard operations to a ClipboardManager class
  • fixed file extension not being applied when saving multiple documents
  • added clip option to save to library
  • improved keyboard handling
  • fixed undo, redo, zoom and delete keyboard shortcut not working unless Selection tool was selected
  • set default line weight to 2
  • prevented transform controls from showing when spark.primitives.Line is selected (until fixed)
  • added horizontal and vertical edge snapping
  • showing snap lines until animation is complete
  • added exclusions from being exported to HTML
  • added support to export graphic primitives to SVG in HTMLDocumentExporter
  • adding glow when dragging over duplicate icon
  • set focus to search field in gallery view
  • fixed word wrap option not applied to code editor
  • enabled link styles to markup by default in code editor
  • fixed tab order in constraints panel
  • selected item when dragging element into library
  • added method to save multiple files in export window
  • added animation on copy and paste operation to indicate when item was copied or pasted

Changes (might have been mentioned in last post):
– added updateComponentTree
– fixed stack trace not showing results
– added support to add exclusions to component description tree
– added freeform drawing to Line
– fixed selection handler not being removed from graphic elements in Selection
– fixed icon in Zoom not changing correctly on zoom in and out
– removed unnecessary listeners in LayersInspector
– refactored File menu options to save online and changed save to open export document window
– removed unused operations inspector
– disabled resize handles on lines
– double clicking on drop location label now opens the Layout panel
– when saving documents in the export document window a close button shows up (needs work for multiple documents)

How to Create a Meme

This post will show you how to create a meme all from within your browser.

The TLDR (1min 30sec gif):

First open Radiate in your browser and create a new document.

Note: You will need to have Flash Player enabled in your browser or you can download the desktop version here.

Next, find the image you would like to use as a background. For our example, we will use Fry from the show Futurama as our background.

You can search Google or DuckDuckGo and find common images used in memes.

When you’ve found one save it to your hard drive.

Then drag and drop it onto the browser window or click the File > Import Image.

This will open a file dialog where you can select the image and click open and it will be added to the design area.

Now if the image is larger than the design area then it will be resized to fit.

We can restore the image to it’s original size and then resize the document to fit it with one command. Go to the Commands and select “Size document to original size image”

Now our document and image content are the same. If we didn’t do this we would see that border on the right edge when we export our image.

But since the original image is larger than the design area we need to resize to fit. Click the fit button at the top right corner of the window.

Now we can see more of our image.

Notice the zoom percent went from 100% to 49.8% (or whatever it is with your image).

Next we want to add our text. Click the Text tool.

Now, in the design area click near the center of the image. The text editor call out shows up. Type in some text.

The text size may not be the same as what you see above.

To change the text size select all the text (Command + A on Mac or Control + A on Windows) and then choose a font size in the font size dropdown list.

Next we can change the font family using the font family combo box.

The standard font for memes is Impact. This font comes standard on Windows and Mac

When we are done typing we can click anywhere else besides the text field and the text call out will close and it will complete our text editing. You can also click the Selection tool (or any tool) and that will close the Text tool editor.

You will notice two things. The text in standard memes are white and there is a border around it.

With the Selection tool selected double click on our text. This will temporarily open the text editor call out, select the text and change the color of our text using the text color selector.

While the text looks easy to read with this background it may not be easy to read on a lighter background.

To fix this we will add a border around the edge of the text.

Switch to the Filters tab and click on the Add Filter button.

Make sure our text field is selected and select the border filter.

Now we can see a thin border around our text.

We can add more weight to the border. Double click on the border filter. This will open the property inspector for our filter.

With the border weight at 2 or 3 our text is easier to read.

Now we might want to save our meme.

Go to the File menu and choose

This will open a save dialog. Type in the name of your meme and click save.

SVG, FXG, Snap to Elements, Scale Text, Image Gallery and more – Release 4.6.4

Snap to Element Edge
When you drag an element around in the design view guides will appear when you are near another element. When you drop the element it will snap to the edge of the other element. You can enable this by checking the Snap to Element Edge button in the Selection Inspector. When it’s enabled if you want to temporarily disable it hold down the Command or CTRL key.

SVG and FXG Import
Drag and drop an SVG or FXG document onto the application and it will import it. Not all features of SVG are supported at the moment. If you come across an issue send the SVG code. If you it has a lot of layers it may take a while to import. To make using an imported SVG document, lock all the descendant layers. The Graphic container is the same as the Group container but the contents are scaled.

Scale Text with the Transform Tool
Now when you resize a text field you have the option to increase the font size which is different than resizing the text element. To enable this hold down the alt key and the shift key when using the Transform tool. Do not set the font size in the pop up if you use this feature.

Image Gallery
If you’ve ever needed clip art for a project it used to take a lot of time to find images released into the Public Domain under Creative Commons CC0. With the new Image Gallery you can now search and import right into your document. To open the Gallery, select Open Gallery from the Commands menu item or open the Library Inspector and click the Open Gallery button. If you plan to resize the image, go into the Properties Inspector and enable smoothing and set smoothing quality to high. This will increase the quality.

Drag and Drop into Groups (disable option)
There are group components that position and size elements horizontally, vertically or tiled. There’s also the default basic layout group component. This supports x, y, top, left, right, bottom, vertical center and horizontal center properties. By default you can drag and drop elements from one group to another. HOWEVER, if you don’t want to do that and you want to drag and drop around the same group you can disable this now. To disable drag and drop into groups click the icon in the Selection Inspector.

Note: Fast dragging and slow dragging
Dragging and dropping can appear slow on older machines if the Property Inspector is selected. When selecting an element the Property Inspector has to be rebuilt, so dragging happens after the property inspector is built. This can cause dragging to appear slow. Until there’s a fix, switch from the Property Inspector to another view when you are doing extensive dragging and dropping.

Additional Features
– Added support to drag library item onto trash can
– Added keyboard shortcuts for tools in the browser
– Fixed drag and drop not working (drop position was incorrect) when document is scaled
– Exported TextFlow now uses Spark namespace
– Added bring forward, send backwards, send to back and bring to front to Commands menu
– Added support for masks in the Layer Inspector
– Showing live x and y positions as you dragging an element in Selection Inspector toolbar
– Added round to integer option so dragged values will be rounded to whole numbers or fractions. Click the x and y positions label to switch between them.
– Added auto repeat to the undo and redo buttons in tool bar and in the history inspector
– Added support for linear and radial gradient fills
– Fixed properties inspector not getting deactivated. The property inspector makes drag and drop slow when switching to a new element. Close the property inspector when dragging around.
– Added trim transparent pixels from images. Select this item from the Commands menu.
– Added support for filters in the Filter Inspector
– Added menu options for lock layer, unlock layer, lock child layers and unlock child layers to the Commands menu
– Added alignment baseline style to Font Styles
– Made adjustments to pop up overlay manager to fix overlay issues
– Added keyboard handler to prevent opening previous closed tab in Safari with undo keyboard command
– Increased max image cache size
– Fixed drop documents from web not supporting types other than images
– Preventing font family and font size from setting focus back to rich text editor field to support stepping through fonts
– Fixed bug where child elements could be moved when parent elements were locked
– Fixed bug where the down key was not moving the element down
– Added support to hide layout debug helper outline when drag starts

 

Release 4.2.0 is available and online with MXML code complete support

In this release the browser version has been upgraded to match the desktop version. With the browser version you do not need to install anything. You can visit the page and you will receive the latest version. You don’t have to download an app. There are benefits to having applications run in web browsers.

In this release we’ve fixed a bug so you can run the desktop version without an internet connection. We’ve also added code completion while editing MXML in the code editor. We’ve added in the class registry so any of the Spark, MX components or classes can be created via the code view. You can now press CTRL+Enter (or CMD+Enter) in the code view to apply your changes to the design view or press CTRL+Space bar to show code completion suggestions.

There is also a rebuild option in the HistoryInspector to rebuild the design view if part of the layout needs rebuilt. In the browser you can now drag and drop images right onto the page and they will be imported onto the design view.

The text tool has been fixed when adding text over groups. It removes the border around the editable text.

Locked components on the design view now show a red border around them. This applies when you try to select components that are inside of groups when group selection mode is enabled.

Many additional bugs have been fixed and improvements made. Download.

Release Notes:

  • removed scroll bars on container page when layout accidentally overflows in browser
  • added wmode on container page so HTML elements show above application in IE
  • updated icons for online version
  • changed to using ApplicationLoader class to load application locally. Fixes layout issues when not online.
  • removed margins from design view area
  • now loading in and registering classes from flex-config manifests for dynamic namespace to qualified class name resolution
  • fixed documentation not showing in some browsers because of calls to http in https page
  • removed focus rect around text when editing rich text
  • fixed size document to image original size call not working
  • added expand document to contents
  • using class registry to export MXML to the correct namespace
  • added support to set options when importing MXML
  • added live dragging to divider groups
  • removed margin in code editor
  • added dynamic adding of xml namespaces in code editor
  • fixed error messages showing up constantly when editing live in the code editor
  • fixed duplicate components imported when editing application code
  • added option to render typed code when ctrl + enter is keys are used
  • added code complete for MXML
  • prevented tooltip showing on lengthy changes
  • fixed editor in import window creating multiple editors

  • add rebuild in history inspector

  • added initial code completion
  • added secure redirect

  • remove check when not running on localhost

  • removed ace editor js code in Radiate.js (not needed)
  • turned off debug flags in Radiate
  • fixed when images added from the browser are not sized correctly
  • fixed bug when calling clear project home page when not logged in
  • added live dragging to left vertical column
  • added new icons to selection inspector
  • prevent transform from being enable when outline is not enabled
  • fixed bug when iframe has not been created yet in APIInspector
  • fixed bug when console inspector was not showing messages when dispatched to console
  • fixed layout issue in LibraryInspector
  • fixed ace css editor not disabled when hidden

  • added updated ace editor js to template page in RadiateBrowser

  • changed mode to gpu in Radiate Browser (testing)
  • added drag and drop of images into Radiate in browser
  • updated styles in RadiateBrowser
  • removed normalize css
  • organized startup process in main desktop and browser applications
  • changed default width and height of application
  • added addBase64ImageData method call in Radiate
  • fixed embedded image local name incorrect in exported and imported MXML
  • added support to listen to events when parsing base64 image data and load is complete
  • fixed many errors when user is not logged in
  • prevent opening FTP network window when in browser
  • fixed close application when in browser
  • changed selection toolbar to use small buttons instead of checkboxes (still needs work)
  • fixed ace editor not working in code inspector
  • reseting undo history on editors in code inspector (buggy) to prevent undo to previous selection
  • added embed images button but invisible in code inspector (needs testing)
  • fixed console inspector and ace editor bug where appendText was not working
  • redesigned DocumentationInspector
  • fixed bugs by checking for user logged in status in LibraryInspector
  • attempted to fix layout issues with click to upload label
  • dispatching animation end event in AnimatedPanelWindow
  • fixed layout issues with AceEditor in ImportWindow
  • fixed bugs in login window when running in the browser
  • attempted to fix bugs in settings window when running in the browser

  • updated how to docs on adding new features to radiate

  • showing default gravatar icon locally since it’s not coming through. sent email requesting permission to cache icon. read somewhere it was ok but sent anyway.
  • fixed warning to show color when error or warning
  • added swcs to library project instead of referencing libraries
  • attempting to get default property from MXML components
  • added support to get styles, properties and events that are set as child nodes (experimental)
  • fixed design view text editor not selecting text or losing focus on click
  • added callLater call on Radiate class
  • showing highlight around components when group selection is on (select group not component for easier drag and drop)
  • fixed text tool not placing text in the correct location. all text is on the root unless the component is a basic layout
  • added support to import default layouts on a group base container
  • removed errors for import of fill and stroke nodes
  • added try catch around addElement in importer to keep importer working in live import mode
  • added initial support to wrap text flow content even if TextFlow tag was not surrounding content
  • attempt to fix user is online status icon
  • added option to get metadata details from super class
  • added RichEditableText to list of supported components

Live MXML rendering in the browser with MXML Azzurro

One thing I’ve wanted to achieve is live MXML rendering. There has been a live rendering mode of HTML markup in Radiate for a few versions now and in Radiate version 4.0.0 we introduced basic MXML rendering. But if you just wanted code pure MXML without any application now you can. The MXML renderer is here and it’s online.

Using this application you can code MXML and see it rendered live.

Features include:

  • XML validation
  • Error annotations
  • MXML validation
  • Syntax highlighting
  • Code completion of classes, properties, styles and events
  • Drag and drop MXML files onto the application
  • Nothing to install. Due to the power of the internet you always have the latest version
  • Viewer if you want to display the results without the editor

This application does not support certain tags and does not interpret ActionScript. If anyone is interested in upgrading the UI please contact me.

Note:
If you need a code editor for your own Flex or AIR application or drag and drop support for your Flex application in the browser or you would like to support future Flex products like these check out the products page.

What comes after HTML, CSS and JavaScript?

It is said that in the beginning it took God seven days to create the heavens and the earth. That’s incorrect. It actually took one day and six days to get it to look right in Internet Explorer.

For the last ten years I’ve spent many days writing tools for web development. I work in HTML converting advanced desktop markup language into HTML markup. I work on conversion tools frequently. They say to use the best tool for the job. HTML markup was originally created for formatting text documents. I’ve come to the conclusion that HTML markup is not the best tool for the jobs that many of us have to do. It is vastly under powered. It’s time for a new markup language.

All powerful markup languages have certain goals and expectations.

  • easy to read
  • easy to understand
  • declarative properties
  • container set that helps layout components
  • components that size to content, explicit or percentage
  • containers that size to content, explicit or percentage
  • advanced positioning like top, left, right, bottom, vertical center, horizontal center
  • advanced alignment such as top, middle, bottom and baseline
  • supports states, transitions, component styling and skinning model
  • supports tools that make it possible to parse and report errors and warning

While CSS has advanced HTML markup has not. As I’ve said, I convert from various markup languages to HTML markup. It is possible for HTML to achieve some or all of these through the use of specific tags, style sheets, display modes, box sizing models, transform matrices and so on but after using advanced layout markup there’s no going back to the caveman level that HTML has been stuck at. We all know it. I’ve worked with many markup languages and MXML satisfies all these goals (the open source Apache Flex SDK is one tool that compiles MXML). I would suggest we look at MXML as the next standard for markup in the browser. Continue reading.

MXML was created to handle and render layouts from multiple design tools. It was designed to support advanced layouts and typographic from the leading design tools in the industry: InDesign, Illustrator, Photoshop, Flash and PDF and more. It was created to support vector graphics, raster graphics, advanced multi-language typography, states, transitions, cascading style sheets, bindings, filters and more. It is a document that holds a vast description of design elements and presents them gracefully.

That description is in XML format and can be parsed by any application. It is extensible and allows for additional namespaces without breaking or causing collisions. It is designed and meant for the web and applications.

Live MXML Renderer

I cringe when I hear someone ask how to get started making websites with HTML. I get asked repeatedly, “Why do I have to do back flips to do a simple task or layout?” “Well, it’s because HTML was originally created to format a text document.” “I never expected creating a website was this challenging”.

verticalcentering

After years of using various markup languages from HTML, Macromedia MXML, Android XML, Microsoft XAML, Illustrator XML, InDesign IDML, Flash XFL, PDF XFA, SVG, FXG, TLF and more I can say this with confidence, HTML IS NOT A SUFFICIENT MARKUP LANGUAGE FOR APPLICATIONS! It is for documents! As a web community we need an updated markup language! MXML is the most advanced I have encountered in all my years. Anyone implementing MXML can verify it their renderer works by comparing there MXML rendering using Mustella testing framework or by simply compiling it with the open source mxmlc MXML compiler in Apache Flex or parsing it live with the open source Live MXML Editor.

As a web community using many different frameworks and technologies we desperately need an updated markup language now. Would it be a good idea to adopt MXML as a starting point and continue to develop it as an open source community?

You can view the online MXML editor here or download the Live MXML editor / renderer here. You can download the open source Apache Flex SDK here and compile MXML into applications that run in the browser, on the desktop or on mobile devices. MXML is used in all of them.

You can read my previous post about MXML here.

Note: Would it take a long time to develop it and gain adoption? It may. Or it may be possible to parse MXML and reuse existing code. It may take ten or twenty years for it to be adopted but we and our descendants will have something that makes much more sense than what we did. And the sooner we start the sooner we will arrive. But we have a head start with MXML in that we have software that already renders it and it can be used as comparison. It can even be used immediately with MXML parsers. We also have a head start in that the browser manufacturers can apply their existing layout rules to a new set of elements. Finally, the MXML compiler and MXML Flex SDK is open source so the parsing and rendering code could be compiled into the browser software and that is with or without plugins.

In another form MXML can be compiled down to bytecode. One network request is much much faster than multiple requests over the network. Instead of ten to twenty seconds for your page to load it would take one to two seconds.

Disclaimer: I’ve been working on a design and development tools that read and write MXML documents. It generates MXML for you as you use the design tools or allows you to see MXML rendered live. This software has been available for around 4 years. There’s no pay wall. You can download it for free or purchase a copy. But I’m not promoting my software. I’m promoting MXML. The reason why I’m promoting it now though is because I’m tired of dealing with HTML. Everything in the web and software world is advancing. It’s time for HTML markup to be part of that progress.