Moving On!

So as you can tell, I have recently found the time to blog, hence being able to post two days in a row.

For the past 18 months I had the opportunity to work with an amazing team at The Engine Company. We have done some amazing stuff with Loom, innovating on workflow, making cross-platform deployment incredibly easy. I’m really proud of the work that we have done. I’m super excited that the Loom SDK is open source, and I believe that Loom Turbo is the BEST offering out there on the market for cross-platform 2D games.

Recently I have decided that I would like to pursue other interests. As such, I have resigned from The Engine Company. The team will continue to make huge strides in building the Loom SDK into amazing platform to develop on. They’re doing an amazing job, and will continue to do so.

If you’d like to contact me, feel free to ping me on LinkedIn.

Cheers!

Rogne Media Photoshop Puzzle Solutions

Today on the Adobe Photoshop Facebook page, they linked to a Photoshop Puzzle by the guys over at Rogne Media.

The Photoshop Puzzle consists of 20 levels. The goal is to find the code to take you to the next level. There are hints below each image written in white on a white background. You can simply highlight the text to make it show up. I highly recommend trying it for yourself first and only use these solutions if you are absolutely stuck.

I used Adobe Photoshop CC 14.1.1 on a Mac for all levels with the exception of Level 19 which I note down below.

You can start the puzzle here: http://www.rognemedia.no/Puzzle/

Level 1 Solution


URL

http://www.rognemedia.no/Puzzle/

Hint

add dk4ha.html in the address bar to find the next level. Small letters.

Solution

This one is pretty simple, add dk4ha.html to the end of the URL to advance to the next level. This level shows you the basics of what you need to do to proceed to the next level, http://www.rognemedia.no/Puzzle/dk4ha.html



Level 2 Solution


URL

http://www.rognemedia.no/Puzzle/dk4ha.html

Hint

it’s getting hard to read… you might need Photoshop soon….

Solution

Again this one is pretty simple, as you can see this image has the code “asoxch” in the bottom left of the image. So you just need to change the url to ‘asoxch.html’ to advance to the next level.



Level 3 Solution


URL

http://www.rognemedia.no/Puzzle/asoxch.html

Hint

tiny

Solution

As the hint suggests, we’re looking for something quite small. The code for the next level is hidden in the bottom left corner of the image. Using Photoshop I zoomed in to read the code, and then changed the url to go to a4xi.html.

Screen Shot 2013-09-24 at 12.15.06 PM



Level 4 Solution


URL

http://www.rognemedia.no/Puzzle/a4xi.html

Hint

so dark…

Solution

So this image appears to be solid black, and the hint suggests that it’s too dark. So we just need to lighten the image up. An easy way to do this is by using the Levels panel in Photoshop.

So open the image up in Photoshop and go to Image > Adjustments > Levels.

Screen Shot 2013-09-24 at 12.20.42 PM

Once you have the Levels panel open, grab the white slider on the bottom of the Input Levels section, and slide it all the way to the left. The value will go from 255 to 2, and will expose the code to proceed to the next level.

Screen Shot 2013-09-24 at 12.20.55 PM



Level 5 Solution


URL

http://www.rognemedia.no/Puzzle/5sichj.html

Hint

noisy colours

Solution

So at first glance this level looks like just a bunch of static. However, the code is in there. The solution is in the Channels Panel in Photoshop. If you open up the Blue channel, you can see a faint code hidden in there.
Screen Shot 2013-09-24 at 12.32.58 PM

With the Blue channel selected, I open up the Levels Panel again, and move the white slider to make the code easier to read.
Screen Shot 2013-09-24 at 12.35.29 PM



Level 6 Solution


URL

http://www.rognemedia.no/Puzzle/6sixja.html

Hint

numbers in the water…

Solution

So this level tripped me up for a bit, because the hint made me think that the gradient could be transformed into the code by using a filter. So I tried Ripple, Watercolor, etc… but none of them worked.

However, after looking through the Filters menu, I found the Digimarc Watermark filter. You can open using Filter > Digimarc > Read Watermark. The code is the Image ID ’765237′. Clever.

Screen Shot 2013-09-24 at 12.43.21 PM



Level 7 Solution


URL

http://www.rognemedia.no/Puzzle/765327.html

Hint

beyond the channels

Solution

So by default in Photoshop, the Layers, Channels and Paths Panels are together. So the hint tells us “beyond the channels”, which means go one more tab over, in this case to the Paths Panel. As you can see there is a Work Path in this image. If you select it, you get the code to the next puzzle.

Screen Shot 2013-09-24 at 12.48.07 PM



Level 8 Solution


URL

http://www.rognemedia.no/Puzzle/8xysha.html

Hint

hmmm, it’s not displaying in the browser…

Solution

This is the first of a couple of levels that use PSD files instead of standard web files (GIF, JPG, PNG). So you need to download the PSD file and open it up in Photoshop. In Chrome you can simply right click the image and select Save Image As.

Screen Shot 2013-09-24 at 12.54.41 PM

Once you open the PSD in Photoshop, there are two layers. One is the Background layer, and the other is named ’9asoiu’, which is the code to the next level.

Screen Shot 2013-09-24 at 12.53.02 PM



Level 9 Solution


URL

http://www.rognemedia.no/Puzzle/9asoiu.html

Hint

I think I’ll stop giving hints now… They are getting so meta…

Solution

Now he’s getting clever with his hints. He’s telling us that the code is in the metadata of the image. To open the metadata for the image go to File > File Info. You’ll see the code ’10welldone’ in the Keywords section.

Screen Shot 2013-09-24 at 1.01.32 PM



Level 10 Solution


URL

http://www.rognemedia.no/Puzzle/10welldone.html

Hint

Sometimes the usefulness of hitns are offset by their usefulness…

Solution

This level can be a bit tricky at first, but notice the four corners of the image, the pattern diverges. Couple that with the hint of ‘offset’, it quickly becomes clear what we need to do.

So first things first, we need to take the image out of Indexed mode to make it editable. To do this go to Image > Mode > RGB Color. Once you’ve done that, it unlocks Filters menu. So now we want to use the Offset Filter, it’s located at Filter > Other > Offset.

This image is 500 x 500 pixels, so let’s offset it by half, and set the edges to wrap around. Now in the center of the image you can read the code ’11palu’ (remember each code is in lower-case).

Screen Shot 2013-09-24 at 1.12.08 PM



Level 11 Solution


URL

http://www.rognemedia.no/Puzzle/11palu.html

Hint

I’m cross-eyed…

Solution

At first look of this puzzle, I wanted to know if there was some subtle difference between the two blocks of text. So let’s put one of top of the other, at half opacity.

We need to take the image out of Indexed mode to make it editable. To do this go to Image > Mode > RGB Color.

Next I use the Marquee tool to draw a box around the left block of text. With the Marquee tool still selected, I right click the selection and choose “Layer via Cut”. This will take this selection and move it into it’s own layer.

Screen Shot 2013-09-24 at 1.22.10 PM

Next I select the Move tool and select “Layer 1″ (which is the new layer we just created) in the layers panel. I then turn the Opacity of the layer down to 50% (it’s in the layers panel). And finally I move Layer 1 over the top of the right paragraph of text, as you can see three words line up correctly: “ver”, “nibh”, “quis”, putting these three words together is the solution.

Screen Shot 2013-09-24 at 1.23.28 PM



Level 12 Solution


URL

http://www.rognemedia.no/Puzzle/vernibhquis.html

Hint

Projecting a high successrate on this one…

Solution

We need to take the image out of Indexed mode to make it editable. To do this go to Image > Mode > RGB Color.

We just need to apply a Polar Coordinates filter to this: Filter > Distort > Polar Coordinates.

Screen Shot 2013-09-24 at 1.31.23 PM

The next code becomes clear ’12xbpdb’.



Level 13 Solution


URL

http://www.rognemedia.no/Puzzle/12xbpdb.html

Hint

Want a hint? God save you…

Solution

I really liked this level, even though I’m not really sure of the meaning of the hint. However, looking at this image, it’s clear that some of the colors in the gradient are missing. Since this is an Indexed Color image, we can look at the Color Table. You can do this by going to Image > Mode > Color Table. Once you open the Color Table, the solution is quite clear.

Screen Shot 2013-09-24 at 1.37.45 PM



Level 14 Solution


URL

http://www.rognemedia.no/Puzzle/14fl.html

Hint

No need for me to guide you…

Solution

I wouldn’t have been able to solve this one without the hint. You just need to turn on the guides in Photoshop, you can do this by doing View > Show > Guides. Also make sure that View > Extras is checked.

There is another hint in the image itself, “What letters in this sentence?”, with the guides on there are a few letters in the crosshairs ‘heesn’, which is the answer.

Screen Shot 2013-09-24 at 1.41.46 PM



Level 15 Solution


URL

http://www.rognemedia.no/Puzzle/heesn.html

Hint

Don’t you just hate when the browser won’t display the image? I hope we can turn this trend around…

Solution

This is another PSD image that needs to be downloaded like in Level 8.

This level requires use of the 3D tools in more recent versions of Photoshop. You can open the 3D panel by using Window > 3D.

Screen Shot 2013-09-24 at 1.47.34 PM

Once you have the 3D Panel open, you can simply select ‘Default Camera’, and you get a nice little animation moving the code into view, ’16acksjg’.

Screen Shot 2013-09-24 at 1.47.50 PM



Level 16 Solution


URL

http://www.rognemedia.no/Puzzle/16acksjg.html

Hint

Time to go all Red Dwarf-CSI on this one…

Solution

This is another PSD image that needs to be downloaded like in Level 8.

So at first I didn’t get the reference to Red Dwarf – CSI, but a quick Google search resulted in this:

Which made me laugh pretty hard, but didn’t help me much. Perhaps someone could explain it to me :)

However, working with the image for a bit, I opened up the Filter Gallery, Filter > Filter Gallery, which made the code show up. Selecting the Film Grain effect under Artistic makes the code visible, along with a note “I’m impressed if you found this with no hint!”. Again, not sure how the hint plays into it. But alas, there is the code ’17alsj’.

Screen Shot 2013-09-24 at 1.56.45 PM



Level 17 Solution


URL

http://www.rognemedia.no/Puzzle/17alsj.html

Hint

Solution

So no hint on this one, so we’re on our own.

At first I tried typing out the whole code, which didn’t work. I saw different numbers starting with 18 in there, so I thought, hey maybe there is some subset of the text we need to use.

I did notice that the image was Indexed Color, so I opened up the Color Table (Image > Mode > Color Table) again to see if I could find anything.

I grabbed the eyedropper tool, and selected the gray from the first “1″ in the string. This turned all of the grays with the same color to be transparent, leaving only the code remaining, ’18zxjvb’.

Screen Shot 2013-09-24 at 2.06.55 PM 1

Very clever.



Level 18 Solution


URL

http://www.rognemedia.no/Puzzle/18zxjvb.html

Hint

Time for a new year’s resolution…

Solution

This hint was a dead giveaway, Image > Image Size. The resolution of this image is ’1991′, which is the code.

Screen Shot 2013-09-24 at 2.11.34 PM



Level 19 Solution

URL

http://www.rognemedia.no/Puzzle/1991.html

Hint

FFT

Solution

Okay so this puzzle is by far the hardest of all of them, and I’m not quite happy with my solution. So if you guys have a better way to solve this, I’m all ears.

This level introduced me to a new concept that I hadn’t seen before Fourier Transforms.

FFT is pretty dang cool stuff, it works really well for removing repeating patterns from images. Look at these animated gifs as an example.


Unfortunately, as far as I’m aware, Adobe Photoshop doesn’t have FFT support built in. So you have to use a third party plugin. The FFT Photoshop Plugin by Alex V. Chirokov (more info).

This plugin doesn’t work on Mac, so I had to hop over to my PC to finish the puzzle. I also considered writing a quick script to do it as well, but the Plugin worked on my PC.

So once you have the FFT plugin installed, open the image and use Filter > Fourier Transform > FFT.

19_step1

You’ll notice some content on the edges, it’s most clear in the Blue Channel, so let’s select that.

19_step2

Now we’ll apply the Offset Filter Filter > Other > Offset, and set it to 250 x 250, wrap around.

19_step3

This makes the code readable, well readable to someone who has spent years answering CAPTCHAs. The code is ’20cjsdzxpy’. However, like I said, I feel as if I haven’t fully finished this puzzle. Input from others is more than welcome.

In Conclusion

I really enjoyed this series of puzzles, kudos to the Rogne Media guys for putting it together!

I’m going to spend a bit more time learning FFT, because it really seems like it would be helpful.

Questions, comments, feedback are more than welcome in the comments!

Flex SDK 4.5 doesn’t keep Embed Metadata

Hey everyone,

I’ve run into a bug with the released version of the Adobe Flex 4.5 SDK. The 4.5 version of the SDK does not respect keeping [Embed] metadata in your SWF. This is problematic because we use this metadata extensively in PushButton Engine.

Take the following example into account:

TestMetadata.as

package
{
    import flash.display.Sprite;
    import flash.utils.describeType;
 
    public class TestMetadata extends Sprite
    {
        public function TestMetadata()
        {
            var typeInfo:XML = describeType(TestClassWithEmbed);
            trace(typeInfo);
        }
    }
}

TestClassWithEmbed.as

package
{
    public class TestClassWithEmbed
    {
        [Embed(source="assets/flip.png", mimeType="image/png" )]
        public var Flip:Class;
 
        [SomeMeta(source="assets/flip.png", mimeType="image/png")]
        public var Test:Class;
    }
}

In version 4.1 of the Adobe Flex SDK, we get the following back from describeType.

<variable name="Test" type="Class">
  <metadata name="SomeMeta">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="file" value="/projects/zaalabs/workspace/TestMetadata/src/TestClassWithEmbed.as"/>
    <arg key="pos" value="243"/>
  </metadata>
</variable>
<variable name="Flip" type="Class">
  <metadata name="Embed">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="file" value="/projects/zaalabs/workspace/TestMetadata/src/TestClassWithEmbed.as"/>
    <arg key="pos" value="136"/>
  </metadata>
</variable>

However, in version 4.5 of the Adobe Flex SDK, you can see the Embed metadata is being omitted. Same exact code, same compiler arguments, nothing has changed except the SDK.

<variable name="Test" type="Class">
  <metadata name="SomeMeta">
    <arg key="source" value="assets/flip.png"/>
    <arg key="mimeType" value="image/png"/>
  </metadata>
  <metadata name="__go_to_definition_help">
    <arg key="pos" value="243"/>
  </metadata>
</variable>
<variable name="Flip" type="Class">
  <metadata name="__go_to_definition_help">
    <arg key="pos" value="136"/>
  </metadata>
</variable>

As you can see, the Embed metadata is being stripped out, even though I explicitly set “–keep-as3-metadata+=Embed,SomeMeta” in the compiler. Since I don’t believe that the Adobe Flash Player team would break describeType in a minor release, I’m led to believe that this is a bug that was introduced in the 4.5 version of mxmlc in the Flex SDK.

Rant

:: UPDATE ::

This seems to have been an isolated incident on this specific day, bugs.adobe.com has worked well for me many times since then.

————————————————————————–

So I tried to do the “correct” thing and file this as a bug on bugs.adobe.com. And would happily do so if the site worked. In fact, in the time I’ve been waiting for bug.adobe.com to load and let me login… not only did I write the test case, but I wrote this entire blog post as well.




[UPDATE]
I was finally able to file the bug, I think… it won’t pull it up. SDK-30485.

10 minutes to diagnose the issue…
15 minutes to blog about it…
45 minutes… and counting to file a bug through the proper channels.