ART164_tut_flash

70

Technique

Flash CS4

Slide navigation

Want to bring iPhonestyle slide navigation into your own online portfolio?

Stewart HamiltonArrandale shows you how

Re-creating the beautifully simple drag-and-throw functionality of the iPhone to create a simple yet visually pleasing portfolio centrepiece for your web page is easy. What’s more, by controlling the content through an external XML file, you’ll be able to use this technique to add and edit your portfolio without the need of redesigning or recoding your site. The advantages of this approach are two-fold: you can concentrate on the visual casing of the design, while the content can be updated and edited independently.

In this tutorial, we’ll be looking at the interactive elements and the way your audience will interact with a drag-andthrow portfolio. We’ve based our design on the iPhone, but have set up the tutorial so you can mimic this action with any design you choose. We will be using ActionScript 3.0 and utilising external XML files for updatable content to help make this project flexible for all your future needs.

01

Copy the relevant files from this issue’s disc to your computer. Open the PSDs folder – the document is set up at the correct size for the content used in this tutorial. I’ve chosen to use an iPhone image, but you can choose any background image you like. Simply drop your image in place of the white Holder layer. This will be the canvas for our iPhone-style interface.

Stewart HamiltonArrandale The awardwinning freelance digital designer has produced Flash solutions for the likes of Crown Paints and Original Source, and delivered motion graphics pieces for Liverpool Capital of Culture ‘08. To find out more see www. creativewax.co.uk

On the disc The files needed to complete this tutorial, plus the full screen-grabs for each step of this tutorial, can be found in DiscContents\ Resources\Flash

Time needed 1 hour Skills ActionScript animation Basic ActionScript 3.0 understanding Simple image manipulation Simple Flash graphics Basic understanding of XML

02

All the content elements used in this tutorial are saved out as JPEGs and loaded individually into the Flash interface. This could be expanded easily in the future to accommodate loading SWFs or other file formats. All the content has already been saved out into the FINAL\imgs folder, ready to be used in the final interface.

Computer Arts August 2009

ART164.tut_flash 70

www.computerarts.co.uk

11/6/09 6:20:30 pm

71

04 03

Now open the DEV folder and take a look at FlashiPhone.fla. Looking at the AS layer, you’ll notice some simple code which is used for setting up the drag-andthrow technique, similar to that of the iPhone. Run the code and have a play with throwing it left to right.

Open the DragThrow.as file. We’ll run through how this works: if we start with lines 14-69, we have our basic variable declarations and then our two public methods – one for setting up the events for dragging and throwing, and then a reset method for when we need to remove this functionality and reset our current position back to its default position.

05

Lines 76-109 are the main methods for tracking the position and velocity of the dragging. Firstly, in trackContentDrag, we start to drag the content and set a loop for checking its position and release of the mouse. We then call trackContentThrow, which checks if the velocity was over the movement threshold or if the content itself was over half way across the screen. After this, we move the content with either the nextSection, prevSection or getSection methods.

07

Next, lines 158-209 cover the creation of the counters on screen and add mouse events for jumping directly to this content’s position. Every time we create a new set of counters, we remove the last set in case the amount has changed. This utilises the clean-up method on line 215 for looping through and removing movies from a display list.

www.computerarts.co.uk

ART164.tut_flash 71

06

Lines 115-152 are used for updating the position of the content. The nextSection method tries to move the content on, whereas the prevSection method tries to move back. Once the getSection method is called, this checks where the new position for the content is and moves to it. Once there, it resets the velocity for the next interaction and also updates the counters on screen to reflect the new position.

08

Open FlashiPhone.fla from the FINAL folder. You’ll notice in the Properties panel that we are using a document class to set up this file. If you click inside the iPhone holder movie on stage, you’ll see all the movies we are using already set up.

Run the code and play around with it. Open content.xml and play with putting new content in this and re-ordering it to show how this affects the interface.

Computer Arts August 2009

11/6/09 6:20:31 pm

72

Technique Slide navigation

09

Open the FlashiPhone.as and look at lines 13-68. First we declare our variables, then in our set-up method we create all the drag-and-throw functionality (as we did in the last file). We disable mouse events for any movies sitting above the Content pane. We then start to load the content for this interface and set up some listeners for resizing content, then call that as default for when the movie first launches. Once the XML has loaded, we call the xmlLoaded method, which sets a reference to the loaded XML.

10

Lines 73-123 cover creating the menu. Firstly keep a reference of the original position of the main menu, then set up a mouse event for the home button. Next, loop through the XML, and set up and load the images that will act as buttons in the menu. Once they have loaded, call the showImg method for animating them in.

12

11

Next look at lines 129-201. While this looks like a lot of code, it’s just doing a few basic animations and mouse-tracking techniques for when we roll over the menu.

This can easily be replaced with something much simpler or more complex later on.

Also, we have the checkMenu, showMenu and hideMenu methods, which control showing and hiding the main menu system.

Lines 207-231 in the getSection method cover getting a new set of content for a section we have clicked on.

Firstly, destroy all the old content on screen. Next, use the number reference stored in the menu item we clicked on to get an XMLList from the main XML content to loop through, load and create the new content items. Lastly, tell the drag-andthrow class how many pages of content there is going to be.

15

13

On lines 237-277 we load the images from the XML content we selected and position them based on their number reference. We then check to see when all of the images have been loaded to see when we should show them. Once they have all loaded, we hide the preloader and set up the drag-andthrow class. We also have our simple show-and-hide loader methods for showing the loader screen.

Computer Arts August 2009

ART164.tut_flash 72

14

On lines 283-336 are some utility methods for loading our XML files: loading external content; an error catching method; a resize method to update the content position when the screen size changes; and a destroyContent method for removing loaded content from screen/memory.

So, where could we take this in the future? The next step could be to have a multi-directional drag-andthrow system, or to implement real-time blurring when you throw the screen.

Have a play around and, hopefully, this will lead to some exciting times whilst building your portfolio site.

www.computerarts.co.uk

11/6/09 6:20:32 pm