Quark App Studio: Building a Dynamic News Reader (Newsletter) App

Apr24
2012 4 Comments Written by Jamie Cross

This tutorial will give an overview of how to use Quark App Studio to build a news reader App similar to the USAToday App, CNN App, BBC App, etc. This is really just a proof of concept App and is not a full blow finished and polished piece of work but by the end of the tutorial you’ll be able to complete the App by following the same pattern of what we have done up to that point.

Here is a screen grab of my finished App in the iPad simulator.

A Dynamic News Reader App Made Using Quark App Studio.

As you can see the design of the interface is very similar to what you would typically see in a news reading App. There are three tabs that break the content down into the sections Headlines, World News, and Technology. Touching any of these tabs will take you to news which falls under that topic. The App opens to the Headlines section. All three sections follow the same format where there is a large ‘top story’ that spans the full width of the screen and six sub-stories that fill out the bottom of the screen. For this tutorial I have only built the portrait orientation of the App if this were to go into final production I would certainly build the landscape orientation as well.

The key to an App like this is that ALL of the news elements (images and text content) are located on a web server. Only the very base interface elements are built in Quark App Studio, the headline, subhead and three tabs. All of the rest of this screen is loaded from remote URL’s on my web server. With all of your news content being served from a remote web server all you have to do is update that content and it is reflected in the news app when it is refreshed. So if you wanted to post new news once a month, once a week or daily all you have to do is update the content that is on the web server and the readers of your app will see the new content when it’s changed on the server and you don’t have to do an update to the Quark App Studio App!

Let’s take a look at my file in Quark Xpress:

Basic App Layout Within App Studio

This screen shows the exact same screen as above but in Quark Xpress. I’ve also shown the ‘page layout’ and ‘layers’ pallets. The page layout pallet shows only six pages right now. There is one page for each section tab (Headlines, World News, and Technology), there are two pages for two of the text stories I have linked up and one page for the video story I linked. All of this can be seen working in the video I have linked at the bottom of this tutorial. You will need one page per screen in your final news app, whether it’s a main interface screen (headlines, world news, and technology), or a story screen.

In the layers pallet you can see that I have a few layers built, this is just my personal working style but I think it helps keep things organized. The ‘default’ layer contains most all of my base Quark interface elements, the headline and tabs for example. The ‘web elements’ layer contains all of the items that are loaded in from the remote web server. You can see these indicated by the pink boxes that contain the Quark App Studio web element icon in the screen shot. The ‘interactive’ layer contains all of my buttons that load the appropriate web content when a story is touched, these are indicated by the green boxes with the button icon in the upper right corner. And the ‘rule’ layer simply contains a rule that I wanted to make sure is on top of everything else.

So lets build the headlines page, here is a screen shot of my rough layout. Note that I put in empty boxes on the default layer to indicate where all of my elements will go. This just helps me visualize the page and makes it easy to copy and paste all the base elements as needed to other layers and pages.

News Reader App Headlines Page.

The box I’ve titled “Main news story box…” is what I will build first. This name is just for your reference and not in or used by my final app.

First I will duplicate the base blue picture box and paste it into my ‘web elements’ layer. This gives me picture box at exactly the size and location I need. Once I add the box to the web elements layer, the outline shows as pink since it is placed directly on top of the ‘default’ layer. Before I do anything with this box in Quark App Studio I need to create the image that will be loaded into it. I used Photoshop to create a graphic that is 696 pixels wide by 418 pixels deep since that is the exact measurements of the picture box in App Studio. I like to save my images as .png files but App Studio does support other formats as well. I saved the image into a folder named ‘images’ and keep it in the same folder with my App Studio files. This ‘images’ folder will be uploaded to my web server along with the other folders and files I’ll need for the news stories. I’ll be placing all of my images and html files in the public folder of my dropbox for easy access.

Here is the graphic I created for my top story.

Top Story Graphic for the Headlines Screen.

Now that I’ve created the image I can place it in App Studio. To do this I activate the main story picture box and open the App Studio palette. From the palette I choose the ‘HTML Page’ option and fill in the URL. I Also make sure the ‘online’ check box is checked and I uncheck all the other boxes (transparent background, interaction, scrollable, and allow zoom). Here is a screen grab of what the App Studio palette looks like:

Quark App Studio Palette.

Next I made the six sub story images and placed them in their pictures boxes in exactly this same manner as the main story graphic. Once that is complete I duplicated all seven of the picture boxes and placed them on the ‘interactive’ layer of my document. Working on the ‘interactive’ layer (you may want to deactivate the other layers of your document so you don’t get confused or click the wrong picture box) I select the ‘main story’ picture box and and delete the current ‘HTML Page’ option by clicking the trash can in the upper right corner of the App Studio palette, this deletes the current action applied to the picture box. Now I click the ‘button’ action and from the drop down menu at the bottom of the palette choose ‘go to page’ and click create. I’m going to make page two of my document the page that will display the main news story so I put a number 2 in the box. Below is a screen grab of what page two of my document looks like, I picked up most of the interface from page one, deleting the news story boxes and adding one large box where the news story will be displayed. I’ve also added a ‘done’ button that will take the user back to the Headlines section of the App.

The Empty Story Screen in App Studio.

The pink box in the screen shot to the right is located on the web elements layer of my document and is the picture box that the remote webpage will be loaded into for display in the App. This box is set up just like the main news story box on the previous page except it is going to load in a fully styled HTML page instead of just an image. Quark App Studio renders its HTML using the iPads built in web kit browser so everything renders beautifully to the screen. Since the content of this box is going to be essentially a live webpage I’ve now checked all of the available check boxes in the App Studio HTML elements palette. This will allow the users to scroll and zoom the news story as needed and also allows the white of my background box to show. You could uncheck the ‘transparent background’ option to control the background color in your HTML document. Below is a screen grab of the top story content in the iPad simulator.

The News Story Screen with a Story Displayed.

The rest of the Apps development follows this same procedure. There is a separate page for each news story which calls in its content from the web server. Below is a screen grab of the files I upload to my dropbox, you’ll note it has a pretty standard web site format to it. There is a .css file and separate folders for the images and stories and movies.

Directory of Files Uploaded to the Web Server.

This is a very workable and flexible technique for building a news app in App Studio. There are a couple issues that I came across though. The first and probably the most critical is that there is no way I can find to notify the users if they don’t have a network connection. If the iPad is offline then nothing loads in the boxes you have set up, just the shell interface will display. It would be wonderful if there was a way to test for a network connection and pop up a box so the user is altered if the connection does not exist.

Also the default function of App Studio is to generate ‘page thumbnails’ for each page of your document which is great for a print style app but that really has no purpose here in a news reader app since all of the information is dynamic. It would be great if there was an option to turn off the ‘page thumbnails’ on export. I was able to eliminate the icons display in the app by setting the Height, Page Gap, and Article Gap to 0 when I export my App. But I’d really like a way to turn off the functionality all together.

You can see this App in action in the video below.

Posted in App Studio, Development, Tutorials - Tagged App Studio, Development, iOS, iPad, video tutorial

Quark App Studio: Animation (using the slideshow element)

Dec30
2011 7 Comments Written by Jamie Cross

This tutorial will show how to use the slideshow feature of Quark App Studio to play an animation instead of just displaying static images.

I’m working on a product catalog for one of my clients and want to animate its cover, or start screen for the iPad version. When the App opens I want the animation to begin as soon as the cover displays. Below is a screen shot of the cover, the main image area with the hand and text is what I will animate.

The base page layout in Quark App Studio.

As you can see I already have the layout done in Quark Xpress, I’ve added a static image of how the animation will finish to the page. The reason I have done this is so when I export the App it will display the full page layout as the thumbnail image for this page. If you don’t add the full static image like this, the thumbnail page will have a hole where the slideshow element is. App Studio generates thumbnails from the static images and text on the page, but does not show previews of slideshows.

I used Flash to build my animation and export it as a sequence of jpg images. The animation I created is 265 frames long and will play for about 26 seconds. A screen shot from Flash is below.

The animation in Flash.

Since there is no way to control, play or stop animations created like this in App Studio the animation builds quickly and has a really long pause (just a bunch of the same frame repeated over and over) and then at the end it fades out so it will play again smoothly without any weird jumps. Animations created in App Studio just repeat endlessly so you have to plan your action accordingly. Ideally the users of this App won’t linger on the home screen long enough to see the animation loop, but if they are at least it will loop smoothly.

To incorporate the animation into the page I duplicated the picture box that holds the static image already placed. I used no offset so it duplicates directly on top of the static image and make sure the exact pixel dimensions of the box are 696 px by 550 px. This is because the animation I created is this same dimension. In App Studio you HAVE to make the picture box the exact dimensions of the slide show images (in our case animation images) you are importing or App Studio will change the scale of your imported images for some reason. I don’t know if this is a bug or supposed to be a feature but keep it in mind or else things won’t line up correctly when the images are displayed. Of course if alignment is not critical in your case then I guess it’s not an issue.

With the picture box I just duplicated selected I right click on it and from the menu that pops-up I choose Digital Publishing and from its submenu I choose App Studio to display the App Studio tools window. See below:

The App Studio palette in Quark.

The three palettes and their selections.

The three states of the App Studio palettes and their selections.

From this window I choose Slideshow, then on the next screen I choose Simple Slideshow and click Next. From the new screen that slides in I choose Images and click Create Slide Show. The next screen that displays is where I load in my image sequence I exported from Flash. From the Contents tab that is displayed automatically I click the File button.

This will open a standard Open dialog window where I navigate to my folder will all the images in. I select them all by Command clicking the first and the last image in the directory and click the Open button. Since they are sequentially numbered when exported from Flash they all import in the correct order. There are quiet a few images in my animation so takes a few seconds to load them all so be patient.

Once loaded the App Studio tools pallet displays thumbnail images of each frame of the animation. Since this is an animation and not a standard slideshow I don’t mess with all the options at the top of the screen much but I do turn off the Enable Scrolling check box.

The App Studio palette with the thumbnail images loaded.

Then I click the Slideshow tab and adjust the setting here to make this animate instead of just show static images.

First click the Enable Animation box to activate the additional settings below. I set my Transition Duration to 0ms, Image Duration to 100ms and the Effect to fade. You may have to play with these setting a little to get the timing correct, especially the Image Duration. I always set my Transition Duration to 0 since I want the images to flip without any noticeable fade. I’ve noticed that the animations can play in different speeds in the iPad simulator vs on an actual iPad so make sure and test on an actual device before you post anything on the App store.

The slideshow tabs settings.

That’s it, at this point I’ll export and test in the simulator and on my iPad to see how it all looks.

Below is a video of this tutorial for those who learn better by watching.

Posted in App Studio, Development, Tutorials - Tagged App Studio, Development, iOS, iPad, video tutorial

iPhone 4/4S Case Available

Nov08
2011 1 Comment Written by Jamie Cross

I’ve recently posted a new product in my web store. It’s an iPhone 4/4S case, there are a few different types of the same case available as well as a version for the iPhone 3G/3GS and Samsung Galaxy.

iPhone 4/4S Case — Hearts by honeybeehive

My store is hosted at Zazzle and is under the name HoneyBeeHive. I’m hoping to someday build some branding for the store, that is why I picked a marketable name for it instead of using my own name like I usually do.

Posted in HoneyBeeHive – Web Store, My Stuff - Tagged honeybeehive, merchandise, product, web store, zazzle

App Studio a First Look (Review)

Oct29
2011 3 Comments Written by Jamie Cross

Quark released an update (v9.1) to QuarkXpress 9.0 in August that now allows you to build iPad apps from within QuarkXpress. I specifically say build instead of program because you don’t need to know any programming to build a fully functional app that can take full advantage of the iPad. Coming from a design background this is by far the strongest entry so far I have seen in app development. Over the last year I’ve worked with several different technologies for building apps, Sencha Touch, Appcelerator, GameSalad and others. Of course they each have their strength but what I have been searching for is a way to use my design knowledge to turn my formerly printed work into apps and not have to dig too deep into the world of programming. App Studio accomplishes this perfectly for me.

There are several different routes to app development you can take in App Studio.

1. You can simply export an existing print layout as an app. I can’t see a case when I would want to do this because you will likely end up producing a half baked app that certainly does not take full advantage of the iPad. But the option is here for those who want it.

The App Studio new project window.

2. The real power of App Studio shows when you build a custom app within QuarkXpress. There is a new layout type in the “New Project” palette called “App Studio”. When you choose this new layout type you can also choose if you want it to be a Vertical and/or Horizontal layout. To maintain the full feel of the iPad I’d always use both layouts but you do have the choice if you want to lock your layout to one or the other orientation.

3. You can also build projects in EPUB format or in an ebook format for the Blio eReader. I have not tested either of these but it’s nice to know they are there incase I need them someday.

When you are building a full on custom app with App Studio you are presented with a new palette in Xpress that you use to add your interactive elements. You have a full range of options including Pictures, Slideshows, Movies, Audio, Buttons, Scrolling Boxes, Markers, and you can also display full html pages within the app.

The new App Studio window

For the test app I built for this first look I used the slideshow, movie, audio, button, and scroll box elements. The test app is based on a print magazine I work on every month. I’ll post a video of the app in action at the end of this first look as soon as it’s complete.

If you are familiar with QuarkXpress like I am (I’ve been using it since version 2.0!) you’ll feel right at home. You can build your pages with all of the familiar tools using all of the layout and design functions that Xpress offers. You have full control over the look and feel of your document for the iPad just like you do for print. This is what I have wanted while looking at the programing languages I mention above. I wanted a tool where I could concentrate on the design and functionality of the app without getting lost in programing languages, App Studio accomplishes that perfectly. I found when I built apps using a programming language most of my time and energy was spent programming (obviously I guess) and very little was spend on design, with App Studio that is not the case.

Horizontal and Verticle layouts in QuarkXpress

As you can see in the screen shot I have created both a vertical and horizontal version of a table of contents page for my magazine. These pages incorporate a lot of styling from font choices, colors, imported photos, outlined images, rules, color tints and so on. All of this renders out pretty much as you would expect on the iPad. In the screen shot the little clapboard icon represents where I have added interactive content. In this case they are touchable areas that link to additional magazine content. All of your links and elements are kept track of as part of the new App Studio window.

To add an interactive element you simply draw a picture box in your document and choose what type of element you want to add from the new window. For example in this screen shot below I have the box I’ve drawn around the article titled “Agriculture Air Quality: A USDA Perspective” highlighted and you can see in the App Studio window the action of that box is to go to page 5 when touched. Page 5 is of course the full article within the magazine. All other elements are added in this same way.

An interactive element place in App Studio

Once you have finished building your app you simply go to the export menu in Xpress and choose to export the “Layout as AVE”. This is just like exporting to PDF where you are presented with a couple screens to choose compression settings, file formats, etc and then just export the file. While developing you can, and should, often test your app either in the iPad emulator on your Macintosh or you can export it directly to your iPad if you have one. In both cases you need to install a free app from Quark called Quark App Studio Issue Previewer. This app allows you to view and test your app freely while in development. You can also provide this app to your customers so they can test the app as well.

To post any app to the App Store you’ll also need to purchase two license files from Quark, one for the main app that you generate (see below) and one for the data file that is generated. Quark refers to these as App Studio Factory License and App Studio License, respectively. These vary in cost from $149.00 to $1,499.00. That may sound like a lot at first but at the end of the day, the time you will save by using software you are already familiar with, the fact that you won’t need to hire a team of programmers, and that you won’t have to pay printing or shipping costs easily out weighs this expense.

Overall I’m very impressed with App Studio, which is essentially a 1.0 product at this point. I hope Quark continues to add capabilities to it and upgrade it, but for now the product they have shipped is very capable and very well put together. My 30 trial expired a couple days ago and I’ve since upgraded to 9.1. So that must say something.

You’re not going to use App Studio to program the next Angry Birds or program a Twitter client but if you have print content that you want to turn into a fully functional app this is the way to go for sure. I can see using this for magazines, catalogs, user manuals, and many other print style pieces.

There were a few weird things of course with App Studio as there is with most software. Oddly enough you must have the latest version of Flash installed to run it (not on the iPad, on your desktop machine). There is also a know bug in Flash if you are running OS X Lion, apparently when you enter text in a text box in the new App Studio window it gets entered twice so you have to delete one instance of it. I did not run into this because I am not running Lion. And for some reason my outlined photos have a halo effect around them when viewed in the app. I need to email Quark about this and post it as a bug I suppose.

It’s interesting to note that App Studio actually generates two apps when you are finished. Actually its one app and one set of data files. I have not finished and posted any apps to the app store yet but what happens is when you create an app in App Studio the main content (in my case the magazine) is really just a data file that is read by the other app you create during the final export and upload process. I won’t go into much detail about this yet since I haven’t done it but you can actually easily create your own iBooks app for example where the real app is the bookshelf/store and each issue of the magazine I created would be available to be purchased and read from the bookshelf just like iBooks.

It should also be noted that to post any app for sale on the Apple App Store you need to be a registered developer and go through all the necessary steps to get your app registered with and approved by Apple.

I had to break the video up into two parts to meet youtubes time limit.

As you’ll see the first 15 seconds of the first video and the first 12 seconds of the second video are grey, but you don’t miss any content. The source file is fine, this happens on upload to youtube. Does anyone have any idea why or how to fix this? It’s really annoying!

The ‘embers’ animation used on in the story about residential wood combustion was purchased from MOTIONREVOLVER. I have to recommend this site for inexpensive motion clips and great customer service. I had a problem processing the file for use with App Studio (it was my fault because I don’t use video often) and Tyson Frantz from MOTIONREVOLVER was on top of it for me and provided me with a clip that I could use easily in the demo. If you need motion graphics I’d check out the site.

Posted in App Studio, Development - Tagged app store, App Studio, Development, iOS, iPad, review, video tutorial

Quark Xpress 9.1 and App Studio App Development

Sep29
2011 1 Comment Written by Jamie Cross

I just downloaded the 30 day free trial of Quark Xpress 9.1 that includes App Studio and my first impression is that it’s really a viable option for creating information rich iPad Apps. For anyone like myself that is familiar with Quark Xpress and has been using it for years to design and produce print pieces, this is going to be a quick and relatively painless way to get into App publishing.

It seems like it will be useful for publishing magazines, books, flyers, and just about any kind of piece that might have been printed in the past. It doesn’t seem to allow for any custom coding but I guess that is the idea. To shelter the designer from the code aspect.

I’m going to see what I can do with the 30 day free trial and I’ll post here when I have anything more interesting to look at or talk about.

Posted in App Studio, Development - Tagged app store, App Studio, Development, iOS, iPad

Sencha Touch Tutorial – Correct Portrait and Landscape StartUp Screen Display. (Newsletter App Tutorial Part 6)

Sep06
2011 5 Comments Written by Jamie Cross

This is a small update to the sencha touch newsletter tutorial I have been writing. This update is just to show you how to get both a portrait and landscape splash screens to work on the iPad. Previously I had only been able to get a portrait screen to display. Recently there has been a post on the official sencha touch forms that outlined how to get both screens to display correctly so I’m going to show you how to add this to the newsletter I have been working on.

For this tutorial I’ll just be doing a slight update to the code from tutorial 5.

To see parts one, two, three, four and five of the tutorial use those links.

First you’ll need to build both of your splash screens. This has to be done in a very specific way.

For the portrait screen it needs to be exactly 768 x 1004 pixels. This is a vertical screen and should be pretty ‘normal’ in appearance for a portrait screen. See my example here:

For the landscape screen it needs to be exactly 748 x 1024 pixels. Now this will seem a bit strange because the screen will look like a portrait screen while you are working on it, but when it’s displayed on the iPad it will be rotated 90° so it becomes landscape. The right side of your screen will become the top of the landscape splash screen with the left side becoming the bottom of course. See my example here:

You’ll need to make a few changes to the code we’ve been using to get these screens to display correctly.

First you’ll need to edit the index.html file, it will now look like this:

 <!DOCTYPE html>
 <html>
 <head>
	<meta charset="utf-8">
	<title>Newsletter</title>

	<!-- Sencha Touch CSS -->
	<link rel="stylesheet" href="../sencha-touch/resources/css/sencha-touch.css" type="text/css">

	<!-- Custom CSS -->
	<link rel="stylesheet" href="newsletter.css" type="text/css">

	<!-- Sencha Touch JS -->
	<script type="text/javascript" src="../sencha-touch/sencha-touch-debug.js"></script>

	<!-- Establish links to the startup screens -->
	<link rel="apple-touch-startup-image" href="ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

	<link rel="apple-touch-startup-image" href="ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

	<!-- Application JS -->
	<script type="text/javascript" src="index-f.js"></script>

 </head>
 <body></body>
 </html>

For this to work correctly you’ll have to make sure you’re index.html file is set up to be the HTML 5 doctype, which ours already was in line 1 and 2.

Line 17 adds the code to display the landscape splash screen. The href can be any correctly formatted url.

Line 19 adds the code to display the portrait splash screen. The href can be any correctly formatted url.

The rest of our index.html file is unchanged from tutorial 5.

Since the index.html file is now handling the loading and display of the splash screen, there is also one minor change to your index-f.js file that needs to be made. The code in line 5 that previously displayed the startupscreen needs to be removed. Below is a snippet of the code from my index-f.js file to show you, I’ve commented it out here so you can see what it used to be.

Ext.setup({

// Basic application set-up: start ------

	//tabletStartupScreen: 'tablet_startup.png', ---- commented out because the splash screen is now being handled by the index.html file ----
	icon: 'icon.png',
	 glossOnIcon: true,

That’s it, now when you run the app from your ipad you should see both the portrait and landscape screens as needed.

The files for section six of this tutorial can be downloaded here.

If you’re interested in the full form thread on this subject at the sencha touch forms it can be read here.

Posted in Development, Sencha Touch, Tutorials - Tagged Development, iOS, iPad, javascript, sencha touch

Super Simple Chicken (or Turkey) Tortilla Soup

Aug27
2011 Leave a Comment Written by Jamie Cross

This is a great recipe to use up your left over chicken or turkey. Since this is such a different flavor profile I love to use any left over turkey after Thanksgiving dinner for this recipe. While this is a really quick and easy version of this soup, I’ve made a more time consuming version as well where I roast my own tomatoes, and substitute roasted fresh corn and peppers for the Mexicorn. But this version is a great quick weeknight meal.

Prep Time: 20 min.
Cook Time: 35 min.
Serves: 6

2 cups shredded checken or turkey (pre-cooked)
2 cups chicken broth
2 cups beef broth
1 medium onion chopped
1 medium carrot chopped
3 cloves garlic chopped
1 15.5 oz. can black beans (drained)
1 14.5 oz. can fire roasted tomatoes (not drained)
1 11 oz. can Mexicorn (not drained)
10 pickled jalapeno rings (from a jar) chopped
2 tbs. of liquid from the jalapeno pepper jar
3 tbs. chili powder
1/8 tsp. cayenne pepper
1 tbs. olive oil
1 tbs. butter
4 corn tortillas*

Saute the onion, carrot and garlic in a dutch oven with the butter and olive oil until they are soft and the onions are translucent.
Add all the remaining ingredients, except the corn tortillas, to the dutch oven and bring to a boil. Once it has reached boiling, turn down the heat and simmer covered for 30 minutes.
While the soup is simmering, cut the corn tortillas into 1/4 inch strips and coat lightly with olive oil and salt.
Heat the oven to 375° and arrange the tortilla strips in a single layer on a cookie sheet and bake for 15-20 minutes until they are golden brown.
Before serving the soup be sure to taste it and add salt and pepper as needed.
Top the bowls of soup with some of the tortilla strips and serve.

In addition to the tortilla strips, the soup can be garnished with fresh avocados, chopped onions, sour cream or cheese.

*To make this recipe even simpler use store bought tortilla chips and skip steps 3 and 4.

If you’re a BigOven user here is a direct link to this recipe:
Super Simple Chicken (or Turkey) Tortilla Soup recipe

Posted in Food, Recipes - Tagged food, mexican, recipe, south american

Gamesalad Video Tutorial: Stopping an Actor Completely

Aug15
2011 2 Comments Written by Jamie Cross

I recently completed my first video tutorial for Gamesalad. I was having an issue in the game I’m developing where once I push the box actor, it continued to jump and move around the play area even after I stopped pushing it. I saw on the Gamesalad form that other people had asked about this same issue so the video shows how I solved the issue. For some odd reason the first 17 seconds of the video are just grey, but you won’t miss any content, it’s just me talking and the audio is fine.

Posted in Development, Gamesalad, Tutorials - Tagged Development, gamesalad, video tutorial

BoxyBan Level 1 (Gamesalad game for iPad)

Jul31
2011 Leave a Comment Written by Jamie Cross

The working title of the game is going to be BoxyBan, I’m not sure I love it so it may change as things develop. Here is a mock-up of level 1 of the game. This was done in Photoshop of course but should look just like this in game. This is just a tutorial level, you’ll push the box onto the pressure plate and move on to level 2. There is no main character shown yet because I don’t know what I want the character to be! LOL. While I’m learning Gamesalad and testing I think I’m just going to use an Arrow.

Posted in Development, Gamesalad - Tagged Development, gamesalad, iOS, iPad

Sokoban Style Game

Jul29
2011 2 Comments Written by Jamie Cross

I’ve decided I’m going to make a Sokoban style game for my first ‘test’ game using Gamesalad. Here is the first piece of art I’ve created for the game. It’s the crate that will be pushed around, the shadow looks pretty giant here but it looks just right at the size I will be using the image in the game (64px x 64px). I’ll be developing this specifically for the iPad.

Posted in Development, Gamesalad - Tagged Development, gamesalad, iOS, iPad

Recent Posts

Tags