Wrap text around an image in Edge Reflow

I am reposting a great little Adobe forum response from Christopher Bank about how to get text to wrap around an image in Edge Reflow without  using CSS Regions.

The first step is to draw a box, and then add an image at the top and then add a text box below that. You can set the width to auto and it will fill the whole box.

Step1

After that select the text and make it “float:none”, set the margins to 0, and make sure the clear is none (no buttons selected).

step2

The last step is to change the image to float: right

step3

That should do it. After that you might want to turn the div into a group so it’s easier to move everything as whole. If you try to move the image or text using drag and drop it’s likely the text will go back down below the image again.

Preview 7 makes it easier to explore Edge Reflow

Today, we launched an update of Edge Reflow. We recently took a step back and analyzed some of the problems that our users were facing. We found that it was really tough to use Reflow, at the beginning. Once you overcame some of the learning hurdles, you saw the value of creating responsive designs in this environment. But, honestly, a lot of people were just never passing the initial learning obstacles. In the our current release, we hope that a couple of things will ease learning to use the tool. First, we added a sample project that opens with your initial launch of Edge Reflow.

Image

 

This sample project allows you to explore the various media query breakpoints at 480px, 768px and 960px by clicking on them. The project uses most of the functionality that Reflow has to offer including background images, different types of positioning (fixed and static), borders, text styles, form elements, linking etc. I think the only thing it doesn’t have is multiple pages. Maybe we’ll add this in a future release.

The project also acts as a place to find new content to help you learn, outside of the software itself. If you view the project in the browser, or preview it, by pressing the TAB key, you will be able to click on external links that go to places like tutorials, issue lists, Twitter and Facebook pages. The links don’t work while you are in “design” mode for your project.

This project will not open the second time you open Reflow, so, if you would like to see it again, go to your Help menu and find “Open Welcome Project”.

ImageWe hope this helps you to learn how to use Reflow. Let us know what you think via twitter: @Reflow.

 

Send an object to the front or back in Edge Reflow

In the past week, someone asked on our user forums how to send an object to the front or back in Reflow. In Reflow, as elements are placed on the canvas, their default position value is “static”. When items are position: static, they do not support the z-index property which determines stack order.

To change the stack order of elements in your Reflow design, you must first change the position property from static to “absolute”, “relative” or “fixed”. You can do this in the Layout -> Advanced pane.

Image

Once your element is fixed, absolute or relatively positioned, you will see options in this pane for z-index.

Image

Click on the first button to push an element back in the stack order. Or, click the second button to send the object back in the stack order.

Push a style to all breakpoints in Edge Reflow

While working on a responsive design in Reflow. You may find yourself styling an element while you are in one of your breakpoints. For example, you may have added a background color and image to a box while in your 350px breakpoint like this:

Image

However, you actually want all of these styles on the default breakpoint. To push these styles to the default breakpoint, hover over the right edge of each style. You should see a button show up looking like this: Image. Pushing this button next to a style will push that region specific style to all breakpoints.

Image

Turning on CSS Filters and CSS Regions in Edge Reflow

Because CSS Filters and CSS Regions are not yet supported in all the browsers, Edge Reflow doesn’t have support for them turned on, by default. To use CSS Filters or CSS Regions in the tool, you need to go to the menu item: View -> Shiny Web Features. You will get the following dialog describing these features.

Image

Turn these features on.

Now, you will be able to use CSS filters at the bottom of your Styling tab for any element on your canvas.

Image

Or, you will be able to use CSS Regions which I have a tutorial for in an earlier blog post.

Where did my Generate menu go in Photoshop CC?

In just the past week, I’ve seen at least two situations where customers suddenly had their Generate -> Image Assets and Generate -> Edge Reflow Project disappear (or become disabled).

The first thing to troubleshoot in this case is to look at your preferences. Go to the menu item Photoshop -> Preferences -> Plug-Ins

Image

In the dialog menu, ensure that “Enable Generator” is checked. I’m sure there is a bug somewhere, but, this preference gets turned off sometimes!

Image

Hopefully, this helps. 

In the case of exporting Edge Reflow projects, if you are not able to see a menu option for File -> Generate -> Edge Reflow Project, please check that you have the folder: <install directory> / Adobe Photoshop CC/ Plug-ins/Generator/reflow.generate.  If you do not have this directory, uninstall and reinstall Edge Reflow. The Edge Reflow installer should automatically install the plug-in for you.

Using Min Media Queries in Reflow

Some things are not obvious in Edge Reflow. I’ve always found that modifying breakpoints that you have created is one of those things. By default, Reflow using max media queries. If you want to change your project to use min media queries, do the following:

1. At the very top right of the application long press on the down arrow (to the right of the plus symbol).

Image

 

This will bring up the orientation dialog.

Image

 

Here, you can change your project to use min media queries, update breakpoint labels or change the value of each breakpoint.

Simple… but, honestly, hard to find.

Using Edge Reflow to play with CSS regions

Kids spend most of their awake hours just playing. This helps them to understand the world and figure out how things work. In fact, here is a picture of my son playing with paint and learning about colors.

Image

With Edge Reflow’s latest public release, we are giving you the opportunity to play, learn, and use an emerging css feature,  CSS Regions. CSS Regions will allow your content to flow through different containers on your web site. This enables you to build more magazine style layouts. As of this month, CSS regions are supported in Safari in iOS7. You can also view CSS Regions in Chrome by enabling the experimental WebKit features flag.

Image

Edge Reflow is the first tool that will allow you to see CSS regions in action without writing any code. Then, after drawing a few regions, you can view the HTML/CSS output to see how the magic happened.

Let’s get started. The first thing you will need is Edge Reflow CC which you can download from here.

I will take you through a simple CSS region example and I hope you will continue to play with the feature and use it in the future.

Step #1: Turn on CSS Regions support in Reflow by going to the menu item View -> Shiny Web Features

Image

This will bring up a dialog box describing some new CSS features including CSS filters and regions which are not supported in all browsers. You will need to ensure that CSS Regions is on. Press OK and dismiss the dialog.

Step #2: Draw a text element on the canvas. Copy and Paste a lot of text in it. I’ve copied my text from “The Atlantic” which always promises a good, but, long read. 

Step #3: Right-click on the text element and choose the menu item “Create Region Container”.

Image

Step #4 In the flow container, look for the + icon on the bottom right. Click on this and then draw out other flow containers.

Play with resizing the various containers and notice that all of your text content will flow from one of these containers to another. Also play with the size of your canvas by dragging the canvas handle right and left.

Image

Note, when the + icon is red, this means that there is more content overflowing the current container.

Step #5: Edit your content.

If you want to edit the original content that you are having flow through the various flow containers, double click on any of the containers. From this “content editing mode”, you can add images, more text, add boxes, and change styles as you sit fit. All of the content will flow through the containers that your drew previous.

Image

Step #6: Exit content editing mode by clicking on the left arrow in the status bar. (or press ESC, or double click on the checkered portion of the editing area)

Step #7: See the CSS code written out for the container that you drew.

To do this, ensure that the container is selected. Then, click the <> icon in the bottom status bar.

Image

Step #8 Preview in Chrome or Safari.

From Reflow, you can preview your design in the browser. This can be done from the View menu. If you don’t have the correct version of Safari or Chrome, you will get a warning.

Step #9 View all the HTML and CSS code.

In step #8, you viewed the design in the browser, so, there must be HTML and CSS, right? Of course there is. You can find the CSS and HTML that Edge Reflow creates for your design inside the assets directory of your project.

Image

Regions have the opportunity to really change the way web sites lay out their content. What I’ve built above is not beautiful, but, its just a sample of how your content can flow through any part of your page you choose.

To download the simple Reflow project I talked about above, you can find it here.

Get To Know Adobe Edge Reflow, A Tool For Responsive Designs

We are live! For the past six months I’ve been working on a new product from Adobe’s “Edge” family. This week, my product, Reflow is having its first public preview. Reflow began development less than a year ago, so, this is certainly not a finished product. We are hoping to put it out to the public with frequent updates and get people’s opinions on how the tool can be useful to you.

If you want to check out some intro videos, go here.

Hopefully, you already know a bit about Reflow and just want to know how to get started. Here is a screenshot of what you see when you start up the tool and a description of the various controls available to you.

Image

1) Tools: Reflow offers the selection tool, box, text and image. Click on the box, text or image to add one of these elements to your design in a way similar to Photoshop. You can also your shorts V (selection), M (box), T (text), or I (image) to get into these modes.

2) Properties Panel: This section of Reflow gives you two tabs:Layout and Styling. You should be able to edit any css on a selected item from these panels. The styles available in these panels will change depending on what you have selected. If you have the main “Container” selected, you will see options to edit your Grid in the “Layout” tab.

3) Regions and Ruler: The top of the application will show you a ruler and your regions/breakpoints (if you have added some to your project). To add a breakpoint, you can either double click on a part of the ruler or click on the + button at the far right-top of Reflow.

4) Add/Remove/Edit button: You can add a breakpoint by clicking the + icon. If you have a breakpoint marker selected, the + symbol will turn into a -. If the – symbol is displayed, you can click on it to delete a region. Mousing down on the +/- button for a few seconds will bring up an orientation panel where you can change from using max to min regions, edit your regions, or delete them. Reflow uses max media queries, by default.

Image

5) This mobile device icon will allow you to view your Reflow designs in Edge Inspect. Click on it and follow directions to view your designs live on your device using Edge Inspect.

6) Elements Panel: The icon at the bottom left of the status bar will bring up the “elements panel” in Reflow showing you all the box, text and image items in your project. You can select elements from here and choose to hide/view them. At this time, you cannot re-order elements in the DOM form this panel.

7) Status Bar: When an item is selected, it will show up in the status bar along with all of its parents. You can select items using the status bar. You can also group and un-group boxes using the status bar.

8) CSS Output: Select an element on the canvas, then click on the “<>” icon in the status bar to see all the CSS (for every media query) for that element. The CSS can be copied by clicking on the clipboard icon in a particular region or the clipboard icon at the bottom left of the panel to copy all CSS for the region.

9) Align and Match Size Panel: When you have more than one element on the canvas selected, this icon will be enabled. By clicking it, you will see an align panel to align elements to the right, left, center, middle, top or bottom. You can also “match size” elements by width, height or both.

Screen Shot 2013-02-13 at 11.28.32 AM

10) Zoom Indicator: This dropdown on the bottom right of the application will zoom in or out of the canvas.

Updating My Flash Player Causes A Green Bar For Videos!

An update to the Flash Player, version, 11.2.202.228 just shipped a short time ago and when it did, it introduced a nasty bug on my Windows laptop. Exhibit A:

All videos on Hulu, YouTube, ESPN etc seemed to have this green bar. I found that this problem only occured with Flash Player 11.2  and it also only happened when my laptop was not plugged into its power supply. I tried various resolutions on my laptop and none of them seemed to matter. The only factors were:

1) I was using Flash Player 11.2.202.228

2) My laptop was not plugged into a power source

3) I ran 320p or 720p  video. 240p and 480p video did not reproduce the problem.

I have a Lenovo W510 laptop with an NVIDIA Quadro FX 880M graphics card.

Per the recommendation of the Flash Runtime video team, the way to fix this problem is to download and install the latest drivers . This problem had been reported before and the Flash Runtime explained that this was a driver issue, not Flash issue.  At the time, my driver version was  4/17/2011, 8.17.12.6824.

Here is the first thing to try:

1) Go to your Device Manager. Control Panel -> Device Manager

2) Double click on “Display adapters”

3) Right click on your graphics card and select “Properties”

4) Select the “Driver” tab

5) Click on the button to “Update Driver…”

6) Select “Search automatically for updated driver software”

7) If you got a newer driver installed, you will need to reboot Windows to see if your problem is fixed.

Now, this method of updating my driver did not work for me. Windows came back telling me that I had the latest driver, so, no new drivers were installed. If you get the same response from your system, my next recommendation would be to go to the NVIDIA website to check for drivers.

From the NVIDIA website, select your graphics card and download the driver. I found a newer driver on the NVIDIA site. After downloading it, I was able to run the exe file and complete the installation of the driver.

After rebooting my system, the dreaded green bar was gone.

My new driver information is:

Driver Date: 3/22/2012
Driver Version: 817.12.9635

Now, if you are not seeing this issue on a system that does not use an NVIDIA driver, please leave a comment below. We have only gotten reports that NVIDIA drivers have caused issues, but, maybe the problelm is more widespread.

Also, on some forums, it seems that Linux users are having troubles solving this issue. Sorry, I don’t have information to help Linux users at this time.

If updating a driver doesn’t work, many people have just turned off hardware acceleration and that should work too.

Follow

Get every new post delivered to your Inbox.