Feature preview: Flyer Viewer [Archive]

BadBoyBill

03-01-2009, 08:27 AM

This was kinda of a last minute addon for HP, but it was worth the addition.

brycej from the Future Pinball forums had a cool request which was to have a designated button as a flyer viewer. So I took this idea and developed a rotating flyer viewer.

You press the flyer button, which will enter the flyer viewer, you can then use the flipper buttons to flip the image and it has a nice rotating 3d effect.

http://www.hyperspin-themes.com/images/flyer/flyerexample1.jpg

http://www.hyperspin-themes.com/images/flyer/flyerexample2.jpg

http://www.hyperspin-themes.com/images/flyer/flyerexample3.jpg

brycej

03-01-2009, 08:37 AM

This looks really good!

cyberk30

03-01-2009, 09:18 AM

That looks pretty cool.

brycej

03-01-2009, 11:06 AM

How are the flyer files named?

table_name_front.jpg & table_name_back.jpg?

I would just like to get a head start on my flyer collection. :-)

Cheers.

BadBoyBill

03-01-2009, 11:29 AM

500 px width, height leave proportional, png files, 2 folders, /front and /back

BadBoyBill

03-01-2009, 09:11 PM

Oh and brycej its not table name for the name of the flyer, its gonna be our name i.e

Table Name ---------Our official artwork/video name

ROAD_GIRLS = Road Girls Revisted
3ANGELS = Three Angels
BigSpender20080404 = Big Spender Pinball
Harlem Globetrotters 1.1 = Harlem Globetrotters On Tour

Basically so that when you update your tables to newer versions you wont have to rename the wheel image, video and flyers. You'll just have to change the tablename in the xml.

brycej

03-01-2009, 09:21 PM

I figured that would be the case with the names. You had mentioned that earlier. I have resized all of the flyers that I have.

They can be easily renamed once I start using HyperPin.

brycej

03-01-2009, 10:00 PM

One more question. What is the best way to handle flyers that don't exist, or flyers that only have a front page? Does HyperPin handle that or do we just provide a stand-in image for those situations?

Cheers.

BadBoyBill

03-01-2009, 10:51 PM

Ok, sorry I had to make a change, I was making flyers myself, TAFA has them as jpg's so I just added jpg support for the flyers, png's wont work, so it was way quicker to do a quick resize that way.

For flyers that only have one, just put it into the /front folder. When you flip the image it just flips but you still see the front when it flips. Its not that bad.

Now I was thinking while Im at it, since the IPDB usually had pdf instruction cards that are real clean for most games that it would be nice to be able to read the rules real quick before you play the game. What do you guys think? No flipping action, just press a key to read a zoomed in view of the instruction card. I think it would be a nice option.

brycej

03-02-2009, 03:24 AM

I really like the idea of displaying the instruction cards. I had actually had started a small project to add that function to each table...but after doing a few I decided it was too much work.

IPDB uses cards from Inkocnitto's Pinball Score and Instruction Reproduction Cards (http://www.pinballrebel.com/pinball/cards/) and these cards are indeed very clean.

What file format were you going to use to display the instruction cards? A lot of the PDFs that I have looked at from IPDB contain both instruction cards and score cards as well as a bit of information on the fonts used so ideally these files would need to be edited to just show the instruction card. Easy to do in Photoshop or such. What were your thoughts?

Back to .jpgs for the flyers...good thing I kept my jpgs after batch converting them to .png. :-)

Thanks for handling the flyers with no back page. That just makes it even easier.

Cheers.

unclewilly

03-02-2009, 05:15 AM

Instruction cards is an awesome idea. It nice not to have to guess what rules are, or have to browse around to find them before you play. By the way, BBB, how is your cabinet build comming along? Haze you decided on 90 or 270 rotation?
-Scott

BadBoyBill

03-02-2009, 05:55 AM

270 rotation and I havent worked on the cabinet in a few days, Im waiting for a crap load of parts to come in so I can continue, and Ive been on a huge HP programming kick the last few days also, plus had to finish the help file to which took time.

unclewilly

03-02-2009, 10:03 AM

I'm going to 270 also. I'm stretching the tables this week. I'll hit you off when I'm done.

BadBoyBill

03-02-2009, 11:39 AM

brycej

03-02-2009, 12:38 PM

I will make the instruction card viewer today. I think we can go 500 px width on those as well.

That sounds good. I will check it out. I already know that there will be a number I will have to take from the tables themselves. As long as we go with a 500 px width I can start editing some today.

Cheers.

BadBoyBill

03-02-2009, 01:46 PM

Dont do nothing yet ,I found a better way.

This might sound a little ugly but it works really good.

1: Download the zip flyer for the instuction card.
2: Inside is a doc file.
3: Open with doc viewer, free download from MS site.
4: Highlight all the text on the card and past into wordpad.
5. Then highlight all the text in word pad and past into flash.
6. Size the stage in flash to 500 px x ~250 px. Ensure helvetica installed on system.
7. Press ctrl-alt-2, then ctrl-alt-5 to center the card on the stage.
8. Resize the object in flash to about 490 px.
9. Export swf file.
10. HP will import those swfs that maintain the font and vector data for a super crisp instuction card in HP.
When viewed as a jpg in HP is was very hard to read well and just didnt appear professional.

This is the route we need to go for sure, its so much nicer.

BadBoyBill

03-02-2009, 02:58 PM

Hey brycej , I found an even better way to do the cards, this results in a perfect card. Forget my last post. And this is way faster.

1. Open the pdf instruction in illustrator, if you dont have the fonts then open in adobe acrobat, export as eps, then open eps in illustrator
2. Once file is opened in illustrator, edit out secondary sheets like coin cards by highlighting and deleteing.
3. Export as swf file form illustrator.

This results in this perfect recreation that maintains everything from the original.
http://www.hyperspin-themes.com/images/hyperpin/Meteor.swf

This is can be imported into HyperPin no problem. So regardless of the resolution the user runs at they will have the crispist possible card.

Im off to convert the other cards that will be distributed with the basic install, should only take a few minutes.

BadBoyBill

03-02-2009, 03:33 PM

Ok, even yet a faster way, the last way didnt actually preserve the font like I though, it did indeed substitute the font.

Final way:
1. Open illustrator.
2. Instead of opening the pdf, goto file -> place -> then open the pdf from there.
3. From the upper meu choose Object -> flatten transparency
4. Once in, click the checkbox that says -> convert all text to outlines (you can guess what this does, it converts all font outlines to just regular lines so that were technically not including the fonts)
5. Once thats done you can now delete any other cards you dont want.
6. Export as swf.

Results:
Meteor (http://www.hyperspin-themes.com/images/hyperpin/Meteor.swf)
KISS (http://www.hyperspin-themes.com/images/hyperpin/KISS.swf)

These are flash files so you can right click and zoom without losing quality on the image.

Edit: Ok now I got to one of the cards that didnt have a pdf. I found an image of Target Alpha instruction card at IPDB, I took this image and blew it up to 3000 pixels. I then did adjustments ->selective color -> whites -> move the black slider all the way left. This got rid of fuzzies around the text. Then I opened in vector magic then exported the whole thing over to an eps file. Open that file in illustrator and export as swf.

brycej

03-02-2009, 05:10 PM

Those look very good.

I have made an inventory of the cards that are available for for the Recreated Tables. There are still a number of tables that we do not have cards for. What I was planning to do is to create cards for these missing tables. Basically just create a template for the different types of cards.

For example, if we are missing a 1965 Bally card, look at other 1965 Bally cards to determine the style and look at the table in Future Pinball to get the details the author used.

Some will be a challenge, for example Greywolf's cards change as you change options. The nice thing about his tables is that we can do a screen capture to grab the info if we want.

It would be much easier if I had a few more fonts. I don't have a good selection of condensed fonts so it makes it harder for me to create accurate recreations.

Some tables are amazing...Evel Knievel has 10 instruction different cards!

Anyway, I will continue with my inventory and see what needs to be created. I will see if I have the required software to try your latest method of card extraction.

Cheers.

BadBoyBill

03-02-2009, 05:21 PM

I notice that, there can be many instruction card revisions and depending on the options setup, an instruction card can be different just because they set a score different to get a free ball.
So far I've just been using the latest rev cards, but if users know theyre gonna use a certain tables options then they can follow the procedure or request a card for a specific version.

Edit: We need to get onboard with some of the FP orignal table creators to get high res cards. Like Dead Hunters has 2 cool looking cards but even a screenshot cant make a good looking card to show.

brycej

03-02-2009, 05:29 PM

Bill, I gave your method a try, but unfortunately it doesn't work for me. When I try to place the PDF it tells me that I don't have the correct fonts installed and it makes substitutions...The results are not good. So I guess I will have to leave that part of this conversion for someone else.

BadBoyBill

03-02-2009, 05:30 PM

File -> place not File -> import

BadBoyBill

03-02-2009, 05:49 PM

Sorry forgot to tell you , when you go to "place" click the little checkbox that says link in the open dialog.

brycej

03-02-2009, 06:21 PM

I should have been more adventuresome, that link checkbox makes all of the difference in the world. The results are amazing.

I will continue to work on creating some net new cards.

Cheers.

BadBoyBill

03-02-2009, 07:09 PM

Ah man, I got the instruction cars working but we have an issue. When saving from illustrator the swf file it makes is transparent, meaning the card part is gone, so what we need to do is before you export , draw a white or black square, depending on what the card needs. Draw the square with no stroke, just a fill.

There is no background on the cards, even if you look at all the layers, and its decieving because the illustrator canvas is the same color

Second issue theres a rogue layer making all the swfs come out funny sized, you can only tell when showing in the flash standalone player, look at the illustrator layers, its the bottommost layer. On the one I checked its called "clipping layer", just delete that layer.

And it looks like the second to the bottom layer is the cutout line, you need to delete that layer to, but before that is done, create a layer 2, move it below layer one and draw the new background there using that cutout line as your guide, then remove the cutout line layer. Thu cutout line shows up in HP ugly.

BadBoyBill

03-02-2009, 08:10 PM

Ok finally finished the instruction view page:

http://www.hyperspin-themes.com/images/hyperpin/instruction1.jpg

BadBoyBill

03-02-2009, 10:58 PM

When reading the rules its really nice to be able to see the table to see what the instruction card is referencing. The way the image in the last post shows the card covers up some of the table.

Press the instruction button once to show the instructions page.

Press and hold the instruction button again to hide the card.
Release the instruction button to show the card again.

So you can review the card , have your finger on the button and toggle it as necessary while you read the card to learn the game.

Press the exit key to leave the instruction screen.

svtboy

03-03-2009, 05:30 AM

Very cool, no more squinting to read the instruction cards in the game!

brycej

03-03-2009, 08:11 AM

That looks really good. I like it!

Dazz

03-03-2009, 08:57 AM

Bill... The card looks like it would be too far up on the table to be comfortably readable depending on screen size... I would suggest bringing it down quite a bit leaving the upper part of the table more visible. Not to mention the main part of the playfields is normally the upper part of the table anyway, and the current card position is covering most of the area that the card is usually talking about.

BadBoyBill

03-03-2009, 09:46 AM

They are completely adjustable, you can set the width, x and y coordinates of the cards.
But ya I thought the same thing last night and its actually bigger and closer to the bottom like this:

http://www.hyperspin-themes.com/images/hyperpin/instruction2.jpg

BadBoyBill

03-04-2009, 04:31 PM

@brycej

I noticed if you download flyers and resize them in photoshop no matter what resampling method the flyers appear just barely readable if not readable at all in HP.
So I went in and add to the flyer section to do the sizing for us to see if there were any better results to achieve better looking flyers and it worked. So just download the flyers and leave them their original size. HP will take care of the rest and theyre actually better quality especially at 1080p.

I applied this same method to the wheel images, I would vectorize from scratch my own wheel images the resized them in PS to around 575, and they were a little fuzzy in HP but not bad. Then I made 1200px width sources and imported them into HP and man they look super crisp and really nice.

So I think the standard will be, ~1000 px width flyers / ~1200 px width wheel images.
All other graphics in HP are vector, so the "How to Play" / "Flyer Bottom Graphic" / "Wheel Underlay Graphic" are all vectorized so no matter what resolution you run in they will always look super crisp, compared to if you use a png for the same size. My original graphics were png's and looked good, but as soon as I vectored them and it was a night and day difference.

brycej

03-04-2009, 07:48 PM

Ok BBB,

That sounds good.

The only editing I think I will do to the flyers then is to chop the left side off of some of the Bally back pages. They are the ones that are rotated 90 degrees. That means that more of the image we want to look at is available.

I like the idea of the larger images...better image quality.

So I just leave the flyers in the original .jpg format, correct?

Do you have a list of the "file names" that we will be using in the database? Or has that not been done yet?

By the way, I have created most of the missing instruction cards for FP. I think there are only 6 or 7 that I couldn't get the info for.

BadBoyBill

03-04-2009, 08:55 PM

Yes leave them as jpg, that will make everyones life easier.

I dont have a list of official file names, I try to go off the name on the TAFA of IPDB

For istance I named Fireball for the home version Fireball Home, FBH is the table, but neither site refers to it that way.

Big Spender is actually Big Spender Pinball, stuff like that.

No database yet, I wanna work on that next so Circo knows what to name his emumovies to.

Thanks for the instruction card stuff.

BadBoyBill

03-04-2009, 09:05 PM

Also sorry do to this to you but I added the feature to view up to 6 flyers.
Folders are like this:
/Front
/Back
/Inside1
/Inside2
/Inside3
/Inside4

Should I do 8? Whats the most flyers you've seen?

I removed the 3d flipping rotation, it was a little annoying, so I think im going to a simple quick fade in fade out or something like that. Will be clean.

brycej

03-04-2009, 10:14 PM

Also sorry do to this to you but I added the feature to view up to 6 flyers. ...I told you so... ;-)

A quick look through TAFA tells me that there are only 3 flyers that are 8 pages long and 1, Hyperball, that is 12 pages log. There are lots that are 4 and 6 pages long so I think you will be fine.

The clean fade in and out work for me.

I have also found a source for very, very clear flyers. The problem is that they are watermarked in a very poor way. It would be nice to use them with a nicer watermark.

As soon as you get the database finalized I will produce the instruction cards and rename my flyers.

Cheers.

BadBoyBill

03-04-2009, 10:27 PM

PM me a link so I can see.

brycej

03-04-2009, 10:34 PM

Emailed.

BadBoyBill

03-04-2009, 10:44 PM

Thanks, now I see what you mean, that sucks. But its ok, the TAFA ones are very readable.

BUZZ

03-07-2009, 03:17 PM

Hi Guys,
Looks a great feature being able to read the flyers and the idea for the instruction cards is awesome :congrats:
Can`t wait to see the results - your hard work is really appreciated here.
Cheers Buzz

BadBoyBill

03-07-2009, 03:28 PM

Thanks, what res do you run Buzz. This feature looks awesome at 1080p

BUZZ

03-07-2009, 03:33 PM

Hi Bill 1680 x 1050 for the main playfield.
Buzz

Inkochnito

04-16-2010, 01:56 PM

BadBoyBill

04-16-2010, 05:39 PM

Hi guys,

It would have been nice if you guys asked my permission to use the card files.
Oke, you can use them. ;)

Anything I can do to help?
Which cards are you still missing?
Which cards did you create in the process?
Anything I can use?

Peter
www.inkochnito.nl (http://www.inkochnito.nl)

Hey Peter, sorry about that, we purposefully didnt open up a download section to get big groups of files that you host. We just converted some text ones into a format pretty much useless to anyone one else on the web which shouldnt take anything away from anyone visiting your site to fulfill their instruction card needs. We tell people to visit your site also incase they do need anything. The cards here only work in HP and don't get used for anything else and to get one its pretty much part of a pack thats for a specific game, but thanks for being cool about it, we'll definitely hit you up if theres anything needed. We can post links to your site here also. Thanks for the nice resource and keep up the great work! If you want to take all of the ones we made and host them on your site as an alternative scaleable vector format then feel free to do so. We converted them to swf's so they can be viewed directly in the web browser so you can show off the cards so people dont have to download the zips first before getting them. Thanks!