Create a Flash page flip gallery in five minutes with Project ROME

Project ROME is an all-in-one content creation and publishing application that lets virtually anyone at work or home inject the power of graphics, photos, text, video, audio and animation into everyday projects. With ROME you can create everything from printed materials and presentations to digital documents and websites, with a simple and creative environment.

Initially intended to have an educational and a professional version, at the moment the project seems to be discontinued although you can still use the professional version for free. For more information and the latest details, check the official discussion.

Anyway, while the web application is still available, that’s what you can do once you point your browser to http://rome.adobe.com/APP/index.html.

We are going to create a Flash page flip gallery like this one:

Click on the arrow to turn pages.

Check this step by step tutorial:

From the main launch bar, select CREATE NEW, then Blank for Screen -> Average Screen and set document size to 640×480.

Once you are in front of your blank document, select Insert -> Media Objects -> Layer stack. A layer stack can contain any number of elements ordered in layers. This is where we will place the photos.

You layer stack will appear in the middle of the canvas. On the upper right corner you can spot a pencil icon.

Selecting the pencil icon you can open a menu. Select Size and define it as 600×400. Also move the registration point to the upper left corner.

Now drag the layer stack to 20,20.

Double click on the layer stack and you can directly edit it. Notice in the upper left part of the work area it says you are working on layers.

Select Insert -> File -> Local Files and the file dialog will appear. Select an image from your hard disk. Being a ROME gallery, I’ll use photos of Rome. I took them from Flickr, and I am sorry if I infringed some copyright. Oh well.

Move the registration point to upper left corner, then using the pencil icon select Transform and resize and position the image, if needed, to completely fill the layer stack.

Clicking the plus icon in the layers panel you can add as many layers as you want.

Once you added and adjusted all images, use the pencil icon (you will always use pencil icon to call contextual menus) to select Transition -> Effect -> Page Flip. Select the transition for each image, then click on the left arrow in the toolbar to return to main canvas.

Insert another layer stack.

Transform the layer stack to fit in the bottom right angle. This will be the button to make pages turn.

Double click on the layer, then select Insert -> Shapes -> Arrows -> Arrow.

Transform the arrow to completely fit into the layer stack.

Selecting Style you can define a fill color.

Here it is your arrow. Now we’ll create an hover effect. Select the arrow then Edit -> Copy.

Create another sublayer clicking the plus icon, then Select -> Paste.

Give the new arrow a different color to simulate the hover effect.

Now it’s time to bind some event with Advanced -> Event Settings -> Standard Events

Then you should follow the below picture to edit the Mouse Enter event and select the second arrow layer. The menu will self create from step to step, so it would be quite hard to describe it with words.

Do the same thing for the mouse exit event, selecting the first arrow layer.The hover effect is ready.

Also edit the click event to go to next layer in the photos layer. The gallery is ready.

Select Output -> File Export -> SWF

Finally give it a name and save it on your hard disk.

Congratulations! You made it. I hope Adobe will change its mind about ROME future.

If you have problems with the tutorial, download the source code and open it directly in ROME.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers